/*
Theme Name: bpp Ingenieure
Version: v.1.0
Description: Custom Theme für die bpp Ingenieure
Author: Roman Hospenthal, RHOdesign
Author URI: http://www.rhodesign.ch/
*/

/* reset.css, grid.css, plugins.css und helpers.css werden in header.php verlinkt */


/* ------------------------------------------------------------ *\
	Variables
	Farben und Schriften aus dem finalen Figma-File (Desktop + Mobile).
\* ------------------------------------------------------------ */
:root {
--fz-html: 62.5%;

/* Farben */
--c-dunkelblau: #0A3250;
--c-hellblau: #A0B4E1;
--c-warmgrau-hell: #F5F0EB;
--c-warmgrau: #B8B4B0;
--c-warmgrau-mittel: #7B7876;
--c-warmgrau-dunkel: #3D3C3B;
--c-schwarz: #000000;
--c-weiss: #FFFFFF;
--c-linie: #DDD8D3;    /* Trennlinien, nicht im Figma-File definiert */
--c-kachel-hover: #EEE7E0; /* Hover der Link-Kacheln, aus Figma, nicht als Farbe definiert */
--verlauf-bild: linear-gradient(to bottom, var(--c-warmgrau-dunkel), rgba(61, 60, 59, .15) 50%, var(--c-warmgrau-dunkel)); /* bpp-bildverlauf, mit mix-blend-mode: multiply */

/* Schrift */
--ff-base: 'Zeist N2', system-ui, sans-serif;
--fw-regular: 500;
--fw-medium: 600;
/* Zeilenhöhen: nur diese vier verwenden */
--lh-none: 1.1;    /* Buttons */
--lh-tight: 1.25;  /* grosse Titel (h1), Mobile 1.15 */
--lh-title: 1.3;   /* Titel */
--lh-text: 1.4;    /* Fliesstext, Leads, Labels */

/* Schriftgrössen (1rem = 10px), skaliert von Viewport 480px (Mobile) bis 1710px (Desktop) */
--fontsize-xxs: clamp(1.2rem, 1.0829rem + 0.2439vw, 1.5rem);  /* GS-12 → GS-15 */
--fontsize-xs:  clamp(1.6rem, 1.5220rem + 0.1626vw, 1.8rem);  /* GS-16 → GS-18 */
--fontsize-sm:  2rem;                                         /* GS-20, Fliesstext */
--fontsize-md:  2.4rem;                                       /* GS-24, NG-24 */
--fontsize-lg:  clamp(2.4rem, 2.0098rem + 0.8130vw, 3.4rem);  /* GS-24 → LD-34 (Lead, Kacheltitel) */
--fontsize-xl:  clamp(2.8rem, 2.2537rem + 1.1382vw, 4.2rem); /* LD-28 → HT-42, NG-42 (Sektionstitel) */
--fontsize-xxl: clamp(2.8rem, 1.1610rem + 3.4146vw, 7rem);    /* LD-28 → HT-70 (H1 Unterseiten) */

/* Modulabstände (ACF «Abstand gegen unten»), Mobile 480px → Desktop 1710px */
--abstand-s:  clamp(3rem, 2.22rem + 1.63vw, 5rem);   /* 30 → 50, wie ein Absatz */
--abstand-m:  clamp(4rem, 2.83rem + 2.44vw, 7rem);   /* 40 → 70 */
--abstand-l:  clamp(6rem, 4.44rem + 3.25vw, 10rem);  /* 60 → 100, Standard */
--abstand-xl: clamp(8rem, 6.44rem + 3.25vw, 12rem);  /* 80 → 120 */
--abstand-anschluss: clamp(5rem, 3.63rem + 2.85vw, 8.5rem); /* 50 → 85, zwischen zwei Modulen auf gleicher Fläche */

/* Abstände innerhalb von Modulen */
--space-s: clamp(2rem, 1.2rem + 1.4vw, 4rem);
--space-m: clamp(4rem, 2.4rem + 2.8vw, 8rem);
--space-l: clamp(6rem, 3.6rem + 4.2vw, 12rem);

--radius: 1rem;
--radius-pill: 999rem;

/* Raster: 1710px Inhalt */
--container-max-width: 171rem;
--container-gutter: clamp(2rem, 5.5vw, 8rem);
--header-height: clamp(15rem, 6.02rem + 9.05vw, 21.5rem); /* Unterseiten: weisser Header, 150px bei 992px bis 215px bei 1710px */
}




/* ------------------------------------------------------------ *\
	Fonts
\* ------------------------------------------------------------ */
/* Zeist N2 (Luzi Type), Weblizenz gemäss Kaufbeleg */
@font-face {
  font-display: swap;
  font-family: 'Zeist N2';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/ZeistN2Web-Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Zeist N2';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/ZeistN2Web-Medium.woff2') format('woff2');
}





/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */
html {font-size: var(--fz-html);}
body {
min-width: 320px;
background: var(--c-weiss);
font-family: var(--ff-base);
font-weight: var(--fw-regular);
font-size: var(--fontsize-sm);
line-height: var(--lh-text);
color: var(--c-schwarz);
-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .3s; }
a:hover,
a[href^="tel"] { text-decoration: none; }
p,ul,ol,dl,hr,table,blockquote { margin-bottom: 1.5em; }
img { max-width: 100%; height: auto; display: block; }





/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */
.wrapper {display: flex;flex-direction: column;min-height: 100vh; }
.main {position: relative; }


.container {
max-width: calc(var(--container-max-width) + var(--container-gutter) * 2);
padding-inline: var(--container-gutter);
margin-inline: auto;
width: 100%;
}

.container--fluid { max-width: none;}

/* Bootstrap-Gutter an das Design anpassen (Kacheln 24px Abstand) */
.row { --bs-gutter-x: 2.4rem; }




/* ------------------------------------------------------------ *\
	Miscs
\* ------------------------------------------------------------ */
.text-center {text-align: center;}
.textright { text-align: right; }
.relative {position: relative; }

small {font-size: 0.8em; line-height: 0.7em;}
strong { font-weight: var(--fw-medium);}

.section {display: block; overflow: hidden; clear: both; position: relative; width: 100%; }
.section p:last-of-type {margin-bottom: 0; }

/* Erste Sektion: Abstand zum Header (ausser Hero, der liegt unter dem Header) */
.main > .section:first-child { padding-top: clamp(4rem, 0.88rem + 6.5vw, 12rem); }
.main > .section-hero:first-child { padding-top: 0; }




/* ------------------------------------------------------------ *\
	Abstände (Modul-Feld «Abstand des Moduls gegen unten»)
	Gespeicherte Werte klein/mittel/gross entsprechen S/M/L.
\* ------------------------------------------------------------ */
.abstand-kein { margin-bottom: 0;}
.abstand-klein { margin-bottom: var(--abstand-s);}
.abstand-mittel { margin-bottom: var(--abstand-m);}
.abstand-gross { margin-bottom: var(--abstand-l);}
.abstand-xl { margin-bottom: var(--abstand-xl);}




/* ------------------------------------------------------------ *\
	Hintergründe (Modul-Feld «Hintergrundfarbe»)
	Farbige Sektionen erhalten automatisch Innenabstand.
	Folgen zwei gleichfarbige Sektionen ohne Abstand, verschmelzen sie.
\* ------------------------------------------------------------ */
.hg-weiss { background-color: var(--c-weiss); }

.hg-beige,
.hg-dunkelblau { padding-top: var(--abstand-l); padding-bottom: var(--abstand-xl); }

.hg-beige { background-color: var(--c-warmgrau-hell); }

.hg-dunkelblau { background-color: var(--c-dunkelblau); color: var(--c-weiss); }
.hg-dunkelblau h1, .hg-dunkelblau h2, .hg-dunkelblau h3, .hg-dunkelblau h4 { color: var(--c-weiss); }

.hg-beige.abstand-kein + .hg-beige,
.hg-dunkelblau.abstand-kein + .hg-dunkelblau { padding-top: 0; }
/* Folgt ein Modul auf gleicher Fläche, nicht das grosse Schluss-Padding, sondern der Anschluss-Abstand */
.hg-beige.abstand-kein:has(+ .hg-beige),
.hg-dunkelblau.abstand-kein:has(+ .hg-dunkelblau) { padding-bottom: var(--abstand-anschluss); }




/* ------------------------------------------------------------ *\
	Trennlinie (Modul-Feld «Trennlinie oben»)
\* ------------------------------------------------------------ */
.mit-trennlinie > .container::before { content: ''; display: block; border-top: 1px solid var(--c-linie); margin-bottom: var(--space-s); }

/* Option «Eingerückt» (Text-Modul): Blocktitel mit offset-lg-1, Linie beginnt eine Spalte weiter rechts
   und endet bündig mit der Textspalte (col-xl-7) */
@media (min-width: 992px) {
.eingerueckt > .container::before { margin-left: calc((100% + 2.4rem) / 12); }
}
@media (min-width: 1200px) {
.eingerueckt > .container::before { margin-right: calc((100% + 2.4rem) / 12); }
}




