/* ==================================================================
   priedemann.css — Neuaufbau, Stand 17.08.2026

   Alles Breakpoint-Abhaengige gehoert nach priedemann-queries.css, nichts
   davon hierher.

   Vorgehen und Reihenfolge des Wiederaufbaus: docs/css-strategy.md
   ================================================================== */


/* Schriftdateien
-------------------------------------------------- */
@font-face {
	font-family: 'Spectral';
	src:	url('../fonts/Spectral-MediumItalic.ttf');
	src:	url('../fonts/Spectral-MediumItalic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'EuclidCircularB-Regular-WebS';
	src:	url('../fonts/EuclidCircularB-Regular-WebS');
	src:	url('../fonts/EuclidCircularB-Regular-WebS.eot?#iefix') format('embedded-opentype'),
  			url('../fonts/EuclidCircularB-Regular-WebS.woff2') format('woff2'),
  			url('../fonts/EuclidCircularB-Regular-WebS.woff') format('woff'),
  			url('../fonts/EuclidCircularB-Regular-WebS.ttf') format('truetype'),
  			url('../fonts/EuclidCircularB-Regular-WebS.svg#EuclidCircularB-Regular-WebS') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'EuclidCircularB-Bold-WebS';
  src:	url('../fonts/EuclidCircularB-Bold-WebS');
  src:	url('../fonts/EuclidCircularB-Bold-WebS.eot?#iefix') format('embedded-opentype'),
  		url('../fonts/EuclidCircularB-Bold-WebS.woff2') format('woff2'),
  		url('../fonts/EuclidCircularB-Bold-WebS.woff') format('woff'),
  		url('../fonts/EuclidCircularB-Bold-WebS.ttf') format('truetype'),
  		url('../fonts/EuclidCircularB-Bold-WebS.svg#EuclidCircularB-Bold-WebS') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
  font-family: 'EuclidCircularB-Medium-WebS';
  src:	url('../fonts/EuclidCircularB-Medium-WebS');
  src:	url('../fonts/EuclidCircularB-Medium-WebS.eot?#iefix') format('embedded-opentype'),
  		url('../fonts/EuclidCircularB-Medium-WebS.woff2') format('woff2'),
  		url('../fonts/EuclidCircularB-Medium-WebS.woff') format('woff'),
  		url('../fonts/EuclidCircularB-Medium-WebS.ttf') format('truetype'),
  		url('../fonts/EuclidCircularB-Medium-WebS.svg#EuclidCircularB-Medium-WebS') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* Bootstrap Icons weight
-------------------------------------------------- */
.bi {
    -webkit-text-stroke: 1.0px;
}

/* Farbtoken
-------------------------------------------------- */
:root {
	--linie: #dee2e6;
	--rot: #CC151A;
}


/* Document
-------------------------------------------------- */
html { position:relative;min-height:100%; }
/* color:#000 ueberschreibt Bootstraps --bs-body-color (#212529) als
   generelle Textfarben-Vorgabe des Projekts. */
body { font-family:'EuclidCircularB-Regular-WebS', sans-serif;
	color: #000;
	/* padding top = navi height (80px) */
	padding-top:80px;
}
/* Echte Bold-Datei statt synthetischer Fettung des Regular-Schnitts. */
b, strong { font-family:'EuclidCircularB-Bold-WebS', sans-serif; }
p { margin-bottom:20px; }
a { font-family:'EuclidCircularB-Medium-WebS', sans-serif; color:#000; text-decoration:none; }
a:hover, a:active { color:var(--rot); }


/* Bodycopy - drei Groessen, .copy-x-small bisher nur im Footer
-------------------------------------------------- */
/* letter-spacing in em, damit es mit der kleineren Groesse unter 768px mitskaliert. */
.copy-big   { font-size: 1.3rem; line-height: 1.6; letter-spacing: 0.01em; }
.copy-small,
[id^="yform-"],
.modal,
.footer     { font-size: 1rem;    line-height: 1.5; letter-spacing: 0.01em; }
.copy-x-small,
.footer .small { font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.01em; }
.copy-medium { font-family: 'EuclidCircularB-Medium-WebS', sans-serif; }

ul {
    list-style-type: square;
    margin-left: 0;
    padding-left: 15px;
}

.limiter540 { max-width: 540px; }
.alignright { text-align: right; }


/* Ueberschriften h1-h6
--------------------------------------------------
   Breakpoint-Werte in priedemann-queries.css. h4 und h5 haben keine
   Grundregel, das war in der Altdatei auch so. */
h1, h2, h3, h4, h5, h6 { font-family:'EuclidCircularB-Medium-WebS', sans-serif; }
h1 { font-size: 2.25rem; text-align: center; }
h2 { text-align: center; }
h3 { font-size: 1.75rem; line-height: 1.8; border-bottom: 2px solid #000; }
h6 { color: var(--rot); text-align: center; font-size: 1.8rem; }

/* Varianten. #CCC bleibt: Ueberschriften-Raender sind bewusst nicht --linie. */
h1.firstLevel,
h2.firstLevel,
h2.caseindex,
h2.black { font-size: 2.125rem; text-align: left; }
/* h1.firstLevel { font-size: 2.5rem; color: var(--rot); } */
h2.firstLevel { font-size: 2.125rem; padding-top: 10px; float: right; }
h2.cases { font-size: 6.25rem; color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.5); }
h2.caseindex { padding-top: 20px; font-size: 2.25rem; }
h3.nounderline { border-bottom: none; }
h4.hl-auftraggeber { display: flex; align-items: center; justify-content: center; border: 2px solid #CCC; padding: 0.4rem 0.75rem; line-height: 1; margin: 0 0 30px; }


/* Navigation
-------------------------------------------------- */

.navbar {background-color:#fff;border:none;box-shadow:0 1px 0 0 var(--linie);height:80px;color:#000;}
/* Bootstrap gibt dem Toggler serienmaessig einen Rahmen (--bs-navbar-toggler-border-color).
   Aus priedemann-old.css uebernommen, dort schon so geloest. */
.navbar-toggler {border-color:transparent;}
.navbar-brand {font-size:0px;padding:0px;margin-right:0px;}
/* width:auto ist Pflicht: die Logos tragen ihre Originalmasse als width/height im Template, sonst kommt die Breite von dort und das Logo staucht. */
.logo {height:28px;width:auto;margin-left:-5px;margin-right:0px;margin-top:5px;}

/* Medium, eine Stufe ueber der Regular des body. Kein font-weight dazu - die Familie ist im @font-face als bold registriert. */
.navbar-nav .nav-link {color:#000;padding:30px 10px 23px 10px;font-size:1.125rem;font-family:'EuclidCircularB-Medium-WebS', sans-serif;}
.navbar-nav .nav-link:hover {color:var(--rot);}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:active,
.navbar-nav .nav-link.active:focus,
.navbar-nav .nav-link.active:hover {color:var(--rot);background-color:#fff;}
.navbar-nav .nav-item.xs-active .nav-link {color:var(--rot);background-color:#fff;}
.navbar-nav .nav-item:last-child {padding:0px 5px 0px 0px;}

/* Sprachwechsel am Ende der Navi */
.navbar-nav .nav-item.sprache .nav-link {padding-left:5px;}
.navbar-nav .nav-item.sprache > span {padding-left:5px;}
.navbar-nav .nav-item.sprache span.sprache_aktiv {color:var(--rot);}
.navbar-nav .nav-item.sprache .navi-lang-sep {color:#999;padding:0 8px;}
.navbar-nav .nav-item.sprache a.sprache_inaktiv {color:#000;text-decoration:none;}
.navbar-nav .nav-item.sprache a.sprache_inaktiv:hover {color:var(--rot);}
span.sprache_aktiv, a.sprache_inaktiv {text-transform:uppercase;cursor:pointer;}

/* Intranet-Navi, zweite Navbar in Template 5 */
.navbar-intranet {background-color:#ddd;border:none;height:80px;color:#000;}
.navbar-intranet .navbar-nav .nav-link.inactive {color:#000;background-color:#ddd;}
.navbar-intranet .navbar-nav .nav-link.active   {color:var(--rot);background-color:#fff;}
.navbar-intranet .navbar-nav .nav-link:hover    {color:var(--rot);background-color:#fff;}
.navbar-intranet .navbar-nav .nav-link.toggler  {padding:30px 10px 23px;font-size:1.125rem;cursor:pointer;}
.navbar-intranet .navbar-nav .nav-item:last-child {padding:0 5px 0 0;}


/* Footer (Modul 7)
-------------------------------------------------- */
.footer { width:100%; background-color:#eee; }

.footer-textcols { padding-top: 40px; row-gap: 24px; }
.footer-textcol { margin-bottom: 6px; }
.footer-textcol h3 { font-size: 1.625rem; line-height: 1.2; border-bottom: none; margin: 0 0 24px 0; }
.footer-textcol-text { margin-bottom: 24px; }
.footer-textcol-text p:last-child { margin-bottom: 0; }
.footer-textcol-link { text-decoration: none; }

.footer-logos { padding-left: 26px; padding-right: 26px; padding-bottom: 24px; }
.footer-logo-col { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--linie); padding-top: 10px; padding-bottom: 10px; }
.footer-logo-col.footer-logo-col-last { border-right: 1px solid var(--linie); }
.footer-logo-col img { max-width: 100%; height: auto; }

.footer-linkrow { padding-top: 12px; }
.footer-bottombar { padding-top: 24px; padding-bottom: 24px; }
.container .text-muted2 { margin: 10px 0 0 0; color: #666; }
.text-muted2 > a { color: #666; }

hr.trenner-footer { padding: 0; margin: 10px 0 0 0; border-top: 1px solid #999; }


/* Bildunterschriften, Abstandshelfer
--------------------------------------------------
   Beides global, nicht nur Hero: .img-caption benutzt auch Modul 61, .mt steht
   in mehreren Modulen. Das Kuerzen der Unterschrift mit ... loest Modul 59 in
   seinem eigenen style-Block. */
.img-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.8); padding: 0.4rem 0.75rem; }
/* Feld "Abstand" der Module, Werte mt/mb/mtb. display:flow-root verhindert
   Margin-Collapsing, wenn das Element (z.B. Modul 2) keinen eigenen
   Padding-Wrapper hat und die Klasse sonst je nach Nachbarelement wirkungslos
   bleiben kann. */
.mtb { margin-top: 30px !important; margin-bottom: 30px !important; display: flow-root; }
.mb { margin-bottom: 30px !important; display: flow-root; }
.mt { margin-top: 30px !important; display: flow-root; }
.mtx { margin-top: 60px !important; }
.mty { margin-top: 60px !important; border-top:1px solid var(--linie); padding-top:30px; }

/* Feld "Trennlinie". */
.hline { display: block; height: 0; border-bottom: 1px solid var(--linie); margin: 30px 0; overflow: hidden; }
.rot { color: var(--rot); }


/* Carousel-Slider (Modul 9)
--------------------------------------------------
   Bootstrap-5-Carousel, nicht zu verwechseln mit dem Flickity-Karussell aus
   Modul 59 darunter - beide tragen die Klasse .carousel, Modul 59 */
.carousel {
    padding-top: 30px;
    padding-bottom: 40px;
    height: 100%;
    width: 100%;
}
.carousel-inner {
    height: 100%;
    width: 100%;
    padding-bottom: 60px;
}
.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 640px;
    max-width: 100%;
    height: auto;
}
.carousel-caption {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0%;
    right: 0%;
    width: 100%;
    padding-top: 5px;
    color: #000;
    text-shadow: none;
}
.carousel-caption p,
.carousel-caption p.text-start,
.carousel-caption p.text-end,
.carousel-caption p.text-center,
.carousel-caption p.text-left,
.carousel-caption p.text-right {
    font-size: 0.875rem;
    line-height: 1.1;
}
.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    position: static;
    opacity: 1;
    z-index: 2;
    background-image: none;
}
.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-prev:active,
.carousel-control-next:hover, .carousel-control-next:focus, .carousel-control-next:active {
    color: var(--rot);
    text-decoration: none;
    outline: none;
    opacity: 1;
}
.xs_left, .xs_right {
    padding-bottom: 100px;
}
.carousel-indicators {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    z-index: 15;
    width: 100%;
    margin: 0;
    padding: 0 0 10px 0;
    display: flex;
    justify-content: center;
    list-style: none;
}
.carousel-indicators button[data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border: 1px solid #999;
    border-radius: 10px;
    background-color: transparent;
    opacity: 1;
    flex: none;
    text-indent: -999px;
    cursor: pointer;
}
.carousel-indicators button[data-bs-target].active {
    width: 12px;
    height: 12px;
    background-color: var(--rot);
    border: none;
    border-radius: 10px;
    opacity: 1;
}


/* Landingpage-Hero (Modul 59, Flickity)
--------------------------------------------------
   Zellenbreiten, der Abstand ueber dem Karussell und die komplette XS-Fassung
   stehen in priedemann-queries.css. */

/* Keine feste Zellenhoehe: Flickity setzt .flickity-viewport auf die
   Zellenhoehe und schneidet mit overflow:hidden sonst unten ab. */
.carousel-cell {
  width: 1140px;
  height: auto;
  margin-right: 30px;
  padding: 0px;
  background: #fff;
}

/* Bildkacheln. Ruecksetzwert an --linie, weil die Backend-Vorschau ohne
   priedemann.css rendert. Der Rahmen addiert 2px Hoehe je Kachel - daher die
   Zuschlaege in den calc()-Werten. */
.square-container      { position:relative; overflow:hidden; width:100%; padding-bottom:66.667%; border:1px solid var(--linie, #dee2e6); }
.square-container2     { position:relative; overflow:hidden; width:100%; height:0; padding-bottom:33.333%; margin-top:-10px; border:1px solid var(--linie, #dee2e6); }
.square-container-hoch { position:relative; overflow:hidden; width:100%; height:0; padding-bottom:calc(133.333% + 32px); border:1px solid var(--linie, #dee2e6); }
/* Grosses Bild auf die Hoehe der hohen Spalte. */
.gallery-cell .square-container { padding-bottom: calc(66.667% + 14px); }

/* Gleicher duenner grauer Rahmen wie .square-container, aber ohne Zuschnitt -
   fuer freie Bildbreiten/-hoehen wie im Newsindex (Modul 15). */
.img-bordered { border:1px solid var(--linie, #dee2e6); }

/* BS5 gibt <figure> ein margin-bottom:1rem, das Bild 4 nach unten schiebt. */
figure.square-container, figure.square-container-hoch { margin: 0; }

.square-container2 > div { position:absolute; top:0; left:0; right:0; bottom:0; }
.square-container img, .square-container2 img, .square-container-hoch img {
  position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; transform:translate(-50%,-50%);
}

/* Nur im Hero gekuerzt statt umgebrochen - in Modul 61 darf .img-caption
   umbrechen. Das <br> zwischen den beiden Zeilen bleibt wirksam. */
.carousel-cell .img-caption { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sizer30px { min-height:30px; }
/* Geteilt von Modul 6, 10, 22, 41, 42. */
.morebottom60 { margin-bottom: 60px; }
/* Geteilt von Modul 25, 28, 34, 35. */
.moretop60 { padding-top: 60px; }


/* Buttons
--------------------------------------------------
   Weisser Grund, schwarzer Rand, rot beim Hover. Ueberschreibt das Blau von
   Bootstrap. Das einheitliche CTA-Muster ist DS-07, bis dahin gilt das hier. */
.btn-primary { background:#fff; color:#000; border-color:#000; border-radius:10px; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .btn-primary.active:hover, .btn-primary:active:focus,
.btn-primary:active:hover, .show > .btn-primary.dropdown-toggle {
	background:#fff; color:var(--rot); border-color:var(--rot);
}
.btn-primary:active, .btn-primary.active { background:#fff; box-shadow:none; }

/* Modul 10: heller Button auf dunklem/Bild-Untergrund - transparent statt
   weiss, weisse statt schwarzer Umrandung. */
.btn-primary2 { background:none; color:#fff; border-color:#fff; border-radius:10px; }
.btn-primary2:hover, .btn-primary2:focus, .btn-primary2:active,
.btn-primary2.active, .btn-primary2.active:hover, .btn-primary2:active:focus,
.btn-primary2:active:hover, .show > .btn-primary2.dropdown-toggle {
	background:#fff; color:var(--rot); border-color:var(--rot);
}
.btn-primary2:active, .btn-primary2.active { background:#fff; box-shadow:none; }

/* Voll rot - Filter-/Aktions-Buttons (u.a. Modul 28 "Map"/"Filter"), auch in
   Modul 4, 20, 34, 35, 51 verwendet. */
.btn-danger { background:var(--rot); color:#fff; border-color:var(--rot); border-radius:10px; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger.active, .btn-danger.active:hover, .btn-danger:active:focus,
.btn-danger:active:hover, .show > .btn-danger.dropdown-toggle {
	background:#fff; color:var(--rot); border-color:var(--rot);
}
.btn-danger:active, .btn-danger.active { background:var(--rot); color:#fff; border-color:var(--rot); box-shadow:none; }

/* Sortier-Buttons (Modul 34, 35 Projekt-Filterausgabe) - text-only, kein
   Button-Rahmen/-Hintergrund. Aus priedemann-old.css uebernommen. */
button.sorter { background-color:#fff; border:none; color:#666; display:inline-block; padding-left:5px; padding-right:0px; }
button.sorter.active { color:var(--rot); }
button.sorter:hover { color:var(--rot); }


/* Landingpage-Spalten (Modul 61)
--------------------------------------------------
   Bild und Text sind getrennte Links, der Textlink bleibt schwarz. Dass der
   Hover ueber den Textlink das Bild mitzoomt, macht ein Skript im Modul. */
.col-img-link  { display: block; text-decoration: none; color: inherit; }
.col-text-link { display: block; margin-top: 0.5rem; color: inherit; text-decoration: none; }
.col-text-link:hover { color: var(--rot); }
.col-link-group .zoom-effect-container3,
.col-link-group .img-wrapper { margin-bottom: 20px; }

/* Bildstil "frame". Seitenverhaeltnis setzt das Modul inline, je Spaltenzahl. */
.img-wrapper { position: relative; border: 1px solid var(--linie); }

/* Bildstil "zoom": fester Ausschnitt, Bild darin skaliert beim Hover.
   aspect-ratio greift nur, wenn kein Inline-Wert vom Modul kommt. */
.zoom-effect-container3 { position: relative; float: left; width: 100%; aspect-ratio: 36/24; margin: 0 auto 40px; overflow: hidden; }
.image-card3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.image-card3 img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s ease; }
.zoom-effect-container3:hover .image-card3 img { transform: scale(1.1); }


/* Zitate (Modul 62)
-------------------------------------------------- */
.zitat-block { background-color: #eee; color: #000; padding: 40px 20px; }
.zitat-block.zitat-vollbreit { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
div.zitat-text > p { font-family: 'Spectral', serif; font-size: 1.625rem; font-weight: 500; font-style: italic; line-height: 1.6; text-align: center; }
p.zitat-autor { font-family: 'EuclidCircularB-Bold-WebS', sans-serif; margin-bottom: 0; padding-bottom: 0; font-size: 1rem;  line-height: 1.5; letter-spacing: 0.01em; }
.zitat-text .bi-quote { font-size: 1.35em; padding-right: 6px; }


/* Introtext Startseiten (Modul 4) - grauer Vollbreite-Hintergrund wie Footer/Zitate-Modul
-------------------------------------------------- */
.pictext-greybg { background-color: #eee; padding-top: 30px; padding-bottom: 30px; }
.pictext-greybg.pictext-vollbreit { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }


/* Formulare · Abstaende
--------------------------------------------------
   YForm gibt BS3-Klassen aus, BS5 stylt sie nicht. */
.modal .form-group { margin-bottom: 1rem; }
.modal .control-label { display: inline-block; margin-bottom: 0.5rem; }

.row.innerPageForm .form-control { margin-bottom: 10px; }
.row.innerPageForm .input-group { margin-bottom: 10px; }
/* Nicht im input-group: streckt sonst die Flexzeile, der Button wird hoeher. */
.row.innerPageForm .input-group .form-control { margin-bottom: 0; }


/* FUNKTION · Formulare: Spamschutz
--------------------------------------------------
   +++ Nicht entfernen. +++ 
   Diese vier Selektoren verstecken das Honeypot-Feld der YForm-Formulare.  */
div#yform-anfrage_form_inpage-Mail.form-group,
div#yform-anfrage_form-Mail.form-group,
div#yform-bewerb_formB-Mail.form-group,
div#yform-bewerb_formA-Mail.form-group,
div#yform-bewerb_formS-Mail.form-group {
	visibility:hidden;
	max-height: 1px;
	padding:0px;
	margin:0px;
}


/* FUNKTION · Overlays: Ladeanzeigen
--------------------------------------------------
   Alle drei nehmen sich per position:fixed aus dem Textfluss. Ohne diese
   Regeln stehen sie als grosse Inline-Bilder mitten in der Seite. */

/* Sperrt das Scrollen, solange ein Overlay offen ist (priedemann.js). */
.stop-scrolling { height: 100%; overflow: hidden; }

/* Modul 26. Die IE-spezifischen filter:progid-Zeilen sind nicht mitgekommen. */
.js div#preloader2 {position:fixed;left:0;top:0;z-index:999;width:100%;height:100%;overflow:visible;background-color:#fff;opacity:1;}
.js div#preloader2 > img {z-index:1000;display:block;width:1136px;height:192px;position:absolute;left:50%;top:50%;margin-left:-568px;margin-top:-96px;}

.js div#preloader {position:fixed;left:0;top:0;z-index:999;width:100%;height:100%;overflow:visible;background-color:#fff;opacity:0.75;}
.js div#preloader > img {z-index:1000;display:block;width:128px;height:128px;position:absolute;left:50%;top:50%;margin-left:-64px;margin-top:-64px;}

/* Landingpage-Loader (Modul 65) */
.pd-loader { display: none; }
.pd-loader.is-armed {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 2000;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: #fff;
	opacity: 1;
	transition: opacity 3000ms ease;
}
.pd-loader.is-hiding { opacity: 0; }
.pd-loader-logo {
	display: block;
	width: clamp(260px, 62vw, 1136px);
	height: auto;
}
.pd-loader picture { display: block; max-width: 100%; }
@media (orientation: portrait) {
	.pd-loader.has-portrait .pd-loader-logo {
		width: auto;
		height: auto;
		max-width: min(72vw, 600px);
		max-height: min(45vh, 520px);
	}
}
@media (prefers-reduced-motion: reduce) {
	/* Bewusst nicht `none`: bei transition-duration 0 feuert transitionend
	   nicht, und daran haengt das Entfernen aus dem DOM. */
	.pd-loader.is-armed { transition: opacity 1ms linear; }
}


/* FUNKTION · Mega-Menue (Intranet)
--------------------------------------------------
   Der Sichtbarkeitsschalter. priedemann.js setzt .visible - ohne die
   Grundregel haengt das Menue dauerhaft offen ueber der Seite. */
.move-mega {
	visibility:hidden;
	position:fixed;
	width:100%;
	z-index:100;
	height:100vh;
	top:-2px;
	background-color: rgba(194, 194, 194, 0.5);
}
.move-mega.visible {
	visibility:visible;
}


/* FUNKTION · Seitenpfeile
--------------------------------------------------
   Positionsklassen, die priedemann.js beim Scrollen umschaltet. Ob dieser
   Mechanismus noch benutzt wird, klaert CU-04 - bis dahin bleibt er
   funktionsfaehig. */
.ha-header {
	position:fixed;
	top:30px;
	left:0;
	width:100%;
	padding:0;
	z-index:50;
	transform:translateY(0%);
	transition:all 0.5s;
	background-color:#eee;
	box-shadow:0 1px 0 0 var(--linie);
	}
.ha-foot-up   { position:fixed; bottom:90px; transform:translateY(0%); }
.ha-foot-down { position:fixed; bottom:0px;  transform:translateY(0%); }
.ha-header-large {top:80px;}
.ha-header-small {top:30px;}
/* Bar height was ~52px (8px inline padding-top + 24px line-height + the
   sitewide p{margin-bottom:20px}). Trimmed to 38px by cutting just the
   paragraph's own margin, without touching the inline padding-top. */
.ha-header p {margin-bottom:6px;}


/* FUNKTION · Superslides (Modul 26)
--------------------------------------------------
   Ohne display:none stehen alle Slides gleichzeitig untereinander in der
   Seite. Das Plugin blendet den aktiven selbst ein. */
#slides {position:relative;}
#slides .slides-container {display:none;}
#slides .scrollable {*zoom:1;position:relative;top:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%;}
#slides .scrollable:after {content:"";display:table;clear:both;}


/* Mitarbeiter-Index (Modul 20) */
.row.team_preview { margin-top: -24px; margin-bottom: 24px; }
.abschneider,
.team_preview .col-md-12 > .container { padding-left: 0; padding-right: 0; }
/* .card-body ist projektweit weiss (Cards/Akkordeon-Abschnitt), hier grau. */
.team_preview .card-body { background-color: #f5f5f5; margin-right: 0; }
a.weiss { color: #fff; }
a.size18 { font-size: 1.125rem; }
.socialmedia { padding-top: 10px; padding-bottom: 15px; width: 20px; }
h3.lesstop { margin-top: 0; }


/* FUNKTION · Bilderwechsel Team
--------------------------------------------------  */
#crossfade > a {
    position: relative;
    display: block;
}
#crossfade > a > img:nth-child(1),
#crossfade > a > img:nth-child(2),
#crossfade > a > img:nth-child(3) {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    opacity: 0;
    -webkit-backface-visibility: hidden;
}
#crossfade > a:hover > img:nth-child(1) {
	opacity: 1;
}
#crossfade > a:hover > img:nth-child(3),
#crossfade > a:hover > img:nth-child(2) {
    animation: imageAnimation 2s linear infinite 0s;
}
#crossfade > a:hover > img:nth-child(2) { animation-delay: 0.5s; }
#crossfade > a:hover > img:nth-child(3) { animation-delay: 1s; }

@keyframes imageAnimation {
    0%   { opacity: 0; animation-timing-function: ease-in; }
    1%   { opacity: 1; animation-timing-function: ease-out; }
    29%  { opacity: 1 }
    30%  { opacity: 0 }
    100% { opacity: 0 }
}


/* FUNKTION · Sichtbarkeitsschalter Desktop/Telefon
--------------------------------------------------
   Zwei Varianten desselben Links im Markup; die Umschaltung steht im
   XS-Block von priedemann-queries.css. Ohne diese Grundregel sind beide
   gleichzeitig sichtbar. */
a.xs-hide {display: none;}
a.noxs-show {display: block;}


/* Service-Navigator (Modul 60)
--------------------------------------------------
   Layout/Gestaltung fuer Modul 60. Die reine Filtermechanik (Radiobuttons
   verstecken, Bildwechsel, gedimmte Listeneintraege) steht separat im
   FUNKTION-Block direkt darunter. */
.mod-service-navigator {
    padding-top: 40px;
}
h4.service-navigator__headline,
.mod-service-navigator h4:has(.service-navigator__phase-icon) {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
    margin-bottom: 0;
}
.service-navigator__phase-icon {
    height: 48px;
    width: auto;
    flex-shrink: 0;
}
.service-navigator__filter-bar {
    margin-bottom: 20px;
}
.sn-frame {
    border: 1px solid var(--linie);
    overflow: hidden;
    margin-bottom: 40px;
}
.mod-service-navigator .sn-phase-col {
    padding: 16px;
    border-right: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}
.mod-service-navigator .sn-phase-col:last-child {
    border-right: none;
}
.mod-service-navigator .sn-phase-active {
    border-bottom: none;
}
.mod-service-navigator .service-navigator__headline {
    padding-left: 10px;
}
.mod-service-navigator .service-navigator__section {
    padding-top: 24px;
    padding-bottom: 24px;
    margin-bottom: 0;
}
.mod-service-navigator .service-navigator__col {
    padding-left: 30px;
    padding-right: 30px;
}
.mod-service-navigator .service-navigator__col-headline {
    font-weight: bold;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.mod-service-navigator .sn-phase-inactive {
    opacity: 0.4;
    background-color: #f5f5f5;
}
.mod-service-navigator .sn-phase-active .service-navigator__headline {
    color: var(--rot);
}
/* .sn-frame hat kein eigenes Padding, daher frisst das -12px Gutter der Zeile
   zusammen mit overflow:hidden genau 12px vom hier gesetzten padding-right.
   42px ergeben so den gleichen sichtbaren 30px-Abstand wie .service-navigator__col. */
.mod-service-navigator .sn-audience-col {
    padding-right: 42px;
    position: relative;
}
.mod-service-navigator .sn-audience-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -7px;
    width: 1px;
    background-color: var(--linie);
}
.sn-audience-reset {
    margin-top: 12px;
    padding: 2px 0;
}
/* Zielgruppenfilter Modul 60: Bootstrap-Raster, ab md 4-2-2-2-2
   (Text + Reset | vier Icons), darunter col-12 Textblock + col-6 je Icon. */
.sn-audience-row {
    align-items: center;
    row-gap: 24px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.sn-audience-intro-text {
    margin-bottom: 0;
}
/* Reset-Link grau, solange keine Zielgruppe gewaehlt ist */
.sn-audience-row .sn-audience-reset {
    color: #ccc;
}
.sn-audience-row:has(.sn-audience-tile input:checked) .sn-audience-reset {
    color: inherit;
}
.sn60-reset-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    vertical-align: middle;
}
.sn60-reset-btn:hover {
    color: var(--rot);
}
.sn-audience-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
    margin: 0;
}
.sn-audience-img-wrap {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.sn-audience-label {
    font-size: 0.75rem;
    color: #333;
    line-height: 1.3;
}
.sn-audience-tile:has(input:checked) .sn-audience-label {
    color: var(--rot);
    font-weight: bold;
}
.mod-service-navigator .service-navigator__list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0;
}
.mod-service-navigator .service-navigator__list li {
    display: flex;
    align-items: baseline;
    padding: 2px 0;
}
.mod-service-navigator .service-navigator__list i {
    flex-shrink: 0;
    margin-right: 4px;
}
/* Globaler Link-Stil "heller" (u.a. "zeige alle" in Modul 60) - fehlte bisher
   komplett in dieser Datei, wird aber auch von anderen Modulen (12, 24) genutzt. */
a.heller {
    color: #ccc;
}
a.heller:hover {
    color: var(--rot);
}


/* Service-Subnavi (Modul 63)
--------------------------------------------------
   Ergaenzt Modul 60 oben - beide Module teilen sich .mod-service-navigator
   und die meisten sn- und service-navigator__-Klassen, daher gilt fuer Modul 63
   bereits ein Grossteil des Blocks darueber. Hier nur, was Modul 63 wirklich
   eigenes hat (Zielgruppen-Grid statt -Zeile, aktueller Seiten-Eintrag,
   inaktive Phasen als Link, Abstand ueber dem Modul, "nur diese Seiten"
   Zustand der Zielgruppenspalte). */

.sn-phase-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mod-service-navigator .service-navigator__list li.sn-current a {
    color: var(--rot);
    font-weight: bold;
}
/* Zielgruppenspalte: schwarz, solange kein Filter aktiv ist, danach ausgegraut
   (Klasse .sn63-audience-active wird per JS gesetzt). */
.mod-service-subnavi .sn-audience-col .service-navigator__col-headline {
    color: inherit;
    border-bottom-color: #000;
    margin-bottom: 20px;
}
.mod-service-subnavi .sn-audience-col.sn63-audience-active .service-navigator__col-headline {
    color: #ccc;
    border-bottom-color: #ccc;
}
.mod-service-subnavi .sn-audience-col .sn-audience-reset {
    color: #ccc;
}
.mod-service-subnavi .sn-audience-col.sn63-audience-active .sn-audience-reset {
    color: inherit;
}
.sn-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
}
.sn63-reset-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    vertical-align: middle;
}
.sn63-reset-btn:hover {
    color: var(--rot);
}


/* FUNKTION · Service-Navigator: Filtermechanik (Module 60, 63)
--------------------------------------------------
   Nur die Mechanik, keine Gestaltung. Die Zielgruppen-Kacheln sind in Wahrheit
   Radiobuttons: das Eingabefeld ist versteckt, die Auswahl tauscht per
   :has(input:checked) das Bild. Ohne diesen Block stehen rohe Radiobuttons in
   der Seite, die Bilder liegen doppelt untereinander und gefilterte
   Listeneintraege bleiben klickbar. */
.sn-audience-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* position:relative + overflow:hidden sind Pflicht - die beiden Bilder darin
   sind absolut positioniert und wuerden sonst aus der Kachel laufen. */
.sn-audience-img-wrap {
    position: relative;
    overflow: hidden;
}
.sn-audience-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}
.sn-audience-img-active {
    opacity: 0;
}
.sn-audience-tile:has(input:checked) .sn-audience-img-default {
    opacity: 0;
}
.sn-audience-tile:has(input:checked) .sn-audience-img-active {
    opacity: 1;
}
/* Ausgefilterte Eintraege sind gedimmt und nicht mehr anklickbar. */
.mod-service-navigator .service-navigator__list li.sn-dimmed {
    opacity: 0.25;
    transition: opacity 0.2s ease;
}
.mod-service-navigator .service-navigator__list li.sn-dimmed a {
    pointer-events: none;
}


/* Index Balken - Introbild (Modul 10)
--------------------------------------------------
   Vier Layoutvarianten (REX_VALUE[11] 1-4): 1 = Bild als Vollflaeche mit
   dunklem Text-Overlay rechts (#headerpic2 + .description-right), 2 = Text
   neben Bild (.introbild-nebenbild + .morebottom60 oben/unten), 3 = Bild in
   Graustufen/Farbflaeche mit weissem Text (#headerpic + .aufflaeche + .weis),
   4 = Bild volle Breite mit zentrierter Headline (#headerpic + .indermitte).
   Aus der Altdatei uebernommen, doppelte/veraltete Deklarationen (mehrfach
   gesetzte background-*, IE-Praefixe -webkit-/-moz-/-o-background-size,
   das ungueltige background-attachment:relative) beim Portieren entfernt -
   ohne Wirkung auf die sichtbaren Werte. */
#headerpic {
    position: relative;
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 100px;
    padding-bottom: 100px;
    height: 450px;
    z-index: 1;
}
/* Nur Variante 4: das Banner stiess sonst direkt auf die folgende Headline
   (meist Modul 1, div.container). #headerpic gehoert auch Variante 3, die
   eigene Desktop-/Mobil-Bloecke hat und diesen Abstand nicht braucht. */
#headerpic.headerpic-abstand {
    margin-bottom: 30px;
}
/* Variante 2: Bildhoehe auf die 450px der Banner-Varianten begrenzt. Eigene
   Klasse statt global an .img-fluid, das site-weit verwendet wird. */
.introbild-nebenbild {
    max-height: 450px;
    width: 100%;
    object-fit: cover;
}
.aufflaeche {
    color: #fff;
    padding-left: 10px;
}
.indermitte {
    padding-top: 120px;
    text-align: center;
    font-size: 2.25rem;
}
#headerpic2 {
    position: relative;
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 450px;
    z-index: 1;
}
.description-right {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding-bottom: 0;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
    text-shadow: 0 1px 2px rgb(0, 0, 0);
    width: calc(50% + 15px);
    z-index: 20;
    margin-left: 50%;
    height: 450px;
}
/* Variante 3: weisser Headline-Text auf dunklem Untergrund. Altdatei hatte
   das als span.weis (Element+Klasse) - passt nicht auf das h2.weis, das
   Modul 10 tatsaechlich ausgibt, deshalb hier ohne Element-Qualifizierung. */
.weis {
    color: #fff;
}
p.padmore {
    padding-left: 15px;
    padding-right: 60px;
}


/* Bildergalerie-Overlay "Vergroessern" (Modul 28, 23)
--------------------------------------------------
   Plus-Icon oben rechts auf jeder Galerie-Kachel, wenn die Lightbox aktiv
   ist (REX_VALUE[4] == 1). */
.enlarge {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: right;
    top: 10px;
    right: 7px;
    margin-bottom: -15px;
}


/* Mehrfach-Filter-Panel (Template 10, 11; .well_red auch in Modul 20)
--------------------------------------------------
   Das rote Klapp-Panel #collapseFilter/.well_red mit den Checkbox-Listen je
   Filterkategorie (Kontinent, Land, Gebaeudefunktion, ...). #collapseFilter,
   #MainForm, #uncheck-all, #CloseMain, #anz_pro und .btn-secondary haben in
   der Altdatei keine eigenen Regeln - reines Bootstrap/Collapse-Verhalten. */
.well_red {
    border-radius: 0;
    margin-top: 20px;
    margin-bottom: 0;
    padding-top: 20px;
    background-color: var(--rot);
}
span.pro-black {
    color: #000;
    font-size: 1rem;
    font-weight: 300;
}

/* Projekt-Faktenbox (Modul 29, 30) */
.greybg {
    background-color: #eee;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 40px;
    margin-bottom: 60px;
}
/* Label ueber .pro-black, in Modul 29 umbenannt von .pro-grey (unveraendertes
   Aussehen). Modul 30 verwendet im Markup noch .pro-grey und damit aktuell
   ohne eigene Regel - bei einem spaeteren CSS-Durchgang fuer Modul 30 auf
   .pro-bold umstellen statt .pro-grey neu anzulegen. */
span.pro-bold {
    color: #000;
    font-size: 1rem;
    font-family: 'EuclidCircularB-Bold-WebS', sans-serif;
}
/* Modul 29: "Fallstudie ansehen" / "Auf Google Maps zeigen" Links. */
a.size16 {
    font-size: 1rem;
}

/* Checkbox + Beschriftung als zweispaltige Tabellenzeile - die Checkbox
   traegt ihr display:table-cell direkt inline im Markup. */
span.fuer_liste_aussen {
    display: table;
    padding-top: 4px;
    color: #fff;
}
span.fuer_liste {
    display: table-cell;
    padding-left: 4px;
}
/* Deaktivierte Filteroptionen (Anzahl 0 fuer die aktuelle Auswahl). */
span.ausgegraut {
    color: #999;
}


/* Cards / Akkordeon (Modul 27 Service-Akkordeon, Modul 50 Job-Akkordeon)
--------------------------------------------------
   BS5-Umbenennung aus der Altdatei: .panel -> .card, .panel-heading ->
   .card-header usw. #accordion(2/3/4).card-bottom sind Modul 27s vier
   Bereiche (Consultancy/Engineering/Specials/Facade-Lab), je eine eigene
   ID pro <div class="accordion">. Mobile Anpassungen (<768px) stehen in
   priedemann-queries.css.
   Nicht mitgekommen: die Klassen "service-card-header/-title/-text/-body",
   die beide Module durchgaengig zusaetzlich setzen - dafuer gibt es weder in
   der Alt- noch der neuen Datei eine Regel, reine Marker ohne CSS-Wirkung.
   Ebenso ohne eigene Regel: .donotsearch (Modul 27) - vermutlich ein reiner
   Marker fuer den Seitensuche-Index, keine Formatierung. */
.card { border: none; border-radius: 0; --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; box-shadow: none; }
.card-header { border-top: 1px solid #000; border-radius: 0; background-color: #fff; }
#accordion.card-bottom,
#accordion2.card-bottom,
#accordion3.card-bottom,
#accordion4.card-bottom { border-bottom: 1px solid #000; border-radius: 0; padding-left: 0; padding-right: 0; }
.card-title { margin-top: 8px; margin-bottom: 0; font-size: 1.3125rem; }
.card-body { border: none; border-radius: 0; box-shadow: none; background-color: #fff; margin-right: 30px; }
.no-right-margin { margin-right: 0; }
.accordion-collapse { margin-top: 10px; border-left: none; border-right: none; border-top: none; border-bottom: none; }
.whitebg { background-color: #fff; }
/* Textgroesse kommt jetzt von der zusaetzlich im Markup gesetzten .copy-small
   (Module 27, 50) statt von einem eigenen font-size hier - identischer Wert
   (1rem = 16px), zusaetzlich mit line-height/letter-spacing der uebrigen
   Bodycopy-Skala. */
.accord-texte { padding-left: 30px; padding-right: 30px; }
/* Chevron-Trigger in Modul 27 (a-accord, vier Bereiche) und Modul 50
   (b-accord, Job-Liste) - Text schwarz, das Chevron-Icon rechtsbuendig als
   eigenes <span>. */
a.a-accord { color: #000; padding-left: 110px; }
a.a-accord:hover, a.a-accord:focus, a.a-accord:active { color: var(--rot); }
a.a-accord > span { float: right; color: #000; padding-right: 110px; }
a.a-accord:hover > span, a.a-accord:focus > span, a.a-accord:active > span { float: right; color: var(--rot); }
a.b-accord { color: #000; padding-left: 100px; }
a.b-accord:hover, a.b-accord:focus, a.b-accord:active { color: var(--rot); }
a.b-accord > span { float: right; color: #000; padding-right: 110px; }
a.b-accord:hover > span, a.b-accord:focus > span, a.b-accord:active > span { float: right; color: var(--rot); }
/* Modul 27, vierter Bereich (Facade-Lab): Header ohne Aufklapp-Verhalten,
   nur ein Link, aber mit demselben Einzug wie die anderen drei. */
.moreleft { padding-left: 120px; }

#container-is {padding-top: 40px; }