/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 0;
}

html {
	overflow: -moz-scrollbars-vertical;
	-ms-overflow-y: scroll;
	overflow-y: scroll;
}

figure {
    margin: 0;
}

hr {
	clear:both;
	border:0;
	margin:1em 0;
}


.navbar-toggle:focus {
	outline: 0;
}
#mobi-navbar {display:none!important; }
.navbar-toggle {
	display:none!important;
	position: absolute;
	float: none;
	padding: 9px 10px;
	margin: 0;
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	right:20px;
	top:25px;
}

#mobi-navbar  {
	padding: 9px 10px;
	margin: 10px;
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
}


.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.navbar-toggle .icon-bar {
	background-color: #888;
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
}

/* ==========================================================================
   Grid system
   ========================================================================== */

@media (min-width: 1200px)  {
    .container {
        width: 100%;
		padding:0;
    }
}

@media (max-width: 1679px)  {
	.container {
		width: 100%;
		padding:0;
	}
}

@media (min-width: 1680px) {
    .container {
        width: 1640px;
		padding:0;
    }
}
 
@media (min-width: 1920px) {
    .container {
        width: 1880px;
		padding:0;
    }
}   
  
   
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
	padding:0;
}

@media (min-width: 992px) {
    .c4 {
        width: 30%;
    }
}

/* ==========================================================================
  Content
  ========================================================================== */

h1 { 
	font-family: 'Open Sans', sans-serif; 
	font-size:3rem;
	text-transform:uppercase;
	line-height:3rem;
	line-height:50px;
	margin: 4rem 0 1rem 0;
	color:#666;
	font-weight:300;
	}
@media (min-width: 1500px) {
    h1 { 
        font-size:50px;font-size:2.6vw;
		width:95%;
    }
}

h2 {
	font-family: 'Open Sans', sans-serif; 
	text-transform:none;
	margin: 4rem 0 1rem 0;
	font-weight:300;
}
.colLeft .c4 + .c6 > h2, 
.colFull .c4 + .c6 > h2 { margin-top:0;}

@media (min-width: 1500px) {
    h2 { 
        font-size:22px;font-size:1.15vw;
    }
}

.body {
	/*height:80%;*/
	clear:both;
}

/* ==========================================================================
  Breadcrumb
  ========================================================================== */
.body .breadcrumb {
	padding: 0;
	list-style: none;
	background: none;
	border-radius: 0;
	color:#666;	
	margin:1rem 0 0 0;
	text-transform:uppercase;
}

.body .breadcrumb > li + li::before {
	padding: 0;
	content: "";
}

@media (min-width: 1500px) {
    .body .breadcrumb { 
        font-size:16px;font-size:0.82vw;
    }
}

.breadcrumb.nav > li > a {
	display:inline-block;
	padding: 0;
	text-transform:uppercase;
	color:#666;	
	}
	
.breadcrumb.nav .divider {
	margin:0 0.5rem;
}	

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

.body .container.col2 {
	height:100%;
}

.body .container.col2,
footer .container {
	padding-left: .9375rem;
	padding-right: .9375rem;
}

.body  .c5,
.body  .c1,
.body  .c5,
.body  .c2 { }

.body  .c7.colLeft p:last-child,
.body  .colFull p:last-child  {
	padding-bottom: 1em;
}


.body  .colLeft .c8,
.body  .colFull   {
	font-size:1.4rem;
	font-weight:300;
}
@media (min-width: 1500px) {
    .body  .colLeft .c8,
	.body  .colFull	{ 
        font-size:22px;font-size:1.15vw;
    }
}

.body  .c5.colRight {
	font-size:1.2rem;	
	height:100%;
	background:#f9f9f9;
	font-weight:300;
}
@media (min-width: 1500px) {
    .body  .c5.colRight { 
        font-size:18px;font-size:0.95vw;
    }
}

.body  .c5.colRight .c4 {
	margin-top:4rem;
}

.body  .c5.colRight .divider {
	margin:4rem;
}

@media (max-width: 990px)  {
	.body  .c5.colRight .divider {
		margin: 0 0 2em 0;
	}
	.body  .c5.colRight .csc-menu {
		margin-bottom:1em;
	}
}

/* ==========================================================================
  Slider
  ========================================================================== */

.slick-slider {
    margin-bottom: 0;
	font-size:0;
}
.slick-slide {
	width:auto;
	overflow:hidden;
	height:420px;

}
.slick-slide img {
	width:auto;
	height:420px;
}

.body .slick-slide img {height:auto;}

/* ==========================================================================
  Formulare
  ========================================================================== */

input,select {height:auto;}

.csc-mailform { width: 98%;}
.csc-mailform{font-size:1.5rem}
.csc-mailform form{font-size:1rem}

select {padding: 0 0 0 12px;}
 
 fieldset input {
    position: static;
    height: auto;
    width: 100%;
} 
fieldset label {
    margin-left: 0;
    font-weight: bold;
}
  
form li.csc-form-element-checkbox {
	position:relative;
	clear:both;
}
form li.csc-form-element-checkbox input{
	position:absolute;
	top:0;
	left:0;
	width:auto;
	height:auto;
}

form li.csc-form-element-checkbox label {
	margin-left:30px;	
	font-weight:normal;
	line-height:100%;
}

fieldset .csc-form-4 {
	width: 100%;
	display: block;
	margin-bottom:6em;
	}

.csc-form-10 label {display:none;}
fieldset .csc-form-10 label {display:block;}


fieldset .csc-form-10,
fieldset .csc-form-20,
fieldset .csc-form-31,
fieldset .csc-form-33,
fieldset .csc-form-41,
fieldset .csc-form-44,
fieldset .csc-form-51,
fieldset .csc-form-56{
	width: 90%;
	display: block;
	position:absolute;
	top:4.5em;
	left:0;
	margin: 0 0 0 10%;
	}

.csc-form-20 label,
.csc-form-31 label,
.csc-form-33 label,
.csc-form-41 label,
.csc-form-44 label,
.csc-form-51 label,
.csc-form-56 label,
.csc-form-20 label + ol,
.csc-form-31 label + ol,
.csc-form-33 label + ol,
.csc-form-41 label + ol,
.csc-form-44 label + ol,
.csc-form-51 label + ol,
.csc-form-56 label + ol {display:none;}

	
.csc-form-61 {clear: both;}


.tx-dmailsubscribe .typo3-messages li { list-style-type:none; }
.tx-dmailsubscribe .typo3-messages {margin-top:2em;width:95%;}

.tx-dmailsubscribe + .divider,.tx-dmailsubscribe + .divider hr
{
	margin-bottom:0 !important;
}
/* ============================================================= */

.csc-menu,.csc-menu li {
	list-style-type:none;
	margin:0;
	padding:0;
}

p.subhead { text-transform:uppercase;margin:0 0 1rem 0;}
.colRight > .c1:first-child + .c10 > p.subhead {margin-top:4rem}

@media (max-width: 990px) {
	p.subhead { margin:0 0 1em 0;}
}


.csc-menu a {
	color:#337AB7; /*#58585a;*/
	padding:0 0 0 20px;
	background: url('../images/arrow-dark.png') no-repeat 0 center;
}

  .csc-form-element-textblock  {
	  font-size: 1.15rem;font-weight: 300;
  }

  @media (min-width: 1500px) {
		form li.csc-form-element-checkbox label {font-size: 0.75vw;line-height: 1vw;}	  
  }

form input.submit {
	background:#666;
	color:#fff;
	margin-top:1em;
	border:0;
}
form label em {font-weight:normal;}
  
  @media (min-width: 1500px) {
		form label em {font-size:0.7vw;}	  
  }

li:not(.csc-form-confirmation-false) input[type=submit]{
	background: #666;
	color: #fff;
	margin-top: .5rem;
	border: 0;
	padding: 8px 12px;

}
#field-1 .csc-menu{    margin-bottom: 2.8rem;}
@-moz-document url-prefix() {
	#field-1 .csc-menu{    margin-bottom: 1.7rem;}

}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#field-1 .csc-menu{    margin-bottom: 3.8rem;}

}

li:not(.csc-form-confirmation-false) input[type="submit"]:hover {
	background-color: #E6E6E6;
	border-color: #ADADAD;
	color: #666;
}
/* ==========================================================================
  Tables
  ========================================================================== */

  th { text-align:left; border-bottom:2px solid #ccc; padding-top:1em; }
  td { border-top:1px solid #eee; }

  table {margin-bottom:1em;}
 
#visitorFees th,
#visitorFees td {
width:50%;
vertical-align:top;
}
	
#visitorFees th:nth-child(2),
#visitorFees td:nth-child(2),
#visitorFees th:nth-child(3),
#visitorFees td:nth-child(3) {
	width:25%;
	padding-left:10px;
}
 
  @media (min-width: 1500px) {
    td {font-size: 0.95vw;padding:0.3em 0; }
	th:nth-child(2),
	th:nth-child(3)	{font-size: 0.7vw;line-height:100%;padding-bottom: 0.5em;vertical-align: bottom!important;}
	table + p.align-right {font-size: 0.7vw;}
}