/* ------------------------------------------------------------ *\
	Headings
\* ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-regular); color: var(--c-schwarz); line-height: var(--lh-title); }
h1 { font-size: var(--fontsize-xxl); line-height: var(--lh-tight); margin-bottom: clamp(3rem, 1.83rem + 2.44vw, 6rem); } /* Abstand zum Lead: 30 → 60 */
h2 { font-size: var(--fontsize-xl); margin-bottom: 1em; }
h3 { font-size: var(--fontsize-sm); line-height: var(--lh-text); margin-bottom: 1em; }
h4 { font-size: var(--fontsize-sm); font-weight: var(--fw-medium); line-height: var(--lh-text); margin-bottom: 0.3em; }

.lead { font-size: var(--fontsize-lg); line-height: var(--lh-text); }

/* Übertitel / Blocktitel: kleiner Titel in der linken Spalte */
.ubertitel,
h3.blocktitel { font-size: var(--fontsize-xs); font-weight: var(--fw-medium); line-height: var(--lh-text); margin-bottom: 5rem; }
@media (min-width: 992px) {
.ubertitel,
h3.blocktitel { font-size: var(--fontsize-sm); margin-bottom: 0; }
}

/* Label auf Bild-Kacheln (Fachgebiet) */
.label-fachgebiet { display: inline-block; font-size: var(--fontsize-xxs); line-height: var(--lh-text); padding: clamp(0.6rem, 0.52rem + 0.16vw, 0.8rem) clamp(1rem, 0.92rem + 0.16vw, 1.2rem); border: 1px solid currentColor; border-radius: var(--radius-pill); color: var(--c-weiss); }




/* ------------------------------------------------------------ *\
	Listen
\* ------------------------------------------------------------ */
/* Text-Modul: Fliesstext Desktop 24px, Zwischentitel als «Heading 4» im Editor */
@media (min-width: 992px) { .section-text { font-size: var(--fontsize-md); } }
.section-text.text-gross { font-size: var(--fontsize-lg); } /* Auswahl «Gross»: 24 → 34px */
.section-text h4 { margin-bottom: 0; }
.section-text p { margin-bottom: var(--abstand-s); }

.section-text ul{ list-style: none; padding:0;  margin:0 0 30px 0;  }
.section-text ul li{  padding-bottom: 10px; border-bottom: 1px solid var(--c-linie) }
.section-text ul li + li{  padding-top: 10px;  }

.section-text ol { list-style: none; counter-reset: my-awesome-counter; margin:0 0 30px 0;}
.section-text ol li { counter-increment: my-awesome-counter; padding-bottom: 5px; }
.section-text ol li::before { content: counter(my-awesome-counter) ". ";  }




/* ------------------------------------------------------------ *\
	Buttons
\* ------------------------------------------------------------ */
a.btn,
button.btn,
span.btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent;
padding: 1rem 3rem; font-size: var(--fontsize-xs); line-height: var(--lh-none); color: var(--c-dunkelblau); border: 1px solid var(--c-dunkelblau); border-radius: var(--radius-pill);
-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
}
a.btn:hover,
button.btn:hover,
.link-kachel:hover .btn { color: var(--c-weiss); background: var(--c-dunkelblau); }

a.btn.white { color: var(--c-weiss); border-color: var(--c-weiss);}
a.btn.white:hover { color: var(--c-dunkelblau); background: var(--c-weiss);}

/* Buttons auf Dunkelblau: hellblau (Button-Blau in Figma) */
.hg-dunkelblau a.btn { color: var(--c-hellblau); border-color: var(--c-hellblau); }
.hg-dunkelblau a.btn:hover { color: var(--c-dunkelblau); background: var(--c-hellblau); }

.section-button { margin-top: clamp(5rem, 3.83rem + 2.44vw, 8rem); text-align: center; }
.section-titel-mit-lead a.btn { display: table; margin: 5rem auto 0; }
@media (min-width: 992px) { .section-titel-mit-lead a.btn { margin-left: 0; } }




/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */
.header { background: var(--c-weiss); height: var(--header-height); width: 100%; position: relative; box-sizing: border-box; transition: all .4s ease-in-out; z-index: 1000; }

.logo { background-image: url(images/logo-blau.svg); background-size: contain; background-repeat: no-repeat; width: 23.6rem; height: 6.4rem; display: inline-block; font-size: 0; position: absolute; top: 5.5rem; transition: all .4s;}

/* Startseite: Header liegt transparent über dem Hero */
body:has(.main > .section-hero:first-child) .header:not(.sticky) { position: absolute; top: 0; left: 0; background: transparent; }
body:has(.main > .section-hero:first-child) .header:not(.sticky):not(.mega-open) .logo { background-image: url(images/logo-weiss.svg); }
body:has(.main > .section-hero:first-child) .header:not(.sticky):not(.mega-open) .menu > li > a { color: var(--c-weiss); }
body:has(.main > .section-hero:first-child) .header.sticky { position: fixed; }

@media (max-width: 991px) {
:root { --header-height: 10rem; --lh-tight: 1.15; }
.header { position: sticky; top: 0; left: 0; }
.logo { width: 17rem; height: 4.6rem; top: 2.5rem; }
}



/* ****************************************************************************************************
			    		MENU DESKTOP
	Hauptpunkte rechts. Ein Klick auf einen Punkt mit Unterseiten öffnet ein weisses Panel
	über der Seite, die Seite dahinter wird abgedunkelt (.nav-overlay).
**************************************************************************************************** */
nav#hauptnavigation { position: absolute; right: var(--container-gutter); top: 6rem; transition: top .4s;  }
.menu, .menu * { margin: 0; padding: 0; list-style: none;  }
.menu { display: flex; gap: clamp(4rem, 5.85vw, 10rem); position: relative;  }
.menu a { display: block; position: relative;  }

.menu > li > a { font-size: var(--fontsize-sm); line-height: var(--lh-text); color: var(--c-dunkelblau); padding-bottom: 0.2rem; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s;  }
.menu > li > a:hover,
.menu > li.open > a,
.menu > li.current-menu-item > a,
.menu > li.current-menu-parent > a,
.menu > li.current-menu-ancestor > a { border-bottom-color: var(--c-hellblau);  }

.nav-meta { display: none; }

@media (min-width: 992px) {
.menu > li { position: static; }
.menu .submenu-back { display: none; }

/* Unterpunkte als grosse Liste im Panel, bündig mit dem ersten Hauptpunkt */
.menu .sub-menu { position: absolute; top: calc(100% + 7rem); left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; visibility: hidden; opacity: 0; transform: translateY(-1rem); transition: opacity .3s, transform .3s, visibility 0s .3s;  }
.menu > li.open > .sub-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .3s .1s, transform .3s .1s, visibility 0s;  }
.menu .sub-menu a { font-size: clamp(2.6rem, 1.6rem + 1.4vw, 3.4rem); line-height: var(--lh-title); color: var(--c-dunkelblau); padding-bottom: 0.4rem; border-bottom: 1px solid var(--c-hellblau); display: inline-block; transition: border-color .3s, transform .3s, opacity .3s;  }
.menu .sub-menu a:hover,
.menu .sub-menu .current-menu-item > a { border-bottom-color: var(--c-dunkelblau);  }
/* Aktive Seite: gleich wie Hover eingerückt und leicht transparent */
.menu .sub-menu .current-menu-item > a { transform: translateX(1.5rem); opacity: .75; }
/* Hover: Unterpunkt gleitet 15px nach rechts und wird leicht transparent (nur mit Maus, nicht auf Touch-Geräten) */
@media (hover: hover) {
.menu .sub-menu a:hover,
.menu .sub-menu a:focus-visible { transform: translateX(1.5rem); opacity: .75; }
}

/* Panel: weisse Karte hinter Header und Unterpunkten, Höhe setzt JS (--mega-height) */
.header.mega-open { background: transparent; }
.header::before { content: ''; position: absolute; top: 2rem; left: 2.5rem; right: 2.5rem; height: var(--mega-height, 0); background: var(--c-weiss); border-radius: 1.6rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; z-index: -1;  }
.header.mega-open::before { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s;  }
}

/* Abdunkelung der Seite */
.nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 999; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;  }
body.mega-open .nav-overlay { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s;  }




