/*
Theme Name: Klimavida
Theme URI: 
Author:  FOMACO GmbH
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: klimavida
Tags: 
 */


:root { font-size: 18px; }

body {
    max-width: 1920px;
    margin: 0 auto;
}

main figure img {
  display: block;
  width: 100%;
  height: auto;
}

:root :where(.wp-block-cover h1:not(.has-text-color)) {
  color: #313131;
}


.entry-content figure.wp-block-image figcaption {
  display: none;
}

/* /////////////////////////////////////////////////////////////////////////////// */
/*  Helper class */
/* /////////////////////////////////////////////////////////////////////////////// */
a {transition: all 0.5s ease-out;}
a:not(h1 a):not(h2 a):not(h3 a):not(button a):not(.wp-block-button a) {
  color: #e44826;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom:1px dotted #e44826;
  transition: all .3s;
}
a:not(h1 a):not(h2 a):not(h3 a):not(button a):not(.wp-block-button a):hover {
  Color: #313131;
  border-bottom:1px dotted #313131;
}
.thisisorangeicon::before {
  color: #e44826;
}
.leftoutside {
  position: relative;
}
.leftoutside::before {
    position: absolute;
    left: -20px;
}
@media screen and (max-width: 1000px) {
  .noneonsmall {
    display: none !important;
  }
}
@media screen and (max-width: 600px) {
  .noneonverysmall {
    display: none !important;
  }
}
@media screen and (min-width: 601px) {
  .hideonbig {
    display: none !important;
  }
}
/* /////////////////////////////////////////////////////////////////////////////// */
/*  Logo   */
/* /////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 600px) {
  .wp-block-site-logo.is-default-size img {
    height: 70px;
    width: 70px;
  }
}

@media screen and (max-width: 1560px) {
  header .headerrow {
    padding-left: 25px !important;
  }
}


.wp-block-site-logo a {
  border: none !important;
}

/* /////////////////////////////////////////////////////////////////////////////// */
/*  Button hover */
/* /////////////////////////////////////////////////////////////////////////////// */

.wp-block-button__link {
    
    border-style: solid !important;
    transition: background .15s ease, color .15s ease, transform .03s ease;
    
}
.wp-block-button__link:hover {
    background-color: #fff;
    color: #e44826;
    border-width: 2px !important;
    border-color: #e44826 !important;
    border-style: solid !important;
}

.greybutton .wp-block-button__link:hover {
    background-color: #e44826 !important;
    color: #fff !important;
    border-width: 2px !important;
    border-color: #e44826 !important;
    border-style: solid !important;
}


/* /////////////////////////////////////////////////////////////////////////////// */
/* Startseite Herobild  */
/* /////////////////////////////////////////////////////////////////////////////// */

.bgimageherofront {
  background-image: url('./assets/images/header-doppelpfeil.png');
  background-position: right center; /* Rechtsbündig und vertikal mittig */
  background-repeat: no-repeat;      /* Bild nicht wiederholen */
  background-size: 100px;          /* Bild komplett anzeigen */
}
.bgimageherofront .wp-block-column h1, 
.bgimageherofront .wp-block-column p,
h1, h2, h3, h4, h5, footer a {
  hyphens: auto;  
}
.bgimageherofront .wp-block-column:nth-child(2) {padding-right: 90px !important;}
@media screen and (min-width: 200px) and (max-width:899px) {
    .bgimageherofront {
      background-image: none;
      padding: 10px !important;
    }
    .bgimageherofront .wp-block-column:nth-child(2) {padding-right: 20px !important;}
    .bgimageherofront h1 {
        font-size: 22px;
    }
    .wp-block-cover.imagebgcoverhero {
      min-height: 300px;
    }
}
@media screen and (min-width: 900px) and (max-width:1199px) {
    
    .bgimageherofront h1 {
        font-size: 24px;
    }
}

@media screen and (min-width: 1200px) and (max-width:1500px) {
    .bgimageherofront h1 {
        font-size: 32px;
    }
}
.backgroundimageheroblock .wp-block-cover {
  height: 100%;
}
@media screen and (max-width:1199px) {
  .backgroundimageheroblock {
      display: none;
  }
}

