body {
  font-family: sans-serif;
}

:root {
    --primary-color: #3b82f6;
    --secondary-color: #2563eb;
    --accent-color: #60a5fa;
    --text-dark: #ffffff;
    --text-light: #ffffff;
    --text-muted: #94a3b8;
    --bg-light: #0f172a;
    --bg-white: #1e293b;
    --bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    --bg-gradient-elegant: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*/
/* Make content area fill the entire browser window */
/*html,
.fullscreen {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #999;
}

/* Center the content in the browser window */
.container {
  margin: auto;
  text-align: center;
}

.title {
  font-size: 3rem;
}


html, body {
  height: 100%;
  margin: 0;
}

.fullscreen {
  display: flex;
  flex-direction: column; /* wichtig */
  height: 100%;
  width: 100%;
  
}

/* Header */
header {
  
  color: white;
  padding: 20px;
  padding-top: -20%;
}

/* Hauptinhalt */
main {
  flex: 1; /* nimmt den restlichen Platz ein */
 
 
}

/* Footer */
footer {


  padding: 15px;
  text-align: center;
}