/*
Theme Name: Mein GeneratePress Child
Template: generatepress
*/

/* =========================================
   GeneratePress + Otter: Bootstrap-Container
   sm=576 | md=768 | lg=992 | xl=1200 | xxl=1400
   Max-Widths: 540 | 720 | 960 | 1140 | 1320
   ========================================= */

:root{
  --gap-inline: clamp(12px, 2.5vw, 24px); /* Seiten-Padding */
  --container-wide-add: 120px;            /* Extra für alignwide */

  /* Logo-basierte Markenfarben (automatisch ermittelt) */
  --brand-700: #000008;
  --brand-600: #102028;
  --brand-500: #183850;
  --brand-300: #dbddde;
  --text-on-brand: #ffffff;
}

/* Basis-Container für Header, Content, Footer angleichen */
.inside-header,
.site-content,
.content-area,
.inside-article,
.inside-footer-widgets,
.inside-site-info,
.wp-block-post-content,
.wp-site-blocks,
.wp-block-group.is-layout-constrained {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--gap-inline);
  max-width: var(--container-max, 100%);
}

/* alignwide: breiter, aber nicht full-bleed */
.alignwide,
.wp-block-group.alignwide,
.wp-block-columns.alignwide,
.wp-block-cover.alignwide {
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--gap-inline);
  width: min(100%, calc(var(--container-max, 100%) + var(--container-wide-add)));
  max-width: calc(var(--container-max, 100%) + var(--container-wide-add));
}

/* alignfull: echte volle Breite */
.alignfull,
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull,
.wp-block-columns.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-inline: 0;
}

/* Medien nie überlaufen lassen */
.wp-block-image img,
figure img,
.wp-block-embed,
.wp-block-video { max-width: 100%; height: auto; }

/* Bootstrap-ähnliche Max-Breiten */
@media (min-width: 576px){  :root{ --container-max: 540px;  } }   /* sm */
@media (min-width: 768px){  :root{ --container-max: 720px;  } }   /* md */
@media (min-width: 992px){  :root{ --container-max: 960px;  } }   /* lg */
@media (min-width: 1200px){ :root{ --container-max: 1140px; } }   /* xl */
@media (min-width: 1400px){ :root{ --container-max: 1320px; } }   /* xxl */

/* ================================
   Header: Hamburger rechts + Farben
   ================================ */

/* Standardfarbe Hamburger per Logo-Farbe + stimmiger Hover */
:root {
  --brand-base: #102028; /* Basisfarbe aus Logo */
  --brand-hover: #183850; /* etwas heller/bläulicher für Hover */
}

/* Standardfarbe Hamburger */
.menu-toggle {
  color: var(--brand-base) !important;
}
.menu-toggle .gp-icon svg {
  fill: currentColor !important;
}

/* Hover-/Focus-Farbe Hamburger */
.menu-toggle:hover,
.menu-toggle:focus {
  color: var(--brand-hover) !important;
}

/* Fokus-Ring passend zur Marke */
.menu-toggle:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Link-Farben im Menü */
.main-navigation a{
  color: var(--brand-600);
  text-decoration: none;
}
.main-navigation a:hover,
.main-navigation a:focus{
  color: var(--brand-500);
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a{
  color: var(--brand-700);
  font-weight: 600;
}

/* === Fix: GP setzt mobil flex-grow:1 + text-align:center auf .menu-toggle === */
@media (max-width: 1024px){
  .inside-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
  .menu-toggle{
    flex-grow: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
    order: 2;
  }
  .site-branding, .site-logo{
    order: 1;
  }

  /* Optional: Mobile-Menü-Dropdown Styling */
  .main-navigation.toggled .main-nav > ul{
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 8px;
    padding-top: 8px;
  }
  .main-navigation.toggled .main-nav a{
    padding: 10px 12px;
    border-radius: 6px;
  }
  .main-navigation.toggled .main-nav a:hover{
    background: var(--brand-300);
  }
}

/* === Kombi-Fix: Tablet/Mobile – Logo links & Hamburger rechts === */
@media (max-width: 1024px){
  .inside-header{
    display:flex !important;
    align-items:center;
    justify-content:space-between; /* verteilt Branding links, Toggle rechts */
    width:100%;
  }

  /* Logo-Container links */
  .site-branding{
    order:1;
    margin:0 !important;
    text-align:left !important;
    justify-content:flex-start;
    align-items:center;
  }
  .site-branding img{ margin:0 !important; }

  /* Hamburger-Button rechts */
  .menu-toggle{
    order:2;
    flex-grow:0 !important;
    margin-left:auto !important;
    text-align:right !important;
  }
}

/* === Erweiterter Fix: Logo links erzwingen + Hamburger rechts (Tablet/Mobile) === */
@media (max-width: 1024px){
  /* Flex-Layout und Linksausrichtung erzwingen */
  .site-header,
  .inside-header,
  .header-aligned-center {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Branding-Container linksbündig, keine Auto-Margen */
  .site-branding,
  .site-branding-container {
    order: 1 !important;
    margin: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* Logo-Bild ohne Auto-Margen */
  .site-branding img,
  .site-branding-container img {
    margin: 0 !important;
  }

  /* Hamburger-Button ganz rechts */
  .menu-toggle {
    order: 2 !important;
    flex-grow: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
  }
}

/* === Beratung starten Button im Menü (menu-item-663) === */
#menu-item-663 > a {
  display: inline-block;
  background-color: #005bb5;
  color: #ffffff !important;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

#menu-item-663 > a:hover,
#menu-item-663 > a:focus {
  background-color: #004a99;
  color: #ffffff !important;
  text-decoration: none;
}