/*
Theme Name: Wojo PHP
Theme URI: https://oferperspektive.de
Author: WoJo
Description: Basic PHP-only WordPress block-ready theme.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: wojo-php
*/

@import url("assets/fonts/lora.css");
@import url("assets/fonts/roboto.css");
@import url("assets/fonts/montserrat.css");
@import url("assets/menue-1.css");
@import url("assets/hotfix-utilities.css");
/* @import url("assets/socials.css"); */
/* FONT FAMILY*/
body, p, input, textarea {
    font-family: "Montserrat-Light", sans-serif !important;
}
h1, h2, h3, h4, h5, h6, button, select, .main-navigation a, a.more-link, #menu-top-menu a {
    font-family: "Montserrat-Medium", sans-serif !important;
    
}
a {
    font-family: "Montserrat-MediumItalic", sans-serif !important;
    text-decoration: none;
    color: var(--link-color);
}
h1, h2,h1 a, h2 a{
font-style: normal !important;
color: var(--headline-color) !important;
}
h3, h4, h3 a, h4 a, .datum{
font-style: normal !important;
color: var(--secondary-color) !important;
}
h5, h6,h5 a, h6 a{
font-style: normal !important;
color: var(--terracotta-color) !important;
}

html, body{
  overflow-x: clip;
}

/* Fallback für Browser ohne clip */
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

button, .more {
    background-color: var(--terracotta-color);
    color: #fff;
    height: 50px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    text-align: center;
  }

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:root{
  --opp-beige: #f3ebde;
  --opp-white: #ffffff;
  --opp-red: #b51d28;
  --opp-green: #92a76e;
  --opp-terracotta: #d47f3c;
  --opp-lila: #9c7ca5;

  --opp-text: #2a2a2a;
  --opp-muted: #666;
  --opp-border: rgba(0,0,0,.10);

  --opp-radius: 8px;
  --opp-shadow-soft: 1px 10px 30px rgba(0, 0, 0, .28);

  /* Wellenhöhe Header responsive */
  --opp-wave-h: clamp(160px, 18vw, 300px);

  /* Button */
  --opp-btn-pad-y: 12px;
  --opp-btn-pad-x: 18px;
  --opp-btn-letter: .4px;
}

/* Basic reset/fix */
body{ margin:0 !important; }

/* Fullwidth Fix (Classic Themes) */
.alignfull{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}


