/* ==========================================================================
   THEME-INFO
   ========================================================================== */
/*
Theme Name:   BioNetz Theme
Theme URI:    https://blq-bio-beratung.de
Description:  BioNetz Theme basiert auf GeneratePress
Author:       Lichtsignale
Author URI:   https://lichtsignale.de
Template:     generatepress
Version:      1.0
Text Domain:  bionetz-theme
*/


/* ==========================================================================
   1. BASIS-KONFIGURATION (Design Tokens)
   ========================================================================== */
:root {
    --green: #52ae32;
    --green-dark: #3c8720;
    --grey-100: #f7f9fc;
    --grey-200: #ebeff5;
    --grey-300: #dbe1e8;
    --grey-700: #525252;
    --radius: 6px;
    --gap: 20px;
    --maxw: 720px;
    --transition: .2s ease;
}

html, body {
    overflow-x: hidden;
}


/* ==========================================================================
   2. GLOBALES STYLING (Text, Container, Bilder)
   ========================================================================== */

/* Seitenhöhe */

.container.grid-container{
  min-height: calc(100vh - 124px);
}

/* Links */
.entry-content p > a,
.entry-content p > a:visited {
    color: var(--green);
}

/* Content-Boxen für CPTs + statische Seiten */
.single-veranstaltung .site-main .veranstaltung,
.single-dokumentation .site-main .dokumentation,
.single-rechnung .site-main .rechnung,
.page-id-37 .site-main .page,
.page-id-3776 .site-main .page,
.page-id-3800 .site-main .page,
.page-id-3798 .site-main .page,
.page-id-3753 .site-main .page,
.page-id-3756 .site-main .page,
.page-id-3758 .site-main .page,
.page-id-4009 .site-main .page,
.page-id-4096 .site-main .page,
.page-id-6010 .site-main .page {
    padding: 24px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    margin-bottom: 2em;
}

/* Mobile Content-Anpassung */
@media (max-width: 768px) {
    .container .site-content .content-area {
        width: 100%;
    }
}

/* Beitragsbilder */
.inside-article .post-image img,
.featured-image img {
    border-radius: 4px;
}

.post-image-below-header.post-image-aligned-center .inside-article .featured-image {
    margin-top: 1em !important;
}


/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */

/* Logo / Branding-Abstände */
#site-navigation .navigation-branding {
    margin-left: 24px !important;
    margin-right: 36px !important;
}

/* Einheitliche Schriftgrößen */
.navigation-branding .main-title,
h1, h2, h3, h4, h5, h6,
.slideout-navigation.main-navigation .main-nav ul li a {
    font-size: 18px;
}

/* Letztes Menüelement rechts fixieren */
@media (min-width: 769px) {
    .main-navigation .main-nav > ul > li:last-child {
        position: absolute;
        top: 0;
        right: 0;
    }
}


/* ==========================================================================
   4. BUTTONS (Global, Gutenberg, GBButton)
   ========================================================================== */
button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
input[type=button],
input[type=reset],
input[type=submit],
a.button,
a.wp-block-button__link:not(.has-background),
.button,
.wp-block-button .wp-block-button__link,
.gbbutton {
    background: var(--green);
    color: white;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background var(--transition);
    padding: 12px 16px;
}

/* Hover-States */
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
a.button:hover,
a.wp-block-button__link:not(.has-background):hover,
.button:hover,
.wp-block-button .wp-block-button__link:hover,
.gbbutton:hover {
    background: var(--green-dark);
}


/* ==========================================================================
   5. LOGIN-BEREICH
   ========================================================================== */

/* Login-Seite zentrieren */
.home .site-content,
.page-id-3672 .site-content {
    display: flex;
    height: calc(100vh - 132px);
    align-items: center;
    justify-content: center;
}

.home .entry-title{
  font-size: 2rem;
}

/* Login-Boxen */
#post-3668,
#post-3672 {
    max-width: 600px;
    padding: 24px;
    margin: 0 auto;
    background-color: rgba(82, 174, 50, 0.15);
    border-radius: var(--radius);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px;
}

#post-3670 {
    max-width: 800px;
    padding: 24px;
    margin: 0 auto;
    background-color: rgba(82, 174, 50, 0.15);
    border-radius: var(--radius);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px;
}

