/*
Theme Name:     Twenty Twenty-Five Child
Theme URI:      https://2026.tanja-richter.de
Description:    Child Theme für Twenty Twenty-Five
Author:         Tanja Richter
Author URI:     https://2026.tanja-richter.de
Template:       twentytwentyfive
Version:        1.0
*/



ul.wp-block-list {
  list-style: none;
  padding-left: 0;
  margin: 2em 0;
}

ul.wp-block-list li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 1em;
  font-size: 1.2rem;
  font-family: 'Quicksand', sans-serif;
  color: #3c3c3c;
  line-height: 1.6;
}

ul.wp-block-list li::before {
  content: "✦"; 
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #c9a24b; /* Goldton */
  font-size: 1.1em;
}



/*Absenden-Button direkt im Formular*/

.wpforms-submit.wpforms-absenden {
   display: inline-block;
    width: 100% !important;
    font-family: 'WindSong', cursive !important;
    text-align: center !important;
    font-size: 2rem !important;
    color: #A67F2D !important;
    text-decoration: none;
    position: relative;
    background-color: #FBFAF3 !important;
    border: 1px solid #A67F2D !important;
    border-radius: 50px !important;
    padding: 0.5em !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
	height:3em !important;
}

.wpforms-submit.wpforms-absenden::after {
  content: "";
    position: absolute;
    left: 10%;
    bottom: 0.7em;
    height: 1px;
    width: 80%;
    background-color: #A67F2D !important;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform 0.4s ease;
}

   .wpforms-submit.wpforms-absenden:hover {
  background-color: #FBFAF3 !important;
  background-image: none !important;
}



.wpforms-submit.wpforms-absenden:hover::after {
    transform: scaleX(0);
  }



.linie-mittel {
	width:50%;
	text-align:center;
}


/* Navigation mobil */

@media (max-width: 768px) {
  .wp-block-navigation .wp-block-navigation-link__content,
  .wp-block-navigation a {
    padding-left: 2em !important;
    font-size: 1em;
  }

@media (max-width: 768px) {
  .wp-block-navigation .wp-block-navigation-link__content,
  .wp-block-navigation-service a {
    padding-left: 0em !important;
    font-size: 1em;
  }

  .wp-block-navigation {
    margin-top: 0em;
  }

.wp-block-navigation__responsive-container.is-menu-open::before {
  content: "";
  display: block;
  background-image: url('/wp-content/uploads/2025/06/Logo.jpg'); /* Pfad ggf. anpassen */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 250px; /* war 100px – jetzt großzügiger */
  margin-bottom:-5em;
  margin-top:1em;
  width: 100%;
}
}


/*Button red*/

  .popup-button-red {
    display: inline-block;
    width: 90%;
    font-family: 'WindSong', cursive !important;
    text-align: center;
    font-size: 1.5em;
    color: #A67F2D;
    text-decoration: none;
    position: relative;
    background-color: #fff;
    border: 1px solid #c00042;
    border-radius: 50px;
    padding: 0.5em;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .popup-button-red::after {
    content: "";
    position: absolute;
    left: 10%;
    bottom: 0.7em;
    height: 1px;
    width: 80%;
    background-color: #c00042;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform 0.4s ease;
  }

  .popup-button-red:hover::after {
    transform: scaleX(0);
  }

  .popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
  }

  .popup-overlay.show {
    display: flex;
    animation: fadeIn 0.3s ease forwards;
  }

  .popup-content {
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 0.3s ease forwards;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  }

  .popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }






/*Akkordeon für FAQ-Seite*/

.faq-section {
  max-width: 800px;
  margin: 0 auto;
  font-family: "Quicksand", sans-serif;
}

.faq-item {
  border-bottom: 1px solid #ccc;
}

.faq-item input {
  display: none;
}

.faq-item label {
  display: block;
  padding: 1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  background: #fffaf6;
}

