/*
Theme Name: Soziale Dienste Leiblachtal (Full Refactor)
- Typografie: rem (Basis 1rem = 18px über --font-scale)
- Layout/Spacing: bleibt px (stabil bei Schriftvergrößerung)
- Neue Fonts: Mefta (Base), Mefta01 (Hero)
*/

/* =========================
   FONTS (self-hosted)
   ========================= */
@font-face{
  font-family: "Mefta";
  src: url("/wp-content/themes/sozialedienste-leiblachtal/assets/fonts/mefta-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face{
  font-family: "Mefta01";
  src: url("/wp-content/themes/sozialedienste-leiblachtal/assets/fonts/mefta-01.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


/* === Container Padding Tokens (ganz oben, damit es sicher greift) === */
@media (min-width: 2041px){
  :root{
     --container-pad-x: 460px; }
}

@media (max-width: 2040px){
  :root{
     --container-pad-x: 360px; }
}

@media (max-width: 1841px){
  :root{
     --container-pad-x: 260px; }
}

@media (max-width: 1641px){
  :root{
     --container-pad-x: 160px; }
}

@media (max-width: 1440px){
  :root{
     --container-pad-x: 120px; }
}

@media (max-width: 1100px){
  :root{ --container-pad-x: 96px; }
}

@media (max-width: 900px){
  :root{ --container-pad-x: 64px; }
}

@media (max-width: 600px){
  :root{ --container-pad-x: 24px; }
}


/* =========================
   OVERRIDES / TOKENS
   ========================= */
:root{
  --font-scale: 1; /* wird per JS (A-/A/A+) gesetzt */
  --font-sans: "Mefta", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-hero: "Mefta01", var(--font-sans);

  /* Nur Regular vorhanden → keine echten Bold-Schnitte */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* 1rem = 18px (skalierbar) */
html{
  font-size: calc(18px * var(--font-scale));
}
body{
  font-family: var(--font-sans);
}


/*
Theme Name: Soziale Dienste Leiblachtal
Theme URI: https://sozialedienste-leiblachtal.at
Author: Valentin Stroß
Author URI: https://uafach-alls.at
Description: Custom Theme für Soziale Dienste Leiblachtal
Version: 1.0.0
Text Domain: soziale-dienste-leiblachtal
*/


/* style.css */

/* --- Design Tokens (global) --- */
:root{
  --color-bg: #E5E2D8;
  --color-text: #020000;
  --color-muted: #626160;

  --color-footer-bg: #003333;
  --color-footer-text: #E5E2D8;

  /* Fachbereiche Farben */
  --color-blue: #003333;
  --color-green-light: #d4d1bd;
  --color-red: #e54036;
  --color-beige: #fcdbba;
  --color-brown: #5c421f;

  /* Typography */
  --font-scale: 1;

  --fs-16: 0.889rem;  /* 14px */
  --fs-18: 1rem;       /* 18px */
  --fs-24: 1.3333rem;  /* 24px */
--fs-26: 1.4444rem;  /* 26px */
--fs-36: 2rem;       /* 36px */
--fs-52: 2.8889rem;  /* 52px */
--fs-58: 3.2222rem;  /* 58px */

  --fs-mobile-h1: 2rem;       /* 36px */
  --fs-mobile-h2: 1.4444rem;  /* 26px */
  --fs-mobile-h3: 1.1111rem;       /* 20px */

  --fs-caption: 0.75rem;

  --lh-tight: 1.1rem;  /* 16px */
  --lh-base: 1.3333rem;  /* 24px */
  --lh-plus: 2rem;  /* 36px */
  --lh-wide: 2.8889rem;  

  --radius-1: 12px;

  --header-h: 96px;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --offer-icon: url("/wp-content/themes/sozialedienste-leiblachtal/assets/icons/arrow-right.svg");
}

@media (max-width: 900px){

:root{
--fs-16: 0.7778rem;  /* 14px */
--fs-18: 0.8889rem;  /* 16px */
--fs-26: 1.3333rem;  /* 24px */
--fs-36: 1.7778rem;  /* 32px */
--fs-52: 2.667rem;  /* 48px */

--lh-base: 1.2rem;
  --lh-wide: 2.3rem;  
  --lh-plus: 1.3333rem;
  
  --header-h: 80px;
}
}


/* Normal */
.c-team__img,
.c-offer__image,
.c-post-card__image {
  filter: grayscale(100%);
  transition: filter .3s ease;
}

/* Hover nur auf einzelne Card */
.c-team__card:hover .c-team__img,
.c-offer:hover,
.c-post-card__image:hover {
  filter: none;
}

/* Normalzustand */
.c-info__media img{
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

/* Nur wenn direkt über dem Bild */
.c-info__media img:hover{
  filter: none;
}

.c-info__media{
  position: relative;
  overflow: hidden; /* 🔑 wichtig */
}

.c-info__media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: none; /* 🔑 sonst “zieht” es hinterher */
}





/* =========================
   Typography – Headings
   ========================= */

h2, .h2{
  margin: 0;
  font-size: var(--fs-36);      /* ~40px */
    line-height: var(--lh-wide);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: currentColor;
  font-weight: var(--fw-semibold);
}

h3, .h3{
  margin: 0;
font-size: var(--fs-26);
line-height: var(--lh-wide);
  text-transform: uppercase;
  letter-spacing: 0.03em;
    color: currentColor;
      font-weight: var(--fw-regular);
}


/* --- Basis --- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
   font-weight: var(--fw-regular);
}

img{ max-width: 100%; height: auto; display: block; }

button{ font: inherit; color: inherit; }

/* =========================
   GLOBAL LINKS
   ========================= */

a{
  color: inherit;
  text-decoration: none;
}

.caption{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  letter-spacing: 0.02em;
  text-transform: uppercase;
    letter-spacing: 0.03em;
}

.c-offer,
section[id]
{
  scroll-margin-top: 120px;
}

/* Formular-Anker Offset (wegen Sticky Header) */
.c-form{
  scroll-margin-top: 80px; /* 🔧 Wert nach Bedarf */
}



/* Fließtext-Links klar erkennbar */
p a,
.text-content a,
.entry-content a,
.footer-text a,
.footer-links a{
  text-decoration: underline;
}

/* Interaktion (Navigation + Text) */
a:hover,
a:focus-visible{
  text-decoration: underline;
}


/* Focus (für Tastatur) */
:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Fokus-Outline auf Touch-Geräten (Handy/Tablet) deaktivieren */
@media (hover: none) and (pointer: coarse){
  :focus,
  :focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
}


/* --- Header --- */
.site-header{
  height: var(--header-h);
  background: var(--color-bg);
    position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header__inner{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--container-pad-x);
}

.site-header__brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
    justify-self: start;
  width: fit-content;
}


/* Logo: funktioniert für PNG & SVG zuverlässig */
.site-header__logo{
  display: block;
  height: 40px;     /* deine Logo-Höhe im Header */
  width: auto;
  max-width: 240px; /* wichtig: verhindert dass das Grid „auseinanderzieht“ */
  flex-shrink: 0;
}


.site-header__brand-text{
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.site-header__center-icon{
  justify-self: center;
}

.menu-toggle{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
    letter-spacing: 0.03em;

  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: 1;
    padding: var(--space-2);
}

/* Label minimal optisch nach unten */
.menu-toggle__label{
  position: relative;
  top: 0.1em;                 /* 0.04–0.08em feinjustieren */
}

.drawer__close-label{
    position: relative;
  top: 0.1em;                 /* 0.04–0.08em feinjustieren */
}



.menu-toggle__icon{
  width: 24px;
  height: 24px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  margin-left: 4px;
}

.menu-toggle__icon span{
  height: 2px;
  width: 18px;
  background: var(--color-text);
  display:block;
}

/* --- Drawer Overlay --- */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 1100;
}

/* --- Drawer --- */
.drawer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
}

.drawer__inner{
  pointer-events: auto;
  position: absolute;
  top: 0;
  right: 0;

  height: 100dvh; /* full screen (mobile safe) */
  width: min(520px, 100%);
  background: var(--color-bg);

  padding: 36px 120px 40px 80px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  gap: var(--space-10);

  overflow: auto; /* <<< wichtig: gesamter Drawer scrollt */
  -webkit-overflow-scrolling: touch;

  transform: translateX(100%);
  transition: transform 220ms ease;
}

.drawer.is-open .drawer__inner{
  transform: translateX(0);
}

.drawer__close{
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding-right: 4px;
  cursor: pointer;
    letter-spacing: 0.03em;

  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: 1;
}

.drawer__close-x{
  font-size: var(--fs-18);
  line-height: 1;
}

/* Navigation links */
.drawer-menu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.drawer-menu a{
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

.drawer-menu a:hover,
.drawer-menu a:focus-visible{
  text-decoration: underline;
}

/* Themen block */
.drawer__section-title{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: 24px;
  margin-bottom: var(--space-2);
    letter-spacing: 0.03em;
}

.drawer-submenu{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.drawer-submenu__link{
  text-decoration: none;
  font-size: var(--fs-18);
  line-height: 24px;
  color: var(--color-muted);
}

.drawer-submenu__link:hover,
.drawer-submenu__link:focus-visible{
  color: var(--color-text);
  text-decoration: underline;
}

.c-header__contact{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end; /* falls rechts im Header */
}

.site-header__right{
  margin-left: auto;            /* drückt den rechten Block ganz nach rechts */
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Drawer/Footer: Links sollen wie normaler Text aussehen */
.footer-links a,
.drawer__footer-links a,
.footer-brand a{
  font-family: inherit;
  font-size: font-size: var(--fs-18);
  text-decoration: underline; /* oder none */
}




/* Footer (direkt nach Nav – NICHT nach unten drücken) */
.drawer__footer{
  margin-top: 0; /* <<< wichtig: war vorher auto */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  line-height: var(--lh-base);
  background: var(--color-blue);
  color: var(--color-bg);

  /* Full-bleed innerhalb des gepaddeten Drawers */
  margin-left: -80px;
  margin-right: -120px;
  margin-bottom: calc(-40px - env(safe-area-inset-bottom));

  /* Innenabstand wieder herstellen */
  padding: 64px 120px 40px 80px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

@media (max-width: 900px){
.drawer__footer{

  /* Full-bleed innerhalb des gepaddeten Drawers */
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: calc(-40px - env(safe-area-inset-bottom));

    /* Innenabstand wieder herstellen */
  padding: 48px 24px 0px 24px;
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}
}


.drawer__footer-logo img{
  width: 213px;
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.drawer__footer-links{
  display:flex;
  flex-direction: column;
  gap: var(--space-2);
}

.drawer__footer-link{
  font-size: var(--fs-18);
  line-height: 1.37;
  text-decoration: underline;
}

/* Drawer Menü – Unterpunkte sichtbar + sauber eingerückt */
.drawer-menu .sub-menu{
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* optional: Unterpunkte etwas „leichter“ */
.drawer-menu .sub-menu a{
  color: var(--color-muted);
    text-transform: none;   /* 👈 nicht uppercase */
  font-size: var(--fs-18);        /* optional: etwas ruhiger */
}

.drawer-menu .sub-menu a:hover,
.drawer-menu .sub-menu a:focus-visible{
  color: var(--color-text);
  text-decoration: underline;
}

@media (max-width: 900px){
.drawer__accessibility-title,
.drawer-menu .sub-menu a,
.drawer-menu a {
  font-size: 1.1rem;
    line-height: 1.4rem;
}
}


/* Scroll lock (wenn Drawer offen) */
body.is-locked{
  overflow: hidden;
}

/* Responsive */
@media (max-width: 900px){

  .drawer__inner{
    padding: 24px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .site-header__inner{
    grid-template-columns: auto 1fr auto;
  }

  .site-header__center-icon{
    justify-self: center;
  }
}

@media (max-width: 1200px){
  .font-size-controls--header,
  .gtranslate_wrapper--header{
    display: none;
  }
}

@media (max-width: 900px){

  /* Mittleres Icon im Header ausblenden */
  .site-header__center-icon{
    display: none;
  }

  /* "Menü öffnen" Text ausblenden – Icon bleibt */
  .menu-toggle__label{
    display: none;
  }

}

@media (max-width: 900px){
  .drawer__close{
    padding: 6px 48px 0px 0px;  /* 👈 HIER ändern */
  }
}

@media (max-width: 600px){
  .drawer__close{
    padding: 4px 8px 0px 0px;  /* 👈 HIER ändern */
  }
}

/* Mobile: Header-Widget/Font controls ausblenden */
@media (max-width: 1200px){ .site-header__actions .font-size-controls--header,
.site-header__actions .gtranslate_wrapper--header{
  display: none;
}}

/* Menü-Icon (SVG statt Bars) */
.menu-toggle__icon-img{
  width: 24px;
  height: 24px;
  display: block;
}

/* Close-Icon */
.drawer__close-icon{
  width: 24px;
  height: 24px;
  display: block;
}

.drawer__accessibility{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.drawer__accessibility-title{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

.font-size-controls--drawer{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gtranslate_target,
.gtranslate_target *{
  max-width: 100%;
}


/* Falls noch alte Hamburger-Spans existieren */
.menu-toggle__icon{
  display: none;
}

.site-header__actions{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Schriftgröße Buttons */
.font-size-controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.font-btn{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

/* optional: kleiner Hover */
.font-btn:hover,
.font-btn:focus-visible{
  text-decoration: underline;
}

.gtranslate_wrapper{
  display: inline-flex;
  align-items: center;
}

/* falls das Widget ein <select> rendert */
.gtranslate_wrapper select{
  font: inherit;
  background: transparent;
  border: 0;
  text-transform: uppercase;
    letter-spacing: 0.03em;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  padding: 6px 8px;
  cursor: pointer;
}

.gtranslate_wrapper--drawer{
  display: inline-flex;
  align-items: center;
}


.gtranslate_wrapper select{
  appearance: none;          /* entfernt native Styles */
  -webkit-appearance: none;
  border: 1px solid var(--color-text);
  background: transparent;
}

/* Fokus-Stil (ersetzt den dicken schwarzen Rahmen) */
.gtranslate_wrapper select:focus,
.gtranslate_wrapper select:focus-visible{
  outline: none;
  border-color: var(--color-text);
}

.drawer{
  overflow-x: clip; /* verhindert, dass das raus-transformierte Panel die Seite verbreitert */
}
@supports not (overflow: clip){
  .drawer{ overflow-x: hidden; }
}

.drawer__inner{
  box-sizing: border-box; /* width=min(520px,100%) inkl padding */
}

/* --- Design Tokens (global) --- */

.site-footer{
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer__inner{
  padding: 40px var(--container-pad-x);
}

.site-footer__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 70px;
}

.footer-brand{
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand__logo{
  width: 239px;
  height: auto;
}

.footer-text,
.footer-links{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
}

.footer-links{
  display: flex;
  flex-direction: column; /* 👈 erzwingt neue Zeile */
  gap: 0px;               /* Abstand zwischen Tel & Mail */
}

/* Footer Social: Abstand vor Facebook-Überschrift */
.footer-col .footer-list + .footer-col__title{
  margin-top: 24px; /* Wert nach Geschmack */
   font-weight: var(--fw-regular);
}


.footer-columns{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 70px;
}

.footer-col__title{
  margin: 0 0 8px 0;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-transform: uppercase;
    letter-spacing: 0.03em;
       font-weight: var(--fw-regular);
}

.footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
}

.site-footer__bottom{
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.footer-copy{
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  opacity: 0.9;
}

.footer-legal{
  display: inline-flex;
  gap: 16px;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
}

/* Footer: verhindert Overflow im Bereich bis ~1350px */
@media (max-width: 1350px){

  .site-footer,
  .site-footer__inner{
    max-width: 100%;
  }

  .site-footer__top{
    gap: 40px;           /* statt 70px */
    max-width: 100%;
  }

  /* Brand darf nicht starre Breite erzwingen */
  .footer-brand{
    flex: 0 1 320px;     /* statt 0 0 360px */
    max-width: 100%;
    min-width: 0;
  }

  /* Grid-Spalten dürfen schrumpfen (minmax(0,1fr) ist KEY) */
  .footer-columns{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* statt 4 */
    gap: 24px;
    min-width: 0;
  }

  /* Links/Titel dürfen umbrechen statt zu drücken */
  .footer-col,
  .footer-list,
  .footer-list a{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
}

/* =========================
   HERO (reusable component)
   + Varianten (ACF hero_variant)
   ========================= */

.c-hero{
  padding: 80px var(--container-pad-x);
  background: var(--hero-bg, var(--color-bg));
  color: var(--hero-fg, var(--color-text));
}

.c-hero__inner{
  width: 100%;
  display: flex;
  justify-content: center;
}

.c-hero__content{
  width: min(635px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
    align-items: center;       /* Inhalt zentriert */
  text-align: center;        /* Text mittig */
}

/* Head (Title + Text) */
.c-hero__head{
  display: flex;
  flex-direction: column;
}

.c-hero__title{
  margin: 0;
  color: var(--hero-fg, var(--color-text));
  font-size: var(--fs-58);
  line-height: var(--lh-wide);       /* skaliert sauber */
  text-transform: uppercase;
    font-family: var(--font-hero);
      font-weight: var(--fw-semibold);
          letter-spacing: 0.02em;
}


.c-hero__text{
  color: var(--hero-fg, var(--color-text));
  font-size: var(--fs-26);
  line-height: var(--lh-plus);
  max-width: 60ch;
        font-weight: var(--fw-regular);
}

/* Actions */
.c-hero__actions{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================
   BUTTONS
   ========================= */

.c-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-transform: uppercase;
    letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid currentColor;
  background: transparent;
}

.c-btn__label{
  position: relative;
  top: 0.09em; /* 0.04–0.08em feinjustieren */
}

/* Button icon (external SVG) */
.c-btn__icon{
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Primary */
.c-btn--primary{
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* Secondary */
.c-btn--secondary{
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

/* =========================
   HERO Varianten (7 Stück)
   (setzt nur Farben)
   ========================= */

/* Default (heller BG) -> schwarzes Icon */
.c-hero--default{
  --hero-bg: var(--color-bg);
  --hero-fg: var(--color-text);
  --offer-toggle-icon: var(--icon-arrow-right-black);
}

/* dunkle Hintergründe -> weißes Icon */
.c-hero--aktion-demenz{
  --hero-bg: var(--color-green-light);
  --hero-fg: var(--color-brown);
  --offer-toggle-icon: var(--icon-arrow-right-white);
}

.c-hero--mobiler-hilfsdienst{
  --hero-bg: var(--color-red);
  --hero-fg: var(--color-beige);
  --offer-toggle-icon: var(--icon-arrow-right-white);
}

.c-hero--case-management{
  --hero-bg: var(--color-brown);
  --hero-fg: var(--color-green-light);
    --offer-toggle-icon: var(--icon-arrow-right-white);
}

/* helle Hintergründe -> schwarzes Icon */
.c-hero--soziale-arbeit{
  --hero-bg: var(--color-green-light);
  --hero-fg: var(--color-red);
  --offer-toggle-icon: var(--icon-arrow-right-black);
}

.c-hero--offene-jugendarbeit{
  --hero-bg: var(--color-blue);
  --hero-fg: var(--color-beige);
  --offer-toggle-icon: var(--icon-arrow-right-black);
}

.c-hero--tagesbetreuung{
  --hero-bg: var(--color-beige);
  --hero-fg: var(--color-red);
  --offer-toggle-icon: var(--icon-arrow-right-black);
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px){
  .c-hero{
    padding: 48px 16px;
    padding-inline: var(--container-pad-x);
  }

  .c-hero__content{
    gap: 24px;
  }

  .c-hero__title{
    font-size: var(--fs-52);
  }

  .c-hero__text{
    font-size: var(--fs-18); /* 16px */
  }

  .c-hero__actions{
    gap: 12px;
  }
}


/* =========================
   Themen-Bänder
   ========================= */

.fb-list{
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
  margin-top: 0px
}

.fb-link{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:40px;

  padding: 56px;

  text-decoration: none;
  text-align: center;
}

.fb-link__title{
  margin: 0;
  font-size: var(--fs-36);   /* 56px bei 16px Basis */
  text-transform: uppercase;
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
 font-weight: var(--fw-semibold);
}

/* Mobile */
@media (max-width: 900px){
  .fb-link{
   padding: 24px;
  }
  .fb-link__title{
    font-size: var(--fs-26);
    line-height: 1;
  }
}


/* ==================================================
   Newsletter (Theme Text + MailPoet Form #2: email + button)
   ================================================== */

:root{
  --newsletter-max: 980px;
}

/* Section */
.c-newsletter{
  background: var(--color-bg);
  padding-inline: var(--container-pad-x);
  padding-bottom: 120px;
}

.c-newsletter--pt-120{ padding-top: 120px; }
.c-newsletter--pt-80{  padding-top: 80px;  }

.c-newsletter__inner{
  max-width: var(--newsletter-max);
  margin-inline: auto;
}

/* Explizite Content-Spur: mittig, Inhalt links */
.c-newsletter__content{
  width: min(100%, 720px);
  margin-inline: auto;
  text-align: left;
}

/* Text */
.c-newsletter__title{
  margin: 0 0 12px;
}

.c-newsletter__desc{
  margin: 0 0 22px;
  max-width: 60ch;
}

/* ==================================================
   MailPoet Form (innerhalb Newsletter)
   ================================================== */

/* MailPoet Defaults neutralisieren (nur im Newsletter-Block) */
.c-newsletter__form .mailpoet_form,
.c-newsletter__form form.mailpoet_form{
  width: 100%;
  margin: 0;
  padding: 0;
}

.c-newsletter__form .mailpoet_paragraph,
.c-newsletter__form .mailpoet_form_paragraph{
  margin: 0 !important; /* MailPoet setzt gern margin-bottom */
}

/* Input + Button nebeneinander */
.c-newsletter__form form.mailpoet_form{
  display: grid;
  grid-template-columns: 1fr auto; /* Feld | Button */
  gap: 14px;
  align-items: stretch;
}

/* Input */
.c-newsletter__form input.mailpoet_text,
.c-newsletter__form input[type="email"]{
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;

  background: transparent !important;
  border: 1px solid var(--color-text) !important;
  color: var(--color-text) !important;

  font: inherit;
  box-sizing: border-box;
  min-width: 0; /* verhindert Überlauf im Grid */
}

/* Button (ohne SVG) */
.c-newsletter__form input.mailpoet_submit,
.c-newsletter__form input[type="submit"],
.c-newsletter__form button{
  height: 44px !important;
  padding: 0 18px !important;

  background-color: var(--color-text) !important;
  color: var(--color-bg) !important;
  border: 1px solid var(--color-text) !important;

  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  width: auto !important;
}

/* MailPoet success/error message */
.c-newsletter__form .mailpoet_message{
  margin-top: 10px;
  font-size: var(--fs-18);
  text-align: left;
}

/* Abstand unter MailPoet Erfolgsmeldung */
.mailpoet_message {
  margin-top: -40px !important;
  margin-bottom: 40px !important;
}

/* ===================================================
   MAILPOET CAPTCHA – ALLES UNTEREINANDER
   =================================================== */

/* Container vertikal */
.mailpoet_captcha_container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 24px;
}


/* =========================
   Bild
   ========================= */

.mailpoet_captcha_image_wrapper img{
  max-width: 420px;
  width: 100%;
  height: auto;
  border: 1px solid #000;
  display: block;
}


/* =========================
   Icon Buttons unter Bild
   ========================= */

.mailpoet_icon_button{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end; /* ICON NACH RECHTS */
  padding-right: 10px;       /* etwas Abstand nach rechts */
  cursor: pointer;
}

/* Buttons nebeneinander */
.mailpoet_captcha_update,
.mailpoet_captcha_audio{
  margin-right: 10px;
}

/* Icon-Fallback */
.mailpoet_captcha_update::before{
  content: "↻";
  font-size: 18px;
}

.mailpoet_captcha_audio::before{
  content: "♪";
  font-size: 18px;
}


/* =========================
   Label
   ========================= */

.mailpoet_captcha_label{
  font-size: 14px;
  line-height: 1.6;
  margin-top: 4px;
}


/* =========================
   Input Feld
   ========================= */

.mailpoet_captcha_container input[type="text"]{
  border: 1px solid #000;
  background: transparent;
  padding: 12px;
  min-height: 44px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}

.mailpoet_validate_success{
  margin-top: -24px;
}

/* ==================================================
   Privacy text from theme
   ================================================== */

.c-newsletter__privacy{
  margin: 10px 0 0;
  max-width: 70ch;

  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-muted);
  text-align: left;
}

.c-newsletter__privacy a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}



/* ==================================================
   Mobile
   ================================================== */

@media (max-width: 768px){
  .c-newsletter{
    padding-inline: var(--container-pad-x);
    padding-bottom: 120px;
  }

  body.home.page .c-newsletter{
    padding-top: 64px;
  }

  .c-newsletter__content{
    width: 100%;
  }

  .c-newsletter__form form.mailpoet_form{
    grid-template-columns: 1fr; /* untereinander */
  }

  .c-newsletter__form input.mailpoet_submit,
  .c-newsletter__form input[type="submit"],
  .c-newsletter__form button{
    width: 100% !important;
  }
}


/* =========================
   INFORMATIONEN (reusable component)
   ========================= */

.c-info{
  padding: 80px var(--container-pad-x);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Layout: 2 Spalten wie in Figma */
.c-info__inner{
  width: 100%;
  max-width: 1120px;   /* 540 + 540 + gap */
  margin-inline: auto; /* zentriert */
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 540px);
  gap: 40px;
  align-items: center;
}

/* Bild */
.c-info__media{
  width: 100%;
}

.c-info__media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.c-info__content{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.c-info__head{
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Titel: Größe über Modifier, Tag (h2/h3) frei */
.c-info__title{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* „H2-Variante“ (Figma ~32px) */
.c-info--h2 .c-info__title{
  font-size: var(--fs-36);       /* 32px */
  line-height: 1.24;     /* ~39.7px */
    letter-spacing: 0.03em;
}


/* „H3-Variante“ (Figma ~24px) */
.c-info--h3 .c-info__title{
  font-size: var(--fs-26);     /* 24px */
  line-height: var(--lh-tight);     /* ~28.3px */
  letter-spacing: 0.03em;
}

.c-info__text{
  margin: 0;
  font-size: var(--fs-18); /* 16px */
  line-height: var(--lh-base);
  color: var(--color-text);
  max-width: 65ch;
}

/* Buttons (nutzt deine bestehenden .c-btn Styles) */
.c-info__actions{
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Layout-Modifier: Bild rechts */
.c-info--img-right .c-info__media{ order: 2; }
.c-info--img-right .c-info__content{ order: 1; }

/* Layout-Modifier: Bild links (Default, optional) */
.c-info--img-left .c-info__media{ order: 1; }
.c-info--img-left .c-info__content{ order: 2; }

/* ✅ c-info: verhindert horizontales Überlaufen (Mobile + generell robust) */
.c-info__inner,
.c-info__media,
.c-info__content{
  min-width: 0;            /* wichtig bei Grid/Flex */
}

.c-info__media img{
  max-width: 100%;
  height: auto;
}

/* Text darf umbrechen, auch bei langen Wörtern */
.c-info__title,
.c-info__text{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}


/* Responsive: untereinander */
@media (max-width: 900px){
  .c-info{
    padding: 48px var(--container-pad-x);
  }
}

@media (max-width: 720px){

  .c-info__inner{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .c-info__media{ grid-row: 1; }
  .c-info__content{ grid-row: 2; }

}


/* =========================
   Angebotskopf (Hero-Variante)
   ========================= */

.c-hero--angebot{
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 900px){
.c-hero--angebot{
margin-top: 80px;
}
}

.c-hero--angebot .c-hero__title{
  font-size: var(--fs-36);
  text-transform: uppercase;
    font-family: var(--font-sans);
}


body.home.page .c-hero--angebot .c-hero__title{
    font-family: var(--font-hero);
      font-size: var(--fs-58);
        line-height: 1.2;  
}

.c-hero__text.c-hero__text--section{
margin-top: 8px;
}

@media (max-width: 900px){
.c-hero.c-hero--section.c-hero--angebot{
    padding-bottom: 8px;
  }

  .c-hero--angebot{
  padding-top: 80px;
}
}


/* =========================
   ANGEBOTE (Filter + Accordion)
   ========================= */

.c-offers{
  background: var(--color-bg);
  padding-inline: var(--container-pad-x);
  padding-top: 0px;
  padding-bottom: 0px;
}

.c-offers__inner{
  display: grid;
  grid-template-columns: 363px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
    background: var(--color-bg);
}

/* Sidebar */
.c-offers__sidebar{
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  z-index: 5;
  background: var(--color-bg);
}

.c-offers__search{
  display: flex;
  align-items: center;
  gap: 12px;

  border: 1px solid var(--color-text);
  padding: 8px 16px;
  position: relative;
}


.c-offers__search-label{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

.c-offers__search-input{
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 0;
  padding-right: 40px; /* Platz für Icon */;
}

.c-offers__search-icon{
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px;
  height: 20px;

  background: url("/wp-content/themes/sozialedienste-leiblachtal/assets/icons/search-black.svg")
              no-repeat center / contain;

  pointer-events: none;
}

.c-offers__filters{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-offers__filters-title{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

.c-offers__filter{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-muted);
  text-align: left;
}

.c-offers__filter:hover,
.c-offers__filter:focus-visible{
  text-decoration: underline;
  color: var(--color-text);
}

.c-offers__filter.is-active{
  color: var(--color-text);
  text-decoration: none;
}

/* List / Accordion items */
.c-offers__list{
  display: flex;
  flex-direction: column;
}

/* Offer item – nutzt Hero-Varianten: --hero-bg / --hero-fg */
.c-offer{
  background: var(--hero-bg, var(--color-bg));
  color: var(--hero-fg, var(--color-text));
}

.c-offer + .c-offer{
  margin-top: 0; /* Figma wirkt wie direkt gestapelt */
}


.c-offer__summary::-webkit-details-marker{ display:none; }

.c-offer__subheader{
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--hero-fg, var(--color-text));
  opacity: .95;
}

.c-offer__title{
  margin-bottom: 0px;
  margin-top: 8px;
  font-size: var(--fs-36);
  line-height: var(--lh-plus);
  text-transform: uppercase;
  color: var(--hero-fg, var(--color-text));
    letter-spacing: 0.03em;
    font-family: var(--font-sans);
          font-weight: var(--fw-semibold);
}



/* "Mehr Infos" – Hierarchie 3, ohne Rahmen */
/* Toggle (Icon + Text) */
.c-offer__toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--hero-fg, var(--color-text));

}

.c-offer__toggle-label{
  position: relative;
  top: 0.08em; /* feinjustieren */
}

.c-offer__toggle-icon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

/* statt <img>: Masken-Span */
.c-offer__icon{
  width: 20px;
  height: 20px;
  display: block;

  -webkit-mask: var(--offer-icon) no-repeat center / contain;
  mask: var(--offer-icon) no-repeat center / contain;

  background-color: currentColor; /* ✅ passt sich automatisch an */
  transform: rotate(90deg);       /* geschlossen */
  transform-origin: 50% 50%;
}

/* geöffnet */
.c-offer[open] .c-offer__icon{
  transform: rotate(-90deg);
}


/* =========================
   Bilder immer schwarz-weiß
   (Offer + Single Post)
   ========================= */

.c-offer__figure img,
.c-post-single__figure img{
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important; /* Safari */
}

/* Sicherheit: auch bei Hover bleibt es schwarz-weiß */
.c-offer:hover .c-offer__figure img,
.c-post-single__figure:hover img{
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}

.c-offer__image{
  width: 100%;
  height: auto;
  display: block;
}

.c-offer__figcap{
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.c-offer__caption{
  text-align: left;
  opacity: .9;
}

.c-offer__copyright{
  text-align: right;
  opacity: .9;
}

/* Content blocks */
.c-offer__content{
  max-width: 750px;
}

.c-offer__block{
  margin-top: 0px;
  max-width: 750px;
}

.c-offer__block-title{
  margin: 24px 0 16px;
  font-size: var(--fs-26);
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--fw-regular);
}

.c-offer__actions{
  margin-top: 16px;
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 900px){
  .c-offers{
    padding-inline: var(--container-pad-x);
    margin-bottom: 40px;
  }

  .c-offer__title{
  font-size: var(--fs-26);
  }

  .c-offers__inner{
    grid-template-columns: 1fr;
  }

  .c-offers__sidebar{
    padding-top: 0;
    padding-bottom: 16px;
  }

  .c-offer__summary{
    padding: 16px;
    align-items: flex-start;
  }

  .c-offer__panel{
    padding: 24px 16px 48px;
  }
}

/* =========================
   ANGEBOT – WYSIWYG & TEXTAREA TYPO
   ========================= */

/* Basistext nur im geöffneten Angebot */
.c-offer__panel .text-content{
  font-size: var(--fs-18);   /* 16px */
  line-height: var(--lh-base);
  color: var(--color-text);
}

.c-offer__panel .text-content p{
  margin: 0 0 12px;
  font-size: var(--fs-18);
  line-height:  var(--lh-base);
}

/* Listen */
.c-offer__panel .text-content ul,
.c-offer__panel .text-content ol{
  margin: 0 0 16px 20px;
  padding: 0;
}

.c-offer__panel .text-content li{
  margin: 0 0 8px;
}

/* Headings im WYSIWYG – wie Standard H3 */
.c-offer__panel .text-content h3{
  margin: 32px 0 16px;
  font-size: var(--fs-26);
  text-transform: uppercase;
  line-height: 28.32px;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* Falls Redakteur:innen h2 verwenden */
.c-offer__panel .text-content h2{
  margin: 32px 0 16px;
  font-size: var(--fs-36);
  text-transform: uppercase;
  line-height: 39.68px;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* Textarea-Blöcke (Kontakt / Ort etc.) */
.c-offer__panel .c-offer__block-text{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-text);
}

/* Full-bleed Background bleibt auf Summary/Panel */
.c-offer{
  width: 100%;
}

/* Background geschlossen */
.c-offer__summary{
  background: var(--hero-bg, var(--color-bg));
  color: var(--hero-fg, var(--color-text));
  padding: 0; /* padding wandert nach inner */
}

/* Inhalt bleibt mit Abstand wie gehabt */
.c-offer__summary-inner{
  padding: 16px 120px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Panel background (offen) */
.c-offer__panel{
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0;
}

.c-offer__panel-inner{
  padding: 40px 120px 80px 40px;
}

.c-offer__summary,
.c-offer__summary *{
  cursor: pointer;
}

@media (max-width: 900px){

  /* Full-bleed Hintergrund für Summary + Panel (ohne 100vw!) */
  .c-offer__summary,
  .c-offer__panel{
    margin-left: calc(-1 * var(--container-pad-x));
    margin-right: calc(-1 * var(--container-pad-x));
    border-radius: 0;
  }

  /* Inhalt bleibt im Raster */
  .c-offer__summary-inner{
    padding: 16px var(--container-pad-x);
  }

  .c-offer__panel-inner{
    padding: 24px var(--container-pad-x) 48px;
  }
}

@media (max-width: 900px){
  .c-offers__search{
    width: 100%;
    box-sizing: border-box;
  }

  .c-offers__search-input{
    min-width: 0;
    width: 100%;
  }
}


.c-offer__summary::marker{
  content: "";
}

/* ✅ Desktop: KEIN 100vw – wir machen Background nur nach rechts full-bleed */
.c-offer > .c-offer__summary{
  width: auto;
  margin-left: 0;
  margin-right: 0;
  background: transparent;
  overflow: visible;
  position: relative;
  z-index: 0;
}

/* ✅ Beige startet am Content (rechte Spalte) und geht nur nach rechts bis zum Viewport */
.c-offer > .c-offer__summary::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 0; /* beginnt exakt am linken Rand der rechten Spalte */
  right: calc(var(--container-pad-x) * -1); /* erweitert bis zum Viewport rechts */

  background: var(--hero-bg);
  z-index: -1;
  pointer-events: none;
}



/* Notbremse nur für Angebote */
.c-offers{
  overflow-x: clip; /* modern */
}

/* Fallback, falls clip nicht greift */
@supports not (overflow: clip){
  .c-offers{ overflow-x: hidden; }
}


/* =========================
   OFFER SUMMARY – MOBILE
   ========================= */
@media (max-width: 900px){

  /* 1) Der ganze Offer-Block (mit rotem BG) läuft bis an den Rand */
  .c-offer{
    margin-left: calc(-1 * var(--container-pad-x));
    margin-right: calc(-1 * var(--container-pad-x));
    width: auto;
  }

  /* 2) Summary/Panel selbst NICHT zusätzlich rausziehen */
  .c-offer__summary,
  .c-offer__panel{
    margin: 0;
  }

  /* 3) Inhalt bleibt wie gewohnt eingerückt */
  .c-offer__summary-inner{
    padding: 16px var(--container-pad-x);
  }

  .c-offer__panel-inner{
    padding: 24px var(--container-pad-x) 48px;
  }

  /* 4) iOS-Notbremse gegen 1px-Overflow */
  .c-offers{ overflow-x: clip; }
  @supports not (overflow: clip){
    .c-offers{ overflow-x: hidden; }
  }
}



/* Native Search-Clear (Chrome/Safari) ausblenden */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
}

@media (max-width: 900px){
  .c-offer > .c-offer__summary::before{
    content: none;
  }
}


/* =========================
   POSTS ARCHIVE (Blog Übersicht)
   ========================= */

.c-posts{
  background: var(--color-bg);
  padding-inline: var(--container-pad-x);
  padding-top: 40px;
  padding-bottom: 80px;
}

.c-posts__inner{
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.c-posts__sidebar{
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Suche: 1:1 wie Offers (nur Klassennamen) */
.c-posts__search{
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-text);
  padding: 8px 16px;
  position: relative;
}

.c-posts__search-label{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

.c-posts__search-input{
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 0;
  padding-right: 40px;
}

.c-posts__search-icon{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("/wp-content/themes/sozialedienste-leiblachtal/assets/icons/search-black.svg")
              no-repeat center / contain;
  pointer-events: none;
}

.c-posts__sidebar-title {
  margin-top: -40px; /* das hast du schon */
  margin-bottom: 24px;  /* statt 16px */
}

@media (max-width: 900px){
.c-posts__sidebar-title{
  display: none;
}
}

/* Filter */
.c-posts__filters{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-posts__filter-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-posts__filters-title{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

.c-posts__filter-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-posts__filter{
  display: inline-block;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-muted);
  text-align: left;
}

.c-posts__filter:hover,
.c-posts__filter:focus-visible{
  color: var(--color-text);
  text-decoration: underline;
}

/* Grid + Cards */
.c-posts__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 64px;     /* Abstand zwischen Reihen */
  column-gap: 40px; /* Abstand zwischen Spalten */
}

.c-post-card{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-post-card__body{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-post-card__head{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-post-card__date{
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.03em;

}

.c-post-card__excerpt{
  margin: 0;
  margin-bottom: 8px; 
  font-size: var(--fs-18);
  line-height: var(--lh-base);
}

.c-post-card__cta{
  align-self: flex-start;
}

[data-post].is-filtered-out {
  display: none !important;
}



/* =========================
   POSTS – Cards: gleiche Höhe + Excerpt clamp
   ========================= */

.c-posts__grid{
  align-items: stretch; /* falls Grid items nicht strecken */
}

.c-post-card{
  height: 100%;
}

.c-post-card__body{
  flex: 1 1 auto;           /* Body füllt Resthöhe */
}

.c-post-card__excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;     /* Anzahl Zeilen (z.B. 3–5) */
  overflow: hidden;
}

/* CTA immer unten */
.c-post-card__cta{
  margin-top: auto;
}


/* Pagination */
.c-posts__pagination{
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.c-posts__pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-text);
  margin: 0 6px;
  text-transform: uppercase;
    letter-spacing: 0.03em;
}

.c-posts__pagination .page-numbers.current{
  background: var(--color-text);
  color: var(--color-bg);
}

.c-post-card__image{
  width: 100%;
  aspect-ratio: 460 / 307;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Prev/Next: nur Icon sichtbar */
.c-posts__pagination .page-numbers.prev,
.c-posts__pagination .page-numbers.next{
  padding: 0 10px; /* bleibt wie deine Buttons */
}

/* Icon Wrapper */
.c-posts__pagi-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SVG innerhalb */
.c-posts__pagi-icon svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Prev drehen */
.c-posts__pagi-icon--prev svg{
  transform: rotate(180deg);
}

/* Hover (wie Secondary → wird Primary) */
.c-posts__pagination .page-numbers:not(.current):hover{
  background: var(--color-text);
  color: var(--color-bg);
}

.c-posts__pagination .page-numbers{
  text-decoration: none;
}

.c-posts__pagination .page-numbers:hover,
.c-posts__pagination .page-numbers:focus-visible{
  text-decoration: none;
}

/* erzwinge: Icon folgt der Button-Farbe */
.c-posts__pagi-icon svg *{
  stroke: currentColor;
  fill: currentColor
}




.c-post-card{ min-width: 0; }

.c-post-card__title{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  line-height: var(--lh-plus);
}

/* =========================================
   POSTS – Responsive Stufen
   ========================================= */

/* Desktop Default (bei dir bereits so):
.c-posts__inner { grid-template-columns: 330px minmax(0,1fr); }
.c-posts__grid  { grid-template-columns: repeat(3, ...); }
*/

/* 900–1100: Sidebar seitlich, Grid 2 Spalten */
@media (max-width: 1100px){
  .c-posts__inner{
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 40px;
  }

  .c-posts__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* <900: Sidebar oben, Grid 2 Spalten */
@media (max-width: 900px){
  .c-posts{
    padding-inline: var(--container-pad-x);
    padding-bottom: 40px;
  }

  .c-posts__inner{
    grid-template-columns: 1fr; /* ✅ Sidebar oben */
    gap: 24px;
  }

  .c-posts__sidebar{
    padding-top: 0;
    padding-bottom: 0;
  }

  .c-posts__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 2 Karten */
    gap: 40px;
  }
}

/* <720: Sidebar oben, Grid 1 Spalte */
@media (max-width: 720px){
  .c-posts__grid{
    grid-template-columns: 1fr; /* ✅ 1 Karte */
    gap: 40px;
  }

  .c-post-card__image{
    height: 200px;
  }
}


/* Wrapper im Grid "unsichtbar", damit die Cards wieder Grid-Children sind */
[data-posts-items]{
  display: contents;
}

/* Ergebnisblock soll über volle Breite laufen (sitzt vor den Cards) */
[data-posts-results]{
  grid-column: 1 / -1;
}

/* Wenn gesucht wird: normale Liste + Pagination ausblenden */
[data-posts].is-searching [data-posts-items]{
  display: none !important;
}

[data-posts].is-searching .c-posts__pagination{
  display: none !important;
}

.c-hero__cta .c-btn__icon{
  color: var(--color-text)
}



/* AJAX-Ergebnisse als identisches Grid wie normale Cards */
.c-posts-search-results__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 64px;
  column-gap: 40px;
}

@media (max-width: 1100px){
  .c-posts-search-results__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .c-posts-search-results__list{ grid-template-columns: 1fr; gap: 32px; }
}

.c-posts__filter.is-active,
.c-posts__filter[aria-current="page"]{
  color: var(--color-text);
}




/* =========================
   POST SINGLE (Beitragsseite)
   ========================= */

.c-hero__text--kicker{
  margin: 0 0 8px;
}

.c-hero__kicker{
  margin-bottom: 8px;
  opacity: .95;
}

/* Layout wie Offers (Sidebar links + Content rechts) */
.c-post-single{
  background: var(--color-bg);
  padding-inline: var(--container-pad-x);
  padding-top: 40px;
  padding-bottom: 80px;
}

.c-post-single__inner{
  display: grid;
  grid-template-columns: 363px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Sidebar: reuse offers spacing */
.c-post-single__sidebar{
  padding-top: 40px;
  padding-bottom: 40px;
}

.c-post-single__back{
  margin-bottom: 24px;
}

/* Content Breite ähnlich Angebot */
.c-post-single__content{
  max-width: 830px;
}

/* Bild wie Offer-Figure */
.c-post-single__figure{
  margin-top: 8px; /* wie Figma Abstand unter Hero */
}

/* WYSIWYG: nutze die Angebots-Typo */
.c-post-single__wysiwyg{
  max-width: 750px;
}

/* Optional: Block-Titel auf H2/Styles wie bei Offer-Block */
.c-post-single__block{
  max-width: 750px;
}

/* Hero auf Single: gleiche Einrückung wie Content */
.single-post .c-hero__inner{
  justify-content: flex-start; /* falls zentriert */
}

.single-post .c-hero__content{
  width: min(830px, 100%);     /* gleiche Breite wie Content-Column */
  margin-left: calc(363px + 40px); /* Sidebar (363) + Gap (40) */
}

/* Mobile: kein Sidebar-Offset */
@media (max-width: 900px){
  .single-post .c-hero__content{
    margin-left: 0;
    width: min(750px, 100%);
  }
}

/* =========================
   POST – WYSIWYG & TEXTAREA TYPO (wie Angebot)
   ========================= */

/* Basistext */
.c-post-single .text-content{
  font-size: var(--fs-18);   /* 16px */
  line-height: var(--lh-base);
  color: var(--color-text);
}

/* Absätze */
.c-post-single .text-content p{
  margin: 0 0 12px;
  font-size: inherit;
  line-height: var(--lh-base);
}

/* Listen */
.c-post-single .text-content ul,
.c-post-single .text-content ol{
  margin: 0 0 16px 20px;
  padding: 0;
}

.c-post-single .text-content li{
  margin: 0 0 8px;
}

/* Zwischenüberschriften im WYSIWYG */
.c-post-single .text-content h3{
  margin: 32px 0 16px;
  font-size: var(--fs-26);
  text-transform: uppercase;
  line-height: 28.32px;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

.c-post-single .text-content h2{
  margin: 32px 0 16px;
  font-size: var(--fs-36);
  text-transform: uppercase;
  line-height: 39.68px;
  letter-spacing: 0.03em;
  color: var(--color-text);
}

/* Textarea-Blöcke (Kontakt/Ort etc. falls du sie als Textarea ausgibst) */
.c-post-single .c-offer__block-text{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-text);
}

/* =========================
   POST – Vertical Rhythm (wie Angebot)
   ========================= */

/* Abstand nach WYSIWYG-Content */
.c-post-single__wysiwyg{
  margin-bottom: -8px;
}

/* Abstand nach Button-Zeile */
.c-post-single .c-offer__actions{
  margin-bottom: 24px;
}

/* Abstand zwischen einzelnen ACF-Blöcken (Kontakt, Ort, Termine, …) */
.c-post-single .c-offer__block{
  margin-bottom: 24px;
}

/* Letzter Block kein Extra-Abstand */
.c-post-single .c-offer__block:last-child{
  margin-bottom: 0;
}


/* Responsive */
@media (max-width: 900px){
  .c-post-single{
    padding-inline: var(--container-pad-x);
    padding-top: 24px;
  }

  .c-post-single__inner{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .c-post-single__sidebar{
    padding-top: 0;
    padding-bottom: 0;
  }
}

.c-post-single__taglist{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 600px){

  /* Bild full width (hast du schon) */
  .c-post-single__figure{
    margin-left: calc(-1 * var(--container-pad-x));
    margin-right: calc(-1 * var(--container-pad-x));
  }

  /* ✅ Caption wieder im Seitenraster */
  .c-post-single__figure .c-offer__figcap{
    padding-inline: var(--container-pad-x);
    box-sizing: border-box;
  }
}



/* =========================
   Post Prev/Next Navigation
   ========================= */

.c-post-nav{
  padding-inline: var(--container-pad-x);
  padding-top: 40px;
  padding-bottom: 40px;
}

.c-post-nav__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: 1190px;
  margin-inline: auto;
}

/* 2 Spalten links/rechts */
.c-post-nav__item{
  flex: 1 1 0;
}

.c-post-nav__item--next{
  text-align: right;
}

/* Link */
.c-post-nav__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;

  color: var(--color-text);
  text-decoration: none;
}

.c-post-nav__link:hover,
.c-post-nav__link:focus-visible{
  text-decoration: underline;
}

/* Icon (wie Buttons, aber als span) */
.c-post-nav__icon{
  width: 20px;
  height: 20px;
  display: inline-block;

  background: url("/wp-content/themes/sozialedienste-leiblachtal/assets/icons/arrow-right-black.svg")
              no-repeat center / contain;
}


.c-post-nav__label {
  position: relative;
  top: 0.08em; /* feinjustieren */
}

/* Mobile */
@media (max-width: 900px){
  .c-post-nav{
    padding-inline: var(--container-pad-x);
  }

  .c-post-nav__inner{
    flex-direction: column;
    align-items: stretch;
  }

  .c-post-nav__item--next{
    text-align: right;
  }

  .c-post-nav__item--next .c-post-nav__link{
    justify-content: flex-start;
  }
}

/* =========================
   Single Post – Sidebar auf Mobile ausblenden
   ========================= */

@media (max-width: 900px){
  /* letzter Titel (Schlagwörter) */
  .c-offers__filters > .c-offers__filters-title:nth-last-child(2){
    display: none;
  }

  /* letzter Wert darunter (das leere div.c-posts__filter) */
  .c-offers__filters > .c-posts__filter:last-child{
    display: none;
  }

  .single-post .c-post-single__inner{
    grid-template-columns: 1fr; /* Content volle Breite */
    gap: 0;
  }

  /* Bild wie Offer-Figure */
.c-post-single__figure{
  margin-top: -24px; /* wie Figma Abstand unter Hero */
}
  }

@media (max-width: 720px){
.c-post-single__figure{
  margin-top: 40px; 
}
}

/* =========================
   CONTACT BLOCK (clean + consistent)
   ========================= */

.c-contact{
  background: var(--color-bg);
  padding: 80px var(--container-pad-x);
}

.c-contact__inner{
  width: 100%;
}

/* Block title */
.c-contact__title{
  margin: 0 0 24px;
  font-size: var(--fs-36);
  line-height: var(--lh-base);
  text-transform: uppercase;
    letter-spacing: 0.03em;
  color: var(--color-text);
}

/* max. 3 pro Zeile */
.c-contact__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

/* Card: definiert den Rhythmus */
.c-contact__card{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ✅ Einheitlicher Abstand: Überschrift → Inhalt */
.c-contact__name{
  margin: 0px;
  font-size: var(--fs-26);
  line-height: var(--lh-plus);
  color: var(--color-text);
}

/* ✅ Rolle/Subline: gleicher Abstand wie Bürozeiten→Text */
.c-contact__role{
  margin: 8px 0 16px; /* oben klein, unten gleichmäßig */
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-transform: uppercase;
    letter-spacing: 0.03em;
  color: var(--color-text);
}

/* Details */
.c-contact__details{
  display: flex;
  flex-direction: column;
  gap: 4px; /* Abstand zwischen Telefon / Mail etc. */
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-text);
}

/* ✅ Entfernt wpautop-Abstände (Bürozeiten kommen oft als <p>) */
.c-contact__details p{
  margin-top: 8px;
}

/* Fallback falls einzelne Zeilen als .c-contact__line ausgegeben werden */
.c-contact__line{
  margin: 0;
  font-size: inherit;
  line-height:  var(--lh-base);
  color: inherit;
}

/* Links */
.c-contact__link{
  color: inherit;
  text-decoration: none;
  cursor: pointer; /* ✅ Hand-Cursor */
}

.c-contact__link:hover,
.c-contact__link:focus-visible{
  text-decoration: underline;
}

.c-team__contact{
  margin-top: 6px;
  display: grid;
  gap: 4px;
}

.c-team__contact-link{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-decoration: none;
}


/* Responsive */
@media (max-width: 1100px){
  .c-contact__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px){
  .c-contact{
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .c-contact__grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .c-contact__title{
    margin-bottom: 16px;
  }
}

/* =========================
   TEAM
   ========================= */
.c-team{
  background: var(--color-bg);
  padding: 80px var(--container-pad-x);
}

.c-team__inner{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.c-team__group{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.c-team__title{
  margin: 0;
  text-align: center;
  font-size: var(--fs-36);
  line-height: 39.68px;
  text-transform: uppercase;
    letter-spacing: 0.03em;
}

.c-team__grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch; /* 👈 wichtig */
}

.c-team__card{
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* ✅ Team Bild immer im Verhältnis 3:2 */
.c-team__img,
.c-team__img--placeholder{
  width: 100%;
  aspect-ratio: 2 / 3;   /* 👈 fix 3:2 */
  height: auto;          /* wichtig */
  object-fit: cover;
  object-position: center;
  display: block;
}

.c-team__meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-team__role{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-transform: uppercase;
    letter-spacing: 0.03em;
}

.c-team__name{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
}

/* ✅ Lange Wörter in Funktion/Name umbrechen */
.c-team__role,
.c-team__name{
  overflow-wrap: anywhere;  /* bricht auch sehr lange Wörter */
  word-break: break-word;   /* fallback */
  hyphens: auto;            /* wenn Sprache richtig gesetzt ist */
}

/* Bild + Abstand fix */
.c-team__img,
.c-team__img--placeholder{
  flex: 0 0 auto;
}

/* ✅ Lange Strings (E-Mail) umbrechen statt überlaufen */
.c-contact__card,
.c-contact__details,
.c-contact__link,
.c-team__contact,
.c-team__contact-link{
  min-width: 0;              /* wichtig für Grid/Flex */
  overflow-wrap: anywhere;   /* bricht auch ohne Bindestriche */
  word-break: break-word;    /* Fallback */
}


@media (max-width: 1300px){
  .c-team__grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1200px){
  .c-team__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .c-team{ padding: 48px 16px; }
  .c-team__inner{ gap: 64px; }
  .c-team__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================
   OFFENE STELLEN
   ========================= */

.c-jobs{
  background: var(--color-bg);
  padding: 80px var(--container-pad-x);
  color: var(--color-text);
}

.c-jobs__inner{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (max-width: 900px){
  .c-jobs__inner{ 
    gap: 24px; 
    }
}

.c-jobs__section-title{
  margin: 0;
  font-size: var(--fs-36);
  line-height: 39.68px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


.c-jobs__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.c-job__content{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.c-job__meta{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
}

.c-jobs__dot{
  display: inline-block;
  padding-inline: 8px;
}

.c-job__title{
  margin: 0;
  font-size: var(--fs-26);
  line-height: var(--lh-base);
  text-transform: uppercase;
  letter-spacing: 0.24px;
    letter-spacing: 0.03em;
}

.c-job__text{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  max-width: 65ch;
  margin-top: -8px
}

.c-job__actions{
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 900px){
  .c-jobs{
    padding: 48px 16px;
  }
  .c-jobs__grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =========================
   TERMINE (Event Organiser) – reuse Offers Layout
   ========================= */

.c-events .c-offer__summary,
.c-events .c-offer__summary *{
  cursor: default; /* Angebote-Accordion macht sonst alles klickbar */
}

/* Button rechts in der Kartenzeile sauber ausrichten */
.c-event__cta{
  display: inline-flex;
  align-items: center;
}

/* =========================
   CTA Icon – folgt Textfarbe
   ========================= */

/* Event-CTA Icon: nutzt DEIN SVG als Maske */
.c-event__more-icon{
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 0px;
  cursor: pointer;
  -webkit-mask: var(--event-icon) no-repeat center / contain;
  mask: var(--event-icon) no-repeat center / contain;

  background-color: currentColor;
}

/* Termine: Cursor als Hand erzwingen */
.c-event .c-event__more,
.c-event .c-event__more *,
.c-event .c-event__more:hover,
.c-event .c-event__more:hover *{
  cursor: pointer;
}



/* Auf Mobile: Button unter Titel statt rechts daneben (mehr Luft) */
@media (max-width: 900px){
  .c-events .c-offer__summary-inner{
    gap: 16px;
  }
  .c-events .c-event__cta{
    align-self: flex-start;
  }
}

/* =========================
   Info-Formulare CTA ("Zum Formular")
   ========================= */

.c-btn--form{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

/* Arrow LINKS vom Text */
.c-btn--form::before{
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  -webkit-mask: var(--offer-icon) no-repeat center / contain;
  mask: var(--offer-icon) no-repeat center / contain;
  background-color: currentColor;
}

/* Sicherheit: kein rechter Pfeil */
.c-btn--form::after{
  content: none;
}


/* =========================
   CONTACT – FORMS (Fluent Forms)
   ========================= */

.c-forms{
  background: var(--color-bg);
  padding: 80px var(--container-pad-x);
  color: var(--color-text);
}

.c-forms__inner{
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 980px;
}

.c-form__title{
  margin: 0 0 16px;
  font-size: var(--fs-36);
  line-height: 39.68px;
  text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Fluent Forms inputs */
.c-form .ff-el-form-control{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font: inherit;
  border-radius: 0;
}

.c-form textarea.ff-el-form-control{
  height: auto;
  padding: 12px 14px;
  min-height: 140px;
}

/* Labels */
.c-form .ff-el-input--label label{
  text-transform: uppercase;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
    letter-spacing: 0.03em;
}

/* Mehr Zeilenabstand bei Fluent Forms Checkbox Text */
.fluentform .ff_t_c{
  line-height: var(--lh-base);
}

/* =========================
   Fluent Forms – Submit Button (Theme)
   ========================= */

/* Wrapper darf nicht strecken */
.c-form .ff_submit_btn_wrapper{
  width: auto !important;
}

/* Button selbst */
.c-form .ff-btn,
.c-form button[type="submit"],
.c-form input[type="submit"]{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  width: auto !important;
  height: 44px;

  padding: 0 18px;
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
  border: 1px solid var(--color-text) !important;

  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}

/* Arrow LINKS vom Text */
.c-form .ff-btn::before,
.c-form button[type="submit"]::before,
.c-form input[type="submit"]::before{
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;

  -webkit-mask: var(--offer-icon) no-repeat center / contain;
  mask: var(--offer-icon) no-repeat center / contain;

  background-color: currentColor;
}

/* sicherstellen: kein rechter Pfeil mehr */
.c-form .ff-btn::after,
.c-form button[type="submit"]::after,
.c-form input[type="submit"]::after{
  content: none !important;
}


/* Focus */
.c-form .ff-el-form-control:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(23, 24, 24, 0.25);
}


/* =========================
   Contact – Formular Breite begrenzen
   ========================= */


/* Optional: zentriert statt links */
.c-forms--center .c-form{
  margin-inline: auto;
}



/* Info-Formulare: Button darf nicht auf volle Breite stretchen */
.c-contact__actions{
  display: flex;
  align-items: flex-start; /* verhindert stretch */
}

/* extra Sicherheit */
.c-contact__actions .c-btn{
  width: auto;
  align-self: flex-start;
}

/* Fluent Forms – Select (z.B. Land) angleichen */
.c-form select.ff-el-form-control{
  width: 100%;
  height: 44px;
  padding: 0 14px;              /* 🔑 gleich wie Input */
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font: inherit;

  appearance: none;             /* 🔑 entfernt Browser-Defaults */
  -webkit-appearance: none;
  -moz-appearance: none;

  box-sizing: border-box;       /* 🔑 wichtig */
}


/* =========================
   Fluent Forms – Submit zentrieren
   ========================= */

/* äußerster Submit-Block */
.c-form .ff-el-group--submit{
  display: flex !important;
  justify-content: center;   /* ✅ Button mittig */
}

/* Icon + Text IM Submit-Button zentrieren */
.c-form .ff-btn,
.c-form button[type="submit"],
.c-form input[type="submit"]{
  justify-content: center; /* 🔑 DAS fehlt */
}

/* =========================
   FORMS EMBED (richtige Klassen aus info-formulare.php)
   ========================= */

.c-forms-embed{
  background: var(--color-bg);
  padding: 80px var(--container-pad-x);
  color: var(--color-text);
}

.c-forms-embed__inner{
  max-width: 980px;
  width: 100%;
  margin-inline: auto;            /* ✅ zentriert den gesamten Container */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Formular-Box selbst: bleibt im zentrierten Container */
.c-forms-embed .c-form{
  width: 100%;              /* ✅ schmaler als Desktop */
  margin-inline: auto;            /* ✅ mittig */
}

/* Box-Styling (Border/Padding) */
.c-forms-embed .c-form--boxed{
  border: 1px solid var(--color-text);
  padding-left: 24px;
  padding-right: 24px;
    padding-top: 16px;
      padding-bottom: 16px;
}

/* Mobile Padding = 16px für den ganzen Container */
@media (max-width: 900px){
  .c-forms-embed{
    padding-inline: var(--container-pad-x);
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* =========================
   Fluent Forms: Country (ff-t-container Layout) Breite fixen
   ========================= */

/* die Row-Zellen dürfen nicht schmal werden */
.c-form .ff-t-container .ff-t-cell{
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Inhalt-Wrapper soll volle Breite nutzen */
.c-form .ff-el-input--content{
  width: 100%;
  min-width: 0;
}

/* Select in diesem Wrapper wirklich volle Breite */
.c-form .ff-el-input--content > select.ff-el-form-control{
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
    padding: 12px;
    color: var(--color-muted);
}

/* Inputs + Textareas Placeholder */
.c-form input.ff-el-form-control::placeholder,
.c-form textarea.ff-el-form-control::placeholder{
  color: var(--color-muted);
  opacity: 1;
}

.c-form input.ff-el-form-control::-webkit-input-placeholder,
.c-form textarea.ff-el-form-control::-webkit-input-placeholder{
  color: var(--color-muted);
}

.c-form input.ff-el-form-control::-moz-placeholder,
.c-form textarea.ff-el-form-control::-moz-placeholder{
  color: var(--color-muted);
  opacity: 1;
}

/* =========================
   Fluent Forms – Radio & Checkbox
   ========================= */

.c-form input[type="radio"],
.c-form input[type="checkbox"]{
  accent-color: var(--color-text);
}


.c-form .ff-el-form-check-label span{
  color: var(--color-text);
}

.c-form input[type="radio"]:focus-visible,
.c-form input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Section Break – größerer Zeilenabstand */
.ff-section_break_desk ul li {
  line-height: var(--lh-base);
}


/* =========================
   Formular - Lightbox
   ========================= */

.c-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
    overflow: hidden;
}

.c-modal.is-open{
  display: block;
}

.c-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.c-modal__panel{
  position: relative;
  ;
  margin: 8vh var(--container-pad-x);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 64px;
    max-height: calc(100vh - 120px); /* oben/unten Luft */
  overflow-y: auto;                /* ✅ Scroll IM Modal */
  -webkit-overflow-scrolling: touch; /* iOS smooth */
}

@media (max-width: 600px){
.c-modal__panel{
  padding: 24px;
}
}

.c-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: var(--fs-26);
  cursor: pointer;
}

body.is-modal-open{
  overflow: hidden;
}


/* =========================
   Themen
   ========================= */

/* Fachbereiche/Themen-Bänder nutzen die Hero-Variablen */
.fb-link{
  background: var(--hero-bg, var(--color-beige));
  color: var(--hero-fg, var(--color-blue));
}

/* =========================
   FAQ (CPT Block)
   ========================= */

.c-faq{
  padding: 80px var(--container-pad-x);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}

.c-faq__inner{
  display: flex;
  flex-direction: column;
  gap: 40px; /* wie Figma */
}

.c-faq__head{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 658px; /* wie Vorlage */
}

.c-faq__title{ margin: 0; } /* h2-Styles kommen global */
.c-faq__subtitle{
  margin: 0;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  max-width: 60ch;
}

/* 2 Spalten Desktop, bricht automatisch in neue Zeilen */
.c-faq__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px; /* row/col */
  align-items: start;
}

.c-faq-topic{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-faq-topic__title{
  margin: 0; /* h3-Styles kommen global */
}

.c-faq-topic__items{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Accordion */
.c-faq-item{
  border-bottom: 1px solid var(--color-muted);
  padding: 8px 24px;
}

.c-faq-item__summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer; /* ganze Zeile klickbar */
}

.c-faq-item__summary::-webkit-details-marker{ display: none; }

.c-faq-item__q{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
}

/* Icon: reuse offer mask + Rotation */
.c-faq-item__icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;

  -webkit-mask: var(--offer-icon) no-repeat center / contain;
  mask: var(--offer-icon) no-repeat center / contain;

  background-color: currentColor;
  transform: rotate(90deg); /* geschlossen: Pfeil nach unten im Look */
  transform-origin: 50% 50%;
}

.c-faq-item[open] .c-faq-item__icon{
  transform: rotate(-90deg); /* offen */
}

/* Antwort */
.c-faq-item__a{
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
}

/* Mobile */
@media (max-width: 900px){
  .c-faq{
    padding: 48px 16px;
  }

  .c-faq__grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .c-faq-item{
    padding-inline: var(--container-pad-x);
  }
}

/* =========================
   Homepage
   ========================= */

/* Homepage: Themen/Beiträge nutzen FAQ-Layout, nur kleine Anpassung */
.fb-list{
  margin: 0;            /* fb-list hat sonst margin-bottom:80 */
}

.c-home-themen .fb-link{
  padding-inline: 0px;    /* optional: wenn du exakt wie bisher willst -> entfernen */
}


/* Homepage: Themen Balken full width */
.c-home-themen .fb-list{
  margin-left: calc(-1 * var(--container-pad-x));
  margin-right: calc(-1 * var(--container-pad-x));
}

/* =================================
   HOME SECTION (ersetzt c-faq auf Home)
   ================================= */

.c-home-section{
  padding: 80px var(--container-pad-x);
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}

.c-home-section__inner{
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.c-home-section__head{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 658px;
}

.c-home-section__title{
  margin: 0;
  font-family: var(--font-hero);
    font-size: var(--fs-58);
      letter-spacing: 0.03em;
}

.c-home-section__subtitle{
  margin: 0;
  font-size: var(--fs-26);
  line-height: 1.18;
  max-width: 60ch;
}

.c-home-section.c-home-posts 
{
  margin-top: 64px;
  }
  
  @media (max-width: 900px){
.c-home-section.c-home-posts 
{
  padding-top: 24px;
    padding-bottom: 40px;
  }  
  
  .c-home-section__inner{
  gap: 40px;
}

.c-home-section__subtitle{
  font-size: var(--fs-18);
  }

.c-home-section.c-home-posts {
margin-top: 64px
}}


  .home .c-home-section__head{
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

@media (max-width: 900px){
body.home.page .c-hero--angebot .c-hero__title {
  font-family: var(--font-sans);
    font-size: var(--fs-36);
      font-weight: var(--fw-semibold);
}

.c-home-section__head{
  gap: 6px;
  }

.c-home-section__title{
  font-family: var(--font-sans);
    font-size: var(--fs-36);
      font-weight: var(--fw-semibold);
}

.c-home-section.c-home-themen{
 padding-top: 64px;
 padding-bottom: 24px
}
}


/* =========================
   Hero Homepage - Landing (refined + dynamic)
   ========================= */

.c-hero--landing{
  min-height: calc(100svh - 120px);
  display: flex;
  align-items: center;
}

.c-hero__inner--landing{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  width: 100%;
  max-width: 1200px;   /* oder 1360px / 1400px nach Geschmack */
  margin-inline: auto; /* zentriert den ganzen Hero-Inhalt */
}

.c-hero__content--landing{
  width: min(635px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ✅ dynamische Typo */
.c-hero__title--landing{
  font-family: var(--font-hero);
  text-transform: lowercase;
  font-size: clamp(2.5rem, 6vw, 5.1rem); /* ~58px .. ~92px */
  line-height: 0.95;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

/* ✅ dynamische Subline */
.c-hero__text--landing{
  font-size: clamp(1.05rem, 2.2vw, 1.45rem); /* ~19px .. ~26px */
  line-height: 1.4;
  max-width: none;
}

/* ✅ dynamisches Bild */
.c-hero__media--landing{
  width: clamp(260px, 38vw, 480px);
  flex: 0 0 auto;
}

/* =========================
   Landing Hero – größeres Bild ab Desktop
   ========================= */

@media (min-width: 901px){

  .c-hero__media--landing{
    width: clamp(420px, 40vw, 680px);
  }

}

@media (min-width: 1200px){

  .c-hero__media--landing{
    width: clamp(500px, 42vw, 480px);
  }

}


.c-hero__logo{
  width: 100%;
  height: auto;
}

/* Standard: kein Umbruch */
.hero-br{ display: none; }

/* Ortswechsel Animation */
.hero-place{
  display: inline-block;
  will-change: transform, opacity;
}
.hero-place.is-out{
  opacity: 0;
  transform: translateY(0.2em);
  transition: opacity 220ms ease, transform 220ms ease;
}
.hero-place.is-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

/* =========================
   STACKED / TABLET+MOBILE
   (passt auch für iPad 912px)
   ========================= */
@media (max-width: 900px){

  /* Fullscreen-zwang weg -> keine riesigen Leerflächen */
  .c-hero--landing{
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .c-hero__inner--landing{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .c-hero__content--landing{
    align-items: center;
  }

  body.home.page .c-hero__actions{
    justify-content: center;
  }

  /* Bild oben, kontrolliert */
  .c-hero__media--landing{
    order: -1;
    width: min(70vw, 320px);
  }

  /* Umbruch + Strich weg (falls du es so im HTML hast) */
  .hero-br{ display: block; }
  .hero-dash{ display: none; }

  /* Buttons tap-freundlicher */
  .c-btn{
    padding: 12px 18px;
  }
}


/* Motion */
@media (prefers-reduced-motion: reduce){
  .hero-place{ transition: none !important; }
}

@media (min-width: 501px) and (max-width: 1100px) {

  .site-footer__top{
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand{
    flex: 0 0 auto;
  }

  .footer-columns{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  /* lange Wörter/Links dürfen umbrechen statt overflow */
  .footer-list a,
  .footer-col__title,
  .footer-text,
  .footer-links{
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Responsive */
@media (max-width: 720px){
  .site-footer__inner{
    padding: 32px 16px;
    padding-inline: var(--container-pad-x);
  }

  .site-footer__top{
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand{
    flex-basis: auto;
  }

  .footer-columns{
    grid-template-columns: 2fr 2fr;
    gap: 24px;
  }

  .site-footer__bottom{
    flex-direction: column;
    gap: 12px;
  }
}

/* Single Post: Tablet-Zwischenstufe (900–1200) sauber machen */
@media (min-width: 901px) and (max-width: 1200px){

  /* Hero nicht mehr so breit/zentriert */
  .single-post .c-hero__inner{
    justify-content: flex-start;
  }

  .single-post .c-hero__content{
    width: min(700px, 100%);
    margin-left: 0;          /* ✅ der Sidebar-Offset ist hier oft der Übeltäter */
  }

  /* Layout darunter: Sidebar + Content weniger “quetschen” */
  .c-post-single__inner{
    grid-template-columns: 300px minmax(0, 1fr); /* etwas schmalere Sidebar */
    gap: 32px;
  }

  /* Bild + Content dürfen schrumpfen */
  .c-post-single__content{
    max-width: none;
  }
}

.c-hero__title{
  hyphens: auto;
}

/* Native Summary-Dreieck entfernen */
.c-offer__summary{
  list-style: none;
}

.c-offer__summary::-webkit-details-marker{
  display: none;
}

.c-offer__summary::marker{
  content: "";
}


.c-hero__head,
.c-home-section__head,
.c-post-card__title,
.c-post-card__head {
  overflow: visible !important;
}

/* Für die Mefta-Headlines (z.B. Hero/Section Titles) */
.c-hero__title,
.c-home-section__title,
h1, h2 {
  line-height: 1.0;      /* etwas Luft für Umlaute */
  padding-top: 0.08em;   /* optional: extra Luft nach oben */
  overflow: visible;     /* falls irgendwo geclippt wird */
}


/* =========================
   LEGAL (Impressum / Datenschutz)
   ========================= */

.c-legal{
  background: var(--color-bg);
  color: var(--color-text);
  padding: 80px var(--container-pad-x);
  margin-top: -120px;
}

/* Nur Seite /mailpoet/ */
.page-id-641 .c-legal{
  margin-top: -80px;
}

@media (max-width: 900px) {.c-legal{
  margin-top: -40px;
}
}



.c-legal__inner{
  max-width: 720px;
  margin-left: 0;      /* 🔥 nicht mehr zentriert */
  margin-right: auto;  /* optional */
}

/* Typografie wie Offer/Post */
.c-legal .entry-content{
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Vertical rhythm */
.c-legal .entry-content > *:first-child{ margin-top: 0; }
.c-legal .entry-content > *:last-child{ margin-bottom: 0; }

.c-legal .entry-content p{
  margin: 0 0 12px;
}

/* H2 wie global */
.c-legal .entry-content h2{
  margin: 40px 0 16px;
  font-size: var(--fs-36);
  line-height: var(--lh-wide);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--fw-semibold);
}

/* H3 wie global */
.c-legal .entry-content h3{
  margin: 32px 0 12px;
  font-size: var(--fs-26);
  line-height: var(--lh-plus);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Listen */
.c-legal .entry-content ul,
.c-legal .entry-content ol{
  margin: 0 0 16px 20px;
  padding: 0;
}

.c-legal .entry-content li{
  margin-bottom: 8px;
}

/* Links bleiben unterstrichen (wie global) */
.c-legal .entry-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile */
@media (max-width: 900px){
  .c-legal{
    padding: 48px var(--container-pad-x);
  }

  .c-legal__inner{
    max-width: 100%;
  }
}





/* =========================
   OFFERS – Pager (wie Posts-Pagination, active=primary, sonst secondary)
   ========================= */

/* sicher: hidden wirklich ausblenden */
[hidden]{ display:none !important; }

/* Pager sitzt unter der Angebots-Liste (rechte Spalte im Grid) */
.c-offers__pager{
  grid-column: 2;
  display: flex;
  flex-direction: column;   /* Status darunter */
  align-items: flex-start;  /* linksbündig unter Angeboten */

  padding-top: 40px;
  padding-bottom: 80px;

  position: relative;
  z-index: 10;
}

/* Mobile: volle Breite */
@media (max-width: 900px){
  .c-offers__pager{
    grid-column: 1;
    padding-bottom: 40px;
  }
}

/* Buttons-Zeile */
.c-offers__pager-controls{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Wrapper für dynamische Seitenbuttons (vom JS) */
.c-offers__pages{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Page Buttons: Secondary Look */
.c-offers__pagebtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;
  padding: 0 10px;

  border: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);

  text-transform: uppercase;
  letter-spacing: 0.03em;

  font: inherit;
  line-height: 1;
  cursor: pointer;
}

/* Hover nur bei NICHT aktiven Buttons */
.c-offers__pagebtn:not(.is-active):not(:disabled):hover{
  background: var(--color-text);
  color: var(--color-bg);
}

/* Active = Primary */
.c-offers__pagebtn.is-active{
  background: var(--color-text);
  color: var(--color-bg);
}

/* Disabled: NICHT grau/opacity – nur nicht klickbar */
.c-offers__pagebtn:disabled{
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  cursor: default;
  pointer-events: none;
}

/* Ellipsis (…): optisch wie Button-Width, aber ohne Border */
.c-offers__ellipsis{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 40px;
  padding: 0 10px;

  color: var(--color-text);
  letter-spacing: 0.03em;
  user-select: none;
}

/* Status unterhalb */
.c-offers__pager-status{
  margin-top: 12px;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.c-offers__icon svg{
  width: 18px;
  height: 18px;
  display: block;
}

.c-offers__icon--prev svg{
  transform: rotate(180deg);
}

.c-offers__pagebtn.is-active:hover{
  background: var(--color-text);
  color: var(--color-bg);
}

/* erzwinge: Icon folgt der Button-Farbe */
.c-offers__pagebtn svg *{
  stroke: currentColor;
  fill: currentColor
}


/* =========================
   iOS Safari Fix: Umlaute werden bei transform/reveal geclippt
   Lösung: auf iOS kein transform-move, nur Fade
   ========================= */
@supports (-webkit-touch-callout: none) {

  /* 1) Umlaute: etwas Luft */
  .c-info__title,
  .c-post-card__title,
  .c-post-card__title a,
  .text-content h2,
  .text-content h3{
    line-height: 1.2;
    padding-top: 0.08em;
    overflow: visible;
  }

  /* 2) Move-Transforms auf iOS abschalten (das verursacht das Clipping) */
  html.reveal-on .reveal--move{
    transform: none !important;
  }

  /* 3) Optional: will-change raus (kann iOS zusätzlich triggern) */
  html.reveal-on .reveal--move,
  html.reveal-on .reveal{
    will-change: auto !important;
  }
}

/* iOS / Mobile: mehr Luft für Umlautpunkte */
@media (max-width: 900px){

  .c-info__title,
  .c-post-card__title,
  .c-post-card__title a{
    line-height: 1.5 !important;   /* vorher vermutlich 1 oder 1.1 */
  }

}

.u-sr-only{
  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;
}

/* Homepage: Button direkt unter Text erzwingen */
body.home .c-post-card__cta{
  margin-top: 16px !important;
}

body.home .c-post-card__body{
  display: block !important;
}

body.home .c-post-card__cta{
  margin-top: 16px !important;
}

body.home .c-home-posts{
  padding-top: 0px;
  padding-bottom: 120px;
}