@media (max-width: 990px) {
	#visitorFees th {
		font-size:0.8em;
	}
}
  
/* ==========================================================================
  Header
  ========================================================================== */

header {
	position:relative;
	text-transform:uppercase;
	font-size: 0;
	height:auto;
	padding: 0;
	margin-bottom: 0;
}

header .nav-header {
	height:40px;
	/*background:url('../images/logo_franziskanermuseum.png') no-repeat;*/
	width:100%;
	display:inline-block;
	background-size:100%;
	max-width:150px;
	}
	
header .nav-header span {
	display:none;
	}

header img {
	height:auto;
}

header .image img {
	width:100%;
}

@media (width: 1920px) {
	header .image img {height:545px}
}
@media (width: 1680px) {
	header .image img {height:476px}
}
@media (width: 1024px) {
	header .image img {height:293px}
}
@media (min-width: 1025px) and (max-width: 1679px) {
	header .image img {height:367px}
}

header .c1:last-child img {
	width:41px;
	height:41px;
}

header .header {
			/* Aenderungswunsch 2026-06-17: opake, fixierte (sticky) Kopfleiste,
			 * die beim Herunterscrollen kleiner wird (Klasse .shrink per JS).
			 * <body> bekommt padding-top in Hoehe des Headers (--header-h, per JS),
			 * damit Inhalte/Headerbilder darunter beginnen und nicht verdeckt
			 * werden. */
			background: #fff;
			position: fixed;
			top: 0;
			left: 0;
			width:100%;
			/* padding:1.5% 0 1.2% 0;*/
			padding:20px 0 15px 0;
			font-size: 18px;
			z-index: 1000;
			box-shadow: 0 1px 6px rgba(0,0,0,0.10);
			transition: padding 0.25s ease, box-shadow 0.25s ease;
}

/* Platz fuer die fixierte Leiste (Hoehe per JS in --header-h; Fallback 130px).
 * Nur ab 1280px, da die Leiste darunter (Hamburger-Menue) wieder im Fluss
 * steht (siehe innen_mobi.css, Umschaltpunkt 1279px). */
@media (min-width: 1280px) {
	body {
		padding-top: var(--header-h, 100px);
	}
}

/* Logo: nie ueber die Spalte hinauslaufen lassen (skaliert mit der Spalte,
 * max. 240px aus dem TypoScript). */
.header .c2 a img,
.header .c2 img {
	max-width: 100%;
	transition: max-height 0.25s ease;
}

/* Verkleinerter Zustand beim Herunterscrollen */
header .header.shrink {
	padding: 6px 0 6px 0;
}
header .header.shrink .c2 a img,
header .header.shrink .c2 img {
	max-height: 40px;
	width: auto;
}
header .header .c3 ul.nav.right li img {
	transition: max-height 0.25s ease;
}
header .header.shrink .c3 ul.nav.right li img {
	max-height: 26px;
	width: auto;
	height: auto;
}
header .header.shrink .c7 nav > ul.nav > li > a.lv1,
header .header.shrink .c7 li.dropdown > a.lv1 {
	font-size: 0.92em;
}

@media (max-width: 1024px) {
	header .header {position:static}
}


.header .c7 {
	width: 58%;
}
.header .c3 {
	width: auto;
	white-space: nowrap;   /* Such-Icon + Flaggen + Social brechen nicht um */
	float:right;
	display: inline-block;
	/* Aenderungswunsch 2026-06-19: Die Social-Icons (Facebook/Instagram) sassen
	   hoeher als der Menuetext, weil .c3 gefloatet ist (vertical-align greift
	   nicht). margin-top schiebt die Icon-Leiste auf die Hoehe des Menuetextes. */
	margin-top: 12px;
}
/*
@media (min-width: 1440px) {
	header .header{font-size: 1.5rem;}
  }
*/
header .nav.right > li > a {
	padding: 0 0 0 1rem;
}
footer .nav.right a:hover,
header .nav.right a:hover {background:none;}

header .nav.right {margin-right:20px;}

/* ==========================================================================
   Content // Special
   ========================================================================== */

 a.back,
 a.more { 
	/*color: #58585a;*/
	background: url('../images/arrow-dark2.png') no-repeat 0 center;
	padding-left: 20px;	
	font-weight:400;
 }
  a.more { 
	background-image: url('../images/arrow-dark.png');
 }

/* ==========================================================================
  SONDERAUSSTELLUNG
  ========================================================================== */

body#sonderausstellung.page-list  .body  .c10 .c4 {width:25%}
body#sonderausstellung.page-list  .body  .c10 .c4 img { width:90%; }
body#sonderausstellung.page-list  .body  .c10 { margin-top:2.5em; }
body#sonderausstellung.page-list  .body  .c10  h2 {font-size: 32px;font-size: 2vw;line-height: 120%;}
body#sonderausstellung.page-list  .body  .c10  h2 a {color:#58585a;}

body#sonderausstellung div.divider {margin-bottom:2em}

/* ==========================================================================
  AKTUELLES / TERMINE
  ========================================================================== */

/*
 * TYPO3 14 removed the default parseFunc rule that auto-added class="contenttable"
 * to every rendered <table> (Breaking #107438 — Fluid Styled Content parseFunc).
 * The monthly tables already carry data-rel="januar" … data-rel="dezember" in the
 * source, so we select on that instead. The .contenttable fallback covers a single
 * legacy row that still uses rel="…" instead of data-rel.
 */
body#termine.page-list table[data-rel],
body#termine.page-list table.contenttable {
	width:100% !important;
	display:none;
	margin-bottom:5px;
}

body#termine.page-list table.terminKopf {
	width:100%;
	margin-bottom:5px;
}

body#termine.page-list table.terminKopf th {
	font-size:16px;
	width:20%;
}

body#termine.page-list table td {
	width:20%;
	vertical-align:top;
	border:0;
	border-bottom:1px solid #ccc;
	font-size:16px;
}

body#termine.page-list table p {
	display:none;
	padding: 0 0 0 18px;
	font-size:1.3rem;
}

body#termine.page-list table th:first-child,
body#termine.page-list table td:first-child {
	width:20%;
}
body#termine.page-list table th:last-child,
body#termine.page-list table td:last-child {
	width:60%;
}

body#termine.page-list table td em {
	color:#595959;
	font-size:12px;
	text-transform: uppercase;
	font-style:normal;
	display:block;
}
body#termine.page-list table td h3 {
	color:#666;
	font-size:1.3rem;
	margin:0;
	cursor:pointer;
	padding: 0 0 0 18px;
	background:url('../images/arrow-dark.png') no-repeat left 0.4rem;
}

body#termine.page-list table td h3:hover {
	color:#999;
	background-image: url('../images/arrow-med.png');

}

body#termine.page-list .body .colFull table p:last-child {
	padding-bottom: 0;
}

body#termine.page-list #terminfilter {
	display: block;
}

body#termine.page-list #terminfilter span {
	display:inline-block;
	border-radius:3px;
	border:1px solid #999;
	background:#fff;
	padding:0 15px;
	color:#666;
	text-transform: capitalize;
	cursor: pointer;
	margin:0 5px 12px 0;
}

body#termine.page-list #terminfilter span.aktiv {
	padding:0 15px;
	background:#999;
	color:#fff;
}

body#termine.page-list #terminfilter span:hover {
	border:1px solid #ccc;
}

@media (max-width: 990px) {

	body#termine.page-list #terminfilter span {
		text-align: center;
	}

	body#termine.page-list table.terminKopf {
		display:none;
	}

	body#termine.page-list table td {
		width:100%;
		border:0;
		display:block;
		font-size:0.9em;
	}
	body#termine.page-list table tr {
		border-top:2px solid #999;
	}
	body#termine.page-list table td:last-child,
	body#termine.page-list table td:first-child {
		width:100%;
	}
	body#termine.page-list table td:first-child {
		vertical-align: bottom;
	}
	body#termine.page-list table td:nth-child(2) {
		 }
	body#termine.page-list table td:nth-child(3) {
		background:#fff;
	}

	body#termine.page-list table td em {
		font-size: 1em;
		text-transform: none;
	}

	body#termine.page-list table td h3 {
		color: #666;
		font-size: 1.2rem;
		padding: 3px;
		background: none;
		border:1px solid #ccc;
		border-radius: 4px;
	}
	body#termine.page-list table td h3:hover {
		background: none;
	}
	body#termine.page-list table p {
		padding: 3px;
		font-size: 1.2rem;
	}

}

@media (max-width: 320px) {
	body#termine.page-list #terminfilter span.aktiv,
	body#termine.page-list #terminfilter span {
		background-image:none;
		font-size: 12px;
		padding:15px 15px;
	}
}

/* ==========================================================================
Slideshow (Homepage)
========================================================================== */
  
  .slick-slide {position:relative;}
  .slick-slide .text {position:absolute;top:0;left:0;width:100%;text-align:center;}
  
  .slick-prev {
    left: 25px;
	}
  .slick-next {
    right: 25px;
	}
	
