.card-body {
    padding: 1rem;
}

.bg-gradient-orange {
    background: linear-gradient(180deg,#FFF4E5,rgba(255,255,255,0) 100%);
}

.social a i {
    color: #9499a3 !important;
}

.social a i:hover {
    color: #000 !important;
}

footer p {margin-bottom: 0}
@media (max-width: 767.98px) {
footer p {margin-bottom: 10px}
}



footer a[href^="http://"]:not([href*="heimaten.com"]):after,
footer a[href^="https://"]:not([href*="heimaten.com"]):after {
     content: "" 
url('')
}

.klaro p {font-size: 14px; line-height: 18px}

.swiper-slide {
	height: auto;
}
.swiper-slide .item-inner,
.swiper-slide .item-inner .card {
	height: 100%;
}

.footerlinks > a {font-size: 16px; line-height: 18px;}
a.footerlinks1 {font-size: 16px; line-height: 17px;}

a[href^=tel] {
    color: #008000;
    text-decoration: inherit;
}

a.navtel[href^=tel] {
    color: #fff;
    text-decoration: inherit;
}

#aufstellung .container {padding-top: 30px !important}
 
@media (min-width: 1200px)
#aufstellung .display-1 {
    font-size: 2.0rem;
}
#aufstellung .display-1 {
    font-size: calc(1.175rem + 1.1vw);
    line-height: 1.15;
}

.table>thead {
    vertical-align: bottom;
    background: #343f52;
    color: #fff;
}

.table> :not(caption)>*>* {
    padding: 0;
}

.table-condensed {
  font-size: 13px;
}

.form-label {
    margin-bottom: 0.1rem;
    color: #343f52;
}

.InputfieldForm .Inputfield {
    clear: both;
    margin: 0 0 0.2em 0;
}

.form-text {
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: #aab0bc;
}

.pw-no-select {
    color: #343f52;
	font-size: 0.7rem;
}

.pw-no-select > a{
    text-decoration: underline;
}

.form-check-input {
    margin-top: 0rem;
}

.Inputfield .form-check .form-check-input {
    margin-top: 8px;
}

.form-text {
    margin-top: 0;
	margin-bottom: 0;
}

div.InputfieldSubmit {
	padding-top: 15px !important;
}

div.form-border {

	padding: 15px;
	box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06), 0rem 0rem 1.25rem rgba(179, 217, 179.0);
    border: 0;
}

sub {font-size: 0.7rem;}

.no-padding-top {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

ol, ul {
    padding-left: 1.2rem;
}

p {
	line-height: 1.6rem;
}

table p {
  font-size: 1rem
}


.ratio-9x16 {
  --bs-aspect-ratio: 177.77%;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius: 8px;

}

.card-body-video {
	padding: 15px;
	box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06), 0rem 0rem 1.25rem rgba(30, 34, 40, 0.04);
    border: 0;
}

footer {
	line-height: 25px;	
}

.logoimg {height: 40px}
/* ---------------------------------------------------------------------------
 * Terminuebersicht der Startseite (Block `termine_uebersicht`)
 *
 * Die Grundschrift des Themes liegt bei 0.8rem, also 12,8px. Fuer die Zielgruppe
 * der Aufstellungsabende ist das zu klein, deshalb setzt dieser Block eigene,
 * groessere Werte - bewusst nur hier und nicht global, damit die uebrigen Seiten
 * unveraendert bleiben.
 * ------------------------------------------------------------------------ */

.termine_uebersicht .termine-claim {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.4;
}

.termine_uebersicht .termine-karte {
	border-radius: 0.4rem;
}

.termine_uebersicht .termine-karte-naechster {
	border-top: 6px solid #008000;
}

.termine_uebersicht .card-body {
	padding: 1.75rem;
}

.termine_uebersicht .termine-label {
	font-size: 1.1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.termine_uebersicht .termine-datum-gross {
	font-size: 2.9rem;
	font-weight: 800;
	line-height: 1.08;
	color: #343f52;
	margin: 0.5rem 0 0.4rem;
}

.termine_uebersicht .termine-uhrzeit {
	font-size: 1.4rem;
	font-weight: 700;
	color: #343f52;
	margin-bottom: 0.75rem;
}

.termine_uebersicht .termine-text,
.termine_uebersicht .termine-text p {
	font-size: 1.15rem;
	line-height: 1.6;
}

.termine_uebersicht .termine-btn-gross {
	font-size: 1.25rem;
	font-weight: 700;
	min-height: 62px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
}

.termine_uebersicht .termine-listen-titel {
	font-size: 1.5rem;
	font-weight: 800;
}

.termine_uebersicht .termine-fuss,
.termine_uebersicht .termine-fuss p {
	font-size: 1.05rem;
	color: #60697b;
}

.termine_uebersicht .termine-fuss {
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(164, 174, 198, 0.28);
}

/* Zweispaltig genau dann, wenn eine Zeile aus Datum und Button in voller Breite
   in die Spalte passt - sonst einspaltig. Der feste Breakpoint davor (576px, ab
   2026-09-12 kurz 768px) richtete sich nach der Viewport-Breite, nicht nach der
   Breite der Karte: auf dem Handy und in der schmalen lg-Spalte ueberlappten
   Datum und Button einander. `auto-fit` mit einer Mindestbreite entscheidet
   stattdessen am tatsaechlich vorhandenen Platz. */
.termine_uebersicht .termine-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	column-gap: 1.2rem;
}

