/* Inter, lokal ausgeliefert – kein Google-Server, damit datenschutzfreundlich.
   Eine Datei für alle Schriftstärken (variable Schrift, Latin-Zeichensatz).
   Lizenz: SIL Open Font License 1.1, Text liegt in assets/fonts/OFL.txt. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

:root{
  --bg:#1a1a1a;
  --orange:#FFAE33;
  --blau:#67AAF9;
  --weiss:#ffffff;
  --grau:rgba(255,255,255,.62);
  /* Grautöne der beiden Hintergrundformen – dezent halten */
  --form-dunkel:#151515;
  --form-hell:#242424;
  --rand:clamp(1.25rem, 4vw, 3.5rem);
}

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

html{-webkit-text-size-adjust:100%}

body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--weiss);
  font-family:'Inter',"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Zwei weiche Formen als Hintergrund – bewusst nur oben links und unten
   rechts. Jede klebt in ihrer Ecke und wächst mit dem Fenster mit, dadurch
   funktioniert es in jedem Seitenverhältnis ohne eigene Handy-Version. */
.hintergrund{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.ecke{position:absolute;display:block;height:auto}
.ecke-ol{top:0;left:0;width:min(52vw,64vh)}
.ecke-ur{bottom:0;right:0;width:min(66vw,78vh)}
.ecke-ol path{fill:var(--form-dunkel)}
.ecke-ur path{fill:var(--form-hell)}

.seite{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
  /* unten kein Rand – der Abstand kommt aus der Fußzeile, damit der
     Copyright-Text mittig unter dem Inhalt sitzt */
  padding:var(--rand) var(--rand) 0;
  gap:2rem;
}

.kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  flex-wrap:wrap;
  min-width:0;
}

.logo{display:flex;align-items:center;line-height:0;min-width:0;max-width:100%}
/* Das Logo ist ein sehr breiter Schriftzug (Verhältnis rund 13:1) – deshalb
   über die Höhe steuern. Normal 2rem hoch; wird der Platz neben dem
   Login-Button knapp, rechnet die zweite Hälfte die Höhe aus der noch
   verfügbaren Fensterbreite aus, damit die Kopfzeile nie umbricht.
   Stellschraube für die Logogröße ist der Wert 2rem: */
.logo svg{
  height:min(2rem, calc((100vw - 8rem) / 13));
  width:auto;max-width:100%;display:block;
}
.logo-platzhalter{
  display:inline-flex;align-items:center;
  padding:.6rem 1rem;
  border:1px dashed var(--orange);
  border-radius:.6rem;
  font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);line-height:1.2;
}

.login{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-width:11.5rem;height:3rem;
  padding:0 2rem;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:var(--weiss);
  font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.login svg{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.login:hover,.login:focus-visible{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--bg);
  outline-color:var(--weiss);
}
.login:hover svg,.login:focus-visible svg{transform:translateX(.2rem)}
.login:active{background:#f0a12c;border-color:#f0a12c}

:where(a,button):focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.mitte{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1.25rem;
  padding:3rem 0;
}

h1{
  font-size:clamp(2.5rem,8vw,5.5rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--weiss);
}

.text{
  max-width:36rem;
  font-size:clamp(1rem,2.2vw,1.15rem);
  color:var(--grau);
  text-wrap:pretty;
}

.fuss{
  width:100%;
  flex:0 0 auto;
  margin-top:auto;
  /* oben wie unten gleich viel Luft = optisch mittig */
  padding:1.5rem 0;
  font-size:.85rem;
  color:rgba(255,255,255,.55);
  text-align:center;
}

/* Kleine Bildschirme: Logo bleibt links, der Login-Button zeigt nur
   noch das Symbol. Die Beschriftung bleibt für Screenreader erhalten. */
@media (max-width:48rem){
  .kopf{flex-wrap:nowrap}

  .login{
    min-width:0;
    width:2.9rem;height:2.9rem;
    padding:0;gap:0;
  }
  .login svg{width:1.25rem;height:1.25rem}
  .login:hover svg,.login:focus-visible svg{transform:none}

  /* umgebrochene Fußzeile: der Trennpunkt stünde sonst allein in einer Zeile */
  .trenner{display:none}

  .login-text{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}

/* ---------- Fußzeile mit Impressumslink ---------- */
.fuss{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.25rem .75rem;
}
.fuss a{
  color:inherit;
  text-decoration:none;
  transition:color .25s ease;
}
.fuss a:hover,.fuss a:focus-visible{color:var(--orange)}
.trenner{opacity:.45}

/* ---------- Textseiten (Impressum, später Datenschutz) ---------- */
.rechtstext{
  /* wächst mit und drückt die Fußzeile nach unten; bei viel Text
     schrumpft der Block nicht, sondern die Seite wird länger */
  flex:1 0 auto;
  width:100%;
  max-width:44rem;
  margin-inline:auto;
  padding:clamp(2rem,6vw,4rem) 0 3rem;
  display:flex;
  flex-direction:column;
  gap:2.25rem;
}
.rechtstext h1{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:.5rem;
}
.rechtstext h2{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.6rem;
}
.rechtstext p{color:var(--grau)}
.rechtstext a{
  color:var(--blau);
  text-decoration:none;
  border-bottom:1px solid rgba(103,170,249,.35);
  transition:border-color .25s ease;
}
.rechtstext a:hover,.rechtstext a:focus-visible{border-bottom-color:var(--blau)}
.zurueck{margin-top:.75rem;font-size:.9rem}