/* ==========================================================================
   Akkordion
   ========================================================================== */
   	.accordion h2 {
		text-transform:none;
		font-weight:400;
		padding:0 0 0 20px;
		margin: 0.5rem 0 0.5rem 0;
		cursor:pointer;
		background:url('../images/arrow-dark.png') no-repeat left 0.5rem;
		color:#58585a;
		font-size: 1.5rem;
	}

	.accordion h2:hover,
	.accordion h2.active	{
		color:#999;
		background-image:url('../images/arrow-med.png');
	}
	.accordion {
		border-top:1px solid #ccc;
	}
	h2 + .accordion {
		border-top:0;
	}	
	
	.body .c7.colLeft .accordion p:last-child {
		padding-bottom: 1rem;
		margin: 0;
	}

/* ==========================================================================
  NEWS
  ========================================================================== */

.body  .colFull .news .lead p:last-child  {
	padding-bottom: 0;
}

.body  .colFull .news  {
	padding-bottom: 2em;
}

/* Artikel Liste */
.body  .colFull .news  h3 {
	margin:0 0 0.3em 0;
	padding:0;
}

.body  .colFull .news  h3 a {
	text-transform: none;
	color:#58585a;
	font-size: 32px;
	font-size: 2vw;
	line-height: 120%;
	font-weight:300;
}

.body  .colFull .news-list-item  .col-md-3,
.body  .colFull .news-list-item  .col-md-9 {
	width: 25%;
	display: inline-block;
	vertical-align: top;
}

.body  .colFull .news-list-item  .col-md-9 {
	width: 65%;
}

.body  .colFull .news .btn-read-more {
	background: url('../images/arrow-dark.png') no-repeat 0 center;
	padding-left: 20px;
	font-weight: 400;
}

/* Artikel Ansicht */
.body  .colFull .news  h1 {
	 text-transform: none;
	 color:#58585a;
	 font-size: 32px;
	 font-size: 2vw;
	 line-height: 120%;
	 font-weight:300;
	margin: 0 0 0.3em 0;
 }

.body .colFull .news .row {
	margin:0;
}
.body  .colFull .news .row.news-list-view {
	margin-top: 2.5em;
}

.body .colFull .news-single .row .col-md-4,
.body .colFull .news-single .row .col-md-8 {
	display: inline-block;
	vertical-align: top;
	width: 60%;
}
.body .colFull .news-single .row .col-md-4 {
	width: 35%;
}

.body .colFull .news-single .lead {
	display:none;
}

.body .colFull .news-single .news-text-wrap .c8 {
	width:95%!important;
}

.body .colFull .news-single .news-text-wrap p:last-child  {
	padding-bottom: 0;
}

.body .colFull .news-single a.btn-default {
	background: url('../images/arrow-dark2.png') no-repeat 0 center;
	padding-left: 20px;
	font-weight:400;
}

/* ==========================================================================
  Footer
  ========================================================================== */

footer {
	background:#58585a;
	height:auto;
	margin:0;
	color:#ddd;
	position:relative;
	padding:1em 0 0 0;
}

@media (min-width: 1361px) {
	footer {padding:3em 0 0 0;}
}

footer li,
footer ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

footer  hr {
	border-bottom:1px solid #fff;
	/* Aenderungswunsch 2026-06-17: Abstand zwischen Fussleisten-Inhalt und
	 * der Impressum/Datenschutz-Zeile verkleinert (vorher 1em bzw. 2em). */
	margin: 0.5em 0 0.5em 0;

	}
@media (min-width: 1361px) {
	footer  hr {margin: 0.5em 0 0.5em 0;}
}

	
footer > div:first-child a {
    display: block;	
	color:#fff;
	background:url('../images/arrow-bright.png') no-repeat 0 center;
	padding-left:20px;
}
footer > div:first-child .image a {
	padding:0;
	background:none;
	}

footer > div:first-child .text {
	margin:0 0 0 10px;
	}
@media (max-width: 1440px) {
	footer > div:first-child .text {margin:0;}	
}
	
	
footer .nav.right a { 
	color:#fff; 
	}

footer .nav.right li { 
	border-right:1px solid #fff;
	}
footer .nav.right li:last-child{ 
	border:0;
	}
	
footer a:hover, footer a:focus {
    color: #fff;
    text-decoration: underline;
}

footer p {
    margin: 0 0 0.5rem;	
}

footer hr + .container {
	font-size:14px;
}
footer > div:first-child div {
	display: inline-block;
	vertical-align: top;
	margin:0 30px 1em 0;
}
footer > div:first-child div:last-child {
	margin-right:0;
}

footer > div:first-child div.logos,
footer > div:first-child div.logos a {
	background:none!important;
	padding:0!important;
	margin:0;
}

footer .logos {
	white-space: nowrap;
}

@media (max-width: 1280px) {
	footer .logos {
		padding:0 !important;
		white-space: inherit;
	}
	footer .logos img {
		max-width: 44px;
	}
	footer .logos img[alt="villingen-schwenningen"] {
		max-width: 212px;
	}
}

/* ==========================================================================
  Nav
  ========================================================================== */

/* margin-right applies to all top-level menu items, not just .dropdown ones.
 * In TYPO3 14 a page without (visible) subpages renders as a bare <li> without
 * the .dropdown class (visible for /filme and /online-vorverkauf), so without
 * this addition those items collide with their neighbours. */
header .c7 li.dropdown,
header .c7 nav > ul.nav > li {
	margin-right: 2em;
}

header .c7 li.dropdown > a + ul li:first-child {
	padding-top:18px;
}
header .c7 li.dropdown .multi-level li:first-child li:first-of-type{padding-top: 37px}
/* Style the top-level menu links. The original rule only matched <li class="dropdown">
 * which is generated for items that have at least one visible subpage. In TYPO3 14
 * a doktype=3 (external link) page without (visible) subpages renders as a bare <li>
 * without the .dropdown class — without this extension that link falls back to the
 * browser default colour (blue) and loses the 1em top margin, so it visually jumps
 * above its siblings. Apply the same styling to all direct top-level lv1 links. */
header .c7 li.dropdown > a.lv1,
header .c7 nav > ul.nav > li > a.lv1 {
	color:#58585a;
	background:url('../images/arrow-dark.png') no-repeat 0 center;
	padding-left:20px;
	margin-top:1em!important;
}

header .c7 li.dropdown > a.lv1.active {
	background-image:url('../images/arrow-med.png');
	color:#999;
}

header .c7 .dropdown-menu > .active > a,
header .c7 .dropdown-menu > .active > a:focus,
header .c7 .dropdown-menu > .active > a:hover {
	text-decoration: underline;
	outline: 0;
}

li.dropdown a.lv2,
li.dropdown a.lv3 {
	background:#fff!important;
	width:100%;
	color:#666!important;
	margin:1px 0;
	white-space:inherit;
	font-size:18px;	
}
li.dropdown a.lv3 {
	background:rgba(255,255,255,0.8)!important;
	color:#333!important;
	white-space:nowrap;
	margin-left:1px;
}

li.dropdown a.lv2:hover {
	background:rgba(255,255,255,0.9)!important;
	color:#333!important;
}

li.dropdown a.lv2.active {
	background:rgba(255,255,255,0.8)!important;
}
li.dropdown a.lv3.active {
	color:#333!important;
}

header .c7 .dropdown-submenu {
	position:relative;
	}

header .c7 .dropdown-menu {
    left: -20px;
	width: 260px;
	border:0;
	background:none;
	margin: 0;
	box-shadow: none;
}

header .c7 .dropdown + .dropdown .dropdown-menu {
    left: 0;
	margin: 0 !important;
}

header .c7 .dropdown + .dropdown .dropdown-menu .dropdown-menu,
header .c7 .dropdown-menu .dropdown-menu  {
	left: 260px;
	top: -19px;
	width:auto;
	white-space:nowrap;
}


@media (max-width: 1024px) {
	header .c7 .dropdown:last-child .dropdown-menu .dropdown-menu {
		left: -231px!important;
	}
}

header .c7 .dropdown-menu > li {
	background:none;
}

/* ==========================================================================
   AENDERUNGSWUNSCH 2026-06-17: Dropdown-Korrekturen
   1) Der erste Eintrag wurde von der (jetzt fixierten) Kopfleiste leicht
      verdeckt -> Dropdown per padding-top nach unten ruecken. padding (statt
      margin) erzeugt KEINEN Hover-Gap, das Menue bleibt geoeffnet.
   2) Beim Hovern war der Hintergrund der unteren Eintraege nicht mehr sichtbar
      (durchscheinend ueber dem Hero-Bild) -> deckendes weisses Panel + hoher
      z-index, damit es zuverlaessig ueber dem Seiteninhalt liegt.
   ========================================================================== */