/*============================
Chronologie Filter
=============================*/
/* .trigger{

}
      .cf-chronologie{

  margin:0;
}
ul.cf-chronologie{

   margin: 0;
   font-size: 80%;
   font-weight: 800;
 }
.cf-chronologie li{
list-style: none;

  }
  ul.cf-chronologie{
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  }
.chrono-date{

}
.chrono-meta{
vertical-align: top;

margin: 0 0 1em;
}
.datum{
  text-align: right
}
  
.su-spoiler.title-top-right .su-spoiler-title {
      float: right;
     
      padding-right: 10px;
  }
   */

  /*========================================
  Archive (Chronologie)
  =======================================  */

 .chronologie-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 1.5rem;
   margin-top: 2rem;
 }
 
 .chronologie-grid article {
   position: relative;
   background: #fff;
   padding: 1rem 1rem 3rem 1rem;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
   display: flex;
   flex-direction: column;
 }
 
 .chronologie-grid article h2 {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
 
 .chronologie-grid article .chrono-date {
   font-size: 0.9rem;
   color: #666;
   margin-bottom: 1rem;
 }
 
 .chronologie-grid article .datum {
   font-weight: 600;
 }
 
 .grid-footer{
   /* display: flex; 
   justify-content: flex-end; */
   position: absolute;
   bottom:1rem;
   right: 1rem;
   text-align: end;
 }
 .grid-footer a{
   background-color: var(--terracotta-color);
   color: #fff;
   height:35px;
   border: none;
   border-radius: 5px;
   font-size: 1em;
   text-align: center;
   width: 150px;
   display: block;
   padding: 0.6rem 0 0 0;
 }

 .meta-img{
   display: block;
 }
.cat-img img {
   width: 100% !important;
   border: none !important;
   height: auto;
 }

  /** =======================================
 Pagination
 =======================================*/
 
 .page-numbers{
   padding: 5px;
   border-right: 0.5px solid #ccc;
 }
 .nav-links{
   padding: 5px;
   border: 0.5px solid #ccc;
   border-radius: 5px;
   background: #fff;
   display: initial;
   
 }
 .pagination{
   margin: 2em 0;
 }
 .next.page-numbers{
   border-right: 0 !important;
 }
 .page-numbers:hover{
  background: #efefef !important;
 }
 .page-numbers.current{
   background: transparent;
 }
 
/* ===============================================
* Single post-navigation (pre/next)
================================================*/
.navigation.post-navigation{
  display: flex;
  gap: 0 30px;
  
}

.navigation.post-navigation .nav-links {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
  background: var(--secondary-color);

}
  .navigation.post-navigation .nav-links a{
    color:#fff;
  }
.nav-next::before {
float: right;
content: "»»";
margin-left: 1em;
}

.nav-previous::after {
float:left;
content: "««"; 
margin-right: 0.5em;

}
.nav-next, .nav-previous{
  width:45%
}
.nav-next {
  text-align: end;
 
}
.single article img{
  max-width: 300px;
  height: auto; float:left;
 margin: 5.5em 2em 2em 0;
}
.single article .cat-img img{
  max-width: 500px !important;
 margin: 1em 2em 0 0;
}


/* ===============================================
Navigation Social Links
================================================== */
#menu-top-menu{
float:right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.header-social-block {
  float: right;
  margin-top: 6px;
}
.header-social-block a{
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
overflow: hidden;
width: 1px;
}

.social-links {
  margin-top: 0;
  float: right;
}

.social-links ul li {
  float: left;
}

.social-instagram > a > .screen-reader-text,
.social-facebook > a > .screen-reader-text,
.social-bluesky > a > .screen-reader-text,
.social-bluesky > a > .screen-reader-text, 
.social-sprachen > button > .screen-reader-text{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.social-sprachen button img {
  width: 28px;
  height: 28px;
  margin-top: -10px;

}

/****** SVG Welle ******/

/* 1) harte Resets gegen 20px-Rand (Browser + Theme) */
body{ margin: 0 !important; }

.site-header,
.header-top,
.header-wave,
.header-wave__svg{ margin: 0 !important; padding: 0 !important; }

/* Container max-width */
.container{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  /*padding-bottom: 20px;*/
}

/* Skip link (WCAG) */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: #fff;
  color: #000;
  padding: 10px 14px;
}
.skip-link:focus{
  left: 10px;
  top: 10px;
  outline: 3px solid #000;
}

/* 2) deine Welle */
:root{
  --wave-wrap: clamp(110px, 12vw, 220px);
  --wave-svg:  clamp(180px, 24vw, 420px);
  --wave-buffer: 16px;
}

.site-header{
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  isolation: isolate;
}

.site-header .container{
  position: relative;
  z-index: 2;
}

.header-wave{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wave-wrap);
  z-index: 1;
  pointer-events: none;
}

.header-wave__svg{
  width: 100%;
  height: var(--wave-svg);
  display: block;
}

.header-bottom{
  margin-top: calc((var(--wave-svg) - var(--wave-wrap)) + var(--wave-buffer));
}

.header-bottom h1{ margin-top: 0; }