/* Labels in Login-Formularen */
.wppb-form-field label,
#wppb-login-wrap .login-username label,
#wppb-login-wrap .login-password label,
#wppb-login-wrap .login-auth label {
    width: max-content !important;
}

.home .wppb-user-forms,
.home .login-register-lost-password{
  margin-bottom: 0 !important;
}


/* ==========================================================================
   6. KALENDER (Veranstaltungen)
   ========================================================================== */
.veranstaltung-infos {
    margin-bottom: 0;
    font-size: 1rem;
}

.veranst-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    max-width: 100%;
}

.info-label {
    font-weight: bold;
    white-space: nowrap;
    color: #333;
}

.info-value {
    word-break: break-word;
    color: #000;
}


/* ==========================================================================
   7. BLOG / NEUIGKEITEN
   ========================================================================== */
.one-container.blog .post,
.one-container.single .post {
    padding: 24px !important;
    background-color: white;
    border-radius: var(--radius);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.one-container.blog .post:not(:last-child):not(.is-loop-template-item) {
    margin-bottom: 2em;
}

.single .button {
    margin-top: 2em;
}


/* ==========================================================================
   8. PROFIL BEARBEITEN (WPPB Forms)
   ========================================================================== */

/* Formular-Wrapper */
.wppb-user-forms {
  max-width: 800px;
  margin-bottom: 1em;
}

div#wppb-msf-tabs {
  margin: 0 !important;
}

.wppb-edit-user > ul {
  padding: 18px !important;
  border: 1px solid var(--grey-300);
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -1px !important;
  background: white;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

input[type="button"].wppb-msf-pagination,
input[type="button"].wppb-msf-tabs {
  margin: 0 12px 0 0 !important;
}

/* Labels */
.wppb-user-forms label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  color: var(--grey-700);
}

/* Labels sichtbar machen (überschreibt Theme/Plugin CSS) */
#wppb-recover-password ul li.wppb-form-field label,
.wppb-user-forms #wppb-loginform .login-username label,
.wppb-user-forms #wppb-loginform .login-password label,
.wppb-user-forms #wppb-loginform .login-auth label,
.wppb-user-forms #wppb-loginform .wppb-recaptcha label,
.wppb-form-field.pbpl-class label,
.pms-field.pbpl-class:not(form[id^="pms"] .pms-field) label {
  position: static !important;
  left: auto !important;
  text-indent: 0 !important;
  display: block !important;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--grey-700);
}

.wppb-form-field:not(#select_user_to_edit_form .wppb-form-field, .wppb-checkbox-terms-and-conditions, .wppb-gdpr-checkbox, .wppb-subscription-plans) label:not(.wppb-checkboxes label, .wppb-radios label){
  float:none !important;  
}



/* Eingabefelder */
.wppb-user-forms input[type="text"],
.wppb-user-forms input[type="email"],
.wppb-user-forms input[type="url"],
.wppb-user-forms input[type="search"],
.wppb-user-forms input[type="number"],
.wppb-user-forms input[type="password"],
.wppb-user-forms select,
.wppb-user-forms textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  border: 1px solid var(--grey-300) !important;
  border-radius: var(--radius) !important;
  background-color: var(--grey-100) !important;
  color: var(--grey-700) !important;
  transition: var(--transition) !important;
  box-sizing: border-box !important;
  appearance: none;
  display: block !important;
  margin-bottom: 8px !important;
}

/* Fokus-Styles */
.wppb-user-forms input:focus,
.wppb-user-forms select:focus,
.wppb-user-forms textarea:focus {
  border-color: var(--green) !important;
  outline: none !important;
  background-color: white !important;
}

/* Passwort-Feld Container */
.wppb-password-field-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* Buttons in Formularen */
.wppb-user-forms input[type="submit"],
.wppb-user-forms .wppb-msf-button {
  background-color: var(--green);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.wppb-user-forms input[type="submit"]:hover,
.wppb-user-forms .wppb-msf-button:hover {
  background-color: var(--green-dark);
}

/* Hinweise / Beschreibungen */
.wppb-description-delimiter {
  display: block;
  font-size: 0.875rem !important;
  color: var(--grey-700);
  line-height: 1.4;
  margin-botton: 1em !important;
}

/* Tab-Überschriften */
.wppb-form-field h3.extra_field_heading {
  font-size: 1.2rem;
  margin-bottom: 1em;
  color: var(--grey-700);
}

/* Abstände */
.wppb-form-field {
  margin-bottom: 1.5em;
}

#wppb-form-element-32 h3{
  margin-top: 2em;
}

