:root {
  --icon-size: 28px;      /* Größe der Icons */
  --hover-text-color: #a71014;
  --hover-glow-size: 6px;
}


/* Klasse: .cd-link */
.cd-link {
  color: #ffffff;               /* weiß */
  text-decoration: none;        /* kein Unterstrich */
  cursor: pointer;
  transition: text-shadow 150ms ease, transform 150ms ease, opacity 150ms ease;
  outline: none;                /* visuell über :focus-visible behandeln, nicht komplett entfernen */
  -webkit-tap-highlight-color: transparent;
}

/* Hover: leichter Glow / Hebung */
.cd-link:hover,
.cd-link:active {
  text-shadow: 0 4px 18px rgba(255,255,255,0.12);
  transform: translateY(-1px);
  opacity: 0.98;
}

/* Zugänglicher Tastatur-Fokus (nur sichtbar, wenn per Tastatur fokusiert) */
.cd-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(230,0,92,0.18); /* sichtbarer Focus-Ring */
  border-radius: 4px;
}

/* Besucht / visited (optional, wenn du andere Farbe willst, hier bleibt es weiß) */
.cd-link:visited {
  color: #ffffff;
}

/* Falls du global alle Links anpassen willst (statt Klasse) */
/* a { color:#fff; text-decoration:none; } */

body {
margin: 0;
font-family: Arial, sans-serif;
background: #0d0d0d;
color: #fff;
}
header {
padding: 0px;
text-align: center;
background: #0d0d0d;
}

h1 {
margin: 0;
font-size: 2rem;
letter-spacing: 2px;
text-transform: uppercase;
}
.hero {
display: flex;
flex-direction: column;
justify-content: top;
align-items: center;
min-height: 90vh;
background: url('bg.jpg') center/cover no-repeat ;
position: relative;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.1);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 450;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.hero-content_datenschutz {
position: relative;
z-index: 2;
text-align: left;
max-width: 800px;
}
.hero-content h2 {
font-size: 2.2rem;
margin-bottom: 10px;
}
.hero-content p {
font-size: 1.1rem;
margin-bottom: 10px;
}
.signup-box {
background: rgba(0,0,0,0.7);
padding: 20px;
border-radius: 16px;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
margin-bottom: 10px;
margin-left: 10px auto;
margin-right: 10px auto;
}
.signup-box input {
width: 90%;
padding: 12px;
margin: 8px 0;
border: none;
border-radius: 6px;
font-size: 1rem;
}
.signup-box button {
width: 90%;
padding: 12px;
margin-top: 8px;
background: #a71014;
color: #fff;
border: none;
border-radius: 10px;
font-size: 1.1rem;
cursor: pointer;
}
.signup-box button:hover {
background: #791014;
}

#regSubmit:disabled {
    background-color: #b3b3b3 !important; 
    cursor: not-allowed;
    opacity: 0.7;
}

#weiterleitung:disabled {
    background-color: #b3b3b3 !important; 
    cursor: not-allowed;
    opacity: 0.7;
}

#pwreset:disabled {
    background-color: #000000 !important; 
    cursor: not-allowed;
    opacity: 0.7;
}


footer {
text-align: center;
padding: 20px;
margin-top: 20px;
font-size: 0.9rem;
}

.pwreset {
  width: 90%;
  margin: 10px auto;
}





/* Passwort-Stärke Bereich */
.pw-wrapper {
  width: 90%;             /* exakt wie andere Input-Felder */
  margin: 0px auto;        /* zentriert */
  display: flex;
  align-items: center;
  gap: 8px;                /* Abstand zwischen Feld und Auge */
}

/* Passwortfeld links */
.pw-wrapper input {
  flex: 1;                 /* nimmt ganzen verfügbaren Platz */
  min-width: 70%;            /* verhindert Überlauf */
}

/* Auge rechts */
.pw-wrapper .toggle {
  flex: 0 0 auto;          /* nimmt nur so viel Platz wie nötig */
  padding: 10px 12px;
  font-size: 20px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  color: #bbb;
  height: 44px;            /* exakt Höhe wie Input */
  display: flex;
max-width: 10%; 
  justify-content: center;
  align-items: center;
margin-bottom: 6px;
}

.pw-wrapper .toggle:hover {
  color: #fff;
  border-color: #555;
}

/* Meter ebenfalls exakt gleiche Breite */
.meter {
  width: 90%;
  margin: 10px auto;
}
.meter-track {
  height: 10px;
  background: #2e2e2e;
  border-radius: 5px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  width: 0%;
  transition: width 200ms ease, background 200ms ease;
}

.meter-label {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 13px;
  color: #bbbbbb;
}

/* 2-Spalten-Gitterlayout für Passwortkriterien */
.criteria {
  margin-top: 14px;
  font-size: 14px;
  color: #dddddd;
  max-width: 450px;   /* z. B. */
margin-left: 28px;
margin-right: 28px;

  display: grid;
  grid-template-columns: 1fr 1fr;  /* zwei gleich breite Spalten */
  gap: 10px 20px;                  /* vertikal | horizontal */
  align-items: center;
}

.criteria .crit {
  display: flex;
  align-items: center;
  white-space: nowrap;    /* verhindert Textumbruch der Texte */
}

.criteria .tick {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  border-radius: 4px;
  border: 1px solid #444444;
  margin-right: 6px;
  color: #444444;
}

.tick.ok {
  background: #42b983;
  border-color: transparent;
  color: #0d0d0d;
}