/* ****************************************************************************************************
			    		MENU MOBILE
	Vollflächig dunkelblau. Unterpunkte erscheinen als eigene Ebene mit «Zurück».
**************************************************************************************************** */
@media (max-width: 991px) {
nav#hauptnavigation { position: fixed; inset: 0; width: 100%; height: 100dvh; background: var(--c-dunkelblau); color: var(--c-weiss); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; overflow: hidden; z-index: 100000; padding: calc(var(--header-height) + 4rem) var(--container-gutter) 4rem; display: flex; flex-direction: column;  }
nav#hauptnavigation.nav-open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s;  }

.menu { flex-direction: column; gap: 2.6rem; position: static;  }
.menu > li { position: static; }

.menu li a,
body .header .menu > li > a { display: flex; align-items: center; justify-content: space-between; font-size: 2.2rem; line-height: var(--lh-title); color: var(--c-weiss); padding: 0; border: 0;  }
.menu li a .menu-text { padding-bottom: 0.3rem; border-bottom: 1px solid rgba(255, 255, 255, .5); }

/* Pfeil rechts */
.menu li a::after { content: ''; flex: 0 0 4rem; height: 1.2rem; margin-left: 2rem; background: no-repeat right center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M0 6h39M33 1l6 5-6 5'/%3E%3C/svg%3E"); }

/* Unterebene */
.menu .sub-menu { position: absolute; inset: 0; background: var(--c-dunkelblau); padding: calc(var(--header-height) + 4rem) var(--container-gutter) 4rem; display: flex; flex-direction: column; gap: 2.6rem; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; z-index: 2;  }
.menu li.open > .sub-menu { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s;  }

/* «Zurück» (von JS eingefügt) */
.menu .submenu-back { position: absolute; top: 2rem; left: var(--container-gutter); }
.menu .submenu-back button { display: flex; align-items: center; gap: 1.2rem; background: none; border: 0; padding: 0; color: var(--c-weiss); font: inherit; font-size: var(--fontsize-xxs); cursor: pointer; }
.menu .submenu-back button::before { content: ''; width: 6.6rem; height: 2.6rem; border: 1px solid var(--c-weiss); border-radius: var(--radius-pill); background: no-repeat center / 4rem 1.2rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M40 6H1M7 1L1 6l6 5'/%3E%3C/svg%3E"); }

/* Datenschutz, Impressum, LinkedIn */
.nav-meta { display: flex; align-items: center; gap: 4rem; margin-top: auto; position: relative; z-index: 3; }
.nav-meta-menu { display: flex; gap: 4rem; margin: 0; padding: 0; list-style: none; }
.nav-meta-menu a { font-size: var(--fontsize-xs); color: var(--c-weiss); }
.nav-linkedin { margin-left: auto; display: block; width: 3.2rem; height: 3.2rem; color: var(--c-weiss); }
.nav-linkedin .ico { width: 100%; height: 100%; fill: currentColor; }

/* Logo weiss über dem Menü, in der Unterebene ausgeblendet */
.header.nav-is-open .logo { z-index: 100001; background-image: url(images/logo-weiss.svg); }
.header.submenu-is-open .logo { opacity: 0; visibility: hidden; }

.nav-overlay { display: none; }
}




/* ****************************************************************************************************
			    		BURGER / SCHLIESSEN
**************************************************************************************************** */
/* Geschlossen: Pille mit zwei Strichen, auf Unterseiten Warmgrau hell, über dem Hero weiss */
.nav-trigger { display: none; width: 8rem; height: 3.2rem; position: absolute; right: var(--container-gutter); top: 4.5rem; border-radius: var(--radius-pill); background: var(--c-warmgrau-hell); transition: .3s ease-in-out; cursor: pointer;  }
.nav-trigger span { display: block; position: absolute; height: 2px; width: 3.2rem; background: var(--c-dunkelblau); left: 2.4rem; transition: .25s ease-in-out;  }
.nav-trigger span:nth-child(1) { top: 1.1rem;  }
.nav-trigger span:nth-child(2), .nav-trigger span:nth-child(3) { top: 1.5rem; width: 0; left: 50%;  }
.nav-trigger span:nth-child(4) { top: 1.9rem;  }
body:has(.main > .section-hero:first-child) .header:not(.sticky) .nav-trigger { background: var(--c-weiss); }

/* Offen: Pille in Akzentfarbe mit X */
.nav-trigger.open { background: var(--c-hellblau); }
/* X aus Figma: Striche 33px, 2px dick, 30° geneigt. Strich 1 und 4 verschwinden (gleiche Spezifität wie die Regel davor, sonst bleibt ein dritter Strich) */
.nav-trigger.open span,
body .header .nav-trigger.open span { width: 3.3rem; left: calc(50% - 1.65rem); top: calc(50% - 1px); height: 2px; background: var(--c-dunkelblau); }
.nav-trigger.open span:nth-child(1), .nav-trigger.open span:nth-child(4),
body .header .nav-trigger.open span:nth-child(1), body .header .nav-trigger.open span:nth-child(4) { width: 0; left: 50%; }
.nav-trigger.open span:nth-child(2) { transform: rotate(30deg);  }
.nav-trigger.open span:nth-child(3) { transform: rotate(-30deg);  }

@media (max-width: 991px) {
.nav-trigger { display: block; position: fixed; z-index: 100002;  }
}




/* ****************************************************************************************************
			    		HEADER STICKY
**************************************************************************************************** */
/* Nicht im Figma-Design, von Roman so entschieden: nach unten scrollen blendet den Header aus,
   nach oben scrollen oder ganz unten erscheint er schmal (Klassen aus js/script.js) */
.header.sticky { position: fixed; top: 0; left: 0; height: 7rem; box-shadow: 0 1px 0 var(--c-linie); transform: translateY(0); }
.header.sticky.versteckt { transform: translateY(-100%); box-shadow: none; }
.header.ohne-animation, .header.ohne-animation * { transition: none !important; }
/* Platz des Headers freihalten, damit der Inhalt nicht springt (über dem Hero liegt er ohnehin darüber) */
body.header-fixiert:not(:has(.main > .section-hero:first-child)) .wrapper { padding-top: var(--header-height); }
.header.sticky .logo { width: 13rem; height: 3.5rem; top: 1.8rem; }
.header.sticky .nav-trigger { top: 1.9rem; }
.header.sticky nav#hauptnavigation { top: 2.2rem; }


/* Optional: Scroll Lock */
body.body-fixed { overflow: hidden;}







/* ------------------------------------------------------------ *\
	M O D U L E - Alle Inhaltsmodule
	Gestaltung der einzelnen Module folgt.
\* ------------------------------------------------------------ */



/* ------------------------------------------------------------ *\
	Section Hero
\* ------------------------------------------------------------ */
.section-hero { height: 100vh; height: 100svh; min-height: 50rem; color: var(--c-weiss); }
.section-hero .hero-media,
.section-hero .hero-media video,
.section-hero .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section-hero .hero-media::after { content: ''; position: absolute; inset: 0; background: var(--verlauf-bild); mix-blend-mode: multiply; }
.section-hero .hero-caption { position: absolute; left: 0; right: 0; bottom: clamp(9rem, 7.83rem + 2.44vw, 12rem); z-index: 2; }
/* Hero-Titel auf Mobile grösser als H1 der Unterseiten: HT-35 → HT-70 */
.section-hero .hero-titel { color: var(--c-weiss); margin: 0; font-size: clamp(3.5rem, 2.1341rem + 2.8455vw, 7rem); }




/* ------------------------------------------------------------ *\
	Section Titel mit Lead
\* ------------------------------------------------------------ */




.newsdatum { font-size: var(--fontsize-xs); margin-bottom: 1.5rem;}




/* ------------------------------------------------------------ *\
	Section Fachgebiete
	Blocktitel und Lead, darunter weisse Kacheln mit Icon.
	Mobile 2, Tablet 3, Desktop 4 Spalten.
\* ------------------------------------------------------------ */

.fachgebiete-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 1.61rem + 0.81vw, 3rem); list-style: none; margin: clamp(5rem, 3.83rem + 2.44vw, 8rem) 0 0; padding: 0; }
.fachgebiet-kachel { display: flex; flex-direction: column; gap: 4rem; height: 100%; padding: 4rem 2rem 2rem; background: var(--c-weiss); border-radius: var(--radius); color: var(--c-schwarz); transition: background .3s, transform .3s; }
a.fachgebiet-kachel:hover, a.fachgebiet-kachel:focus-visible { background: var(--c-kachel-hover); transform: translateY(-1rem); }
.fachgebiet-icon { display: block; position: relative; aspect-ratio: 345 / 150; }
.fachgebiet-icon img { width: 100%; height: 100%; object-fit: contain; }
/* Lottie-Animation (js/script.js): ersetzt das Icon, sobald sie geladen ist */
.fachgebiet-icon .lottie { position: absolute; inset: 0; }
.fachgebiet-icon .lottie svg { display: block; }
.fachgebiet-icon.lottie-bereit img { visibility: hidden; }
.fachgebiet-name { margin-top: auto; font-size: var(--fontsize-xs); font-weight: var(--fw-medium); line-height: var(--lh-text); }

@media (min-width: 768px) {
.fachgebiete-kacheln { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
.fachgebiet-kachel { padding: 6rem 3rem 3rem; }
.fachgebiet-name { font-size: var(--fontsize-sm); }
}

@media (min-width: 1200px) {
.fachgebiete-kacheln { grid-template-columns: repeat(4, 1fr); }
}




/* ------------------------------------------------------------ *\
	Section Link-Kacheln
	Freie Kacheln mit Titel und Link (z. B. Landingpages eines Fachgebiets).
	Mobile 1, ab 576px 2, Tablet 3, Desktop 4 Spalten. Ganze Kachel klickbar.
\* ------------------------------------------------------------ */
.section-link-kacheln h2 { margin-bottom: clamp(3rem, 0.27rem + 5.69vw, 10rem); }
.link-kacheln { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.61rem + 0.81vw, 3rem); list-style: none; margin: 0; padding: 0; }
.link-kachel { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4rem; height: 100%; padding: 2rem; background: var(--c-weiss); border-radius: var(--radius); transition: background .3s, transform .3s; }
.link-kachel:hover { background: var(--c-kachel-hover); transform: translateY(-1rem); }
.link-kachel-titel { font-size: var(--fontsize-lg); line-height: var(--lh-text); color: var(--c-dunkelblau); }

