/* ===== Theme: MarLou (Terra Calda) ===== */

/* Farb-Variablen */
:root{
  --bg: #382d27; /* Dunkles Erd-Braun */
  --surface: #4e3f37; /* Warmes Terrakotta-Braun */
  --surface-2: #5a4a42; /* Helleres Terrakotta-Braun */
  --border: #6d5d54; /* Weiche, erdige Kontur */

  --text: #FBF5EF; /* Warmes Sandstein-Beige */
  --text-dim: #D7CCC8; /* Helles, warmes Grau */
  --link: #F5EAE0; /* Heller Link-Farbton */
  --a1: #E4C59E; /* Leuchtendes Gold */
  --a2: #D95D39; /* Kaminfeuer-Orange */
  
  /* Typografie */
  --font-base: 'Lato', sans-serif;
  --font-display: 'Playfair Display', serif;

  /* 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 Akzentfarbe & Display-Schrift */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--a1);
  font-weight: 700;
}

/* ===== 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;

    width: var(--menu-tile-width);
    min-height: 44px;
    padding: 8px 12px;
    
    font-weight: 700;
    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;
  }

  header .menu a:hover{
    background-color: var(--surface);
    color: var(--text);
    text-decoration: none;
  }

  header .menu a.primary,
  header .menu a.primary:hover {
    background: var(--a2); /* Kaminfeuer */
    color: #FFFFFF;
    border-color: transparent;
  }
}

/* Mobiles Menü: Links behalten Akzentfarbe */
.mobile-nav a{
  color: var(--a1);
}
.mobile-nav a.primary {
  background: var(--a2); /* Kaminfeuer */
  color: #FFFFFF;
  border-color: transparent;
}

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

/* Karten/Kacheln */
.tile, .menu-card, .highlight-card, .kachel, .bb-card {
  background-color: var(--surface); /* NEU: Einfarbig statt Verlauf */
  border: 1px solid var(--border);
}

/* Tabs (Seiten-Kategorien) */
.tab-btn{
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--surface);
}
.tab-btn[aria-selected="true"]{
  background: var(--a2); /* Kaminfeuer */
  color: #FFFFFF;
  border-color: transparent;
}

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