header .c7 ul.nav > li.dropdown > ul.dropdown-menu {
	background: #fff;
	/* Aenderungswunsch 2026-06-19: keine weisse Flaeche mehr ueber dem ersten
	   Eintrag. Statt weissem padding-top jetzt ein transparenter margin-Abstand
	   (Dropdown schwebt knapp unter der Leiste); die transparente ::before-
	   Bruecke ueberdeckt die Luecke, damit das Menue beim Ueberfahren offen
	   bleibt (kein Hover-Gap). */
	padding-top: 0;
	/* Aenderungswunsch 2026-06-23: !important, da die aeltere Regel
	   ".dropdown + .dropdown .dropdown-menu { margin:0 !important }" sonst den
	   oberen Abstand killt – das traf NUR "Sammlung" (folgt direkt auf das
	   ebenfalls aufklappbare "Aktuelles"), weshalb dessen Dropdown 16px zu hoch
	   stand. Greift nur fuer lv1-Dropdowns (Direktkind), nicht fuer lv3-Flyouts. */
	margin-top: 16px !important;
	z-index: 1001;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,0.22);
}
header .c7 ul.nav > li.dropdown > ul.dropdown-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
	/* transparent: nur Hover-Bruecke, keine sichtbare Flaeche */
}
/* vorheriges Top-Padding des ersten Eintrags wird durch das Panel-Padding ersetzt */
header .c7 ul.nav > li.dropdown > ul.dropdown-menu > li:first-child {
	padding-top: 0;
}
/* seitlich oeffnende Untermenues (lv3): ebenfalls deckend + ueber dem Inhalt,
   aber ohne den vertikalen Versatz */
header .c7 .dropdown-menu .dropdown-menu {
	background: #fff;
	padding-top: 0;
	z-index: 1001;
	box-shadow: 0 10px 20px -4px rgba(0,0,0,0.22);
}
/* Aenderungswunsch 2026-06-23: weisse Flaeche oberhalb des ersten Eintrags in
   den seitlich oeffnenden lv3-Untermenues entfernen (Schwarzwald, Kelten,
   Stadtgeschichte, Kulturvermittlung). Das Flyout-Panel buendig zur Oberkante
   des Eltern-Eintrags oeffnen (kein -19px-Versatz mehr) und das obere Padding
   des ersten Eintrags entfernen, damit kein leerer weisser Streifen entsteht. */
header .c7 .dropdown + .dropdown .dropdown-menu .dropdown-menu,
header .c7 .dropdown-menu .dropdown-menu {
	top: 0;
}
header .c7 .dropdown-menu .dropdown-menu > li:first-child,
header .c7 li.dropdown .multi-level li:first-child li:first-of-type {
	padding-top: 0;
}
/* Eintraege auf dem weissen Panel klar abgrenzen + deutlich sichtbares Hover */
header .c7 .dropdown-menu a.lv2,
header .c7 .dropdown-menu a.lv3 {
	background: #fff !important;
	border-bottom: 1px solid #ececec;
}
header .c7 .dropdown-menu a.lv2:hover,
header .c7 .dropdown-menu a.lv3:hover {
	background: #f0f0f0 !important;
	color: #222 !important;
}

/* ==========================================================================
   Search
   ========================================================================== */
   
#tx_indexedsearch table {width:100%;box-sizing: border-box;}
#tx_indexedsearch td {border:0;padding:0;box-sizing: border-box;display:block;width:100%;}
#tx_indexedsearch td:empty {font-size:0;}
#tx_indexedsearch input {box-sizing: border-box;}
#tx_indexedsearch input[type=checkbox] {width:auto;vertical-align:middle;}
#tx_indexedsearch table + p { }
#tx_indexedsearch label {display: inline;margin-bottom: 0;font-weight: 100;vertical-align:middle;}


.body .colFull #tx_indexedsearch p:last-child {padding:0;}

/* ==========================================================================
   RESPONSIVE <= TABLET
   ========================================================================== */

@media (max-width: 1023px) {
	.c1,.c2 {
		width:0;
	}
	.body .colFull,
	.body .colLeft .c8 {
		font-size:1.2rem;
	}
	.nav > li {display:inline-block}
	header .header {position:static;}
	.slick-slide .text h1,
	.body .breadcrumb,
	footer .csc-menu {display:none;}
	.header .c2 {width:50%;}
	.header .c3 {float:none;position:absolute;top:20px;right:15px;width:50%;text-align: right}
	.header .c3 li,
	.header .c3 a {display:inline;}
	.c8,.c7,.body .c5.colRight,.c10,
	body#sonderausstellung.page-list .body .c10 .c4,
	body#sonderausstellung.page-list .body .c10 .c4 img {
		width:100%
	}
	.body .c7.colLeft p:last-child, .body .colFull p:last-child {
		padding-bottom: 0;
	}
	body#sonderausstellung.page-list .body .c10 h2,
	h1,h2 {margin-top: 1em;font-size: 1.6rem;line-height:2rem;}
	.breadcrumb li {font-size: 1rem;}
	.body .c5.colRight {background:#fff;}

	.body .breadcrumb {float:none;}
	footer > div:first-child div,
	body#sonderausstellung.page-list .body .c10 {margin:0;}
	footer > div:first-child div.logos {
		margin-top:1em;
		white-space: inherit;
	}
	footer {text-align:center;padding-bottom:12px;}
	footer hr,
	footer .container:first-child {display:none;}
	footer .nav.right li {border:0;margin:0 10px;}
}

@media (min-width: 1024px) and (max-width: 1679px) {
	header .c2 img {margin-left:10px;}
	header .c3 ul {margin-right:10px;}
	.body .c5.colRight img {width:80%;}
	.body .colFull,
	.body .colLeft .c8 {
		font-size:1.3rem;
	}
	body#termine.page-list #terminfilter span {
	}
}

@media (width: 768px) {
	.header .c7 {width:100%;}
}

T-IN BAR*/

#cookie-bar {
	border-top:2px solid #a5d941;
	background:rgba(255,255,255,0.95);
	font-size:12px;
	position:fixed;
	z-index:9999;
	width:100%;
	bottom:0;
	left:0;
	width:100%;
	padding: 0;
}

#cookie-bar .cb-buttons {
	text-align: right;
	display: block;
	position: relative;
	float: right;
}

@media (max-width: 630px) {
	#cookie-bar .cb-buttons {
		text-align: right;
		width: 100%;
		margin-top: 20px;
		float: left;
	}
}

#cookie-bar .cd-outer {
	padding:1em 0 2em 0;
	width:100%;
	max-width:1245px;
	margin:0 auto;
	position:relative;
}

#cookie-bar .cd-outer::after{
	content: '';
	display: table;
	clear: both;
}

@media (max-width: 1250px) {
	#cookie-bar .cd-outer {
		width: 96%;
	}
}

#cookie-bar .cb-label {
	color: #000;
	display: block;
	width: 100%;
	font-size: 1.2em;
	margin-bottom: 1em;
}

#cookie-bar .cb-label a {
	color:#a5d941;
	font-weight:bold;
}

#cookie-bar .cb-enable,
#cookie-bar .cb-disable,
#cookie-bar .cb-policy,
#cookie-bar .cb-enable:hover,
#cookie-bar .cb-disable:hover,
#cookie-bar .cb-policy:hover  {
	border: 2px solid #a5d941;
	color: #a5d941;
	text-decoration: none;
	padding: 6px 60px;
	display: inline-block;
	font-size:16px;
	font-weight: bold;
}

#cookie-bar .cb-check{
	display: inline-block;
	position: relative;
}

#cookie-bar .cb-check label{
	position: relative;
	font-size: 1.4em;
	color: #666;
	display:inline;
	margin-left: 0;
	vertical-align: super;
}

#cookie-bar .cb-check input[type="checkbox"]{
	position: relative;
	display: inline-block;
	width: 21px;
	height: 21px;
	margin-right: 10px;
	border: 2px solid #666;
	-webkit-appearance: none;
	float:none;
}

#cookie-bar .cb-check input[type="checkbox"]:focus{
	outline:0;
}

#cookie-bar .cb-check input[type="checkbox"]:nth-of-type(2){
	margin-left: 40px;
}

#cookie-bar .cb-check input[type="checkbox"]:checked{
	background-image: url('../images/icon-checked.png');
	background-repeat: no-repeat;
	background-position: 50%;
}

#cookie-bar .cb-check input[type="checkbox"][readonly]{
	background-color: #ccc;
	border: none;
	background-image: url('../images/icon-checked-readonly.png');
	background-repeat: no-repeat;
	background-position: 50%;
}

#cookie-bar .cb-check input[type="checkbox"][readonly] + label{
	color: #ccc;
}

#cookie-bar .cb-details{
	position: relative;
	display: block;
	width: 100%;
	clear: both;
	top: 17px;
}

#cookie-bar .cb-details.accordion{
	max-height: 25px;
	overflow: hidden;
	-webkit-transition: height .5s linear;
	-o-transition: height .5s linear;
	transition: height .5s linear;
}

#cookie-bar .cb-details.accordion.active {
	max-height: 100%;
}

#cookie-bar .cb-details label.cb-action{
	display: block;
	text-align: right;
	font-weight: bold;
	color: #a5d941;
	cursor: pointer;
	float: right;
}