@media (min-width: 576px) {
.link-kacheln { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
.link-kacheln { grid-template-columns: repeat(3, 1fr); }
.link-kachel { gap: 6rem; padding: 3rem; }
}

@media (min-width: 1200px) {
.link-kacheln { grid-template-columns: repeat(4, 1fr); }
}




/* ------------------------------------------------------------ *\
	Section Projekte Übersicht
	Filter «Alle» + Dropdown mit den Fachgebieten, darunter Projekt-Kacheln.
	Mobile 1, Tablet 2, Desktop 3 Spalten. Kachel wie News «3-spaltig».
\* ------------------------------------------------------------ */
.projekte-filter { display: flex; justify-content: center; gap: clamp(1rem, 0.22rem + 1.63vw, 3rem); margin-bottom: clamp(3rem, 0.27rem + 5.69vw, 10rem); }
.btn-filter { display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 2rem; border: 0; border-radius: 0.5rem; background: var(--c-warmgrau); color: var(--c-schwarz); font: inherit; font-size: var(--fontsize-xs); line-height: var(--lh-text); opacity: .75; cursor: pointer; transition: opacity .3s, background .3s, color .3s; }
.btn-filter:hover { opacity: 1; }
.btn-filter.aktiv { background: var(--c-dunkelblau); color: var(--c-weiss); opacity: 1; }
.js-filter-toggle::after { content: ''; width: 0.7rem; height: 0.7rem; margin-top: -0.4rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s; }

.filter-dropdown { position: relative; }
.filter-dropdown.open .js-filter-toggle::after { margin-top: 0.4rem; transform: rotate(-135deg); }
.filter-liste { display: none; position: absolute; top: calc(100% + 1rem); left: 0; z-index: 10; min-width: 100%; margin: 0; padding: 1.5rem 2rem; list-style: none; white-space: nowrap; background: var(--c-weiss); border-radius: var(--radius); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1); }
.filter-dropdown.open .filter-liste { display: block; }
.filter-liste a { display: block; padding: 0.5rem 0; font-size: var(--fontsize-xs); color: var(--c-dunkelblau); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color .3s; }
.filter-liste a:hover,
.filter-liste a.aktiv { text-decoration-color: var(--c-hellblau); }

.projekte-raster { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 2.22rem + 1.63vw, 5rem) clamp(2rem, 1.61rem + 0.81vw, 3rem); }
.projekt-kachel { display: block; color: var(--c-schwarz); }
/* Format kommt aus der Bildgrösse «kachel» (575 × 395), kein Seitenverhältnis im CSS */
.projekt-bild { position: relative; overflow: hidden; background: var(--c-warmgrau-hell); }
.projekt-bild img { width: 100%; height: auto; transition: transform .6s ease; }
.projekt-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--c-warmgrau-dunkel), var(--c-weiss)); mix-blend-mode: multiply; opacity: .75; }
/* Hover: Verlauf weg, Bild grösser, Titel heller (Figma «akt_sml Variante2») */
.projekt-bild::after { transition: opacity .4s ease; }
.projekt-titel { transition: opacity .4s ease; }
.projekt-kachel:hover .projekt-bild img,
.projekt-kachel:focus-visible .projekt-bild img { transform: scale(1.08); }
.projekt-kachel:hover .projekt-bild::after,
.projekt-kachel:focus-visible .projekt-bild::after { opacity: 0; }
.projekt-kachel:hover .projekt-titel,
.projekt-kachel:focus-visible .projekt-titel { opacity: .6; }
.projekt-bild .label-fachgebiet { position: absolute; top: 2rem; left: 2rem; z-index: 1; }
.projekt-titel { margin: 1.5rem 0 0; font-size: 1.8rem; line-height: var(--lh-text); }

@media (min-width: 768px) {
.projekte-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
.projekte-raster { grid-template-columns: repeat(3, 1fr); }
.btn-filter,
.filter-liste a { font-size: var(--fontsize-sm); }
.projekt-bild .label-fachgebiet { top: 3rem; left: 3rem; }
.projekt-titel { margin-top: 2rem; font-size: var(--fontsize-md); }
}




/* ------------------------------------------------------------ *\
	Section Team / Ansprechpersonen Fachgebiet
	Personen-Kacheln: Foto quer (3:2), Name, Titel fett, Funktion, Bereich, E-Mail.
	Mobile 1, ab 576px 2, Tablet 3, Desktop 4 Spalten. Filter wie bei den Projekten.
\* ------------------------------------------------------------ */
.section-team h2 { margin-bottom: clamp(3rem, 1.05rem + 4.07vw, 8rem); }
.team-raster { display: grid; grid-template-columns: 1fr; gap: clamp(4rem, 3.22rem + 1.63vw, 6rem) clamp(2rem, 1.61rem + 0.81vw, 3rem); }

/* Format kommt aus der Bildgrösse «team» (575 × 380), kein Seitenverhältnis im CSS */
.team-raster .person-foto { overflow: hidden; background: var(--c-warmgrau); }
.team-raster .person-foto img { width: 100%; height: auto; }
.team-raster .person-content { font-size: var(--fontsize-xs); line-height: var(--lh-text); }
.team-raster .person-name { margin: clamp(1.5rem, 1.11rem + 0.81vw, 2.5rem) 0 clamp(1rem, 0.61rem + 0.81vw, 2rem); font-size: var(--fontsize-lg); }
.team-raster .person-titel { font-weight: var(--fw-medium); }
.team-raster .person-email a { color: var(--c-warmgrau-mittel); }
.team-raster .person-email a:hover { color: var(--c-dunkelblau); }

/* Auf Dunkelblau: Text weiss, E-Mail hellblau */
.hg-dunkelblau .team-raster .person-content { color: var(--c-weiss); }
.hg-dunkelblau .team-raster .person-email a { color: var(--c-hellblau); }
.hg-dunkelblau .team-raster .person-email a:hover { color: var(--c-weiss); }

/* Filter auf Dunkelblau: aktiv hellblau, sonst warmgrau hell */
.hg-dunkelblau .btn-filter { background: var(--c-warmgrau-hell); opacity: 1; }
.hg-dunkelblau .btn-filter:hover { background: var(--c-weiss); }
.hg-dunkelblau .btn-filter.aktiv { background: var(--c-hellblau); color: var(--c-dunkelblau); }
.hg-dunkelblau .keine-eintraege { color: var(--c-weiss); text-align: center; }

@media (min-width: 576px) {
.team-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
.team-raster { grid-template-columns: repeat(3, 1fr); }
.team-raster .person-content { font-size: var(--fontsize-sm); }
}

@media (min-width: 1200px) {
.team-raster { grid-template-columns: repeat(4, 1fr); }
}




/* ------------------------------------------------------------ *\
	Section News Übersicht
	Filter und Suche wie bei den Projekten, Kacheln wie News «3-spaltig», Seitennavigation.
\* ------------------------------------------------------------ */
.section-news_uebersicht .news-vorschau { row-gap: clamp(3rem, 2.22rem + 1.63vw, 5rem); }
.keine-eintraege { text-align: center; }
/* Filter ohne Seitenwechsel (js/script.js): ausgeblendete Projekte, News während dem Nachladen */
.projekte-raster [hidden], .keine-eintraege[hidden] { display: none !important; }
.section-news_uebersicht .container { transition: opacity .2s; }
.section-news_uebersicht.laedt .container { opacity: .4; pointer-events: none; }

.news-suche { position: relative; display: flex; align-items: center; }
.news-suche input[type="search"] { width: clamp(16rem, 11.12rem + 10.16vw, 27rem); padding: 1rem 5rem 1rem 2rem; border: 0; border-radius: 0.5rem; background: rgba(184, 180, 176, .75); color: var(--c-schwarz); font: inherit; font-size: var(--fontsize-xs); line-height: var(--lh-text); -webkit-appearance: none; appearance: none; }
.news-suche input[type="search"]::placeholder { color: var(--c-schwarz); opacity: 1; }
.news-suche input[type="search"]:focus { outline: 2px solid var(--c-dunkelblau); outline-offset: 0; background: var(--c-warmgrau); }
.news-suche input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.news-suche button { position: absolute; right: 1.5rem; display: flex; padding: 0; border: 0; background: none; cursor: pointer; }
.news-suche button img { width: 2.2rem; height: 2.2rem; }

.seiten-navigation { display: flex; justify-content: center; gap: 1rem; margin-top: clamp(5rem, 3.83rem + 2.44vw, 8rem); }
.seiten-navigation .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 4.4rem; height: 4.4rem; padding: 0 1rem; border-radius: 0.5rem; color: var(--c-dunkelblau); font-size: var(--fontsize-xs); transition: background .3s; }
.seiten-navigation a.page-numbers:hover { background: var(--c-warmgrau); }
.seiten-navigation .page-numbers.current { background: var(--c-dunkelblau); color: var(--c-weiss); }

