/* ============================================================
   meinprozentrechner.de — Navigation und Fusszeile
   Wird auf JEDER Seite geladen, nicht nur auf Rechnerseiten.
   app.css hängt am Shortcode; Kopf und Fuss brauchen aber überall
   dasselbe Aussehen. Deshalb eine eigene, eigenständige Datei:
   sie definiert ihre Farben selbst und setzt nichts aus app.css voraus.

   Kadence druckt seinen Inline-Block NACH den Plugin-Stylesheets.
   Alles, was gegen eine Kadence-Vorgabe steht, braucht !important —
   ohne das passiert sichtbar nichts.
   ============================================================ */

:root {
  --mpr-flaeche:    #FFFFFF;
  --mpr-flaeche-2:  #F2F6F3;
  --mpr-tint:       #E7EFEA;
  --mpr-linie:      #DCE4DF;
  --mpr-text:       #2E3532;
  --mpr-text-leise: #5B6663;
  --mpr-gruen:      #2C6248;   /* 7,19:1 auf Weiss */
  --mpr-gruen-tief: #204736;   /* Grund für weisse Schrift */
  --mpr-auf-gruen:  #FFFFFF;
  --mpr-radius:     10px;
  --mpr-radius-s:   7px;
  --mpr-schatten:   0 26px 50px -26px rgba(11, 40, 30, .40), 0 2px 6px rgba(11, 40, 30, .07);
  --mpr-cond:       'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --mpr-sans:       'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme='dunkel'] {
  --mpr-flaeche:    #16201C;
  --mpr-flaeche-2:  #111A16;
  --mpr-tint:       #17332A;
  --mpr-linie:      #2A3631;
  --mpr-text:       #E6ECE8;
  --mpr-text-leise: #AFBCB6;
  --mpr-gruen:      #5FC79B;
  --mpr-gruen-tief: #0F2A20;
  --mpr-auf-gruen:  #EAF4EF;
}

/* ============================================================
   1. Kopfzeile und Klappmenues
   Ein Farbsatz fuer Kopfzeile, Panel und Schubfach: derselbe dunkle
   Markengruen-Ton, mintgruene Akzente, gedaempfte Gruppenzeilen.
   ============================================================ */

:root {
  --mpr-kopf:        #0E3A2B;   /* Kopfzeile, Panel, Schubfach */
  --mpr-kopf-linie:  rgba(255, 255, 255, .13);
  --mpr-kopf-text:   #EAF4EF;
  --mpr-kopf-leise:  #8FA69C;   /* Gruppenzeilen, 5,3:1 auf --mpr-kopf */
  --mpr-mint:        #4FC79B;   /* Akzent: Hub-Links und Hover */
  --mpr-kopf-hover:  rgba(255, 255, 255, .08);
}

/* Das gruene Band lief nur ueber die Inhaltsbreite: Kadence setzt
   max-width:1290px direkt auf .site-main-header-wrap, also auf das Element,
   das den Grund traegt. Der Grund gehoert an den Fensterrand, der Inhalt in
   den Container — deshalb wandert die Begrenzung eine Ebene nach innen. */
#main-header .site-header-row-container,
#main-header .site-main-header-wrap {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#main-header .site-header-row-container-inner > .site-container {
  max-width: var(--global-content-width, 1290px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 767px) {
  #main-header .site-header-row-container-inner > .site-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Bildmarke: weisses Badge, das Prozentzeichen ist ausgespart und laesst den
   gruenen Grund durch. Liegt als Medien-Datei vor und wird von WordPress als
   custom_logo ausgeliefert — hier nur Groesse und Ausrichtung. */
.site-branding a.brand { display: inline-flex !important; align-items: center; gap: 11px; }
.site-branding a.brand img.custom-logo {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  object-fit: contain;
  display: block !important;
}

/* Kopfzeile durchgehend im Markengruen — auch angeheftet. Kadence faerbte
   den angehefteten Zustand weiss, waehrend die Menueschrift weiss blieb:
   gemessene 1:1, das Menue verschwand beim Scrollen. */
.site-main-header-wrap .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) > .site-header-row-container-inner {
  background-color: var(--mpr-kopf) !important;
}