.termine_uebersicht .termine-zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(164, 174, 198, 0.28);
}

.termine_uebersicht .termine-zeile-datum {
	font-size: 1.25rem;
	font-weight: 700;
	color: #343f52;
}

/* Uhrzeit neben dem Datum (2026-09-16): gleiche Zeile, leichter gesetzt, und
   Datum und Uhrzeit brechen nicht auseinander. */
.termine_uebersicht .termine-zeile-datum {
	white-space: nowrap;
}

.termine_uebersicht .termine-zeile-zeit {
	font-weight: 500;
	color: #60697b;
}

/* Der Button steht direkt hinter der Uhrzeit statt am rechten Rand der Spalte
   (2026-09-16, auf Ansage). Datum und Uhrzeit sind in jeder Zeile gleich lang,
   die Buttons stehen damit trotzdem buendig untereinander. */
.termine_uebersicht .termine-zeile {
	justify-content: flex-start;
}

.termine_uebersicht .termine-btn-klein {
	font-size: 1.05rem;
	font-weight: 700;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.9rem;
	white-space: nowrap;
}

/* Der gewaehlte Termin ueber dem Anmeldeformular. */
.termin-gewaehlt {
	font-size: 1.2rem;
	font-weight: 700;
	color: #343f52;
	background: #e1f6f0;
	border-radius: 0.4rem;
	padding: 0.85rem 1.1rem;
	margin-bottom: 1.1rem;
}

.termin-gewaehlt .termin-gewaehlt-label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: #60697b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.termine_uebersicht .termine-fuss a {
	font-weight: 700;
	text-decoration: underline;
}

/* Leistungen-Karten: Buttons stehen unten auf einer Linie.
   Die Karten sind ueber .swiper-slide .item-inner .card bereits gleich hoch;
   damit mt-auto am Button-Wrapper wirkt, muss der card-body eine Flex-Spalte sein. */