/* Nur für Screenreader sichtbar */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 992px) {
.news-suche input[type="search"] { font-size: var(--fontsize-sm); }
}

@media (max-width: 575px) {
.projekte-filter { flex-wrap: wrap; }
}




/* ------------------------------------------------------------ *\
	Section Zitat
	Weisse Box, Zitat und Person (aus dem Team). Desktop nebeneinander, Mobile untereinander.
	Von der Person werden nur Foto, Name, Telefon und E-Mail gezeigt.
\* ------------------------------------------------------------ */
.zitat-box { margin: 0; padding: 3rem 2.5rem 5rem; background: var(--c-weiss); }
.zitat-text { margin: 0 0 3rem; font-size: clamp(2.8rem, 2.5659rem + 0.4878vw, 3.4rem); /* LD-28 → LD-34 */ line-height: var(--lh-title); color: var(--c-dunkelblau); }

.zitat-person .person { display: flex; align-items: center; gap: 2.5rem; }
.zitat-person .person-foto { flex: 0 0 12rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.zitat-person .person-foto img { width: 100%; height: 100%; object-fit: cover; }
.zitat-person .person-content { font-size: var(--fontsize-xs); line-height: var(--lh-text); color: var(--c-schwarz); }
.zitat-person .person-name { font-weight: var(--fw-medium); margin-bottom: 0.5rem; }
.zitat-person .person-titel,
.zitat-person .person-funktion,
.zitat-person .person-bereich { display: none; }
.zitat-person .person-email a { color: var(--c-warmgrau-mittel); }
.zitat-person .person-email a:hover { color: var(--c-dunkelblau); }

/* Desktop: Box über 8 Spalten, innen dasselbe Raster wie die Seite.
   Zitat Spalten 1–4, Foto rechtsbündig in 5–6, Kontaktangaben ab Spalte 7 (wie Figma) */
@media (min-width: 992px) {
.zitat-box { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 3rem; align-items: center; padding: 9rem 0; }
.zitat-text { grid-column: 1 / 5; margin: 0; padding-left: 6rem; line-height: var(--lh-text); }
.zitat-person { grid-column: 5 / 9; }
.zitat-person .person { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; align-items: center; }
.zitat-person .person-foto { justify-self: end; width: min(22.5rem, 100%); }
.zitat-person .person-content { font-size: var(--fontsize-sm); }
.zitat-person .person-name { margin-bottom: 0; }
}




/* ------------------------------------------------------------ *\
	Section Foto
	Breite «Rechte Spalte» (Standard) oder «Containerbreite» (ohne Blocktitel).
\* ------------------------------------------------------------ */
.section-foto img { width: 100%; }




/* ------------------------------------------------------------ *\
	Projekt-Single
	Kopf auf Beige, darunter Bild oder Video über die Inhaltsbreite.
	Die beige Fläche läuft hinter dem oberen Drittel des Bilds weiter.
\* ------------------------------------------------------------ */
.section-projekt-kopf { padding-bottom: var(--abstand-l); }

/* News-Detailseite: Datum links unter dem Übertitel */
.single-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin: -3rem 0 5rem; }
.single-datum { font-size: var(--fontsize-xs); line-height: var(--lh-text); }
.single-meta:not(:has(*)) { display: none; }

@media (min-width: 992px) {
.single-meta { margin: 2rem 0 0; }
.single-datum { font-size: var(--fontsize-sm); }
}

/* Stellen-Detailseite: Bewerbungsblock auf Beige (Inhalte aus Theme Einstellungen → Stellen) */
.section-bewerbung .bewerbung-titel { font-size: var(--fontsize-lg); font-weight: var(--fw-medium); margin-bottom: 1.5rem; }
.section-bewerbung .bewerbung-text { font-size: var(--fontsize-sm); line-height: var(--lh-text); }
.section-bewerbung .bewerbung-text p:last-child { margin-bottom: 0; }
.section-bewerbung a.btn { margin-top: 3rem; }
.section-projekt-bild { background: linear-gradient(var(--c-warmgrau-hell) 0 30%, transparent 30%); }
.section-projekt-bild img,
.projekt-video { display: block; width: 100%; height: auto; }
.projekt-video { aspect-ratio: 1710 / 962; object-fit: cover; }

/* Modul Kenndaten: Mobile untereinander, ab Tablet zweispaltig */
.kenndaten { display: grid; grid-template-columns: 1fr; gap: var(--abstand-s) 3rem; margin: 0; }
.kenndatum dt { font-size: var(--fontsize-xs); font-weight: var(--fw-medium); line-height: var(--lh-text); }
.kenndatum dd { margin: 0; font-size: clamp(1.8rem, 1.57rem + 0.49vw, 2.4rem); line-height: var(--lh-text); }

@media (min-width: 768px) {
.kenndaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
.kenndatum dt { font-size: var(--fontsize-sm); }
}




/* ------------------------------------------------------------ *\
	Section Bildergalerie
	Aufbau wie Text-Modul, darunter Vorschaubilder (Bildgrösse «kachel»), Klick öffnet Magnific Popup.
	Hover wie im Standardtheme: Farbfläche mit Plus.
\* ------------------------------------------------------------ */
.bildergalerie-text { margin-bottom: var(--abstand-s); }
.bildergalerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 0.22rem + 1.63vw, 3rem); margin: 0; padding: 0; list-style: none; }
.bildergalerie a { position: relative; display: block; overflow: hidden; }
.bildergalerie img { width: 100%; height: auto; transition: transform .6s ease; }
.bildergalerie a::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(10, 50, 80, .6); opacity: 0; transition: opacity .3s ease; }
.bildergalerie-icon { position: absolute; top: 50%; left: 50%; z-index: 2; width: 4rem; height: 4rem; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s ease; }
.bildergalerie-icon::before,
.bildergalerie-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--c-weiss); transform: translate(-50%, -50%); }
.bildergalerie-icon::before { width: 100%; height: 2px; }
.bildergalerie-icon::after { width: 2px; height: 100%; }
.bildergalerie a:hover::before,
.bildergalerie a:focus-visible::before,
.bildergalerie a:hover .bildergalerie-icon,
.bildergalerie a:focus-visible .bildergalerie-icon { opacity: 1; }
.bildergalerie a:hover img,
.bildergalerie a:focus-visible img { transform: scale(1.05); }

@media (min-width: 768px) {
.bildergalerie { grid-template-columns: repeat(3, 1fr); }
}




/* ------------------------------------------------------------ *\
	Section Bildreihe
	2 Bilder: links kleiner, rechts grösser und tiefer.
	3 Bilder: Collage, rechts hoch, links unten eingerückt.
	«Hintergrund oben»: Farbfläche hinter dem oberen Teil der Bilder.
\* ------------------------------------------------------------ */
.section-bildreihe { --bildreihe-band: clamp(8rem, 4rem + 9vw, 22rem); }
.section-bildreihe.oben-beige,
.section-bildreihe.oben-dunkelblau { background-image: linear-gradient(var(--band-farbe) 0 var(--bildreihe-band), transparent var(--bildreihe-band)); }
.section-bildreihe.oben-beige { --band-farbe: var(--c-warmgrau-hell); }
.section-bildreihe.oben-dunkelblau { --band-farbe: var(--c-dunkelblau); }

.bildreihe { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; row-gap: var(--space-s); align-items: start; }
.bildreihe-item img { width: 100%; height: 100%; object-fit: cover; }

/* Versetzt */
/* 2 Bilder gemäss Figma: links 5 Spalten, rechts 7 Spalten und 120px tiefer */
.bildreihe-versetzt.bildreihe-2 .bildreihe-item:nth-child(1) { grid-column: 1 / 6; aspect-ratio: 695 / 553; }
.bildreihe-versetzt.bildreihe-2 .bildreihe-item:nth-child(2) { grid-column: 6 / 13; aspect-ratio: 985 / 601; margin-top: clamp(4rem, 0.88rem + 6.5vw, 12rem); }

/* 3 Bilder gemäss Figma «Über uns»: links 6 Spalten, rechts 5 Spalten und tiefer, unten 5 Spalten ab Spalte 3 */
.bildreihe-versetzt { column-gap: clamp(1rem, 0.22rem + 1.63vw, 3rem); row-gap: clamp(4rem, 0.88rem + 6.5vw, 12rem); }
.bildreihe-versetzt.bildreihe-3 .bildreihe-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1; aspect-ratio: 840 / 842; }
.bildreihe-versetzt.bildreihe-3 .bildreihe-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; aspect-ratio: 695 / 1022; margin-top: clamp(4rem, 0.88rem + 6.5vw, 12rem); }
.bildreihe-versetzt.bildreihe-3 .bildreihe-item:nth-child(3) { grid-column: 3 / 8; grid-row: 2; aspect-ratio: 695 / 553; }

