/* ===== Theme: BengelBatz ===== */

/* Farb-Variablen */
:root{
  --bg: #0B1016;
  --surface: #142132;
  --surface-2: #1A283B;
  --border: #2B3A4F;

  --text: #DDE7F1;
  --text-dim: #AFC0D2;
  --link: #C6D8F2;
  --a1: #FFD166;
  --a2: #FF6B9A; /* wird für primary-Highlight verwendet */
  
  /* Breite der Header-Menü-Buttons am Desktop */
  --menu-tile-width: 140px;
}

/* Grundlayout */
html, body{
  background: var(--bg);
  color: var(--text);
}

/* Links – Standard */
a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Überschriften in Akzent */
h1, h2, h3, h4{
  color: var(--a1);
}

/* ===== Desktop-Menü: NEUES DESIGN ===== */
@media (min-width: 981px){
  header .menu a{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    /* Gleich breite, rechteckige Buttons mit abgerundeten Ecken */
    width: var(--menu-tile-width);
    min-height: 44px;
    padding: 8px 12px;
    
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    color: var(--link);
    
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
  }

  /* Hover-Effekt für alle Buttons */
  header .menu a:hover{
    background-color: var(--surface);
    color: var(--text);
    text-decoration: none;
  }

  /* Aktiver Menüpunkt (Highlight) */
  header .menu a.primary,
  header .menu a.primary:hover {
    background: linear-gradient(135deg, var(--a1), var(--a2));
    color: #0B1016;
    border-color: transparent;
  }
}

/* Mobiles Menü: Links behalten Akzentfarbe */
.mobile-nav a{
  color: var(--a1);
}
.mobile-nav a.primary {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: #0B1016;
  border-color: transparent;
}


/* Inhalte/Meta-Texte */
.small, .smallprint, .desc, .note, .sub{
  color: var(--text-dim);
}

/* Karten/Kacheln */
.tile, .menu-card, .highlight-card, .kachel{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
}

/* Tabs (Seiten-Kategorien) */
.tab-btn{
  color: var(--text);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #243248, #1b2738);
}
.tab-btn[aria-selected="true"]{
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color:#0B1016;
  border-color: transparent;
}

/* Footer-Links */
.footlink{ color: var(--link); }
.footlink:hover{ text-decoration: underline; }