/* Oberste Ebene */
.main-navigation.header-navigation .primary-menu-container > ul > li > a,
.main-navigation.header-navigation .header-menu-container > ul > li > a {
  font-family: var(--mpr-cond) !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  color: var(--mpr-kopf-text) !important;
  background: none !important;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
}
.main-navigation.header-navigation > div > ul > li:hover > a,
.main-navigation.header-navigation > div > ul > li:focus-within > a,
.main-navigation.header-navigation > div > ul > li.current-menu-item > a,
.main-navigation.header-navigation > div > ul > li.current_page_item > a,
.main-navigation.header-navigation > div > ul > li.current-menu-ancestor > a {
  color: #FFFFFF !important;
  background: none !important;
  border-bottom-color: var(--mpr-mint);
}
.main-navigation.header-navigation .current-menu-item > a *,
.main-navigation.header-navigation .current_page_item > a *,
.main-navigation.header-navigation li.current-menu-ancestor > a * { color: inherit !important; }

@media (min-width: 1025px) {

  /* ---- Das Panel: eines je Menuepunkt, direkt darunter ---- */
  .main-navigation.header-navigation ul ul.sub-menu {
    background-color: var(--mpr-kopf) !important;
    border-top: 1px solid var(--mpr-kopf-linie) !important;
    border-radius: 0 0 var(--mpr-radius) var(--mpr-radius) !important;
    box-shadow: 0 26px 50px -22px rgba(4, 20, 14, .55) !important;
    padding: 16px 14px 18px !important;
    min-width: 318px !important;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .main-navigation.header-navigation ul ul li.menu-item { border: 0 !important; }

  /* Eintraege */
  .main-navigation.header-navigation ul ul li.menu-item > a {
    width: auto !important;
    min-width: 290px;
    font-family: var(--mpr-sans) !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--mpr-kopf-text) !important;
    background: none !important;
    padding: 8px 12px !important;
    border-radius: var(--mpr-radius-s) !important;
  }
  .main-navigation.header-navigation ul ul li.menu-item > a:hover,
  .main-navigation.header-navigation ul ul li.menu-item > a:focus {
    background-color: var(--mpr-kopf-hover) !important;
    color: var(--mpr-mint) !important;
  }
  /* Gruppenzeilen und der Abschlussverweis zeigen auf die Hub-Seite bzw. deren
     Anker. Steht man auf genau dieser Seite, markiert WordPress sie als
     current — die Hervorhebung gehoert aber dem echten Menuepunkt. */
  .main-navigation.header-navigation ul ul li.menu-item.current-menu-item:not(.mpr-gruppe):not(.mpr-alle) > a {
    color: var(--mpr-mint) !important;
    background-color: var(--mpr-kopf-hover) !important;
  }
  .main-navigation.header-navigation ul ul li.mpr-gruppe.current-menu-item > a,
  .main-navigation.header-navigation ul ul li.mpr-alle.current-menu-item > a {
    background-color: transparent !important;
  }

  /* Gruppenzeile — serverseitig ein <span>, kein Link. Sie zeigte auf einen
     Anker der Hub-Seite und war damit anklickbar, ohne irgendwohin zu fuehren. */
  .main-navigation.header-navigation ul ul li.mpr-gruppe > .mpr-gruppe-text,
  .main-navigation.header-navigation ul ul li.mpr-gruppe > a {
    display: block;
    cursor: default;
    font-family: var(--mpr-cond) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    color: var(--mpr-kopf-leise) !important;
    background: none !important;
    padding: 16px 12px 5px !important;
    cursor: default;
  }
  .main-navigation.header-navigation ul ul li.mpr-gruppe:first-child > .mpr-gruppe-text,
  .main-navigation.header-navigation ul ul li.mpr-gruppe:first-child > a { padding-top: 4px !important; }

  /* Abschlusszeile: Verweis auf die Uebersichtsseite */
  .main-navigation.header-navigation ul ul li.mpr-alle > a {
    color: var(--mpr-mint) !important;
    font-family: var(--mpr-cond) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    margin-top: 12px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--mpr-kopf-linie) !important;
    border-radius: 0 !important;
  }
  .main-navigation.header-navigation ul ul li.mpr-alle > a::after { content: ' \2192'; }
  .main-navigation.header-navigation ul ul li.mpr-alle > a:hover {
    background: none !important;
    color: #FFFFFF !important;
  }

  /* Dritte Ebene steht im Panel, statt seitlich aufzuklappen */
  .main-navigation.header-navigation li.mpr-panel > ul.sub-menu > li > ul.sub-menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: none;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .main-navigation.header-navigation li.mpr-panel ul.sub-menu ul.sub-menu > li.menu-item > a { min-width: 0 !important; }

  /* Im Panel gibt es nichts aufzuklappen — Pfeile weg */
  .main-navigation.header-navigation li.mpr-panel .sub-menu .dropdown-nav-toggle,
  .main-navigation.header-navigation li.mpr-panel .sub-menu .dropdown-nav-special-toggle { display: none !important; }

  /* Zwischen Menuezeile und Panel liegen ein paar Pixel Luft. Wer nach unten
     faehrt, verliesse dabei das li — und Kadence blendet auf li:hover ein.
     Die Bruecke gehoert zum Panel und damit zum li: solange der Zeiger auf
     ihr steht, bleibt li:hover wahr. */
  .main-navigation.header-navigation li.menu-item-has-children > ul.sub-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 34px;
  }
}