/* In einer Reihe: gleiche Höhe, unterschiedliche Breiten (Startseite).
   Das erste Bild bestimmt mit seinem Seitenverhältnis die Höhe, die anderen strecken sich mit.
   Mobile: zwei Bilder oben, das dritte darunter in voller Breite. */
.bildreihe-reihe { gap: clamp(1rem, 0.22rem + 1.63vw, 3rem); align-items: stretch; }
.bildreihe-reihe .bildreihe-item { grid-column: auto; position: relative; }
.bildreihe-reihe .bildreihe-item img { position: absolute; inset: 0; }
.bildreihe-reihe.bildreihe-2 { grid-template-columns: 1fr 1fr; }
.bildreihe-reihe.bildreihe-2 .bildreihe-item:nth-child(1) { aspect-ratio: 1; }
.bildreihe-reihe.bildreihe-3 { grid-template-columns: 202fr 149fr; }
.bildreihe-reihe.bildreihe-3 .bildreihe-item:nth-child(1) { aspect-ratio: 202 / 203; }
.bildreihe-reihe.bildreihe-3 .bildreihe-item:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 362 / 288; }

@media (min-width: 768px) {
.bildreihe-reihe.bildreihe-2 { grid-template-columns: 695fr 985fr; }
.bildreihe-reihe.bildreihe-2 .bildreihe-item:nth-child(1) { aspect-ratio: 695 / 553; }
.bildreihe-reihe.bildreihe-3 { grid-template-columns: 550fr 405fr 695fr; }
.bildreihe-reihe.bildreihe-3 .bildreihe-item:nth-child(1) { aspect-ratio: 550 / 553; }
.bildreihe-reihe.bildreihe-3 .bildreihe-item:nth-child(3) { grid-column: auto; aspect-ratio: auto; }
}

@media (max-width: 767px) {
.bildreihe { column-gap: 1.2rem; row-gap: 1.2rem; }
}




/* ------------------------------------------------------------ *\
	Section Logos (Mitgliedschaften, Partner)
\* ------------------------------------------------------------ */
.logos-text { margin-bottom: 5rem; } /* Figma: 50 mobil, 56 Desktop */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.logo-kachel { display: flex; align-items: center; justify-content: center; aspect-ratio: 19 / 10;  transition: opacity .3s; }
.logo-kachel img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
a.logo-kachel:hover { opacity: .7; }

/* Auf weissem Hintergrund Kacheln in Beige */
.hg-weiss .logo-kachel { background: var(--c-warmgrau-hell); }

@media (max-width: 575px) {
.logos { grid-template-columns: repeat(2, 1fr); }
}




/* ------------------------------------------------------------ *\
	Section Stellen
\* ------------------------------------------------------------ */
.stellen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
.stellen a { font-size: var(--fontsize-md); line-height: var(--lh-text); color: var(--c-dunkelblau); transition: opacity .3s; }
.stellen a:hover { opacity: .6; }
.keine-stellen { font-size: var(--fontsize-md); }




/* ------------------------------------------------------------ *\
	Dokumenten-Icons
\* ------------------------------------------------------------ */
.ico-zip,
.ico-doc,
.ico-img,
.ico-other,
.ico-pdf,
.ico-xls{ width: 19px;height: 23px;display: inline-block;vertical-align: middle;}

/* Aktion-Icons (rechtes Icon) */
.ico-download { width: 19px; height: 23px; display: inline-block; vertical-align: middle;}
.ico-web { width: 23px; height: 19px; display: inline-block; vertical-align: middle;}

/* Web-Link-Icon */
.ico-link { width: 20px; height: 20px; display: inline-block; vertical-align: middle;}

/* optional: alle Icons mit currentColor färben */
.ico svg { stroke: currentColor; fill: none;}




/* ------------------------------------------------------------ *\
    Dokument Download-Liste
\* ------------------------------------------------------------ */
/* Pro Eintrag optional ein Übertitel (fett), darunter der Link in Grau mit Dateityp und Grösse */
.dokument-download { display: grid; gap: clamp(3rem, 2.61rem + 0.81vw, 4rem); margin: 0; padding: 0; list-style: none; }
.download-ubertitel { display: block; font-size: var(--fontsize-xs); font-weight: var(--fw-medium); line-height: var(--lh-text); }
.dokument-download a { font-size: clamp(1.8rem, 1.57rem + 0.49vw, 2.4rem); line-height: var(--lh-text); color: var(--c-warmgrau-mittel); transition: color .3s; }
.dokument-download a:hover { color: var(--c-dunkelblau); }

@media (min-width: 992px) {
.download-ubertitel { font-size: var(--fontsize-sm); }
}




/* ------------------------------------------------------------ *\
	Section Meilensteine
\* ------------------------------------------------------------ */
/* Horizontaler Zeitstrahl, scrollt bis an den rechten Bildschirmrand.
   Logik: Die Einträge wechseln sich oben und unten ab (1. oben, 2. unten, 3. oben …).
   Jeder Eintrag beginnt einen festen Schritt (--schritt) nach dem vorherigen. Würde er
   dabei den Eintrag davor in seiner eigenen Reihe berühren (z. B. nach einem Foto),
   rückt er nach, bis --luft Abstand bleibt. Die Positionen rechnet script.js aus.
   Oben ist der Inhalt oben ausgerichtet, unten unten, also jeweils von der gepunkteten
   Mittellinie weg. Ein Foto steht links neben dem Text. */
.section-meilensteine { --zeile: 24rem; --mitte: 4rem; --schritt: 15.5rem; --luft: 2rem; --einzug: 2rem; --textbreite: 28rem; --fotobreite: 22rem; position: relative; }

.zeitstrahl { overflow-x: auto; scrollbar-width: none; cursor: grab; padding-inline: max(var(--container-gutter), calc((100% - var(--container-max-width)) / 2)); }
.zeitstrahl::-webkit-scrollbar { display: none; }
.zeitstrahl.ziehen { cursor: grabbing; user-select: none; }
.zeitstrahl:focus-visible { outline: 2px solid var(--c-dunkelblau); outline-offset: -2px; }

.zeitstrahl-liste { position: relative; display: flex; align-items: flex-start; width: max-content; margin: 0; padding: 0; list-style: none; }
.zeitstrahl-liste::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--zeile) + var(--mitte) / 2 - 1px); border-top: 2px dotted var(--c-dunkelblau); }

.meilenstein { display: flex; gap: var(--einzug); min-height: var(--zeile); padding-left: var(--einzug); border-left: 1px solid var(--c-hellblau); }
.meilenstein + .meilenstein { margin-left: -12rem; } /* Ersatz ohne JavaScript */
.meilenstein:nth-child(even) { align-items: flex-end; margin-top: calc(var(--zeile) + var(--mitte)); }

.meilenstein-foto { flex: 0 0 var(--fotobreite); width: var(--fotobreite); min-width: 0; aspect-ratio: 375 / 299; overflow: hidden; } /* min-width: 0, sonst bläht WordPress' Platzhalter für lazy Bilder (3000px) den Eintrag auf */
.meilenstein-foto img { width: 100%; height: 100%; object-fit: cover; }
.meilenstein-text { width: var(--textbreite); }
.meilenstein-jahr { font-size: clamp(2.4rem, 1.70rem + 1.46vw, 4.2rem); line-height: var(--lh-title); }
.meilenstein-titel { margin: clamp(3rem, 2.61rem + 0.81vw, 4rem) 0 clamp(2rem, 1.61rem + 0.81vw, 3rem); font-size: clamp(1.8rem, 1.57rem + 0.49vw, 2.4rem); line-height: var(--lh-text); }
.meilenstein-beschrieb { font-size: clamp(1.6rem, 1.44rem + 0.33vw, 2rem); line-height: var(--lh-text); }
.meilenstein-beschrieb p { margin: 0; }

/* Wisch-Hinweis, verschwindet nach dem ersten Scrollen */
.zeitstrahl-hinweis { position: absolute; left: 50%; top: calc(var(--zeile) - 3rem); width: clamp(6rem, 4.44rem + 3.25vw, 10rem); height: auto; transform: translateX(-50%); pointer-events: none; transition: opacity .4s; }
.section-meilensteine.gescrollt .zeitstrahl-hinweis { opacity: 0; }
.hg-beige.section-meilensteine .zeitstrahl-hinweis,
.hg-dunkelblau.section-meilensteine .zeitstrahl-hinweis { top: calc(var(--abstand-l) + var(--zeile) - 3rem); }

@media (min-width: 992px) {
.section-meilensteine { --zeile: 36rem; --mitte: 6rem; --schritt: 29rem; --luft: 17.5rem; --einzug: 3rem; --textbreite: 37.5rem; --fotobreite: 37.5rem; }
}




/* ------------------------------------------------------------ *\
	Section Accordion
\* ------------------------------------------------------------ */
.accordion { border-bottom: 1px solid var(--c-linie); }

.accordion-trigger {
color: var(--c-dunkelblau);  padding: 15px 40px 15px 0; border-top: 1px solid var(--c-linie);
cursor: pointer; display: block; width: 100%; clear: both; position: relative;
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}
.accordion-trigger:first-of-type { border-top: none; padding-top: 0;}