/* 3) Hero Grid (links Text+Button, rechts Bild) */
.header-hero{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px){
  .header-hero{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.lcp-readmore-button {
    background-color: #92a76e;
    color: #fff;
    border-radius: 0 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
}

.header-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px; /* Touch target */
  padding: 20px 50px !important;
  text-decoration: none;
}

.header-hero__media{
  width: 100%;
}

.header-hero__placeholder{
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #e9e9e9;
  border: 2px dashed #bdbdbd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-hero__placeholder span{
  padding: 10px 12px;
}



/* =========================================================
   ELEMENTE:
   - Buttons: radius 8px, font-weight 600
   - Buttons außerhalb Gridbox: background var(--opp-red)
   - Buttons in Gridbox: background var(--opp-green), width 60%
   - Gridboxen: radius 8px + leichter Schatten
   - Responsive: Grid/Boxen 100% (1 Spalte), Gridbox-Buttons 100%
   - Button-Ausrichtung via .pos_links / .pos_right / .pos_center
========================================================= */

/* Container */
.opp-container,
.wp-block-group.opp-container{
  max-width: 1320px;
  margin-left:auto;
  margin-right:auto;
  padding-left: 0;
  padding-right: 0;
  padding-top: 50px;
  padding-bottom: 50px;
}
@media (max-width: 900px){
  .opp-container,
  .wp-block-group.opp-container{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Sections */
.opp-section{ position:relative; }
.opp-bg-beige{ background:var(--opp-beige); }
.opp-bg-white{ background:var(--opp-white); }

.opp-pad-hero{ padding:50px 0 100px 0; }
.opp-pad-lg{ padding:0 0 0 0; }
.opp-pad-md{ padding:100px 0 50px 0; }

/* Visually hidden (für a11y Überschriften) */
.opp-visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Typo */
.opp-section h2{
  color:var(--opp-red);
  line-height:1.15;
  margin:0 0 14px;
}
.opp-section h3{
  color:var(--opp-green);
  margin:0 0 10px;
}
.opp-section h4,
.opp-section h5,
.opp-section h6{ color:var(--opp-terracotta); }

.opp-section p, .opp-section li{
  color:var(--opp-text);
  line-height:1.65;
}

/* Standard-Link (nicht Button) */
.opp-section a:not(.wp-element-button):not(.wp-block-button__link){
  color:var(--opp-green);
  text-underline-offset: .2em;
}
.opp-section a:not(.wp-element-button):not(.wp-block-button__link):hover{
  text-decoration: underline;
}

/* =========================================================
   BUTTONS – zentrale Regeln
   - Default: rot (außerhalb Gridbox)
   - In .opp-gridbox: grün + 60%
========================================================= */

/* 1) Basis für alle Button-Elemente / Button-Links */
.wp-element-button,
.wp-block-button__link,
button.wp-element-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  padding: var(--opp-btn-pad-y) var(--opp-btn-pad-x);
  border-radius: var(--opp-radius);
  border: 0;
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: var(--opp-btn-letter);

  font-weight: 600;               /* gefordert */
  line-height: 1.2;

  cursor:pointer;
}

/* 2) Default-Farbe: Buttons außerhalb Gridbox = rot */
.wp-element-button,
.wp-block-button__link{
  background: var(--opp-red);
  color:#fff !important;
}

/* 3) Gridbox-Regel: Buttons in Boxen = grün + 60% */
.opp-gridbox .wp-element-button,
.opp-gridbox .wp-block-button__link{
  background: var(--opp-green);
  color: /*var(--opp-white)*/#212121 !important;
  width: 40%;
}

/* 4) Hover/Focus: WCAG-sichere Fokus-Umrandung */
.wp-element-button:hover,
.wp-block-button__link:hover{
  filter: brightness(.95);
}
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible{
  outline: 3px solid rgba(181, 29, 40, .45);
  outline-offset: 3px;
}

/* Responsive: Gridbox-Buttons 100% */
@media (max-width: 980px){
  .opp-gridbox .wp-element-button,
  .opp-gridbox .wp-block-button__link{
    width: 88%;
  }
}

/* =========================================================
   Button-Position Utilities (individuell pro Wrapper)
   Nutze am Wrapper: .wp-block-buttons.pos_links / .pos_right / .pos_center
========================================================= */

.wp-block-buttons.pos_links{ justify-content:flex-start; text-align:left; }
.wp-block-buttons.pos_right{ justify-content:flex-end; text-align:right; }
.wp-block-buttons.pos_center{ justify-content:center; text-align:center; }

/* Falls Buttons NICHT in wp-block-buttons liegen */
.pos_links{ justify-content:flex-start; text-align:left; }
.pos_right{ justify-content:flex-end; text-align:right; }
.pos_center{ justify-content:center; text-align:center; }

/* =========================================================
   HERO
========================================================= */
.opp-hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
@media (min-width:900px){
  .opp-hero-grid{
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:28px;
  }
}
.opp-hero-media img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   WAVE DIVIDER (UNVERÄNDERTES SVG, nur Layout-Fix)
========================================================= */
.opp-divider{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  line-height: 0 !important;
  display:block !important;
  margin-top:-1px;
}
.opp-divider svg{
  width:100% !important;
  max-width:100% !important;
  height:var(--opp-wave-h) !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform: translateY(1px);
}
.opp-divider--bg-beige{ background:var(--opp-beige); }
.opp-divider--bg-white{ background:var(--opp-white); }
.opp-divider--bg-green{ background:var(--opp-green); }
/* =========================================================
   GRIDBOXEN – Radius + leichter umlaufender Schatten
   Markiere Karten/Boxen mit .opp-gridbox
========================================================= */
.opp-gridbox{
  border-radius: var(--opp-radius);
  box-shadow: var(--opp-shadow-soft);
  overflow:hidden;                 /* sauberer Radius bei Bildern/Footern */
  background:#fff;
}

/* =========================================================
   Service Grid (3 Boxen)
========================================================= */
.opp-service-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
}
@media (max-width:980px){
  .opp-service-grid{ grid-template-columns:1fr; }
}

.opp-service-card{
  border: 1px solid var(--opp-border);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.opp-service-head{
  background: var(--opp-red);
  color: var(--opp-white);
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align:center;
  padding: 12px 14px;
}


h3.opp-service-head{
  color: var(--opp-white) !important;
}

.opp-service-body{
  padding: 16px 18px 14px;
  font-size: 15px;
}
.opp-service-sub{
  margin: 0 0 8px;
  color: var(--opp-red);
  font-weight: 600;
}
.opp-service-body p{ margin:0 0 10px; }
.opp-service-body p:last-child{ margin-bottom:0; color:var(--opp-muted); }

.opp-service-cta{
  margin-top:auto;
  padding: 14px 18px 18px;
}

/* =========================================================
   Karten Grid (Aktuelles / Publikationen)
========================================================= */
.opp-card-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
  padding-bottom: 100px;
  padding-top: 50px;
}
@media (max-width:980px){
  .opp-card-grid-3{ grid-template-columns:1fr; }
}

.opp-postcard{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
/* Neuer Bildcontainer mit 5:4 Verhältnis */
.opp-postcard__media {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 150%; /* 5:4 Seitenverhältnis */
  overflow: hidden;
  flex-shrink: 0;
}

/* Bild absolut positioniert und zugeschnitten */
.opp-postcard__media img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: top center;
  min-width: 100%;
  min-height: 100%;
  display: block;
}

.opp-postcard__body {
  padding: 18px;
  flex: 1;
}
.opp-postcard__body h3{
  margin:0 0 10px;
  color:var(--opp-text);
  font-size:18px;
}
.opp-postcard__body p{ margin:0; color:var(--opp-muted); }

.opp-postcard__footer{
  padding: 14px 18px 18px;
}

/* =========================================================
   OPP Zitat-Slider

========================================================= */

/* ===== Grundlayout (wie ursprünglich) ===== */
.opp-quote-wrap{
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}

.opp-quote{
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 18px);
  margin: 0 0 8px;
}
.opp-quote p{ margin: 0; }