/* ============================================================
   4. Mobiles Schubfach
   Das Panel-Layout gilt nur ab 1025 px; hier zählt Lesbarkeit.
   ============================================================ */
.drawer-inner { background-color: var(--mpr-kopf) !important; }
#mobile-drawer .drawer-inner a,
.mobile-navigation a { color: var(--mpr-auf-gruen) !important; }
.mobile-navigation li a { font-size: 16px !important; }
/* Kadence packt den Link im Schubfach in .drawer-nav-drop-wrap —
   ein Kindselektor auf das li greift deshalb nicht. */
.mobile-navigation li.mpr-gruppe > .mpr-gruppe-text,
.mobile-navigation li.mpr-gruppe > .drawer-nav-drop-wrap > .mpr-gruppe-text,
.mobile-navigation li.mpr-gruppe > a,
.mobile-navigation li.mpr-gruppe > .drawer-nav-drop-wrap > a {
  display: block;
  padding: 12px 0;
  cursor: default;
  font-family: var(--mpr-cond) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  opacity: .74;
}
/* Die Gruppenzeile zeigt auf einen Abschnitt der Hub-Seite. Auf genau
   dieser Seite markiert WordPress sie als current — die Hervorhebung
   gehoert aber dem echten Menuepunkt, nicht der Ueberschrift. */
.mobile-navigation li.mpr-gruppe.current-menu-item > .drawer-nav-drop-wrap > a,
.mobile-navigation li.mpr-gruppe.current-menu-item > a {
  background-color: transparent !important;
}
.mobile-navigation li.mpr-alle > a { color: var(--mpr-mint) !important; font-weight: 700 !important; }

/* ============================================================
   5. Fusszeile — derselbe dunkle Markengruen-Ton wie die Kopfzeile
   Vier Spalten oben, schmale Zeile unten. Die Klassen fuss-marke,
   fuss-titel und fuss-hinweis stehen in den vier Widgets.
   ============================================================ */
:root {
  --mpr-fuss:       #1B2621;   /* Spaltenband */
  --mpr-fuss-tief:  #141C18;   /* untere Zeile */
  --mpr-fuss-text:  #A9B7B0;   /* 7,4:1 auf --mpr-fuss */
  --mpr-fuss-titel: #FFFFFF;
}