/* Medienblock */
.wp-block-media-text.medienblockmitrandrechts figure,
.wp-block-media-text.medienblockmitrandlinks figure  {
  position: relative;
  height: 100%;
}
.wp-block-media-text.medienblockmitrandrechts figure::before  {
    position: absolute;
    content:'';
    background-color: #fff;
    width: 10px;
    right: -5px;
    top: 0;
    height: 100%;
}
.wp-block-media-text.medienblockmitrandlinks figure {position: relative;}
.wp-block-media-text.medienblockmitrandlinks figure::before  {
    position: absolute;
    content:'';
    background-color: #fff;
    width: 10px;
    left: -5px;
    top: 0;
    height: 100%;
}
.wp-block-media-text.medienblockmitrandrechts figure img,
.wp-block-media-text.medienblockmitrandlinks figure img {
  width: 100%;          /* volle Breite */
  height: 100%;         /* volle Höhe der Box */
  object-fit: cover;    /* skaliert, ohne Verzerrung, füllt die Box */
  object-position: center;
}


/* /////////////////////////////////////////////////////////////////////////////// */
/* Gravityforms  */
/* /////////////////////////////////////////////////////////////////////////////// */
.gform-theme--orbital.gf-klimavida_wrapper {
  /* eigene Tokens */
  --klv-bg: #f2f2f2;
  --klv-border: #e6e6e6;
  --klv-text: #333333;
  --klv-muted: #666666;
  --klv-accent: #e44826;   /* Button/Focus (Orange) */
  --klv-radius: 0;         /* 6px, wenn du Rundungen willst */
  --klv-pad: 16px;
  --klv-gap: 16px;
  --klv-field-height: 56px;

  /* Orbital-Variablen überschreiben (Inputs & Ränder) */
  --gf-color-in-ctrl: var(--klv-bg);
  --gf-color-in-ctrl-contrast: var(--klv-text);
  --gf-ctrl-border-color: var(--klv-border);
  --gf-radius: var(--klv-radius);
}




/* Labels sind im Markup vorhanden, aber als Platzhalter gewünscht */
.gform_wrapper .gf-klimavida  #gform_fields_1 {
  row-gap: 20px;
}

/* Inputs / Select / Textarea */
.gform_wrapper .gf-klimavida  input[type="text"],
.gform_wrapper .gf-klimavida  input[type="email"],
.gform_wrapper .gf-klimavida  input[type="tel"],
.gform_wrapper .gf-klimavida  select,
.gform_wrapper .gf-klimavida  textarea{
  width:100%;
  height: var(--klv-field-height);
  padding: 0 var(--klv-pad);
  background: var(--klv-bg);
  border: 1px solid var(--klv-border);
  border-radius: var(--klv-radius);
  color: var(--klv-text);
  box-shadow:none;
  outline:none;
  appearance:none;
  font: 400 16px/1.2 inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gform_wrapper .gf-klimavida  textarea{
  padding: var(--klv-pad);
  height:auto;
  resize:vertical;
}
.gform_wrapper .gf-klimavida  ::placeholder{ color:#777; opacity:1; }

/* Fokus */
.gform_wrapper .gf-klimavida  input:focus,
.gform_wrapper .gf-klimavida  select:focus,
.gform_wrapper .gf-klimavida  textarea:focus,
.gform_wrapper .gf-klimavida  select:hover {
  border-color: var(--klv-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--klv-accent) 18%, transparent);
  background-image: none !important;
}

/* Select-Pfeil (Orbital hat bereits einen – wir sorgen nur für Platz) */
.gform_wrapper .gf-klimavida  .ginput_container_select select{ padding-right:44px; }


.gform_wrapper .gf-klimavida  .gfield--type-consent input[type="checkbox"]{
  width:18px; height:18px; margin-top:3px;
}
.gform_wrapper .gf-klimavida  .gfield--type-consent .gform-field-label{
  font-size:13px; line-height:1.45; color: var(--klv-muted);
}


/* Button: orange Outline, Uppercase, wie im Screenshot */
.gform-theme.gform-theme--framework.gform_wrapper form.gf-klimavida .gform_footer input.gform_button{
  background: transparent;
  border: 2px solid var(--klv-accent);
  color: var(--klv-accent);
  border-radius: var(--klv-radius);
  padding: 14px 28px;
  letter-spacing: .08em;
  font-weight:700;
  text-transform: uppercase;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .03s ease;
}
.gform-theme.gform-theme--framework.gform_wrapper form.gf-klimavida .gform_footer input.gform_button:hover{
  background: var(--klv-accent);
  color:#fff;
}
.gform-theme.gform-theme--framework.gform_wrapper form.gf-klimavida  .gform_footer input.gform_button:active{ transform: translateY(1px); }

/* Fehlerzustände */
.gform_wrapper .gf-klimavida  .gfield_error input,
.gform_wrapper .gf-klimavida  .gfield_error select,
.gform_wrapper .gf-klimavida  .gfield_error textarea{
  border-color:#c62828;
  box-shadow:0 0 0 2px color-mix(in srgb, #c62828 18%, transparent);
}
.gform_wrapper .gf-klimavida  .validation_message{
  color:#c62828; font-size:13px; margin-top:6px;
}

/* Responsive: unter 768px einspaltig */
@media (max-width:768px){
  .gform_wrapper .gf-klimavida  .gform_fields{ grid-template-columns:1fr; }
}

/* Dropdown Fix */
.gform_wrapper .gf-klimavida  .ginput_container_select {
  position: relative;
}

.gform-theme.gform-theme--framework.gform_wrapper .gf-klimavida  .ginput_container_select select {
  appearance: none;                /* Standard-Pfeile entfernen */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--klv-bg);
  border: 1px solid var(--klv-border);
  border-radius: var(--klv-radius);
  padding: 0 var(--klv-pad);
  padding-right: 44px;             /* Platz für den Custom-Pfeil */
  height: var(--klv-field-height);
  line-height: var(--klv-field-height); /* Text vertikal zentrieren */
  color: var(--klv-text);
  font: 400 16px/1.2 inherit;
}

/* Eigener Pfeil */
.gform-theme.gform-theme--framework.gform_wrapper .gf-klimavida  .ginput_container_select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  pointer-events: none;
}