.opp-quote-caption{ margin: 0; }

.opp-quote-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  position: relative;
  z-index: 5; /* sicher über dem Slider */
}

/* ===== Pfeile (rechteckig wie Original) ===== */
.opp-arrow{
  width: 42px;
  height: 42px;
  border: 1px solid var(--opp-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  color: var(--opp-red);
  font-weight: 600;
  user-select: none;
  border-radius: 0;   /* <- eckig */
  cursor: pointer;
}

/* ===== Dots (optisch wie Original) ===== */
.opp-dots{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.opp-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  display: inline-block;
  cursor: pointer;
  position: relative;
}

/* Größere Klickfläche für Dots (ohne Optik zu ändern) */
.opp-dot::before{
  content: "";
  position: absolute;
  inset: -8px;
}

/* Fokus sichtbar (WCAG) */
.opp-arrow:focus-visible,
.opp-dot:focus-visible{
  outline: 3px solid rgba(181, 29, 40, .45);
  outline-offset: 3px;
}

/* ===== Radios unsichtbar, aber nutzbar ===== */
.opp-quote-radio{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   Slider (Auto)
========================================================= */
.opp-quote-viewport{
  overflow: hidden;
}

.opp-quote-track{
  display: flex;
  width: 400%;               /* 4 Slides */
  transform: translateX(0%);
  transition: transform .45s ease;
  will-change: transform;
  animation: oppQuoteAuto 20s infinite;
}

.opp-quote-slide{
  width: 25%;                /* 1/4 */
  padding: 0 12px;
}

/* Auto-Slide Stops (4 Slides) */
@keyframes oppQuoteAuto{
  0%   { transform: translateX(0%); }
  22%  { transform: translateX(0%); }

  28%  { transform: translateX(-25%); }
  50%  { transform: translateX(-25%); }

  56%  { transform: translateX(-50%); }
  78%  { transform: translateX(-50%); }

  84%  { transform: translateX(-75%); }
  100% { transform: translateX(-75%); }
}

/* =========================================================
   Pfeile: Auto + Klickbar (robust)
   HTML hat pro Slot 4 Labels (für 4 Slides)
   Wir blenden per visibility ein/aus (stabiler als pointer-events in Keyframes)
========================================================= */
.opp-arrow-slot{
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

/* alle Pfeil-Labels übereinander */
.opp-arrow-slot .opp-arrow{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

/* Sichtbarkeits-Animation: jedes Label ~5s sichtbar */
@keyframes oppVisArrow{
  0%   { opacity: 1; visibility: visible; }
  24%  { opacity: 1; visibility: visible; }
  25%  { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}

/* Auto: 4 Labels pro Slot, zeitversetzt */
.opp-arrow-slot .opp-arrow:nth-child(1){ animation: oppVisArrow 20s infinite; }
.opp-arrow-slot .opp-arrow:nth-child(2){ animation: oppVisArrow 20s infinite; animation-delay: -5s; }
.opp-arrow-slot .opp-arrow:nth-child(3){ animation: oppVisArrow 20s infinite; animation-delay: -10s; }
.opp-arrow-slot .opp-arrow:nth-child(4){ animation: oppVisArrow 20s infinite; animation-delay: -15s; }

/* =========================================================
   Dots
========================================================= */

@keyframes oppDotActive{
  /* Während Delay: inaktiv */
  0%   { background: rgba(0,0,0,.18); }
  /* Direkt nach Start aktiv */
  1%   { background: var(--opp-red); }
  24%  { background: var(--opp-red); }
  25%  { background: rgba(0,0,0,.18); }
  100% { background: rgba(0,0,0,.18); }
}

.opp-dots .opp-dot{
  animation: oppDotActive 20s infinite;
  animation-fill-mode: backwards; /* wichtig: vor Delay bleibt es inaktiv */
}

/* Reihenfolge: 1 -> 2 -> 3 -> 4 (links nach rechts) */
.opp-dots .opp-dot:nth-child(1){ animation-delay: 0s; }
.opp-dots .opp-dot:nth-child(2){ animation-delay: 5s; }
.opp-dots .opp-dot:nth-child(3){ animation-delay: 10s; }
.opp-dots .opp-dot:nth-child(4){ animation-delay: 15s; }

/* =========================================================
   Manuelle Steuerung (Klick)
   - Track springt
   - Auto pausiert (Track + Arrow/Dot Animation)
   - aktive Pfeile/Dots werden fix gesetzt
========================================================= */

/* Sobald geklickt wurde: Auto stoppen */
#opp-q1:checked ~ .opp-quote-viewport .opp-quote-track,
#opp-q2:checked ~ .opp-quote-viewport .opp-quote-track,
#opp-q3:checked ~ .opp-quote-viewport .opp-quote-track,
#opp-q4:checked ~ .opp-quote-viewport .opp-quote-track{
  animation-play-state: paused;
}

#opp-q1:checked ~ .opp-quote-nav .opp-arrow,
#opp-q2:checked ~ .opp-quote-nav .opp-arrow,
#opp-q3:checked ~ .opp-quote-nav .opp-arrow,
#opp-q4:checked ~ .opp-quote-nav .opp-arrow,
#opp-q1:checked ~ .opp-quote-nav .opp-dot,
#opp-q2:checked ~ .opp-quote-nav .opp-dot,
#opp-q3:checked ~ .opp-quote-nav .opp-dot,
#opp-q4:checked ~ .opp-quote-nav .opp-dot{
  animation: none !important;
}

/* Manuelle Position */
#opp-q1:checked ~ .opp-quote-viewport .opp-quote-track{ transform: translateX(0%) !important; }
#opp-q2:checked ~ .opp-quote-viewport .opp-quote-track{ transform: translateX(-25%) !important; }
#opp-q3:checked ~ .opp-quote-viewport .opp-quote-track{ transform: translateX(-50%) !important; }
#opp-q4:checked ~ .opp-quote-viewport .opp-quote-track{ transform: translateX(-75%) !important; }

/* Manuell: aktive Dot-Farbe */
#opp-q1:checked ~ .opp-quote-nav .opp-dots label[for="opp-q1"],
#opp-q2:checked ~ .opp-quote-nav .opp-dots label[for="opp-q2"],
#opp-q3:checked ~ .opp-quote-nav .opp-dots label[for="opp-q3"],
#opp-q4:checked ~ .opp-quote-nav .opp-dots label[for="opp-q4"]{
  background: var(--opp-red) !important;
}

/* Manuell: pro Slot genau ein Pfeil sichtbar (Index 1–4) */
#opp-q1:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow,
#opp-q2:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow,
#opp-q3:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow,
#opp-q4:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Der passende Pfeil (nth-child entspricht aktuellem Slide) */
#opp-q1:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow:nth-child(1),
#opp-q2:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow:nth-child(2),
#opp-q3:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow:nth-child(3),
#opp-q4:checked ~ .opp-quote-nav .opp-arrow-slot .opp-arrow:nth-child(4){
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   Accessibility: Reduced motion -> Auto aus
========================================================= */
@media (prefers-reduced-motion: reduce){
  .opp-quote-track{
    animation: none;
    transition: none;
  }
  .opp-arrow,
  .opp-dot{
    animation: none !important;
  }
}



/* =========================================================
   Chronologie
========================================================= */
.opp-chrono-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:22px;
}
@media (max-width:980px){
  .opp-chrono-grid{ grid-template-columns:1fr; }
  .opp-postcard__media img { width: 100%; }
  .opp-pad-lg { padding: 50px 0 50px 0; }
  .breadcrumb {display:none;}
}	

.opp-chrono__top{ padding:18px; }
.opp-chrono__top h3{ color:var(--opp-text); margin:0 0 8px; }
.opp-chrono__top p{ margin:0; color:var(--opp-muted); }

.opp-chrono__bottom{
  padding:18px;
  background: var(--opp-red);
  color:#fff;
}
.opp-chrono .opp-chrono__bottom{
  background-color: var(--opp-white) !important;
  color: var(--opp-text) !important;
}
.opp-chrono__bottom p{ margin:0 0 12px; color:#fff; }
.opp-chrono__bottom p,
.opp-chrono__bottom a{
  color: /*var(--opp-white)*/#212121 !important;
}

.opp-chrono .opp-postcard__media {
    position: relative;
    /*width: 95%!important;*/
    /*padding-top: 25px;*/
}

/* =========================================================
   Newsletter Section – Fix: Text zentriert, Input überlappt nicht
========================================================= */

/* Beige Block */
.opp-news-box{
  background: var(--opp-beige);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden; /* Safety: verhindert visuelle Überläufe */
}

/* 3-Spalten Grid */
.opp-news-grid{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.2fr) auto;
  gap: 16px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

/* Spalte 1: zentriert im Gridfeld */
.opp-news-text{
  font-weight: 600;
  font-size: 25px;
  color: var(--opp-text);
  text-align: left;     /* <- zentriert */
  justify-self: left;   /* <- zentriert im Grid */
}

/* Spalte 2: Input darf nicht aus dem Feld laufen */
.opp-news-field{
  min-width: 0; /* <- WICHTIG in CSS Grid, verhindert Overflow */
}

.opp-news-input{
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;

  min-height: 52px;        /* ← sorgt für angenehme Höhe */
  padding: 0 18px;         /* ← nur horizontal */
  line-height: 52px;       /* ← Text perfekt vertikal zentriert */

  border-radius: 8px;
  border: 1px solid var(--opp-border);
  background: #ffffff;
  color: #000;
  font-size: 16px;         /* etwas größer = ruhiger */
}

.opp-news-input::placeholder{
  color: rgba(0,0,0,.55);
}

.opp-news-input:focus-visible{
  outline: 3px solid rgba(181,29,40,.35);
  outline-offset: 2px;
}

/* Spalte 3: Button */
.opp-news-cta{
  justify-self: end;
}

.opp-news-btn{
  background: var(--opp-red);
  color: var(--opp-white);
  border: 0;
  border-radius: 8px;
  padding: 14px 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.opp-news-btn:hover{
  filter: brightness(.92);
}

.opp-news-btn:focus-visible{
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 900px){
  .opp-news-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .opp-news-text{
    justify-self: center;
  }

  .opp-news-cta{
    justify-self: stretch;
  }

  .opp-news-input{
    max-width: 100%;
  }

  .opp-news-btn{
    width: 100%;
  }
}

/* Rechte-Gewalt-Buttons: 3er Grid mit sichtbarem Abstand auf Desktop */
@media (min-width: 901px){
  .wp-block-buttons.opp-buttons-row{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;              /* Abstand zwischen Spalten */
    align-items: stretch;
  }

  .wp-block-buttons.opp-buttons-row .wp-block-button{
    margin: 0 !important;              /* Theme-Margins killen */
    width: 100% !important;
  }

  /* Das ist dein funktionierender Ansatz – aber sauber zentriert */
  .wp-block-buttons.opp-buttons-row .wp-block-button__link,
  .wp-block-buttons.opp-buttons-row .wp-element-button{
    width: 92% !important;             /* sorgt für Luft innerhalb der Spalte */
    justify-self: center;              /* Grid: mittig in der Zelle */
    margin-left: auto !important;      /* Fallback, falls Theme Grid "stört" */
    margin-right: auto !important;
  }
}

/* Mobile: untereinander, volle Breite */
@media (max-width: 900px){
  .wp-block-buttons.opp-buttons-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .wp-block-buttons.opp-buttons-row .wp-block-button__link,
  .wp-block-buttons.opp-buttons-row .wp-element-button{
    width: 90% !important;
	  margin-top: 10px;
  }
}


/* =========================================================
   Footer – grün, weiß, Logo links, Links mittig, Social rechts
========================================================= */
.opp-footer{
  background: /*var(--opp-green)*/#9c7ca5;
  color: /*var(--opp-white);*/#212121;
}

.opp-footer__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
}

/* Brand */
.opp-footer__brand{
  display: flex;
  align-items: center;
  gap: 12px;
}
.opp-footer__brand-link{
  color: /*var(--opp-white)*/#212121;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.opp-footer__brand-link:focus-visible{
  outline: 3px solid /*rgba(255,255,255,.7);*/#212121;
  outline-offset: 3px;
}

/* Falls WP Custom Logo ausgegeben wird */
.opp-footer__brand .custom-logo{
  max-height: 34px;
  width: auto;
  display: block;
}

/* Nav */
.opp-footer__nav{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.opp-footer__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.opp-footer__menu a{
  color:  /*var(--opp-white)*/#212121;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.opp-footer__menu a:hover{
  text-decoration: underline;
  text-underline-offset: .2em;
}
.opp-footer__menu a:focus-visible{
  outline: 3px solid /*rgba(255,255,255,.7)*/#212121;
  outline-offset: 3px;
}

/* Social */
.opp-footer__social{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 90px;
}
.opp-footer__social-link{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid /**/#212121;
  color: var(--opp-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 600;
}
.opp-footer__social-link:hover{
  background: /*rgba(255,255,255,.25)*/#212121;
}f
.opp-footer__social-link:focus-visible{
  outline: 3px solid /*rgba(255,255,255,.7)*/#212121;
  outline-offset: 3px;
}

/* Bottom line */
.opp-footer__bottom{
  border-top: 1px solid /*rgba(255,255,255,.25)*/#212121;
}
.opp-footer__copy{
  margin: 0;
  padding: 10px 0 14px;
  font-size: 12px;
  opacity: .9;
  color: #212121;
}

/* Responsive */
@media (max-width: 900px){
  .opp-footer__inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .opp-footer__nav{
    justify-content: center;
  }

  .opp-footer__social{
    justify-content: center;
  }
}




/* ======================================================================
   Hotfix CSS Utilities – klassisch, ohne Variablen, bibliotheksfrei
   Skala:
     px: 0–60 (in 10er-Schritten)
     rem: 1–6 (in 1er-Schritten)
   Benennung (Beispiele):
     padding-20              => padding: 20px
     padding-20-0-40-10      => padding: 20px 0 40px 10px
     margin-0-0-20-0         => margin: 0 0 20px 0
     min-height-rem-4        => min-height: 4rem
     max-width-60            => max-width: 60px
     line-height-15          => line-height: 1.5
     top-30 / left-10        => Offsets (px)
     gap-20 / gap-rem-2      => Lücke für Grid/Flex (beide Achsen)
   ====================================================================== */

/* =====================================================
   0) Notwendige Anpassung durch Joomla 6
   ===================================================== */

/* IM MENÜ */

.opp-mainnav .icon-chevron-down:before {
    display: none !important;
}

.opp-mainnav .mod-menu button span {
    font-size: 1.35em;
    text-transform: uppercase !important;
    display: inline-flex;
    align-items: center;
    padding: .4rem 0;
}

@media (max-width: 1919.98px) {
    .opp-mainnav .mod-menu button span {
        font-size: 1.15em;
        padding: .5rem 0;
    }
}

@media (max-width: 1439.8px) {
    .opp-mainnav .mod-menu button span {
        font-size: 1.15em;
    }
}

@media (width <=991.98px) {

    .container-header .mod-menu .mod-menu__sub a,
    .container-header .mod-menu .mod-menu__sub span {
        color: #627E12 !important;
        font-size: 1.35em;
    }
}