/* Formular-Tabs */
#wppb-msf-tabs input[type="button"] {
  background: var(--grey-100);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 20px;
  font-weight: 600;
  color: var(--grey-700);
  margin-right: 5px;
  cursor: pointer;
  transition: var(--transition);
}

#wppb-msf-tabs input[type="button"].wppb-msf-active {
  background: white;
  border-bottom: none;
  color: var(--green);
  position: relative;
  z-index: 2;
  border-bottom: 1px solid transparent;
}

/* Passwort-Anzeige Button */
.wppb-show-pw {
  background: none;
  border: none;
  position: absolute;
  right: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Passwortfelder nebeneinander */
.wppb-default-password {
  float: left;
  width: 48%;
  display: inline-block;
}

.wppb-default-repeat-password {
  float: right;
  width: 48%;
  display: inline-block;
}

/* Passwortstärke-Anzeige */
#pass-strength-result {
  margin: 1em 0 !important;
  padding: 8px 12px !important;
  height: auto !important;
}

/* Step-Commands (Multi-Step Form) */
.wppb-msf-step-commands {
  margin: 1em 0 !important;
}

.wppb-user-forms li.wppb-msf-step-commands input[type="button"].wppb-msf-button {
  all: unset;
  display: inline-block;
  padding: 10px 16px !important;
  border-radius: var(--radius) !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  background-color: var(--green) !important;
  color: white !important;
  border: none !important;
}

/* Hover- & Disabled-States */
.wppb-user-forms li.wppb-msf-step-commands input[type="button"].wppb-msf-button:hover:not(:disabled) {
  background-color: var(--green-dark) !important;
}

.wppb-user-forms li.wppb-msf-step-commands input[type="button"].wppb-msf-button:disabled {
  background-color: var(--grey-300) !important;
  color: var(--grey-500) !important;
  cursor: not-allowed !important;
}

/* Speicher-Button Breite */
.form-submit[data-wppb-msf="yes"] #register,
.form-submit[data-wppb-msf-ep="yes"] #edit_profile {
  width: max-content !important;
}

/* Login-Seite: Zusätzliche Elemente ausblenden */
.login-register,
.login-separator {
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* Toggle-Passwort-Buttons */
.wppb-form-field.wppb-default-password button.wppb-toggle-pw,
.wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
#wppb-login-wrap .login-password button.wppb-toggle-pw,
#wppb-recover-password-container .wppb-form-field.passw1 .wppb-toggle-pw,
#wppb-recover-password-container .wppb-form-field.passw2 .wppb-toggle-pw {
  right: 10px !important;
}

@media screen and (max-width: 500px) {
  .wppb-form-field.wppb-default-password button.wppb-toggle-pw,
  .wppb-form-field.wppb-default-repeat-password button.wppb-toggle-pw,
  #wppb-login-wrap .login-password button.wppb-toggle-pw {
    top: 50% !important;
  }
}

/* ==========================================================================
 9. Material Downloads
 ========================================================================== */

.page-id-37 .entry-content ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

.page-id-37 .entry-content ul li{
  border-top: 1px solid var(--grey-300);
  position:relative;
  padding-top:8px;
  display: block;
  margin-bottom: 1.5em;
  padding-right: 150px;
}

.page-id-37 .entry-content ul li > a{
  position:absolute;
  top:4px;
  right:0;
}

@media (max-width:768px){
  .page-id-37 .entry-content ul li{
    padding-right:0;
  }
  .page-id-37 .entry-content ul li > a{
    position:relative;
    margin-top: 4px;
    display: inline-block;
  }
}

.page-id-37 .entry-content ul li > a,
.page-id-37 .entry-content ul li > a:active{
  background: var(--green);
  color: white;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  padding: 4px 12px;
}

.page-id-37 .entry-content ul li > a:hover,
.page-id-37 .entry-content ul li > a:focus{
  background: var(--green-dark);
}




/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.inside-site-info {
  justify-content: flex-start;
}



/* ==========================================================================
 11. PASSWORT ZURÜCKSETZEN SEITE
 ========================================================================== */
 
.login #nav
.login #nav a{
  display: none !important;
}