.leistungen .card-body {
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Mobil-Korrekturen (2026-09-12)
 *
 * Auf dem Handy lief der Inhalt an mehreren Stellen ueber die Kanten hinaus.
 * Die meisten Regeln hier gelten nur unterhalb eines Breakpoints; wo sie ohne
 * Media-Query stehen (Header, Datum, Zeilenumbruch), wirken sie auf allen
 * Breiten - dort war der Fehler auch auf dem Desktop vorhanden. Hintergrund in
 * `docs/historie.md` zum 2026-09-12.
 * ------------------------------------------------------------------------ */

/* Das Theme setzt jeden .btn auf `white-space: nowrap`. Auf schmalen Viewports
   passt ein langer Text damit nicht mehr in die Karte und laeuft ueber beide
   Kanten hinaus - sichtbar bei "Zu diesem Abend anmelden" und "Termine der
   monatlichen Aufstellung". Umbrechen ist hier besser als ueberlaufen. */
@media (max-width: 767.98px) {
	.btn {
		white-space: normal;
	}
}

/* Die Slider-Pfeile liegen halbtransparent ueber der Karte und verdecken dort
   die Ueberschrift. Auf dem Handy laesst sich der Slider wischen, und die
   Pagination-Punkte darunter bleiben - die Pfeile werden nicht gebraucht. */
@media (max-width: 767.98px) {
	.swiper-controls .swiper-navigation .swiper-button {
		display: none;
	}
}

/* Der eingeblendete Header ist zu 97 Prozent deckend, darunter scrollender
   Text bleibt sichtbar und laeuft optisch ins Logo. Deckend statt fast
   deckend - die Darstellung aendert sich sonst nicht. */
.navbar.navbar-clone.navbar-stick {
	background: #fff;
}

/* Terminuebersicht: auf dem Handy engeres Karten-Padding, damit die Zeile aus
   Datum und Button in einer Zeile Platz hat. */
@media (max-width: 575.98px) {
	.termine_uebersicht .card-body {
		padding: 1.15rem;
	}
}

/* Das grosse Datum skaliert mit der Viewport-Breite. Fest bei 2.9rem brach
   "September" bei 390 px Breite mitten im Wort um. */
.termine_uebersicht .termine-datum-gross {
	font-size: clamp(1.9rem, 8vw, 2.9rem);
}

/* Schrift des grossen Buttons auf dem Handy etwas kleiner - der Text darf
   umbrechen, die Beschriftung ist im Feld `beschriftungen_a` pflegbar und
   kann laenger ausfallen. */
@media (max-width: 575.98px) {
	.termine_uebersicht .termine-btn-gross {
		font-size: 1.1rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/* Sicherung fuer sehr schmale Spalten: reicht der Platz nicht, rutscht der
   Button unter das Datum, statt es zu ueberlappen. Die Kinder duerfen dabei
   nicht unter ihre Inhaltsbreite schrumpfen (kein `min-width: 0`) - sonst
   laeuft der Text aus seiner Box heraus, und genau so entstand die
   Ueberlappung. */
.termine_uebersicht .termine-zeile {
	flex-wrap: wrap;
	row-gap: 0.4rem;
}

/* Ab Tablet steht die Liste zweispaltig. Damit eine Zeile aus Datum und Button
   in die halbe Kartenbreite passt - auf dem Desktop sind das nur rund 260px -,
   faellt sie dort etwas kompakter aus. Auf dem Handy, wo die Liste einspaltig
   laeuft, bleiben die grossen Werte von oben stehen. */
@media (min-width: 768px) {
	.termine_uebersicht .termine-zeile {
		gap: 0.6rem;
	}

	.termine_uebersicht .termine-zeile-datum {
		font-size: 1.1rem;
	}

	.termine_uebersicht .termine-btn-klein {
		font-size: 0.95rem;
		padding: 0.5rem 0.7rem;
	}
}

/* Uhrzeit neben dem Datum (2026-09-16): in der zweispaltigen Liste ist eine
   Spalte bei 1200-1399px Viewport nur rund 270px breit. Damit Datum, Uhrzeit
   und der Info-Button in eine Zeile passen, faellt die Zeile ab Tablet etwas
   kleiner aus und der Spaltenabstand der Liste schmaler. Reicht der Platz
   trotzdem nicht, rutscht der Button unter das Datum (flex-wrap oben). Auf dem
   Handy bleiben die grossen Werte, dort steht der Button bewusst darunter. */
@media (min-width: 768px) {
	.termine_uebersicht .termine-zeile-datum {
		font-size: 0.95rem;
	}

	.termine_uebersicht .termine-zeile-zeit {
		font-size: 0.85rem;
	}

	.termine_uebersicht .termine-zeile {
		gap: 0.8rem;
	}

	.termine_uebersicht .termine-liste {
		column-gap: 0.6rem;
	}

	.termine_uebersicht .termine-btn-klein {
		padding: 0.5rem 0.8rem;
	}
}

/* Einstieg "Sie waren noch nie dabei?" als dritte Karte der Terminuebersicht
   (2026-09-16, Designvorschlag B). Welche Seite das betrifft, entscheidet
   bannerNebenTerminen() in _func.php.
     unter 992px   eine Spalte: naechster Abend, Termine, Einstieg (Bild oben)
     992-1399px    naechster Abend | Termine, darunter der Einstieg quer
                   ueber beide Spalten (Bild links, Text rechts)
     ab 1400px     drei Karten in einer Reihe
   Die Terminliste braucht rund 610px fuer zwei Spalten, die Karte des
   naechsten Abends rund 340px - daher die Mindestbreiten ab 1400px
   (Inhaltsbreite dort 1290px). */
.termine-mit-banner .termine-reihe {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
}

.termine-mit-banner .termine-reihe > * {
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}

.termine_uebersicht .termine-einstieg-karte {
	overflow: hidden;
}

.termine_uebersicht .termine-einstieg-bild img {
	display: block;
	width: 100%;
	height: auto;
}

.termine_uebersicht .termine-einstieg-titel {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.6rem;
}

.termine_uebersicht .termine-einstieg-text {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	color: #60697b;
}

@media (min-width: 992px) {
	.termine-mit-banner .termine-reihe {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 2rem;
	}

	.termine-mit-banner .termine-einstieg {
		grid-column: 1 / -1;
	}

	.termine_uebersicht .termine-einstieg-karte {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
	}
}

@media (min-width: 1400px) {
	.termine-mit-banner .termine-reihe {
		grid-template-columns: minmax(340px, 4fr) minmax(610px, 5.4fr) minmax(0, 3.2fr);
		gap: 1.2rem;
	}

	.termine-mit-banner .termine-einstieg {
		grid-column: auto;
	}

	/* Bild und Text als Gruppe vertikal mittig - die Karte ist so hoch wie die
	   Terminliste daneben. */
	.termine_uebersicht .termine-einstieg-karte {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
	}

	.termine_uebersicht .termine-einstieg-karte > .card-body {
		flex: 0 0 auto;
	}

	.termine-mit-banner .card-body {
		padding: 1.4rem;
	}

	.termine-mit-banner .termine-datum-gross {
		font-size: 2.3rem;
	}

	.termine-mit-banner .termine-btn-gross {
		font-size: 1.1rem;
		white-space: normal;
	}

	.termine_uebersicht .termine-einstieg-titel {
		font-size: 1.2rem;
	}

	.termine_uebersicht .termine-einstieg-text {
		font-size: 1.05rem;
	}
}