.accordion-trigger:hover { opacity: .6;}

.accordion-trigger-open:before, .accordion-trigger-open:after {border-top: 1px solid currentColor}
.accordion-trigger-open:before {content: "";position: absolute;display: block;right: 0px; top: 50%; width: 16px; height: 0;transform: rotate(0deg);transform-origin: center;-webkit-transition: all .5s ease;transition: all .5s ease;}
.accordion-trigger-open:after {content: "";position: absolute;display: block;margin: auto; right: 0px; top: 2px; bottom: 0;width: 16px; height: 0; transform: rotate(90deg);transform-origin: center;transition: all .5s ease;}

.accordion-trigger-active .accordion-trigger-open:before {transform: rotate(45deg);}
.accordion-trigger-active .accordion-trigger-open:after {transform: rotate(-45deg); }

.accordion-content {padding: 0 0 30px 0; -webkit-animation:fadeOut .8s ease-out;animation:fadeOut .8s ease-out;  }
.accordion-content.open {-webkit-animation:fadeIn .8s ease-out;animation:fadeIn .8s ease-out}




/* ------------------------------------------------------------ *\
	Section News
\* ------------------------------------------------------------ */
/* Vorschau: Mobile untereinander, Titel unter dem Bild */
.section-news_vorschau h2 { margin-bottom: clamp(3rem, 2.22rem + 1.63vw, 5rem); }
.news-vorschau { display: grid; gap: 3rem; }

.news-kachel { position: relative; display: block; color: var(--c-schwarz); }
/* Kleine Kacheln: Format aus der Bildgrösse «kachel» (575 × 395), kein Seitenverhältnis im CSS */
.news-bild { position: relative; overflow: hidden; background: var(--c-warmgrau-hell); }
.news-bild img { width: 100%; height: auto; transition: transform .6s ease; }
.news-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--c-warmgrau-dunkel), var(--c-weiss)); mix-blend-mode: multiply; opacity: .75; }
/* Hover klein: Verlauf weg, Bild grösser, Pill bleibt, Titel heller (Figma «akt_sml Variante2») */
.news-bild::after { transition: opacity .4s ease; }
.news-titel,
.news-kachel .label-fachgebiet { transition: opacity .4s ease, transform .4s ease; }
.news-kachel:hover .news-bild img,
.news-kachel:focus-visible .news-bild img { transform: scale(1.08); }
.news-kachel:hover .news-bild::after,
.news-kachel:focus-visible .news-bild::after { opacity: 0; }
.news-kachel:hover .news-titel,
.news-kachel:focus-visible .news-titel { opacity: .6; }

.news-kachel .label-fachgebiet { position: absolute; top: 2rem; left: 2rem; z-index: 1; }
.news-titel { font-size: 1.8rem; line-height: var(--lh-text); margin: 1.5rem 0 0; }

@media (max-width: 991px) {
/* Mobile: die grosse Kachel im gleichen Format wie die kleinen (Bild ist quadratisch, wird zugeschnitten) */
.news-kachel-gross .news-bild img { aspect-ratio: 575 / 395; object-fit: cover; }
}

@media (min-width: 992px) {
/* 3-spaltig: wie Mobile, Titel unter dem Bild */
.news-vorschau { grid-template-columns: repeat(3, 1fr); }
.news-kachel .label-fachgebiet { top: 3rem; left: 3rem; }
.news-titel { margin-top: 2rem; font-size: var(--fontsize-md); }

/* 1 gross, 2 klein: Titel auf dem Bild */
.news-vorschau-hervorgehoben { grid-template-columns: 985fr 695fr; grid-template-rows: 1fr 1fr; }
.news-kachel-gross { grid-row: span 2; }
/* «1 gross, 2 klein»: hier füllen die Bilder die Rasterzellen, deshalb Zuschnitt per CSS */
.news-kachel-gross .news-bild { aspect-ratio: 1; }
.news-vorschau-hervorgehoben .news-kachel:not(.news-kachel-gross) .news-bild { height: 100%; }
/* Die grosse Kachel gibt die Höhe vor: die kleinen Bilder bringen keine eigene Höhe mit und füllen ihre Zelle */
.news-vorschau-hervorgehoben .news-kachel:not(.news-kachel-gross) .news-bild img { position: absolute; inset: 0; }
.news-vorschau-hervorgehoben .news-bild img { height: 100%; object-fit: cover; }

.news-vorschau-hervorgehoben .news-bild::after { background: var(--verlauf-bild); }
.news-vorschau-hervorgehoben .label-fachgebiet { top: 4rem; left: 4rem; }
.news-vorschau-hervorgehoben .news-titel { position: absolute; left: 4rem; right: 4rem; bottom: 4rem; z-index: 1; margin: 0; font-size: var(--fontsize-lg); color: var(--c-weiss); }

/* Hover «1 gross, 2 klein»: Verlauf weg, Pill nach oben und Titel nach unten ausblenden, Bild grösser (Figma «akt_big») */
.news-vorschau-hervorgehoben .news-kachel:hover .label-fachgebiet,
.news-vorschau-hervorgehoben .news-kachel:focus-visible .label-fachgebiet { opacity: 0; transform: translateY(-3rem); }
.news-vorschau-hervorgehoben .news-kachel:hover .news-titel,
.news-vorschau-hervorgehoben .news-kachel:focus-visible .news-titel { opacity: 0; transform: translateY(4rem); }
}

/* Einzelansicht */
.singlenews .newsdatum {margin-bottom: 20px}
.singlenews .lead { margin-bottom: 30px}




/* ========================================
   SINGLE PAGINATION
======================================== */
.single-pagination-content {border-top: 1px solid var(--c-linie); border-bottom: 1px solid var(--c-linie); margin: 40px 0 var(--space-l)}
.single-pagination { margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 40px 0  }
.single-pagination > div { display: flex; align-items: center;  }

.previous_post_link { justify-self: start;  }
.post_overview { justify-self: center;  }
.next_post_link { justify-self: end;  }

.single-nav-link { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; line-height: var(--lh-none); transition: 0.2s ease;  }
.single-nav-title { font-size: var(--fontsize-xs); line-height: var(--lh-title); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }

.single-nav-arrow { display: inline-block; width: 12px; height: 12px; border-top: 1px solid var(--c-dunkelblau); border-right: 1px solid var(--c-dunkelblau); transition: 0.2s ease;  }
.prev .single-nav-arrow { transform: rotate(-135deg);  }
.next .single-nav-arrow { transform: rotate(45deg);  }
.single-nav-link:hover { opacity: .6; }

.single-overview-link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--c-dunkelblau); transition: 0.2s ease;  }
.single-overview-icon { width: 20px; height: 20px;  }
.single-overview-link:hover { opacity: .6;  }


@media (max-width: 767px) {
.single-pagination { margin: 20px 0 60px}
.single-pagination { width: 100%; grid-template-columns: 1fr 1fr 1fr; gap: 25px; text-align: center; padding: 20px 0}

.previous_post_link,
.post_overview,
.next_post_link { justify-self: center;}
.single-nav-title { display: none;}
.single-nav-link { justify-content: center;}
}




/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */
/* Mobile: zweispaltig. Desktop: 4er-Raster wie die Fachgebiet-Kacheln, Menü und Meta in der 4. Spalte */
.footer { margin-top: auto; padding: clamp(6rem, 3.66rem + 4.88vw, 12rem) 0 clamp(5rem, 3.05rem + 4.07vw, 10rem); background: var(--c-weiss); color: var(--c-schwarz); font-size: var(--fontsize-xs); line-height: var(--lh-text); }
.footer a { color: inherit; transition: color .3s; }
.footer strong { font-weight: var(--fw-medium); }