.site-middle-footer-wrap {
  background-color: var(--mpr-fuss) !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
}
.site-middle-footer-inner-wrap {
  padding-top: 48px !important;
  padding-bottom: 44px !important;
}
.site-footer .widget { margin-bottom: 0; }

/* .site-footer .widget p ist spezifischer als .site-footer .fuss-titel und
   hat die Beschriftungen grau eingefaerbt. Deshalb hier mit p davor. */
.site-footer .widget p.fuss-marke,
.site-footer .widget p.fuss-titel,
.site-footer .fuss-marke,
.site-footer .fuss-titel {
  font-family: var(--mpr-cond);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mpr-fuss-titel) !important;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

/* Wort- und Bildmarke in der ersten Spalte, etwas groesser als die
   Spaltenbeschriftungen daneben. */
.site-footer .fuss-marke {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 20px !important;
}
.site-footer .fuss-marke img,
.site-footer .fuss-marke svg { flex: none; width: 34px; height: 34px; display: block; }
.site-footer .fuss-hinweis,
.site-footer .widget p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mpr-fuss-text);
  margin: 0 0 20px;
}
.site-footer .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .widget ul li { margin: 0; }
.site-footer .widget ul li a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mpr-fuss-text);
  text-decoration: none;
}
.site-footer .widget ul li a:hover,
.site-footer .widget ul li a:focus {
  color: var(--mpr-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Untere Zeile. Keine pauschale Farbregel auf .site-footer a — genau so ist
   hier schon einmal ein weisser Link auf hellem Grund entstanden. */
.site-bottom-footer-wrap {
  background-color: var(--mpr-fuss-tief) !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
}
.site-bottom-footer-inner-wrap {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.site-bottom-footer-wrap .footer-html,
.site-bottom-footer-wrap .footer-html p {
  color: var(--mpr-fuss-text) !important;
  font-size: 14.5px !important;
  margin: 0;
}
.site-bottom-footer-wrap .footer-html a,
.site-bottom-footer-wrap .footer-navigation a,
.site-bottom-footer-wrap .footer-navigation .menu-item > a {
  color: var(--mpr-fuss-text) !important;
  background-color: transparent !important;
  font-size: 14.5px !important;
  font-family: var(--mpr-sans) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: var(--mpr-radius-s);
}
.site-bottom-footer-wrap .footer-html a { padding: 0 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.site-bottom-footer-wrap .footer-navigation a:hover,
.site-bottom-footer-wrap .footer-navigation a:focus,
.site-bottom-footer-wrap .footer-html a:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, .07) !important;
}
/* Trennpunkte zwischen den Links der unteren Zeile */
.site-bottom-footer-wrap .footer-navigation li + li > a::before {
  content: '·';
  color: rgba(169, 183, 176, .55);
  margin-right: 14px;
}

/* ============================================================
   6. Hub-Seiten
   Die Kachelliste steht sonst in app.css, die nur auf Rechner-
   seiten lädt. Die drei Übersichtsseiten haben keinen Shortcode.
   ============================================================ */
.entry-content ul.rechnerliste {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 18px;
  max-width: none;
}
@media (min-width: 560px) { .entry-content ul.rechnerliste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .entry-content ul.rechnerliste { grid-template-columns: repeat(3, 1fr); } }
.entry-content ul.rechnerliste li {
  margin: 0;
  background: var(--mpr-flaeche);
  border: 1px solid var(--mpr-linie);
  border-radius: var(--mpr-radius);
  padding: 24px 24px 22px;
  font-size: .875rem;
  color: var(--mpr-text-leise);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.entry-content ul.rechnerliste li:hover {
  border-color: var(--mpr-gruen);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -28px rgba(32, 71, 54, .28);
}
.entry-content ul.rechnerliste li a { text-decoration: none; color: var(--mpr-text); display: block; }
.entry-content ul.rechnerliste li a strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mpr-cond);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--mpr-gruen-tief);
}

@media (prefers-reduced-motion: reduce) {
  .entry-content ul.rechnerliste li { transition: none; }
  .entry-content ul.rechnerliste li:hover { transform: none; }
}