/*
Theatergruppe Dellmensingen
creation Date: 2026-09-22
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

body, html{
	font-family: var(--font-sans);
	font-weight: var(--weight-text);
	width: 100%;
	height: auto;
	margin: 0px;
	font-size: 18px;
	overflow-x: hidden;
}
textarea, input, select{
	font-family: var(--font-sans);
	font-weight: var(--weight-text);
}
*{
	margin: 0px;
	padding: 0px;
}


/* SCHRIFTROLLEN
   Die Zuordnung Schnitt -> Verwendung steht global, damit kein Modul und kein
   Abschnitt sie noch einmal setzen muss. Die Variablen kommen aus fonts.css. */

/* Hervorhebung im Fliesstext: Gilroy Bold. */
.bold, b, strong{
	font-weight: var(--weight-text-strong);
}

/* Headlines und Hervorhebungen: Bodoni ExtraBold. */
h1, h2, h3, h4, h5, h6,
.headline{
	font-family: var(--font-serif);
	font-weight: var(--weight-headline);
	font-optical-sizing: auto;
}
/* Innerhalb einer Headline bleibt es beim ExtraBold - ein <b> soll dort nicht
   auf den Fliesstext-Schnitt umspringen. */
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{
	font-family: inherit;
	font-weight: inherit;
}

/* FAQ-Headlines: Bodoni Bold, im Mass der Einleitung des Kontaktformulars. */
.faq_head,
.acc_activator{
	font-size: 26px;
	line-height: 36px;
	font-family: var(--font-serif);
	font-weight: var(--weight-faq);
	font-optical-sizing: auto;
}

/* Einleitungstexte (Theater, Mitmachen): Bodoni SemiBold. */
.text_intro,
.text_intro p,
.text_intro li{
	font-family: var(--font-serif);
	font-weight: var(--weight-intro);
	font-optical-sizing: auto;
}

/* Stueckbeschreibung: Bodoni Medium. */
.text_stueck,
.text_stueck p,
.text_stueck li{
	font-family: var(--font-serif);
	font-weight: var(--weight-stueck);
	font-optical-sizing: auto;
}

/* Termine und Bodoni-Fliesstext: Bodoni Regular.
   .serif_text schaltet einen ganzen Abschnitt auf Bodoni um - gedacht fuer
   Strecken, die durchgehend in der Serifenschrift laufen. Einzelne Stellen
   bekommen stattdessen .bodoni. */
.text_termine,
.text_termine p,
.text_termine li,
.bodoni,
.serif_text,
.serif_text p,
.serif_text li,
.serif_text td{
	font-family: var(--font-serif);
	font-weight: var(--weight-termine);
	font-optical-sizing: auto;
}
/* Hervorhebung innerhalb einer Bodoni-Strecke: eine Stufe kraeftiger, aber
   weiter Bodoni - sonst faellt mitten im Absatz die Schriftart um. */
.serif_text b, .serif_text strong,
.text_termine b, .text_termine strong,
.text_stueck b, .text_stueck strong,
.text_intro b, .text_intro strong{
	font-family: var(--font-serif);
	font-weight: var(--weight-headline);
}
/* Gegenstueck zu .serif_text: zurueck auf den Fliesstext-Schnitt. */
.sans_text,
.sans_text p,
.sans_text li{
	font-family: var(--font-sans);
	font-weight: var(--weight-text);
}

.light{
	font-weight: lighter;
}
img{
	border: none;
}
a{
	color: inherit;
	text-decoration: none;
}
a.anchorlink{
	line-height: 0px;
	height: 0px;
	font-size: 0px;
}
table{
	width: 100%;
	table-layout: fixed;
}
td{
	vertical-align: top;
	position: relative;
}
h1,
h2.title{
	font-size: 56px;
	line-height: 64px;
	letter-spacing: 1px;
}
h2{
	font-size: 46px;
	line-height: 54px;
}
h2.marged_bot{
	margin-bottom: 30px;
}
h3{
	font-size: 38px;
	line-height: 46px;
}
h4{
	font-size: 32px;
	line-height: 40px;
}
.alt_headlines h4{
	text-transform: uppercase;
	font-weight: bold;
}
h5{
	font-size: 24px;
	line-height: 32px;
}
h6{
	font-size: 22px;
}
/* Abschnittsheadline der Startseite (Das Theater, Unser Stueck, Kontakt ...) -
   deutlich groesser als h1, deshalb eine eigene Klasse statt einer Ebene. */
