/* Basis */
:root {
    --panel: rgba(33, 40, 59, 1);
    --panel-2: rgba(28, 35, 54, 1);
    --text: #ffffff;
    --bg: #000; /* Fallback */
  }
  
  * { box-sizing: border-box; }
  
  html, body {
    height: 100%;
    margin: 0;
  }
  
  body {
    /*font-family: 'Press Start 2P', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;*/
    color: var(--text);
    background: center / cover no-repeat fixed url(/Images/background.jpg), var(--bg);
  }
  
  /* Zentrier-Wrapper: füllt den Viewport und zentriert #card */
  .center-wrap {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px;
    padding-bottom: 80px; /* Platz über der fixen Fußzeile */
  }
  
  /* Login-Icon oben rechts */
  #loginicon {
    position: fixed;
    top: 12px;
    right: 12px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-decoration: none;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(6px);
  }
  #loginicon:hover { cursor: pointer; opacity: .9; }
  
  /* Karte */
  #card {
    width: min(920px, 92vw);
    background-color: var(--panel);
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  #header {
    background: center / cover no-repeat url("/Images/header.jpg");
    height: 160px; /* Höhe des Headerbereichs festlegen */
    position: relative; /* damit #profilepic absolut darin positioniert werden kann */
  }
  
  #profilepic {
    position: absolute;
    bottom: -80px;             /* Hälfte des Bildes ragt raus */
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 8px solid rgba(33, 40, 59, 1); /* wie vorher */
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    background: #222;
  }
  
  #name {
    margin-top: 100px;
    margin-bottom: 6px;
    font-size: clamp(26px, 5vw, 40px); /* vorher war kleiner */
  }
  
  #description {
    margin: 0 16px 24px;
    font-size: clamp(16px, 3vw, 22px); /* ebenfalls größer */
    opacity: .85;
  }
  
  /* Fenster / Konsole */
  #window {
    margin: 0 16px 16px;
    background-color: #0c0c0d;
    color: #a1a3a6;
    border-radius: 12px;
    overflow: hidden;
  }
  
  #title-bar {
    background-color: #2a2b2b;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 8px;
  }
  
  #close-button, #minimize-button, #maximize-button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    cursor: pointer;
  }
  #close-button    { background-color: #FF5F56; } /* Rot */
  #minimize-button { background-color: #FFBD2E; } /* Gelb */
  #maximize-button { background-color: #27C93F; } /* Grün */
  
  #content {
    height: 200px; 
    padding: 12px;
    overflow: auto;
  }
  
  #console {
    background-color: #0c0c0d;
  }
  
  #console-output {
    margin: 0;
    white-space: pre-wrap;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  }
  .green-text { color: #27C93F; }
  
  /* Linkleiste */
  #links {
    background-color: var(--panel-2);
    padding: 14px 12px 16px;
  }
  
  #container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: center;
    justify-items: center;
    width: min(720px, 92%);
    margin: 0 auto;
  }
  
  .icon {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
    transform: rotate(-90deg); 
    transition: transform .12s ease;
  }
  .icon:hover { transform: translateY(-2px) scale(1.04); }
  
  /* Fußzeile (zentriert, fix) */
  #bottom {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 12px;
    font-size: 12px;
    background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  }
  .links { color: var(--text); }
  
  /* kleine Bildschirme */
  @media (max-width: 520px) {
    #profilepic { width: 128px; height: 128px; }
    #container { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  }