.footer-oben,
.footer-adressen { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.footer-logo { display: block; width: 12.5rem; }
.footer-logo img { width: 100%; height: auto; }

.footer-nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-nav a { font-size: var(--fontsize-md); line-height: var(--lh-title); color: var(--c-dunkelblau); text-decoration: underline; text-decoration-color: var(--c-hellblau); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.footer-nav a:hover,
.footer-nav .current-menu-item > a { text-decoration-color: var(--c-dunkelblau); }

.footer-unten { margin-top: 6rem; }
.footer-firma { font-weight: var(--fw-medium); margin-bottom: 1.4em; }
.footer-adressen { row-gap: 3rem; }
.footer-adresse a:hover { color: var(--c-dunkelblau); }

.footer-meta { display: flex; align-items: center; gap: 4rem; margin-top: 8rem; }
.footer-nav-alt ul { display: flex; gap: 4rem; margin: 0; padding: 0; list-style: none; }
.footer-nav-alt a { font-weight: var(--fw-medium); color: var(--c-dunkelblau); }
.footer-nav-alt a:hover { color: var(--c-warmgrau-mittel); }
.footer .footer-linkedin { display: flex; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; margin-left: auto; border: 2px solid var(--c-dunkelblau); border-radius: 0.8rem; color: var(--c-dunkelblau); transition: background .3s, color .3s; }
.footer-linkedin .ico { width: 2rem; height: 2rem; fill: currentColor; }
.footer .footer-linkedin:hover { background: var(--c-dunkelblau); color: var(--c-weiss); }

/* Erst ab 1200px, darunter ist die 4. Spalte zu schmal für Menü und Meta */
@media (min-width: 1200px) {
.footer { font-size: var(--fontsize-sm); }
.footer-oben,
.footer-unten { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 3rem; }
.footer-logo { width: 20.5rem; }
.footer-nav { grid-column: 4; }
.footer-nav a { font-size: var(--fontsize-xl); }

.footer-unten { align-items: end; margin-top: 15rem; }
.footer-kontakt { grid-column: 1 / 4; }
.footer-adressen { display: flex; flex-wrap: wrap; gap: 3rem 10rem; }
.footer-meta { grid-column: 4; margin-top: 0; }
}




/* ------------------------------------------------------------ *\
	Modul Google Maps
\* ------------------------------------------------------------ */
/* Aufbau wie Text-Modul (Blocktitel links, optional eingerückt), Karte rechts bündig mit dem Text,
   darunter normale Links zweispaltig. Skripte lädt das Template nur bei Bedarf. */
.karte { aspect-ratio: 4 / 3; background: var(--c-warmgrau-hell); }
.karte .marker { display: none; }

/* Infofenster beim Klick auf einen Pin (Inhalt aus ACF) */
.karte-bubble { font-family: var(--ff-base); font-size: 1.6rem; line-height: var(--lh-text); color: var(--c-schwarz); }
.karte-bubble p { margin: 0 0 1rem; }
.karte-bubble p:last-child { margin-bottom: 0; }
.karte-bubble strong { font-weight: var(--fw-medium); }
.karte-bubble a { color: var(--c-dunkelblau); text-decoration: underline; text-decoration-color: var(--c-hellblau); text-underline-offset: 0.2em; }
.karte-bubble a:hover { text-decoration-color: var(--c-dunkelblau); }

.karte-links { display: grid; grid-template-columns: 1fr; gap: 2.5rem 3rem; margin: var(--abstand-s) 0 0; padding: 0; list-style: none; }
.karte-links a { font-size: var(--fontsize-lg); line-height: var(--lh-text); color: var(--c-dunkelblau); text-decoration: underline; text-decoration-color: var(--c-hellblau); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color .3s; }
.karte-links a:hover { text-decoration-color: var(--c-dunkelblau); }

@media (min-width: 768px) {
.karte { aspect-ratio: 985 / 577; }
.karte-links { grid-template-columns: repeat(2, minmax(0, 34.2rem)); }
}




/* **************************************************
			    		CONTACT
************************************************** */
div.wpcf7 {margin: 0;padding: 0; width: 100%;}
span.wpcf7-form-control-wrap { position: relative; }

.wpcf7 form input, .wpcf7 form textarea { background: var(--c-warmgrau-hell);  border: 1px solid var(--c-warmgrau-hell); color:var(--c-schwarz); padding: 15px 20px; width:100%; box-sizing: border-box; margin: 0 0 20px 0; border-radius: var(--radius); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
.wpcf7 form input:hover, form textarea:hover {outline:none; border: 1px solid var(--c-dunkelblau);}
.wpcf7 form input:focus, form textarea:focus {outline:none; border: 1px solid var(--c-dunkelblau);}

.wpcf7 form textarea {height: 240px;}

.wpcf7 form input::placeholder,
.wpcf7 form textarea::placeholder {color: var(--c-warmgrau) !important; opacity: 1; }

.wpcf7 form input:focus::placeholder,
.wpcf7 form textarea:focus::placeholder {   color:transparent !important;}


/* SUBMIT BUTTON */
.wpcf7 form input[type=submit] {
font-size: var(--fontsize-xxs); line-height: var(--lh-text); color: var(--c-dunkelblau); border: 1px solid var(--c-dunkelblau); border-radius: var(--radius-pill); padding: 0.8rem 2rem; background: transparent;
margin-top: 20px;
width: auto; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
}
.wpcf7 form input[type=submit]:hover {color: var(--c-weiss); background: var(--c-dunkelblau);}




.screen-reader-response { display: none;}
div.wpcf7-response-output { color: var(--c-dunkelblau);font-size: var(--fontsize-sm); margin: 20px 0 20px 0 !important; font-weight: 600; border: none !important; padding: 0 !important;}

div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors,
div.screen-reader-response {border: 0px !important; padding: 0px !important; margin: 0 0 25px 0 !important; font-size: var(--fontsize-xxs); line-height: var(--lh-text); color: var(--c-dunkelblau); font-weight: 600;}


span.wpcf7-not-valid-tip {color: var(--c-dunkelblau) !important; font-size: 12px !important; display: block; margin: -15px 0 10px 0!important ;}
input.wpcf7-not-valid {border:1px solid red !important}

.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;	top: 20%; left: 20%; z-index: 100;	border: 1px solid var(--c-dunkelblau);	background: var(--c-weiss);	padding: .2em .8em;}


div.wpcf7 .placeheld {color: var(--c-schwarz);}
div.wpcf7 img.ajax-loader { border: none;vertical-align: middle;margin-left: 4px;display: none;}
div.wpcf7 div.ajax-error { display: none;}
.wpcf7-display-none { display: none; }



/* SELECT*/
.wpcf7-form  .select-wrapper { position: relative; width: 100%; margin: 0 0 20px 0;}
.wpcf7-form  .select-wrapper:after { pointer-events: none; position: absolute; display: block; content: '';  width: 10px; height: 10px; top: 50%; right: 20px; margin-top: -3px; border-bottom: 1px solid var(--c-dunkelblau); border-right: 1px solid var(--c-dunkelblau); transform: rotate(45deg) translateY(-50%); transition: all .4s ease-in-out; transform-origin: 50% 0; }

.wpcf7-form select{width:100%; background: var(--c-warmgrau-hell);  border: 1px solid var(--c-warmgrau-hell); color:var(--c-schwarz); padding: 15px 20px;  border-radius: var(--radius);outline:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-family: inherit; cursor: pointer;}
.wpcf7-form select:hover, .wpcf7-form select:focus {border: 1px solid var(--c-dunkelblau);}
.wpcf7-form select::-ms-expand{display:none;}
.wpcf7-form select:focus::-ms-value { background-color: transparent;}


/* RADIO BUTTONS */
.wpcf7-list-item {display: block; margin: 0 30px 10px 0!important;}

.wpcf7-form .wpcf7-radio .wpcf7-list-item-label { display: inline-flex;}
.wpcf7-form .wpcf7-radio label { position: relative; cursor: pointer;}
.wpcf7-form .wpcf7-radio input[type=radio] {position: relative; visibility: hidden; display: none}

.wpcf7-form .wpcf7-radio input[type=radio] + span:before { content: ''; border-radius: 100%; height: 20px; width: 20px; border: 1px solid var(--c-dunkelblau); margin-right: 15px;}
.wpcf7-form .wpcf7-radio input[type=radio] + span:after { display: block; position: absolute; content: '';  border-radius: 100%; height: 12px; width: 12px; top: 5px; left: 5px; visibility: hidden;}

.wpcf7-form .wpcf7-radio input[type=radio]:checked + span:before { background: transparent;}
.wpcf7-form .wpcf7-radio input[type=radio]:checked + span:after { background: var(--c-dunkelblau); visibility: visible;}


/* CHECKBOXES */
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label { display: inline-flex;}
.wpcf7-form .wpcf7-checkbox label { position: relative; cursor: pointer;}
.wpcf7-form .wpcf7-checkbox input[type=checkbox] {position: relative; visibility: hidden; display: none}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:before { content: ''; height: 20px; width: 20px; border: 1px solid var(--c-dunkelblau); margin-right: 15px;}
.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:after { display: block; position: absolute; content: '';   height: 12px; width: 12px; top: 5px; left: 5px; visibility: hidden;}

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:before { background: transparent;}
.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:after { background: var(--c-dunkelblau); visibility: visible;}


/* ACCEPTANCE */
.wpcf7-acceptance .wpcf7-list-item-label {margin-left: 45px; display: flex;}
.wpcf7-form .wpcf7-acceptance label { margin-left: 0;display: inline-block;position: relative; padding-left: 0px;}
.wpcf7-form .wpcf7-acceptance input[type=checkbox] {position: relative; visibility: hidden; display: none;}

.wpcf7-form .wpcf7-acceptance input[type=checkbox] + span:before { display: block; position: absolute; content: ''; border-radius: 0; height: 24px; width: 24px; top: 0; border: 1px solid var(--c-dunkelblau); left: 0;}
.wpcf7-form .wpcf7-acceptance input[type=checkbox] + span:after { display: block; position: absolute; content: ''; border-radius: 0%; height: 16px; width: 16px; top: 4px; left: 4px; visibility: hidden;}

.wpcf7-form .wpcf7-acceptance input[type=checkbox]:checked + span:before {  background: transparent;}
.wpcf7-form .wpcf7-acceptance input[type=checkbox]:checked + span:after { background: var(--c-dunkelblau); visibility: visible;}



/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}