#cookie-bar .cb-details label.cb-action:after{
	content: '';
	display: inline-block;
	position: relative;
	width: 12px; height: 12px;
	margin-left: 3px;
	background-image: url('../images/gfx-arrow-right.png');
	background-repeat: no-repeat;
	background-position: 150% 100%;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

#cookie-bar .cb-details.accordion.active label.cb-action:after {
	background-position: 35% 100%;
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

#cookie-bar .cb-details p{
	clear: both;
	margin-top: 1.7em;
	padding: 0 0 1.5em 0;
	position: relative;
	width: 100%;
	color: #000;
	font-size: 1.2em;
}

#cookie-bar .cb-details strong{
	position: relative;
	display: block;
	color: #666;
	font-weight: bold;
}

#cookie-bar .cb-details strong:nth-of-type(2){
	margin-top: 1em;
}

#cookie-bar .cb-disable,
#cookie-bar .cb-policy {
	border:2px solid #a5d941;
	color: #a5d941;
}

#cookie-bar .cb-policy,
#cookie-bar .cb-disable {margin-left:5px;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#cookie-bar {
		position: relative;
	}
}

/*NEWSLETTER-PAGE*/
.newsletter-head{background: #58585a;color: white;padding: 1.5rem 0 1rem 0;margin: 0 auto;max-width: 580px}
.newsletter-head h3{text-align: center;font-size: 34px;}
.newsletter-head h4{text-align: center;font-size: 15px;}
.newsletter-page{display:flex;flex-wrap: wrap;max-width: 580px;position: relative;margin: 0 auto}
.newsletter-page .image{flex: 0 0 20.33%;border-bottom: 1px solid #cacaca;padding-top: calc(1rem + 1em)}
.newsletter-page .image img{width: 138px}
.newsletter-page .text{flex: 0 0 77.777%;border-bottom: 1px solid #cacaca;padding-left: 10px;padding-top: calc(1rem + 1em)}
.newsletter-page .text h2{font-size: 15px;margin-top: 0;line-height: 19px;margin-bottom: 0}
.newsletter-page .text h5{font-size: 18px;margin-top: 0}
.newsletter-page .text p{color:#777777;font-size:15px;line-height: 19px;}
.newsletter-page .text a{    color: #58585a;font-weight: 400;
	text-decoration: none;}

@media only screen and (max-width: 600px) {
	.newsletter-page .image{
		flex: 0 0 33%;
		border-bottom: none;
	}
	.newsletter-page .text {
		flex: 0 0 100%;
		padding-left: 0;
	}
}

/* ==========================================================================
   FILME — three-column video tiles with GDPR-friendly placeholders + lightbox
   ==========================================================================
   Each tt_content with CType="filme" renders as a tile <div class="filme-item">
   inside the standard <div class="frame frame-type-filme">.  The placeholder
   is fully local (no requests to YouTube until the visitor clicks).  CSS only
   makes the .frame-type-filme tiles tile into 3 columns; the lightbox + consent
   modal are appended to <body> by JavaScript and styled here. */
.frame-type-filme {
	display: inline-block;
	vertical-align: top;
	width: calc(33.333% - 1em);
	margin: 0 1em 1em 0;
	box-sizing: border-box;
}
.frame-type-filme:nth-child(3n) { margin-right: 0; }
@media (max-width: 991px) {
	.frame-type-filme { width: calc(50% - 0.75em); }
	.frame-type-filme:nth-child(3n) { margin-right: 1em; }
	.frame-type-filme:nth-child(2n) { margin-right: 0; }
}
@media (max-width: 600px) {
	.frame-type-filme { width: 100%; margin-right: 0; }
	.frame-type-filme:nth-child(n) { margin-right: 0; }
}

.filme-item {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.filme-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	border: 0;
	background: linear-gradient(135deg, #58585a 0%, #2c2c2e 100%);
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.4em;
	font-family: 'Open Sans', sans-serif;
	transition: filter 0.15s ease-in-out;
	overflow: hidden;
}
.filme-placeholder:hover,
.filme-placeholder:focus-visible {
	filter: brightness(1.18);
	outline: none;
}
/* YouTube thumbnail (inserted by JS as the first child of .filme-placeholder)
 * fills the tile; the title/play overlay below sits on a translucent backdrop
 * so the image stays visible underneath. */
.filme-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
/* The remaining placeholder children are stacked above the thumbnail with a
 * dark gradient backdrop so the title stays readable on any video preview. */
.filme-placeholder > :not(.filme-thumb) { position: relative; z-index: 1; }
.filme-placeholder:has(.filme-thumb)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
	z-index: 0;
}
.filme-placeholder-play {
	font-size: 3.5rem;
	line-height: 1;
	margin-bottom: 0.2em;
	opacity: 0.95;
	text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.filme-placeholder-title {
	font-size: 1.15rem;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.filme-placeholder-hint {
	font-size: 0.8rem;
	opacity: 0.85;
	max-width: 28em;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Lightbox (created by JS) */
.filme-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.88);
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}
.filme-lightbox-inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 16 / 9;
}
.filme-lightbox iframe {
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}
.filme-lightbox-close {
	position: absolute;
	top: -2.5em;
	right: 0;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 0.3em 0.9em;
	font-size: 0.95rem;
	cursor: pointer;
	border-radius: 3px;
}
.filme-lightbox-close:hover { background: rgba(255, 255, 255, 0.1); }

/* Consent dialog (created by JS) */
.filme-consent {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}
.filme-consent-inner {
	background: #fff;
	max-width: 34em;
	padding: 1.8em 2em;
	border-radius: 4px;
	color: #333;
	font-size: 0.95rem;
	line-height: 1.45;
}
.filme-consent-inner h2 {
	margin: 0 0 0.6em;
	font-size: 1.3rem;
	color: #58585a;
}
.filme-consent-inner p { margin: 0 0 0.8em; }
.filme-consent-actions {
	margin-top: 1.2em;
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
}
.filme-consent-actions button {
	padding: 0.55em 1.1em;
	border: 0;
	cursor: pointer;
	font-size: 0.95rem;
	border-radius: 3px;
}
.filme-consent-accept { background: #58585a; color: #fff; }
.filme-consent-accept:hover { background: #6c6c6e; }
.filme-consent-cancel { background: #d0d0d0; color: #333; }
.filme-consent-cancel:hover { background: #b8b8b8; }
.filme-consent-remember { margin-right: 0.4em; }

/* ==========================================================================
   KARTE — privacy-friendly Maps embed with stylised SVG placeholder
   ==========================================================================
   The CType="karte" content element shows a fully local stylised map (inline
   SVG, no requests to Google) until the visitor clicks "Karte aktivieren".
   JS then asks for consent, and on accept replaces the placeholder with the
   <iframe> in place — so the map sits where it would normally sit. */
.frame-type-karte {
	margin: 1.5em 0;
}
.karte-item {
	position: relative;
	width: 100%;
	max-width: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.karte-item iframe {
	width: 100%;
	height: 100%;
	border: 0;
	background: #e8eee6;
}
.karte-placeholder {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: #e8eee6;
	overflow: hidden;
	transition: filter 0.15s ease-in-out;
}
.karte-placeholder:hover,
.karte-placeholder:focus-visible {
	filter: brightness(1.05);
	outline: none;
}
.karte-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.karte-placeholder-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 100%);
	padding: 1em;
	gap: 0.4em;
	font-family: 'Open Sans', sans-serif;
}
.karte-placeholder-title {
	font-size: 1.4rem;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.karte-placeholder-hint {
	font-size: 0.85rem;
	max-width: 36em;
	opacity: 0.9;
	text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	margin-bottom: 0.4em;
}
.karte-placeholder-cta {
	display: inline-block;
	padding: 0.5em 1.1em;
	background: #58585a;
	color: #fff;
	border-radius: 3px;
	font-size: 0.95rem;
	font-weight: 600;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.karte-placeholder:hover .karte-placeholder-cta,
.karte-placeholder:focus-visible .karte-placeholder-cta {
	background: #6c6c6e;
}

/* ==========================================================================
   Layout 101 — Bild-Text-Block, horizontal zentriert
   ==========================================================================
   Layout 101 wird redaktionell für "Bild links + Text rechts"-Inhaltsblöcke
   genutzt (Ausstellungs-Teaser, Sammlung, /filme-Promo etc.). Die internen
   Spalten .c4 (33% Bild) + .c6 (50% Text) sind float:left — ohne den
   nachfolgenden Block zentriert sich das aber nicht selbst.  Wir setzen
   eine maximale Inhalts-Breite und margin auto, plus einen Clearfix für
   die internen Floats. */
.frame-layout-101 {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.frame-layout-101::after {
	content: "";
	display: table;
	clear: both;
}
/* Lücke zwischen Bildspalte (.c4 links) und Textspalte (.c6 rechts) */
.frame-layout-101 .c6 {
	padding-left: 1.5rem;
}
/* h2 hat global großzügige margin (4rem oben), was im Bild-Text-Block
 * den Text gegenüber dem Bild stark nach unten drückt — hier dämpfen. */
.frame-layout-101 .c6 h2,
.frame-layout-101 .c6 h2:first-child {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   FRAME-SPACING — Abstände, die Redakteure im BE-Reiter "Erscheinung"
   über die Felder "Abstand davor" / "Abstand danach" einstellen können.
   ==========================================================================
   fluid_styled_content rendert die Klassen .frame-space-before-{value}
   und .frame-space-after-{value} auf jedes Inhaltselement, liefert aber
   selbst keine CSS-Regeln dafür.  Hier die fünf Default-Stufen. */
.frame-space-before-extra-small { margin-top: 0.5rem; }
.frame-space-before-small       { margin-top: 1rem; }
.frame-space-before-medium      { margin-top: 2rem; }
.frame-space-before-large       { margin-top: 3rem; }
.frame-space-before-extra-large { margin-top: 4rem; }

.frame-space-after-extra-small  { margin-bottom: 0.5rem; }
.frame-space-after-small        { margin-bottom: 1rem; }
.frame-space-after-medium       { margin-bottom: 2rem; }
.frame-space-after-large        { margin-bottom: 3rem; }
.frame-space-after-extra-large  { margin-bottom: 4rem; }

/* ==========================================================================
   AENDERUNGSWUENSCHE 2026-06-17
   ========================================================================== */

/* Logos in der Navigationsleiste (Franziskanermuseum-Logo links sowie
 * Facebook/Instagram rechts) vertikal mittig statt an der Unterkante
 * ausrichten.  Die drei Spalten der Kopfzeile sind inline-block; per
 * vertical-align:middle sitzen sie auf gleicher (mittiger) Hoehe. */
.header .c2,
.header .c3,
.header .c7 {
	vertical-align: middle;
}
.header .c2 a,
.header .c2 img,
.header .c3 ul.nav.right li,
.header .c3 ul.nav.right li img {
	vertical-align: middle;
}

/* Instagram/Facebook (und Suche) auch in der mobilen Ansicht anzeigen.
 * innen_mobi.css blendet mit `header .nav { display:none }` die komplette
 * Desktop-Navigation inkl. der Social-Icons (.c3) aus.  Hier holen wir die
 * Icon-Leiste zentriert unter das Logo zurueck. */
@media (max-width: 990px) {
	header .c3 {
		display: block;
		position: static;
		float: none;
		width: 100%;
		text-align: center;
		margin: 8px 0 0 0;
	}
	header .c3 ul.nav.right {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	header .c3 ul.nav.right li {
		display: inline-block;
		margin: 0 10px;
		border: 0;
	}
	header .c3 ul.nav.right li a {
		display: inline-block;
		padding: 0;
	}
}

/* Startseite mobil: das Bild der Gruppenanmeldung/Buchung (#c2136) unter der
 * Slideshow wirkte unverhaeltnismaessig gross. Unterhalb von 992px stapeln
 * die Grid-Spalten (.c4 wird Block in voller Breite); wir begrenzen die
 * Bildspalte auf eine moderate Breite und zentrieren sie, damit das Bild
 * nicht groesser als die Slideshow erscheint. */
@media (max-width: 991px) {
	#c2136 .c4 {
		max-width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Vertikale Position einzelner Inhalte in der rechten Spalte (colRight) von
 * Innenseiten feinjustieren.  Werte sind bewusst klein gehalten und koennen
 * bei Bedarf angepasst werden. (Body-IDs werden in constants.typoscript
 * je Seite gesetzt.) */
/* Spiegelhalder-Sammlung (Seite 40): rechter Text (Inhaltselement c423) soll
 * weiter unten beginnen, etwa auf Hoehe der Hauptueberschrift links. */
.colRight #c423 { margin-top: 3.5rem; }
/* Kelten-App "Der verlorene Pfad" (Seite 271): Logo weiter unten.
 * Das Logo ist das erste .c10 nach dem fuehrenden .c1-Platzhalter. */
#app-verlorener-pfad .colRight > .c1 + .c10 { margin-top: 3.5rem; }
/* Kelten "GeheimnisGraeberei" (Seite 218): Aenderungswunsch 2026-06-19 – Logo
 * jetzt weiter UNTEN (Oberkante ~ auf Hoehe der Hauptueberschrift links). */
#geheimnisgraeberei .colRight > .c1 + .c10 { margin-top: 4.5rem; }
/* Kelten "Keltenpfad" (Seite 43): rechte Spalte (Vogel/Text, Element c26)
 * weiter unten, buendig mit dem Titel des Textes. */
.colRight #c26 { margin-top: 4rem; }

/* Aenderungswunsch 2026-06-23: Silhouetten (Personen-Scherenschnitt
 * "Oskar Spiegelhalder" auf Seite 40 / Vogel "Hexentreff und Mondkalender" auf
 * Seite 43) NICHT linksbuendig, sondern horizontal in der freien Flaeche der
 * Bildspalte zentrieren. Oberkante buendig mit der 1. Textzeile UNTER der
 * Ueberschrift -> Bild um ca. Ueberschriftshoehe nach unten versetzen. Beide
 * Elemente nutzen Layout 101: .c4 = Bildspalte, .c6 = Ueberschrift + Text. */
.colRight #c423 .c4,
.colRight #c26 .c4 {
	text-align: center;
}
.colRight #c423 .c4 figure.image,
.colRight #c26 .c4 figure.image {
	display: inline-block;
	margin: 0;
}
.colRight #c423 .c4,
.colRight #c26 .c4 {
	margin-top: 7rem;
}

/* Aenderungswunsch 2026-06-23: Newsletter-Abo (Seite 35) – groesserer Abstand
 * zwischen dem CleverReach-Anmeldeformular ("Anmelden"-Button) und der
 * Fussleiste. #c1859 ist das HTML-Inhaltselement mit dem Formular. */
#c1859 { margin-bottom: 5rem; }

/* ==========================================================================
   BLOG-TEASER (CType "blog") — neueste WordPress-Beitraege als Kacheln
   ========================================================================== */
.blog-teaser-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0;
}
.blog-card {
	flex: 1 1 0;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: #333;
	background: #f6f6f6;
	border: 1px solid #e3e3e3;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover,
.blog-card:focus {
	box-shadow: 0 4px 14px rgba(0,0,0,0.13);
	transform: translateY(-2px);
	text-decoration: none;
	color: #333;
}
.blog-card-img {
	display: block;
	width: 100%;
	padding-top: 60%;
	background-size: cover;
	/* Aenderungswunsch 2026-06-19: Bildausschnitt oben ansetzen (Oberkante des
	   Bildes oben), unteren Teil abschneiden statt zentriert. */
	background-position: top center;
	background-color: #ddd;
}
.blog-card-body {
	display: block;
	padding: 1rem 1.1rem 1.2rem;
}
.blog-card-date {
	display: block;
	font-size: 0.8em;
	color: #888;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.blog-card-title {
	display: block;
	font-weight: 600;
	font-size: 1.05em;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}
.blog-card-excerpt {
	display: block;
	font-size: 0.9em;
	line-height: 1.45;
	color: #555;
}
.blog-teaser-more {
	margin: 0.5rem 0 0;
}
.blog-teaser-more a {
	display: inline-block;
	background: url('../images/arrow-dark2.png') no-repeat 0 center;
	padding-left: 20px;
	font-weight: 600;
}
.blog-teaser-loading {
	color: #666; /* 5,7:1 auf Weiß (vorher #888 = 3,54:1) */
}
@media (max-width: 767px) {
	.blog-card { flex: 1 1 100%; }
}

/* ==========================================================================
   Startseite: "Mit Ihrer Gruppe ins Franziskanermuseum" hervorheben
   (dezenter Hintergrund + Rahmen + Schatten)
   ========================================================================== */
#c2136 {
	background: #f7f6f3;
	border: 1px solid #e3ddd0;
	border-radius: 6px;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
	padding: 1.5rem 1.8rem;
}

/* ==========================================================================
   SPRACHWAHL als Dropdown (natives <details>), neben dem Such-Icon, barrierefrei
   ========================================================================== */
.header .c3 ul.nav.right li.lang-switch {
	position: relative;   /* Bezugspunkt fuer das absolute Dropdown */
	display: inline-block;
	vertical-align: middle;
	border-left: 1px solid #ccc;
	margin-left: 8px;
	padding-left: 10px;
	white-space: nowrap;
}
.lang-details { position: static; display: inline-block; }
/* Toggle (summary): aktuelle Sprache (Flagge + Name + Caret); Default-Marker weg.
 * WICHTIG: display NICHT auf inline-block/flex setzen – das deaktiviert in
 * Chrome/Safari das native Aufklappen von <details>. Standard (list-item) lassen
 * und nur den Marker ausblenden. */
.lang-details > summary {
	list-style: none;
	cursor: pointer;
	color: #58585a;
	font-size: 15px;
	padding: 2px 4px;
}
.lang-details > summary::-webkit-details-marker { display: none; }
.lang-details > summary::marker { content: ""; }
.lang-switch-current { vertical-align: middle; }
.lang-details .caret { margin-left: 4px; transition: transform 0.15s ease; }
.lang-details[open] .caret { transform: rotate(180deg); }
/* gemeinsame Flaggen-Darstellung */
.lang-flag {
	display: inline-block;
	width: 22px;
	height: 15px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 1px solid #cfcfcf;
	border-radius: 2px;
}
.lang-flag--de,
.lang-flag--flags-de { background-image: url('../images/flags/de.svg'); }
.lang-flag--gb,
.lang-flag--en,
.lang-flag--flags-gb { background-image: url('../images/flags/gb.svg'); }
/* Dropdown-Panel: Ein-/Ausblenden EXPLIZIT über [open] steuern (nicht auf das
 * Default-Verhalten von <details> mit position:absolute verlassen). */
.lang-switch-menu {
	display: none;
	position: absolute;
	right: 0;
	left: auto;
	top: 100%;
	min-width: 210px;
	margin: 2px 0 0 0;
	padding: 6px 0;
	list-style: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	z-index: 9999;
}
.lang-details[open] .lang-switch-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}
/* Optionen immer untereinander (auch mobil) */
.lang-switch-menu > li.lang-opt { display: block !important; float: none; width: auto; }
/* Leerzeichen vor der Klammer "(German)" (f:spaceless entfernt das HTML-Leerzeichen) */
.lang-switch-menu .lang-native { margin-left: 0.35em; }
.lang-switch-menu .lang-opt-link,
.lang-switch-menu .lang-opt.disabled {
	display: block;
	padding: 8px 14px;
	color: #333;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
}
.lang-switch-menu .lang-opt-link .lang-flag { margin-right: 8px; }
.lang-switch-menu .lang-opt-link:hover,
.lang-switch-menu .lang-opt-link:focus { background: #f0f0f0; color: #222; }
.lang-switch-menu .lang-native { color: #999; }
.lang-switch-menu .lang-check { color: #58585a; font-weight: 700; margin-left: 6px; }
.lang-switch-menu .lang-opt.disabled { opacity: 0.45; cursor: default; }
/* ==========================================================================
   Formulare (Form-Framework / wapplersystems/form, ersetzt Powermail 28.10.2026)
   Gruppenanmeldung: Darstellung wie das frühere Powermail-Formular
   (links Gruppe/Termin, rechts Wünsche/Kontakt, grauer Absende-Knopf rechts).
   ========================================================================== */
form[id^="gruppenanmeldung-"] {
    display: grid;
    grid-template-columns: 41.66666667% 50%;
    grid-template-rows: auto auto 1fr;
    scroll-margin-top: 130px; /* Sprungziel nach dem Absenden nicht unter dem fixierten Kopf */
    justify-content: space-between;
    align-items: start;
}
form[id^="gruppenanmeldung-"] > div:not(.actions):not(.form-error-summary) { display: none; }
form[id^="gruppenanmeldung-"] > .form-error-summary { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1rem; padding: 10px 15px; color: #a94442; background: #f2dede; border: 1px solid #ebccd1; }
form[id^="gruppenanmeldung-"] > .form-error-summary p { margin: 0; }
form[id^="gruppenanmeldung-"] fieldset.fm-form-col { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Überschriften der Feldgruppen nur für Screenreader (früher ohne sichtbaren Titel) */
form[id^="gruppenanmeldung-"] fieldset.fm-form-col > legend {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
form[id^="gruppenanmeldung-"] fieldset.fm-form-col--left { grid-column: 1; grid-row: 2 / span 2; }
form[id^="gruppenanmeldung-"] fieldset.fm-form-col--right { grid-column: 2; grid-row: 2; margin-top: 70px; }
form[id^="gruppenanmeldung-"] div.actions { grid-column: 2; grid-row: 3; }
form[id^="gruppenanmeldung-"] [data-form-element] { margin-bottom: 0.7rem; }
form[id^="gruppenanmeldung-"] .form-label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
form[id^="gruppenanmeldung-"] .form-label .required { margin-left: 0; }
form[id^="gruppenanmeldung-"] .fm-form-intro { font-size: 1.15rem; font-weight: 300; }
form[id^="gruppenanmeldung-"] .fm-thema { margin: 20px 0 20px 45px; }
form[id^="gruppenanmeldung-"] textarea.form-control { height: auto; min-height: 120px; }
form[id^="gruppenanmeldung-"] [data-form-element="datenschutz"] { margin-bottom: 2.8rem; }
form[id^="gruppenanmeldung-"] .fm-form-privacy a {
    color: #337AB7;
    padding: 0 0 0 20px;
    background: url(../images/arrow-dark.png) no-repeat 0 center;
    font-weight: bolder;
    font-size: 16px;
}
form[id^="gruppenanmeldung-"] .form-navigation .btn {
    display: block;
    width: 100%;
    background: #666;
    color: #fff;
    margin-top: 0.5rem;
    border: 0;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 14px;
}
form[id^="gruppenanmeldung-"] .form-navigation .btn:hover,
form[id^="gruppenanmeldung-"] .form-navigation .btn:focus-visible { background: #444; }
form[id^="gruppenanmeldung-"] .form-navigation .btn:focus-visible { outline: 3px solid #337AB7; outline-offset: 2px; }
form[id^="gruppenanmeldung-"] .error .form-control,
form[id^="gruppenanmeldung-"] .form-control.error { border-color: #c00; }
form[id^="gruppenanmeldung-"] .error.help-block,
form[id^="gruppenanmeldung-"] .invalid-feedback,
form[id^="gruppenanmeldung-"] .help-block { color: #c00; display: block; }
@media (max-width: 991px) {
    form[id^="gruppenanmeldung-"] { grid-template-columns: 100%; }
    form[id^="gruppenanmeldung-"] fieldset.fm-form-col--left,
    form[id^="gruppenanmeldung-"] fieldset.fm-form-col--right,
    form[id^="gruppenanmeldung-"] div.actions { grid-column: 1; grid-row: auto; }
    form[id^="gruppenanmeldung-"] fieldset.fm-form-col--right { margin-top: 0; }
    form[id^="gruppenanmeldung-"] { grid-template-rows: none; }
}

/* hidden-Attribut immer durchsetzen (wie Bootstrap 5 Reboot). Bootstrap 3 setzt es ohne !important,
   dadurch blieb z. B. das Lade-Overlay von nt-lingua (.nt-lingua-overlay { display:flex }) sichtbar
   und blockierte als Vollbild-Schleier alle Klicks. */
[hidden] { display: none !important; }

/* ==========================================================================
   Barrierefreiheit (Prüfbericht 28.10.2026, var/barrierefreiheit/)
   ========================================================================== */
/* 2.4.1 Skip-Link: erst bei Tastaturfokus sichtbar */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 10001;
    background: #fff; color: #1b3a54; padding: 10px 16px; font-weight: 700;
    border: 3px solid #1b3a54; text-decoration: underline;
}
.skip-link:focus { left: 10px; top: 10px; }
main:focus { outline: none; }
/* Sprungziele nicht unter dem fixierten Kopf (2.4.11) */
html { scroll-padding-top: calc(var(--header-h, 130px) + 10px); }

/* 2.1.1 Menü: Unterebenen auch beim Durchtabben öffnen (wie bei Hover) */
ul.nav li.dropdown:focus-within > ul.dropdown-menu { display: block; margin-top: 0; }
ul.nav li.dropdown-submenu:focus-within > ul.dropdown-menu { display: block !important; }

/* 2.4.7 Fokus sichtbar: Slider, Film- und Kartenkacheln */
.slideshowHP .slick-prev:focus-visible,
.slideshowHP .slick-next:focus-visible {
    outline: 3px solid #fff; outline-offset: -8px; box-shadow: inset 0 0 0 8px rgba(27, 58, 84, .85);
}
.slideshowHP .slick-dots li button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.filme-placeholder:focus-visible,
.karte-placeholder:focus-visible {
    outline: 3px solid #fff; outline-offset: -6px; box-shadow: 0 0 0 3px #1b3a54;
}

/* 2.2.2 Pause-Knopf für den Startseiten-Slider */
.slideshowHP { position: relative; }
.slideshowHP .slick-pause {
    position: absolute; left: calc(50% + 62px); bottom: calc(8% - 14px); z-index: 5;
    width: 40px; height: 40px; padding: 0; border: 2px solid #fff; border-radius: 50%;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; line-height: 1; letter-spacing: -1px; cursor: pointer;
}
.slideshowHP .slick-pause:hover { background: rgba(0, 0, 0, .7); }
@media (max-width: 1260px) { .slideshowHP .slick-pause { left: auto; right: 16px; } }
.slideshowHP .slick-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 1.4.1 / 1.4.3 Links im Inhalt: unterstrichen und dunkler (#23527c ≈ 7:1 auch auf #f9f9f9) */
main a { color: #23527c; }
main a:hover, main a:focus { color: #163452; }
main p a, main td a, main dd a, main .ce-bodytext li a { text-decoration: underline; }
main .csc-menu a { color: #23527c; }
.blog-card-date { color: #666; }

/* 1.4.10 Umbruch bei 320 px: breite Tabellen scrollen in sich, lange URLs umbrechen */
main p, main li, main td { overflow-wrap: break-word; }
@media (max-width: 600px) {
    main table.contenttable { display: block; max-width: 100%; overflow-x: auto; }
}

/* ==========================================================================
   Sprachwahl im Kopf neben der Lupe (wie www.villingen-schwenningen.de, 28.10.2026)
   Templates/Navigation/LangSwitch.html, JavaScript/Dist/lang-switch.js
   ========================================================================== */
.header .c3 ul.nav.right li.lang-switch { border-left: 0; margin-left: 4px; padding-left: 0; }
.fm-lang { position: relative; display: inline-block; font-family: 'Open Sans', sans-serif; }
/* summary nicht auf flex/inline-block setzen (Safari/Chrome: natives Aufklappen) */
.fm-lang > summary {
    list-style: none; cursor: pointer; white-space: nowrap;
    padding: 6px 12px; border-radius: 3px; background: rgba(255, 255, 255, .9);
    color: #58585a; font-size: 16px; line-height: 1.3;
}
.fm-lang > summary::-webkit-details-marker { display: none; }
.fm-lang > summary::marker { content: ""; }
.fm-lang > summary:hover { background: #f2f2f2; }
.fm-lang > summary:focus-visible { outline: 3px solid #23527c; outline-offset: 2px; }
.fm-lang__current { vertical-align: middle; margin-left: 6px; }
.fm-lang__caret {
    display: inline-block; vertical-align: middle; margin-left: 6px; width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor;
    transition: transform .15s ease;
}
.fm-lang[open] .fm-lang__caret { transform: rotate(180deg); }
.fm-flag { display: inline-block; width: 20px; height: 14px; vertical-align: middle; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); border-radius: 1px; }
.fm-lang__menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 10000;
    min-width: 290px; margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid #58585a; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    text-align: left;
}
.fm-lang__menu > li { display: block !important; float: none !important; width: auto; margin: 0; padding: 0; }
.fm-lang__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
    color: #222; font: inherit; font-size: 16px; line-height: 1.3; text-align: left; text-decoration: none !important;
    cursor: pointer; white-space: nowrap;
}
.fm-lang__item:hover, .fm-lang__item:focus-visible { background: #f2f2f2; color: #222; }
.fm-lang__item:focus-visible { outline: 2px solid #23527c; outline-offset: -2px; }
.fm-lang__label { flex: 1 1 auto; }
.fm-lang__english { color: #6b6b6b; }
.fm-lang__check { visibility: hidden; color: #222; font-weight: 700; }
.fm-lang__item.is-active .fm-lang__check { visibility: visible; }
.fm-lang__easy { margin-top: 4px !important; padding-top: 4px !important; border-top: 1px solid #e3e3e3; }
.fm-lang__item--easy { font-weight: 600; color: #23527c; background: rgba(35, 82, 124, .08); border-left: 4px solid #23527c; }
.fm-lang__item--easy:hover, .fm-lang__item--easy:focus-visible { background: rgba(35, 82, 124, .15); color: #23527c; }
.fm-lang__icon { display: block; color: #23527c; }
.fm-lang__item--easy .fm-lang__flag { width: 20px; display: inline-flex; justify-content: center; }
@media (max-width: 1024px) {
    .fm-lang > summary { padding: 4px 6px; font-size: 14px; }
    .fm-lang__current { display: none; }
    .fm-lang__menu { min-width: 260px; }
}
/* Header-Regeln blenden verschachtelte Listen der Navigation aus → Menü explizit über [open] steuern */
.fm-lang:not([open]) > .fm-lang__menu { display: none !important; }
.fm-lang[open] > .fm-lang__menu { display: block !important; visibility: visible !important; opacity: 1 !important; }
.fm-lang, .fm-lang * { text-transform: none !important; letter-spacing: normal; }
/* eigener Haken (.fm-lang__check) – den zusätzlichen von nt-lingua ([aria-pressed]::after) unterdrücken */
.fm-lang [data-ntlingua-target]::after { content: none !important; }
.fm-lang__item { box-sizing: border-box; }
/* Handy: Menü über die volle Breite unter dem fixierten Kopf statt links aus dem Bild */
@media (max-width: 767px) {
    .fm-lang__menu { position: fixed; left: 8px; right: 8px; top: calc(var(--header-h, 110px) + 4px); min-width: 0; max-height: calc(100vh - var(--header-h, 110px) - 16px); overflow-y: auto; }
    .fm-lang__item { white-space: normal; }
}
.fm-lang__flag { flex: 0 0 20px; display: inline-flex; justify-content: center; }
/* Überschriften, die beim Ausgeben von h4/h5 auf h3 gehoben werden (Gliederung), Optik wie vorher */
h2.fm-h4, h2.fm-h5, h3.fm-h4, h3.fm-h5 { font-family: 'Open Sans', sans-serif; font-weight: 500; line-height: 1.1; color: #333; margin: 10px 0; text-transform: none; letter-spacing: normal; }
h2.fm-h4, h3.fm-h4 { font-size: 18px; }
h2.fm-h5, h3.fm-h5 { font-size: 14px; }
/* 1.4.3 Kontrast: Slider-Schriftzug auch auf hellen Bildstellen lesbar */
.slick-slide .text h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 0 14px rgba(0, 0, 0, .4); }

/* ==========================================================================
   Barrierefreiheit – Befunde A01–A08 (BARRIEREFREIHEIT-AUDIT-2026-10-28.md) + AccessLint
   ========================================================================== */
/* A01 mobiles Menü: Aufklapp-Knopf für die 3. Ebene neben dem Link */
#mobi-navbar li.fm-subnav { position: relative; }
#mobi-navbar .fm-subnav-toggle {
    position: absolute; right: 0; top: 0; min-width: 44px; min-height: 36px; padding: 6px 12px;
    background: transparent; border: 0; color: inherit; cursor: pointer;
}
#mobi-navbar .fm-subnav-toggle .caret { transition: transform .15s ease; }
#mobi-navbar li.fm-subnav.open > .fm-subnav-toggle .caret { transform: rotate(180deg); }
#mobi-navbar .fm-subnav-toggle:focus-visible { outline: 3px solid #23527c; outline-offset: -3px; }
#mobi-navbar li.fm-subnav:not(.open) > ul.dropdown-menu { display: none !important; }
#mobi-navbar li.fm-subnav.open > ul.dropdown-menu { display: block !important; }
@media (min-width: 1025px) { .fm-subnav-toggle { display: none; } }

/* A02 Desktop: Escape schließt das per Fokus/Hover geöffnete Untermenü (gewinnt gegen :hover/:focus-within) */
header ul.nav > li.fm-nav-closed.fm-nav-closed ul.dropdown-menu,
header ul.nav > li.fm-nav-closed.fm-nav-closed li ul.dropdown-menu { display: none !important; }

/* A04 lange Wörter in Überschriften umbrechen (Reflow 320 px) */
main h1, main h2, main h3, main h4, main h5, main h6 { overflow-wrap: anywhere; hyphens: auto; }

/* A05 Footer-Links: Klickfläche mindestens 24 px hoch */
footer #c13 a, footer #c14 a { min-height: 24px; padding-top: 1.5px; padding-bottom: 1.5px; }

/* A06 Slider-Punkte: 24 × 24 px Klickfläche, sichtbarer Punkt bleibt klein */
.slideshowHP .slick-dots li { width: 24px; height: 24px; margin: 0 1px; }
.slideshowHP .slick-dots li button { width: 24px; height: 24px; padding: 0; }
.slideshowHP .slick-dots li button::before { top: 8px; left: 8px; }

/* A07 Textlinks in Newsletter-Formular und Einwilligungsdialogen unterstreichen */
#c1859 a, .filme-consent a { text-decoration: underline !important; }

/* A08 Barrierefreiheits-Widget (nt-ai): „aus"-Anzeigen und Hinweis mit ausreichendem Kontrast */
.nt-a11y-widget .nt-a11y-toggle-state { color: #595959; }
.nt-a11y-widget .nt-a11y-hint { color: #595959; }

/* Newsletter (CleverReach, c1859): unsichtbare weiße Gruppenbeschriftung „Datenschutz*" nur für Screenreader */
#c1859 .cr_form-component--header {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* A09 Toubiz-Kalender: grauer Textton im Shadow DOM über die Host-Variable abdunkeln (≈ 6:1 statt 4,42:1) */
toubiz-widget { --tb-w-color-gray-600: #4f625c !important; }
/* Sprachwahl-Flaggen nicht von der Kopf-Bildregel (Social-Icons, header … ul.nav.right li img) aufblasen lassen */
header .header .c3 ul.nav.right li .fm-lang img.fm-flag,
header .header.shrink .c3 ul.nav.right li .fm-lang img.fm-flag { width: 20px !important; height: 14px !important; max-width: none; }
/* Mobilmenü: lange Einträge umbrechen statt rechts aus dem Bild zu laufen (Reflow 1.4.10) */
@media (max-width: 1024px) {
    #mobi-navbar .dropdown-menu > li > a { white-space: normal; padding-right: 48px; }
}