/* ==========================================================================
   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: #888;
}
@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; }