.tick.bad {
  opacity: 0.35;
}








.container_header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

text-align: center;
}

.column {
    background: #0d0d0d;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertikal */
    text-align: center;
}


.signon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;            /* fixiert */
    overflow: hidden;        /* unnötiges Wachstum blockiert */
}


.signon button {
    margin-top: 20px;
    margin-right: 4px;
    font-size: 0.8rem;

    padding: 4px 10px;         /* kleiner */
    background: #a71014;
    color: #fff;

    border-radius: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;

    max-height: 28px;          /* Höhe fixieren */
    line-height: 20px;         /* Text passend skalieren */
    display: inline-flex;      /* verhindert Div-Streckung */
    align-items: center;
}

.signon button:hover {
background: #791014;
}


.column_wrapper {
    display: flex;
    justify-content: flex-end; /* Button nach rechts */
}





.linie {
padding: 1px;
text-align: center;
background: #000000;
}

.dashboard-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* oben */
    align-items: center;           /* horizontal zentriert */
    min-height: 90vh;
    background: url('bg.jpg') center/cover no-repeat;
    position: relative;
   
}

.dashboard-content {
    text-align: center;
      width: 100%;           /* wichtig – kein limit, damit Pinnwand mittig bleibt */
    padding: 10px;
    position: relative;            /* KEIN absolute mehr */


}


.dashboard-content h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

/* ===== MENÜ ===== */

.dashboard-menu {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    padding: 15px 0;
    margin-top: 0;

    display: flex;               /* nebeneinander */
    justify-content: center;     /* horizontal zentrieren */
    align-items: center;         /* vertikal ausrichten */
    gap: 30px;                   /* Abstand zwischen den Icons */
}

/* UL komplett neutralisieren (KEINE LISTENPUNKTE) */
.menu-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;      /* ➜ Icons NEBENEINANDER */
    gap: 25px !important;          /* Abstand zwischen den Icons */
    align-items: center !important;
}

/* LI neutralisieren, keine Abstände */
.menu-nav ul li {
    margin: 0 !important;
    padding: 0 !important;
}

/* GRUNDSTRUKTUR FÜR ICON + TEXT */
.icon-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    color: #fff !important;
}

/* ICONS WEISS + ANPASSBAR */
.icon-link svg {
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    fill: #ffffff !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* TEXT NEBEN ICON */
.menu-text {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: var(--text-size) !important;
    color: #ffffff !important;
    transition: color 0.2s ease;
}

/* HOVER: ICON + TEXT */
.icon-link:hover svg {
    filter: drop-shadow(0 0 var(--hover-glow-size) rgba(255,255,255,0.6));
    transform: scale(1.1);
}

.icon-link:hover .menu-text {
    color: var(--hover-text-color) !important;  /* Rot */
}


/* ============================================
   AKTIVES ICON (NUR AUF DASHBOARD)
   ============================================ */
.icon-active {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
}

/* ICON aktiv (Dashboard) */
.icon-active svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: #FFFFFF !important;       
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
    transform: scale(1.12);
}

/* TEXT aktiv (Dashboard) */
.icon-active .menu-text {
    color: #AA0000 !important;
}




.msgnachrichten-item {
  position: relative;
}

.msgnachrichten-item .icon-link {
  position: relative;
  display: flex;
  align-items: center;
}

.msgnachrichten-item .badge {
  position: absolute;

  /* Position: unten links */
  bottom: -2px;
  left: 2px;

  /* Rund */
  background: #a71014;
  color: white;
  font-size: 16px;
  font-weight: bold;

  min-width: 26px;
  height: 26px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  padding: 0 6px;           /* flexible Breite */
  box-sizing: border-box;

  /* 🔥 Text leicht nach links verschieben */
  transform: translateX(-4px);

  pointer-events: none;
}


.msgnachrichten-item-active {
  desplay: none;
}





@media (max-width: 768px) {


    /* 1️⃣ Text neben Icons ausblenden */
    .menu-text {
        display: none !important;
    }

    /* 2️⃣ Icons horizontal anordnen */
    .menu-nav ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 25px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Entfernt mögliche List-Margins */
    .menu-nav ul li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    /* 3️⃣ Icons selbst — NICHT verändern, nur korrekt zentrieren */
    .icon-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }


  /* HERO */
    .dashboard-hero {
        min-height: auto;
        padding-top: 0px;
        padding-bottom: 0px;

    }

    /* CONTENT */
    .dashboard-content {
        padding: 0px;
        text-align: center;

    }

    /* PROFIL-KACHEL */
    .kachel-profil {
        width: calc(90% - 20px);   /* 10px links/rechts */
        max-width: 90%;            /* keine künstliche Begrenzung */
        height: auto;               /* automatische Höhe */
        padding: 10px;
        font-size: 1rem;
        margin: 0 auto 20px auto;
margin-top: 10px;
    background: #262626;
    color: #fff;
    border-radius: 12px;
   border: 1px solid #000000;
    box-shadow:
        0 0 8px rgba(0,0,0,0.5),
        0 0 16px rgba(0,0,0,0.4);
    }

    /* PINNWAND → 2 SPALTEN IN MOBILE */
    .pinnwand {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 12px;
        padding: 0 10px;
        margin-top: 5px;
    }

    /* EINZELNE KACHELN */
    .kachel {
        width: 100%;       /* volle Spaltenbreite */
        height: 70px;      /* mobile etwas höher */
        font-size: 1rem;
        padding: 15px;
        line-height: 1.3;
    }
}



}