.faq-item label::after {
  content: "➕";
  position: absolute;
  right: 1rem;
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.faq-item input:checked + label::after {
  content: "➖";
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  background: #fdfaf8;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1rem;
}

.faq-item input:checked ~ .faq-content {
  max-height: 500px;
  padding: 1rem;
}



/*Lesezeit*/
.lesezeit {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1rem;
  font-style: italic;
}

/*Autorenbox*/

.autorenbox {
  border-left: 4px solid #64831b;
  padding: 1em 1.2em;
  background-color: #fdfbf5;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 2em;
  margin-bottom: 3em;
}

.autorenbox a {
  color: #64831b;
  text-decoration: underline;
}


/* Optional: dunkleres Overlay (Geschmackssache) */
.glightbox-container .goverlay {
  background: rgba(0,0,0,0.4);
}

.glightbox-mobile .goverlay {
    background: rgba(0,0,0,0.7) !important;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(0, 0, 0);
}




/* === Custom Audio Player (Tanja) === */
/* === Custom Audio Player (Tanja) === */
.audio-player {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  flex-wrap: wrap;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-family: sans-serif;
}

.audio-player .play-btn {
  background-color: #F7DB9F;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.audio-player .play-btn:hover { background-color: #557115; }
.audio-player .play-btn:focus-visible {
  outline: 2px solid #F7DB9F;
  outline-offset: 2px;
}

.audio-player .progress {
  flex-grow: 1;
  appearance: none;
  height: 8px;
  background: #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* Slider Daumen */
.audio-player .progress::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  background: #F7DB9F;
  border-radius: 50%;
  border: none;
}
.audio-player .progress::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #F7DB9F;
  border-radius: 50%;
  border: none;
}

/* Slider Track (optional schöner) */
.audio-player .progress::-webkit-slider-runnable-track {
  height: 8px; border-radius: 5px; background: #ccc;
}
.audio-player .progress::-moz-range-track {
  height: 8px; border-radius: 5px; background: #ccc;
}

.audio-player .time {
  font-size: 1rem;
  min-width: 45px;
  text-align: center;
  color: #333;
  flex-shrink: 0;
}

@media (max-width: 500px) {
  .audio-player { flex-direction: column; align-items: stretch; }
  .audio-player .play-btn { align-self: center; }
  .audio-player .progress { width: 100%; margin: 0.5rem 0; }
  .audio-player .time { text-align: center; }
}


/*Geldkurs-Phasen-Abfrage ausblenden*/
@media (max-width: 600px) {
  .gk-abfrage {
    display: none;
  }
}


/*Formulare Style*/
    :root { --focus:#0a7; }
    .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .form-help{margin:.25em 0 .5em;color:#555;font-size:.95rem}

    /* kleine Fokus-/Fehler-Verbesserungen */
    .form-input:invalid { outline: 2px solid #c62828; outline-offset: 2px; background:#FBFAF3;}
    .form-input:focus { outline: 3px solid var(--focus); outline-offset: 2px; background:#FBFAF3;}

    .form-start {
      text-align: center;
      width: 100%;
      max-width: 400px;
      padding: 0.6em;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-family: var(--wp--preset--font-family--quicksand);
      font-size: 1rem;
      color:#3C3C3C;
    }

    .form-input, .form-start select {
      width: 90%;
      max-width: 400px;
      padding: 0.6em;
      border: 1px solid #ccc;
      background:#FBFAF3;
      border-radius: 6px;
      font-family: var(--wp--preset--font-family--quicksand);
      font-size: 1rem;
      color:#3C3C3C;
    }

/* GK-Start: Checkboxen einfärben */
.form-start input[type="checkbox"] {
  accent-color: #c00042; /* modernes CSS, von allen aktuellen Browsern unterstützt */
}


    .form-start .form-label { display:block; margin-bottom:.3em; }
    .form-field {margin-bottom:1em;}

    /* Rote Browser-Umrandung neutralisieren */
    .form-start input:invalid, .form-start select:invalid { box-shadow:none; outline:none; border-color:#ccc; }

    /* Fokus hübscher machen */
    .form-start input:focus, .form-start select:focus {
      border-color:#c00042; /* Themefarbe */
      box-shadow:0 0 0 2px rgba(166,127,45,0.2);
      outline:none;
    }

    .form-note {margin-bottom:1em;}

    .popup-button-red {
      display:inline-block;
      width:90%;
      font-family:'WindSong', cursive !important;
      text-align:center;
      font-size:1.5em;
      color:#c00042;
      text-decoration:none;
      position:relative;
      background-color:#fff;
      border:1px solid #c00042;
      border-radius:50px;
      padding:.5em;
      margin-top:1em;
      margin-bottom:1em;
      cursor:pointer;
      transition:all .3s ease;
    }
    .popup-button-red::after {
      content:"";
      position:absolute; left:10%; bottom:.7em; height:1px; width:80%;
      background-color:#c00042; transform-origin:left; transform:scaleX(1);
      transition:transform .4s ease;
    }
    .popup-button-red:hover::after { transform:scaleX(0); }

    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    @keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

    .form-error { color:#b00020; margin-top:.35em; font-size:.95rem; min-height:1.2em; }
    .form-field.has-error .form-input, .form-field.has-error select { border-color:#b00020; }

    /* Bewegungspräferenz respektieren */
    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
    }