/* --- Dropdown-Farbsteuerung für #input_1_5 --- */

/* 1) Grundsätzlich hell wie Placeholder */
.gform-theme.gform-theme--framework.gform_wrapper .gf-klimavida  .ginput_container_select select { 
  color: #777;
}

/* 2) Sobald NICHT die Placeholder-Option aktiv ist -> dunkler Text */
.gform-theme.gform-theme--framework.gform_wrapper .gf-klimavida  .ginput_container_select select.gfield_select:has(option:not(.gf_placeholder):checked) {
  color: #333;
}

/* 3) Farben auch in der aufgeklappten Liste angleichen */
.gform-theme.gform-theme--framework.gform_wrapper .gf-klimavida  .ginput_container_select select.gfield_select option { color: #333; }
.gform-theme.gform-theme--framework.gform_wrapper .gf-klimavida  .ginput_container_select select.gfield_select option.gf_placeholder { color: #777; }


.gform_heading .gform_required_legend {
  display: none;
}

/* /////////////////////////////////////////////////////////////////////////////// */
/* Startseite Rotierendes Bild  */
/* /////////////////////////////////////////////////////////////////////////////// */
.rotateimg figure img {
  
  transform: rotate(45deg) ;
  
}
@media screen and (max-width:1500px) {
    .rotateimg figure img {
    max-width: 100%;
    transform: rotate(45deg) scale(0.7);
    transform-origin: center;
  }
}



.swiper .headingwithicon {
  position: relative;
  padding-top: 100px;
  overflow-wrap: break-word;
}
.swiper .headingwithicon::before {
  position: absolute;
  top: 0;
  left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 3;
    color: #fff;
    line-height: 70px;
    font-size: 46px;
}
.swiper .headingwithicon::after {
  position: absolute;
    content: '';
    top: 0;
    height: 80px;
    width: 80px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #e44826;
    display: block;
    rotate: 45deg;
}

/* /////////////////////////////////////////////////////////////////////////////// */
/* Rasterblock zwei Spalten  */
/* /////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width:600px) {
  .rasteronmobile {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    
}
}


/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* Seitenzahlnavi */

/* === Query-Pagination hübscher machen (TT25/FSE) === */
.alignwide .wp-block-query-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between; /* lässt Zahlen links, Next rechts */
  gap:1rem;
  flex-wrap:wrap;
  padding:0.5rem 0;
  border-top:1px solid color-mix(in oklab, currentColor 15%, transparent);
}

/* Zahlenreihe als „Pills“ */
.wp-block-query-pagination-numbers{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Grundstil für Zahlen-Links + Current */
.wp-block-query-pagination-numbers .page-numbers{
  --pill-size: 2.25rem;
  --pill-border: color-mix(in oklab, currentColor 18%, transparent);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:var(--pill-size);
  height:var(--pill-size);
  padding:0 .65rem;
  border:1px solid var(--pill-border);
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}

/* Hover/Fokus */
.wp-block-query-pagination-numbers a.page-numbers:hover{
  transform:translateY(-1px);
  background:color-mix(in oklab, currentColor 8%, transparent);
}
.wp-block-query-pagination-numbers a.page-numbers:focus{
  outline:2px solid color-mix(in oklab, currentColor 40%, transparent);
  outline-offset:2px;
}

/* Aktive Seite */
.wp-block-query-pagination-numbers .page-numbers.current{
  
  border-color: #038ad0;
}

/* Auslassungszeichen „…“ neutral */
.wp-block-query-pagination-numbers .dots{
  border:none;
  background:transparent;
  padding:0 .25rem;
  min-width:auto;
  height:auto;
  color: color-mix(in oklab, currentColor 60%, transparent);
}

/* Vorherige/Nächste als Buttons */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next{
  --btn-border: color-mix(in oklab, currentColor 18%, transparent);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border:1px solid var(--btn-border);
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  line-height:1.1;
  transition:background-color .12s ease, transform .12s ease, border-color .12s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover{
  transform:translateY(-1px);
  background:color-mix(in oklab, currentColor 8%, transparent);
}
.wp-block-query-pagination-previous:focus,
.wp-block-query-pagination-next:focus{
  outline:2px solid color-mix(in oklab, currentColor 40%, transparent);
  outline-offset:2px;
}

/* Pfeile etwas separieren */
.wp-block-query-pagination-next .wp-block-query-pagination-next-arrow{ margin-left:.2rem; }
.wp-block-query-pagination-previous .wp-block-query-pagination-previous-arrow{ margin-right:.2rem; }

/* Wenn es KEIN „Vorherige Seite“ gibt (Seite 1), die Zahlenreihe leicht nach links puffern */
.alignwide .wp-block-query-pagination:not(:has(.wp-block-query-pagination-previous)) 
  .wp-block-query-pagination-numbers{ margin-left:.1rem; }

/* Responsive: zentrierte Zahlenreihe, Prev/Nächste umbrechen */
@media (max-width:700px){
  .alignwide .wp-block-query-pagination{
    gap:.75rem;
  }
  .wp-block-query-pagination-numbers{ order:2; width:100%; justify-content:center; }
  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next{ order:1; }
}

/* Optional: respektiert „prefers-reduced-motion“ */
@media (prefers-reduced-motion: reduce){
  .wp-block-query-pagination *{ transition:none !important; }
}



/* /////////////////////////////////////////////////////////////////////////////// */
/* Unterseiten Herobild  */
/* /////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width:899px) {
    .hero-bkt .wp-block-cover__inner-container .wp-block-columns .wp-block-column:first-child {
      display: none;
    }
    .hero-bkt .wp-block-cover__inner-container .wp-block-columns .wp-block-column:nth-child(2) {
      padding: 20px;
      flex-basis: 95% !important;
    }
    .wp-block-columns.has-bg-image::before {
      display: none;
    }
}


/* /////////////////////////////////////////////////////////////////////////////// */
/* Slider Icons  */
/* /////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 900px) {
  .swiper .swiper-wrapper h3.headingwithicon {
    font-size: 22px !important;
  }
}
.swiper .headingwithicon::before { 
  line-height: 90px; 
}
.swiper .headingwithicon { 
  padding-top:120px; 
} 

.cb-button-prev,
.cb-button-next {
  background-color: #e7e7e7;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
}
.cb-button-prev::after,
.cb-button-next::after {
  font-size: 18px !important;
}

/* /////////////////////////////////////////////////////////////////////////////// */
/* Accordion  */
/* /////////////////////////////////////////////////////////////////////////////// */
details.wp-block-details summary {
  font-family: Roboto Condensed;
  font-weight: 700;
}


/* /////////////////////////////////////////////////////////////////////////////// */
/* Complianz  */
/* /////////////////////////////////////////////////////////////////////////////// */
#cmplz-document a, .editor-styles-wrapper .cmplz-unlinked-mode a,
.cmplz-cookiebanner .cmplz-links .cmplz-link {
  text-decoration: none !important;
}