h2.section_headline,
.section_headline{
	font-size: 74px;
	line-height: 80px;
	letter-spacing: 0px;
	margin-bottom: 55px;
}
/* Kleinere Stufe fuer Abschnitte, die im Layout zuruecktreten (FAQ). */
h2.section_headline.section_headline_s,
.section_headline.section_headline_s{
	font-size: 60px;
	line-height: 66px;
	margin-bottom: 40px;
}
p,
.contstyles li{
	margin-top: 15px;
	margin-bottom: 15px;
	line-height: 28px;
	position: relative;
}
.contstyles p{
	margin-top: 15px;
	margin-bottom: 15px;
}
.contstyles ul,
.contstyles ol{
	margin-left: 25px;
}
p.nomarg_top{
	margin-top: 0px;
}
p.nomarg_bot{
	margin-bottom: 0px;
}
p.nomarg{
	margin-top: 0px;
	margin-bottom: 0px;
}
.hidden{
	visibility: hidden;
}
.visible{
	visibility: visible;
}
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.uppercase,
.uppercase_headlines h1,
.uppercase_headlines h2,
.uppercase_headlines h3,
.uppercase_headlines h4,
.uppercase_headlines h5,
.uppercase_headlines h6{
	text-transform: uppercase;
}
.lowercase{
	text-transform: lowercase;
}
.nocase{
	text-transform: none;
}
.underline{
	text-decoration: underline;
}
.underline_links a,
.underline_onHover a:hover{
	text-decoration: underline;
}
.nounderline,
.nounderline *:hover{
	text-decoration: none !important;
}
.inline{
	display: inline;
}
.relative{
	position: relative;
}
.font_l,
.font_l p,
.font_l .contstyles li{
	font-size: 22px;
	line-height: 32px;
}
.fields-container{
	display: none;
}
span.font_s,
p.font_s,
.font_s li{
	font-size: 16px;
}
p.font_s,
.font_s li{
	line-height: 24px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.nooverflow{
	overflow: hidden;
}
.overflow{
	overflow: visible;
}
.functionpad{
	padding-top: 1px;
	padding-bottom: 1px;
}



/* GLOBALS */
/* INHALTSBREITEN
   Drei Breiten, mehr nicht: die Voreinstellung fuer den Regelinhalt, "wide"
   fuer Abschnitte, die bis fast an den Rand laufen, und "narrow" fuer
   Textstrecken. Der Prozentwert greift, sobald das Fenster schmaler wird als
   die Pixelbreite, und haelt den Seitenrand. */
.main-container{
	margin-left: auto;
	margin-right: auto;
	width: 1200px;
	max-width: 95%;
	position: relative;
}
.main-container.wide{
	width: 1530px;
	max-width: 95%;
}
.main-container.narrow{
	width: 800px;
	max-width: 90%;
}
.main-container.fullheight{
	display: block;
	height: 100%;
}
.extrawidepad,
.main-container.extrawidepad{
	padding-top: 180px;
	padding-bottom: 180px;
}
.extrawidepad_top,
.main-container.extrawidepad_top{
	padding-top: 180px;
}
.extrawidepad_bot,
.main-container.extrawidepad_bot{
	padding-bottom: 180px;
}
.widepad,
.cont-block .main-container.widepad{
	padding-top: 100px;
	padding-bottom: 100px;
}
.widepad_top,
.cont-block .main-container.widepad_top{
	padding-top: 100px;
}
.widepad_bot,
.cont-block .main-container.widepad_bot{
	padding-bottom: 100px;
}
.regpad,
.cont-block .main-container.regpad{
	padding-top: 70px;
	padding-bottom: 70px;
}
.regpad_top,
.cont-block .main-container.regpad_top{
	padding-top: 70px;
}
.regpad_bot,
.cont-block .main-container.regpad_bot{
	padding-bottom: 70px;
}
.lowpad{
	padding-top: 50px;
	padding-bottom: 50px;
}
.lowpad_bot{
	padding-bottom: 50px;
}
.lowpad_top{
	padding-top: 50px;
}
.cont-block{
	position: relative;
	display: block;
	width: 100%;
}

.page-header{
	display: none;
}

img.cont_img{
	max-width: 100% !important;
	height: auto !important;
}
img.cont_img_limit{
	max-width: 100% !important;
	width: 870px !important;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
img.absimg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
img.fullsize{
	width: 100%;
	display: block;
}
img.maxSize{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
img.sizeFittings{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

/* INDEXES */
.ddm_modal{
	z-index: 100;
}
/* Kopfbereich (header.css): Schaltflaeche 95, Vollbildmenue 90, Kopf 11 */
.zindex6,
.cont-block.zindex6{
	z-index: 6;
}
.zindex5,
.cont-block.zindex5{
	z-index: 5;
}
.zindex4,
.cont-block.zindex4{
	z-index: 4;
}
.zindex3,
.cont-block.zindex3{
	z-index: 3;
}
#content-wrapper,
.zindex2,
.cont-block.zindex2{
	z-index: 2;
}
.cont-block,
.zindex1,
.cont-block.zindex1{
	z-index: 1;
}
.zeroindex{
	z-index: 0;
}



/* transitions */
img.fullsize{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
a{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;	
}
.animated_children, .animated_children *{
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;	
}
.nonanimated_children, .nonanimated_children *{
	-webkit-transition: all 0ms linear;
	-moz-transition: all 0ms linear;
	-ms-transition: all 0ms linear;
	-o-transition: all 0ms linear;
	transition: all 0ms linear;	
}


/* CONTENT */
#content-wrapper{
	overflow: visible;
}


/* CONTENT SPECIFIC */
.block{
	display: block;
	position: relative;
}
.contentspacer{
	display: block;
	position: relative;
	width: 100%;
	height: 90px;
}
.overlay_mask{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.linespacer{
	display: block;
	position: relative;
	width: 100%;
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.linespacer.nomarg{
	margin: 0px;
}
.linespacer.narrow{
	width: 700px;
	max-width: 100%;
}

.section_bg{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 100%;
	height: auto;
}

#top_spacer{
	display: block;
	position: relative;
	height: 0px;
}

.flexwrap{
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
.flexwrap.leftalign{
	justify-content: left;
	gap: 2%;
}

.flexbox{
	position: relative;
}
.flexbox._s10{
	width: 10%;
}
.flexbox._s15{
	width: 15%;
}
.flexbox._s20{
	width: 20%;
}
.flexbox._s25{
	width: 25%;
}
.flexbox._s30{
	width: 30%;
}
.flexbox._s35{
	width: 35%;
}
.flexbox._s40{
	width: 40%;
}
.flexbox._s45{
	width: 45%;
}
.flexbox._s47{
	width: 47%;
}
.flexbox._s49{
	width: 49%;
}
.flexbox._half{
	width: 48%;
}
.flexbox._s50{
	width: 50%;
}
.flexbox._s55{
	width: 55%;
}
.flexbox._s60{
	width: 60%;
}
.flexbox._s65{
	width: 65%;
}
.flexbox._s70{
	width: 70%;
}
.flexbox._s75{
	width: 70%;
}
.flexbox._s80{
	width: 80%;
}
.flexbox._s90{
	width: 90%;
}
.flexbox._full{
	width: 100%;
}
.flexbox_half{
	width: 48%;
}
.flexbox_third{
	width: 31%;
}


/* SCHALTFLAECHEN
   Schriftrolle "Buttons": Open Sans Condensed SemiBold Italic. Die Datei
   enthaelt nur kursive Schnitte, Condensed steckt in der Laufweiten-Achse -
   daher font-stretch 75% statt eines eigenen Familiennamens. */
.contentbutton,
button,
input[type="submit"],
input[type="button"]{
	font-family: var(--font-button);
	font-weight: 600;
	font-stretch: 75%;
	font-style: italic;
}
.contentbutton{
	position: relative;
	display: inline-block;
	margin-left: 0px;
	z-index: 1;
	border: none;
	border-radius: 0px;
	padding: 0px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 16px;
	width: 100px;
	height: 45px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	overflow: hidden;
}
.contentbutton.abs{
	position: absolute;
}
.contentbutton a{
	position: absolute !important;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	font-family: inherit;
	font-weight: inherit;
	font-stretch: inherit;
	font-style: inherit;
}
.contentbutton a::after{
	display: none !important;
}
.contentbutton > a > span{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.contentbutton:hover a{
	text-decoration: none;
}
.contentbutton:hover{
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
}
.contentbutton.hoverblur::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.contentbutton.hoverblur:hover::before {
  opacity: 1;
}
.contentbutton.bordered{
	border: 1px solid;
}
.contentbutton span.contentbutton_arrow{
	display: inline-block;
	padding-left: 2px;
}
.contentbutton:hover span.contentbutton_arrow{
	padding-left: 6px;
}
.contentbutton .contentbutton_arrow_icon{
	display: inline-block;
	vertical-align: middle;
	height: 12px;
	padding-left: 3px;
}
.contentbutton:hover .contentbutton_arrow_icon{
	padding-left: 6px;
}



/* SPECIFICS */
/* UNTERSTRICH BEIM UEBERFAHREN
   Der Effekt ist die Voreinstellung fuer jeden Link im Inhalt und im Modal -
   das Markup muss ihn nicht mehr anfordern. .linehover_links bleibt als Klasse
   erhalten, damit auch Bereiche ausserhalb davon ihn bekommen koennen.
   Die Linie laeuft in currentColor und passt sich damit jeder Farbwelt an;
   eigene Regeln je Farbe entfallen. */
.cont-block a,
.ddm_modal_cont a,
.linehover_links a{
	position: relative;
	text-decoration: none;
}
.cont-block a::after,
.ddm_modal_cont a::after,
.linehover_links a::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 0;
	background-color: currentColor;
	transition: width 300ms ease;
}
.cont-block a:hover::after,
.ddm_modal_cont a:hover::after,
.linehover_links a:hover::after{
	width: 100%;
}

/* Ausnahmen: alles, was selbst schon eine Flaeche ist oder gar keinen Text
   traegt, vertraegt keine Textlinie. .nolinehover schaltet den Effekt fuer
   einen einzelnen Link oder einen ganzen Bereich ab. */
a.anchorlink::after,
a.linkoverlay::after,
.contentbutton a::after,
a.nolinehover::after,
.nolinehover a::after,
.cont-block a:has(img)::after,
.ddm_modal_cont a:has(img)::after,
.linehover_links a:has(img)::after{
	display: none !important;
}



.linkoverlay{
	position: absolute !important;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 4;
}


/* claro accessibility overrides */
.cm-link.cn-learn-more{
	color: black !important;
}
.cm-btn.cm-btn-danger.cn-decline{
	background-color: #767676 !important;
}
.cm-btn.cm-btn-success{
	background-color: #0a835f !important;
}
.cm-btn.cm-btn-success-var{
	background-color: #00875f !important;
}




/* DDM MODAL */
.ddm_modal{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	opacity: 0;
	overflow: hidden;
	backdrop-filter: blur(8px); 
	-webkit-backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, 0.35);
	/* geschlossen auch fuer Tastatur und Screenreader weg, nicht nur unsichtbar */
	visibility: hidden;
}
.ddm_modal.active{
	height: 100%;
	opacity: 1;
	visibility: visible;
}
.ddm_modal_contwrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	max-width: 95%;
	height: 800px;
	max-height: 90%;
	overflow: hidden;
}
.ddm_modal_close{
	position: absolute;
	top: 15px;
	right: 25px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	cursor: pointer;
}
.ddm_modal_close:hover{
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.45)) brightness(1.1);
}
.ddm_modal_close span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	pointer-events: none;
	font-weight: bold;
	margin-top: 1px;
}
.ddm_modal_cont{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 40px;
	overflow-x: hidden;
	overflow-y: scroll;
}


/* RECHTSTEXTE
   Impressum und Datenschutzerklaerung sind reine Textstrecken in der
   schmalen Spalte. Die Gliederung laeuft ueber h2 und h3; in der
   Regelgroesse waeren diese Headlines dort zu gross, deshalb hier ein
   eigener Massstab. Schriftart und Farbe bleiben unangetastet - die
   kommen aus den globalen Schriftrollen. */
.legal_text h2{
	font-size: 28px;
	line-height: 36px;
	margin-top: 50px;
	margin-bottom: 5px;
}
.legal_text h3{
	font-size: 21px;
	line-height: 29px;
	margin-top: 30px;
	margin-bottom: 5px;
}
.legal_text h2:first-child,
.legal_text h3:first-child{
	margin-top: 0px;
}
.legal_text ul,
.legal_text ol{
	margin-bottom: 15px;
}

/* AGENTURNACHWEIS
   Der Credit-Block am Fuss des Impressums. Er steht im Artikeltext, wo sich
   kein CSS hinterlegen laesst - deshalb eigene Klassen. Bildmarke links,
   Angaben rechts; unterhalb der Umbruchbreite rutschen sie untereinander. */
.ddm_credit{
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	column-gap: 30px;
	row-gap: 18px;
	margin-top: 25px;
}
.ddm_credit_logo{
	display: block;
	flex: 0 0 auto;
	width: 170px;
	max-width: 50%;
}
.ddm_credit_logo img{
	display: block;
	width: 100%;
	height: auto;
}
.ddm_credit_text{
	flex: 1 1 220px;
}
.ddm_credit_label{
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 2px;
}


/* ABSCHNITT ANKUENDIGUNGEN
   Hintergrund des Abschnitts: ein pinkes Band, das links tiefer beginnt als
   rechts und links hoeher endet, darunter die graue Flaeche, auf der die FAQ
   weiterlaufen, und der gelbe Kreis, halb vom Band verdeckt. Alles CSS, keine
   Grafik - die Karten kommen aus mod_ddm_ankuendigungen.

   Die Schraegen sind in cqw angegeben (Breite des Abschnitts, deshalb
   container-type), die Hoehe dazwischen waechst mit dem Inhalt. So bleiben
   die Winkel bei jeder Breite gleich, egal wie viel Text die Karten haben.
   Masse aus dem Layout (1920px): Band rechts 55px unter der Oberkante und
   35px ueber der Unterkante, Schraege oben 342px, unten 173px. */
.section_ankuendigungen{
	--ank-band-top: 2.86cqw;
	--ank-band-bot: 1.82cqw;
	--ank-wedge-top: 17.81cqw;
	--ank-wedge-bot: 9.01cqw;

	container-type: inline-size;
	overflow: hidden;
	background-color: var(--color-white);
}
.section_ankuendigungen .ank_deco{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.section_ankuendigungen .ank_deco > span{
	position: absolute;
	display: block;
}
/* Reicht genau bis an die linke untere Ecke des Bandes; weiter rechts liegt
   das Band darueber, sichtbar bleibt nur der Keil unter der Schraege. */
.section_ankuendigungen .ank_floor{
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: calc(var(--ank-band-bot) + var(--ank-wedge-bot) + 2px);
}
.section_ankuendigungen .ank_circle{
	left: 8.07cqw;
	bottom: 0.89cqw;
	width: 24.74cqw;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}
.section_ankuendigungen .ank_band{
	left: 0px;
	right: 0px;
	top: var(--ank-band-top);
	bottom: var(--ank-band-bot);
	-webkit-clip-path: polygon(100% 0%, 0% var(--ank-wedge-top), 0% calc(100% - var(--ank-wedge-bot)), 100% 100%);
	clip-path: polygon(100% 0%, 0% var(--ank-wedge-top), 0% calc(100% - var(--ank-wedge-bot)), 100% 100%);
}
/* Der Inhalt endet ueber der unteren Schraege; darunter bleibt Platz fuer
   den grauen Keil und den Kreis. */
.section_ankuendigungen .ank_content{
	z-index: 1;
	padding-bottom: calc(var(--ank-band-bot) + var(--ank-wedge-bot) + 12px);
}