/* ---------------------------------------------------------------------------
 * skk-anpassungen.css — die handgepflegten Anpassungen der alten Seite.
 *
 * Herkunft: Stylesheet-Editor von Contao 4.9 (tl_style_sheet / tl_style).
 * Contao 5 hat diesen Editor nicht mehr; die Regeln lagen seit dem Umzug nur
 * noch als Datensaetze in der Datenbank und wurden nicht mehr ausgeliefert.
 * Hier in der Reihenfolge zusammengefuehrt, in der die Layouts sie geladen
 * haben: desktop-anpassungen, mobil-1024px, mobil-950px, mobil-767px, mobil-500px.
 *
 * mobil-375px ist bewusst NICHT dabei — kein Layout hat es eingebunden.
 * Export der Einzeldateien: referenz/interne-stylesheets/
 *
 * Aenderungen gehoeren ab jetzt hierher, nicht mehr ins Backend.
 * --------------------------------------------------------------------------- */


/* Internes Stylesheet "desktop-anpassungen" aus tl_style_sheet (Contao 4.9).
   Contao 5 hat den Stylesheet-Editor nicht mehr — diese Regeln liegen nur noch
   als Datensaetze in der Datenbank und werden NICHT mehr ausgeliefert.
   Medium: all */

/* Contao Marketing Suite :: Farbe Button */
:root cms-accept-tags {
	--btn-accept-text-color: #FFF;
	    --btn-accept-bg-color: #bc1313;
}

#main p,
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main  h6,
#footer p,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
	hyphens: auto !important;
}

.mod_cms_accept_tags {
	z-index: 10000 !important;
	background: rgba(255, 255, 255, 0.7) !important;
}

.startseite .ce_optin_fallback {
	background: #fff;
	padding: 1rem 1.5rem;
}

.startseite .ce_optin_fallback p strong {
	font-size: 35px;
	text-transform: uppercase !important;
	letter-spacing: 0.25rem !important;
	font-family: "Archivo Narrow" !important;
	font-weight: 400 !important;
	color: #bc1313;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ce_revolutionslider_text.bold, .font_headline {
	font-family: "Archivo Narrow", sans-serif !important;
	font-weight: 400 !important;
}

html, body {
	font-family: Roboto, sans-serif !important;
	font-weight: 400;
}

.impressum #main .ce_text a {
	/* leer / nur Struktur-Felder */
}

.ce_text.infotippbutton a {
	display: block;
}

.datenschutzhinweise h3 {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.datenschutzhinweise .ce_iconbox h3.headline {
	color: #bc1313 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.25rem !important;
}

input, textarea {
	font-family: Roboto !important;
	font-weight: 400 !important;
	color: #4a4d4b !important;
	font-size: 17px !important;
}

input.submit,
button.submit {
	font-family: Roboto !important;
	font-weight: 400 !important;
	color: #fff !important;
	font-size: 17px !important;
	border-radius: 0 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.25rem !important;
}

.ce_timeline.timeline_left .timeline-item .timeline-item-title::before {
	left: 0;
	right: auto;
	width: 5.25%;
}

.ce_timeline.timeline_left i.last-point {
	left: 2.45%;
}

.ce_timeline.timeline_left::before {
	left: 3%;
}

.ce_timeline.timeline_left .timeline-item {
	float: right;
	text-align: left;
	padding-left: 5%;
	padding-right: 0;
	width: 50%;
	position: relative;
	padding-right: 0;
	margin-bottom: 30px;
	width: 97%;
}

.ce_timeline.timeline_left .timeline-item i {
	right: auto;
	left: -21px;
}

.ce_table.portraittabelle td.col_0 {
	min-width: 22% !important;
}

.ce_table table {
	white-space: normal !important;
}

.ce_table table td,
.ce_table table th {
	vertical-align: top !important;
}

.ce_table .table-striped td, .ce_table.table-striped td {
	border-bottom: 1px solid #ccc !important;
}

.ce_benefitbox li:nth-child(2n+1) {
	background: #eeeeee !important;
}

.label-alert,
.ce_calltoaction .ce_hyperlink a.hyperlink_txt {
	background: #bc1313 !important;
	border-radius: 0 !important;
	border-color:  #bc1313 !important;
}

#main .ce_iconbox a i {
	color: #4a4d4b !important;
}

.mod_privacy_optin .cookie_help_link {
	display: none !important;
}

.logoschrift {
	font-family: "Archivo Narrow" !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ce_revolutionslider a.hyperlink_txt.ce_revolutionslider_hyperlink.button-white-outline {
	border: 2px solid #fff !important;
	background: none !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
}

.ce_revolutionslider a.hyperlink_txt.ce_revolutionslider_hyperlink.button-white-outline:hover {
	border: 2px solid #eee !important;
	color: #eee !important;
}

.ce_iconbox.leistungenbox h3 {
	font-size: 1.25rem !important;
}

.ce_iconbox h3 {
	font-size: 1.5rem !important;
}

.ce_iconbox .ce_iconbox_outside.padding .content {
	opacity: 1 !important;
}

.ce_iconbox:hover .ce_iconbox_outside.padding {
	box-shadow: none !important;
}

.newsteaser_v2 .content_right {
	padding: 1.75rem 1.25rem 1.25rem;
	background: #eee;
	width: 100% !important;
	margin-bottom: 1.5rem;
}

.mod_newslist .newsteaser_v2 h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.mod_newslist .item-link.color-accent a:hover,
.ce_iconbox .link:hover {
	color: #4a4d4b !important;
}

.mod_newslist .newsteaser_v2 h3 a:hover,
.ce_iconbox h3:hover {
	color: #bc1313 !important;
}

.newsteaser_v2 .content_right .teaser p {
	display: inline;
}

.mod_newslist .item-link.color-accent a,
.ce_iconbox .link {
	text-transform: lowercase !important;
	display: inline-block;
	margin-top: 0.5rem;
	color: #bc1313 !important;
}

.newsreader h1 {
	font-size: 2.5rem !important;
}

.newsreader .back a {
	text-transform: uppercase !important;
	letter-spacing: 0.25rem !important;
	margin-bottom: 0 !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	background: #bc1313;
	padding: 12px 20px;
	color: #fff !important;
	display: inline-block;
	margin-top: 1rem;
}

.newslist-timeline::before {
	left: 0 !important;
	border-radius: 0 !important;
}

.newslist-timeline .newslist-timeline-contentwrapper {
	padding-left: 3.5rem !important;
}

.newslist-timeline {
	background-position: -36px top !important;
}

.newslist-timeline .image_container {
	width: 0 !important;
}

.newslist-timeline .newslist-timeline-content {
	width: 100% !important;
	padding-left: 0 !important;
}

.mod_newslist .newslist-timeline .newslist-timeline-content h3 {
	margin-bottom: 0 !important;
	font-size: 1.4rem !important;
}

.newslist-timeline .info {
	display: none !important;
}

.mod_newslist .newslist-timeline .newslist-timeline-content .teaser-v2 p {
	display: inline;
}

.pagination {
	border-top: 1px solid #ddd;
	margin-top: 2rem;
	padding-top: 1rem;
}

.pagination li span.current {
	border-radius: 0 !important;
}

.pagination p {
	display: none !important;
}

.header .mainmenu ul li a {
	letter-spacing: 0.15rem !important;
}

.header .mainmenu ul li ul li a {
	letter-spacing: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase !important;
	letter-spacing: 0.25rem !important;
}

.font_headline {
	color: #4a4d4b !important;
}

.color-second h1,
.color-second h2,
.color-second h3,
.color-second h4,
.color-second h5,
.color-second h6,
.color-second {
	color: #bc1313  !important;
}

.ce_revolutionslider_hyperlink.text-link {
	font-size: 1rem !important;
	font-weight: 400 !important;
}

.ce_hyperlink a, a.btn {
	text-transform: uppercase !important;
	letter-spacing: 0.25rem !important;
	margin-bottom: 0 !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
}

#footer .ce_hyperlink a, 
#footer a.btn {
	text-transform: uppercase !important;
	letter-spacing: 0.15rem !important;
	margin-bottom: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
}

.bl-white {
	border-left: 1px solid #fff !important;
}

.newsteaser_v2 .content_left {
	display: none !important;
}

#bottom .left span.uppercase {
	font-family: "Archivo Narrow" !important;
	margin-left: 0.25rem !important;
}




/* Internes Stylesheet "mobil-1024px" aus tl_style_sheet (Contao 4.9).
   Contao 5 hat den Stylesheet-Editor nicht mehr — diese Regeln liegen nur noch
   als Datensaetze in der Datenbank und werden NICHT mehr ausgeliefert.
   Medium: screen and (max-width : 1024px) */

@media screen and (max-width : 1024px) {

.autogrid_row.footerbuttons .ce_hyperlink.ce_hyperlink-extended.bl-white,
.autogrid_row.footerbuttons .ce_hyperlink.ce_hyperlink-extended {
	border: 1px solid #fff !important;
}

#footer .one_fourth {
	flex: 0 0 calc(100% / 2);
	min-height: 370px;
}

.ce_hyperlink-extended a {
	min-width: auto !important;
	width: 100% !important;
	font-size: 0.875rem !important;
}

.ce_text_extented.mobile-fullwidth {
	max-width: 90% !important;
}

}



/* Internes Stylesheet "mobil-950px" aus tl_style_sheet (Contao 4.9).
   Contao 5 hat den Stylesheet-Editor nicht mehr — diese Regeln liegen nur noch
   als Datensaetze in der Datenbank und werden NICHT mehr ausgeliefert.
   Medium: screen and (max-width : 950px) */

@media screen and (max-width : 950px) {

.ce_timeline.timeline_left i.last-point,
.ce_timeline.timeline_left::before,
.ce_timeline .timeline-item i.timeline-icon,
.ce_timeline .timeline-item.timeline-w-icon .timeline-item-title::before {
	display: none !important;
}

.ce_timeline.timeline_left .timeline-item {
	float: left;
	width: 100%;
}

.ce_timeline .timeline-item:nth-of-type(2n),
.ce_timeline.timeline_left .timeline-item {
	padding-left: 0 !important;
}

}



/* Internes Stylesheet "mobil-767px" aus tl_style_sheet (Contao 4.9).
   Contao 5 hat den Stylesheet-Editor nicht mehr — diese Regeln liegen nur noch
   als Datensaetze in der Datenbank und werden NICHT mehr ausgeliefert.
   Medium: screen and (max-width : 767px) */

@media screen and (max-width : 767px) {

.newsreader h1 {
	font-size: 22px !important;
}

.newslist-timeline {
	padding-bottom: 1rem !important;
	margin-bottom: 1rem !important;
	border-bottom: 1px solid #ddd;
}

.pagination {
	border: none !important;
}

.newslist-timeline .newslist-timeline-contentwrapper {
	padding-left: 0 !important;
}

#footer .one_fourth {
	flex: 0 0 calc(100% / 1);
	min-height: auto;
}

#footer .totop::before {
	display: block !important;
}

.ce_text_extented.mobile-fullwidth {
	max-width: 100% !important;
}

#top_link {
	display: block !important;
}

body.fixed-header #top_link {
	bottom: 1rem !important;
}

}



/* Internes Stylesheet "mobil-500px" aus tl_style_sheet (Contao 4.9).
   Contao 5 hat den Stylesheet-Editor nicht mehr — diese Regeln liegen nur noch
   als Datensaetze in der Datenbank und werden NICHT mehr ausgeliefert.
   Medium: screen and (max-width : 500px) */

@media screen and (max-width : 500px) {

h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0.15rem !important;
}

h3, .h3, .h3 p, h3.headline,
h2, .h2, .h2 p, h2.headline,
h1, .h1, .h1 p, h1.headline {
	font-size: 22px !important;
}

.ce_iconbox.version2 .ce_iconbox_icon {
	display: none !important;
}

#bottom .left span.uppercase {
	margin-left: 0 !important;
	display: block !important;
}

}




/* ---------------------------------------------------------------------------
 * Boxen gleichen sich in der Höhe an.
 *
 * Bewusste Abweichung vom Original: Die alte Seite lässt die Kacheln einer
 * Reihe unterschiedlich hoch, bei ungleich langen Texten franst die Reihe
 * unten aus. Das Raster der Erweiterung (grid.css) kennt zwar eine Option
 * dafür (.same_height), sie galt aber nur für einzelne Reihen.
 *
 * Hier gilt es für alle. Aufgesetzt auf grid.css, nicht dagegen:
 * .autogrid_grid ist dort ein CSS-Grid, .autogrid_row und .autogrid_wrapper
 * sind Flex-Container — beides bleibt unangetastet, ergänzt wird nur die
 * Spalte und die Kachel darin.
 *
 * Begründung und Prüfkriterium: referenz/NACHBAU-REGELN.md
 * --------------------------------------------------------------------------- */

/* Alle Regeln hier sind bewusst auf #main begrenzt.
 *
 * Ohne diese Grenze griffen sie auch im Footer — dessen Kontaktzeilen sind
 * ebenfalls Kacheln (ce_iconbox in der Variante version3 xsmall). Dort hat
 * `flex-direction: column` das Telefonsymbol über die Nummer gesetzt statt
 * daneben, und `flex: 1 1 auto` die Textblöcke auf die volle Spaltenhöhe
 * gedehnt. Gemeint waren immer die Kacheln im Inhalt, nicht jede Kachel. */

#main .autogrid_grid > .column,
#main .autogrid_row > .column,
#main .autogrid_wrapper > .autogrid {
	display: flex;
	flex-direction: column;
}

/* Die Kachel füllt die Spaltenhöhe.
 *
 * Ausgenommen: ce_iconbox.version3 — das sind keine Kacheln, sondern
 * Kontaktzeilen (Symbol links, Text rechts), im Footer wie im Inhalt der
 * Kontaktseite. Das Original legt sie mit `display: flex` in eine Zeile
 * (cto_layout/css/customelements.css). Die Spaltenregeln unten drehten das
 * auf `column`: Das Symbol stand über der Nummer, die Nummer rückte ein. */
#main .autogrid_grid > .column > [class*="ce_"]:not(.version3),
#main .autogrid_row > .column > [class*="ce_"]:not(.version3),
#main .autogrid_wrapper > .autogrid > [class*="ce_"]:not(.version3) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Und deren innere Hüllen, damit die Farbfläche bis unten durchläuft —
 * nur bei Kacheln, die selbst in einer Spalte stehen. */
#main .column > .ce_iconbox:not(.version3) > .ce_iconbox_outside,
#main .autogrid > .ce_iconbox:not(.version3) > .ce_iconbox_outside,
#main .column > .ce_iconbox:not(.version3) > .ce_iconbox_outside > .ce_iconbox_inside,
#main .autogrid > .ce_iconbox:not(.version3) > .ce_iconbox_outside > .ce_iconbox_inside {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Abschließende Elemente (Button, Link) unten bündig. */
#main .column .ce_iconbox_cwrapper > .link,
#main .column .ce_iconbox_cwrapper > .ce_hyperlink-extended,
#main .autogrid .ce_iconbox_cwrapper > .link,
#main .autogrid .ce_iconbox_cwrapper > .ce_hyperlink-extended {
	margin-top: auto;
}

/* Nachrichten-Teaser: Der graue Kasten liegt auf .content_right, nicht auf der
 * Kachel selbst. Die Kachel dehnt sich als Flex-Element zwar auf die Zeilenhöhe,
 * der Kasten darin blieb aber so hoch wie sein Text — beim Schmalerziehen des
 * Fensters standen die Kästen dadurch unterschiedlich hoch. */
#main .autogrid_wrapper > .newsteaser_v2 > .content_right {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* „weiterlesen" unten bündig. */
#main .newsteaser_v2 .item-link {
	margin-top: auto;
}


/* ---------------------------------------------------------------------------
 * Kopfbereich der Startseite (ehemals Revolution Slider).
 *
 * Nachgebaut statt wiederbelebt. Die Masse sind nicht geschaetzt, sondern aus
 * den Koordinaten des Originals hergeleitet — Leinwand 1240 x 650:
 *
 *   rote Flaeche   1100 breit, x -60, y  80   (SVG-Seitenverhaeltnis 661.86:347
 *                                              -> 576.6 hoch)
 *   Wasserzeichen   260 breit, x -60, y  90
 *   Foto            900 breit, rechts +100, y 0   (900:530 -> 530 hoch)
 *   Textzeilen      40 px, x 40, y 239 / 299 / 359
 *   Button          19 px, x 40, y 450
 *
 * Unterhalb der Leinwandbreite wird die GESAMTE Komposition skaliert, nicht nur
 * die Leinwand: von der linken Kante der roten Flaeche (x -60) bis zur rechten
 * Fotokante (x 1340) sind es 1400. Genau so verhaelt sich die alte Seite — dort
 * verkleinern sich Flaeche, Foto und Text einfach mit, bis bei 767px die
 * gestapelte Fassung greift.
 *
 * Die Prozente beziehen sich deshalb auf 1400, die Schriftgroessen auf
 * Container-Einheiten: 40px von 1400 sind 2.857cqw.
 *
 * Markup: templates/rsce_vm_hero_eclipse.html5 (bis 24.09.2026: ContentHero)
 * --------------------------------------------------------------------------- */

/* overflow:hidden ist nicht kosmetisch, sondern Teil der Geometrie: Die
 * Slider-CSS des Originals schneidet die Leinwand ab (settings.css, Zeile
 * 1190). Die rote Flaeche ragt bei x -60 nach links heraus und wird dort
 * gekappt — sichtbar beginnt sie an der Containerkante. Ohne das Abschneiden
 * steht sie 60 px zu weit links. */
.skk-hero {
	position: relative;
	aspect-ratio: 1400 / 650;
	container-type: inline-size;
	overflow: hidden;
}

/* Rote Flaeche: x -60 von 1240, 1100 breit, y 80 von 650, 576.6 hoch. */
.skk-hero__flaeche {
	position: absolute;
	left: 0;
	top: 12.31%;
	width: 78.57%;
	height: 88.77%;
	background-color: #bc1313;
	background-image: url(/files/skk-bielefeld/home-slider/background_stats_neu.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 23.64% auto;
}

/* Foto: buendig an der rechten Kante der Komposition, 900 von 1400. */
.skk-hero__bild {
	position: absolute;
	right: 0;
	top: 0;
	width: 64.29%;
	margin: 0;
}

.skk-hero__bild img {
	display: block;
	width: 100%;
	height: auto;
}

/* Text: x 40 von 1240, erste Zeile y 239 von 650. */
/* Kein rechter Anschlag: Die Zeilen brechen im Original nicht um
 * (.tp-caption { white-space: nowrap }). */
.skk-hero__inhalt {
	position: absolute;
	left: 7.14%;
	top: 36.77%;
}

/* Schriftart, -staerke und Farbe kommen aus den Regeln der alten Seite
 * (.ce_revolutionslider_text.bold, .invertcolor) — hier nur die Groesse, damit
 * sie wie im Original mitskaliert: 40 px von 1240 sind 3.23cqw. */
.skk-hero__zeile {
	font-size: 2.857cqw;
	line-height: 1.5;
	white-space: nowrap;
}

/* Groesse, Polsterung und Farbe kommen aus dem Theme selbst:
 *   .ce_revolutionslider_hyperlink { padding: 0 35px; line-height: 50px; }  (framework.css)
 * und der Rahmen aus der geretteten Regel
 *   .ce_revolutionslider a.hyperlink_txt.…button-white-outline { border: 2px solid #fff; }
 *
 * Hier steht deshalb nur noch die Lage. Eine eigene padding-Zeile hatte die
 * Theme-Vorgabe ueberschrieben und den Button zu gross gemacht — sie wird
 * spaeter geladen und gewinnt bei gleicher Spezifitaet. */
.skk-hero__button {
	display: inline-block;
	margin-top: 2.21cqw;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Ab Leinwandbreite: feste Pixelmasse statt Prozente.
 *
 * Der Artikel ist `fullwidth` — sein Container hat weder Maximalbreite noch
 * seitliche Polsterung (die Theme-Regeln tragen alle ein :not(.fullwidth)).
 * Der Kopfbereich darf also ueber die Inhaltsbreite hinausgehen.
 *
 * Die Werte hat Bianka am 23.09.2026 im Firefox-Inspektor abgenommen, bis es
 * sass. Sie lassen sich auf die Leinwand zurueckrechnen (1240 breit, mittig;
 * ihre linke Kante liegt bei 50% - 620px) — und zwei davon treffen die
 * gespeicherten Koordinaten des Originals genau:
 *
 *   rote Flaeche links  272,5px bei 1905er Fenster  ->  Leinwand x  -60  (gespeichert: -60)
 *   rote Flaeche rechts 1375px                      ->  Leinwand x 1040  (gespeichert: -60 + 1100)
 *   Foto rechts         50% - 720px                 ->  100px AUSSERHALB der rechten Leinwandkante
 *
 * Der Versatz von 100 war also nach aussen gemeint, nicht nach innen — daher
 * die Abweichung meiner Herleitung. Hier stehen die Masse leinwandbezogen,
 * damit sie in jeder Fensterbreite sitzen; Biankas Zahlen waren an ihrer
 * Fensterbreite abgenommen und wuerden sonst wandern.
 *
 *   620px = halbe Leinwand, 680px = 620 + 60, 580px = 620 - 40
 * --------------------------------------------------------------------------- */

@media only screen and (min-width: 1240px) {
	.mod_article.fullwidth .skk-hero {
		max-width: none;
		aspect-ratio: auto;
		height: 650px;
	}

	/* Rote Flaeche: Leinwand x -60 bis 1040, y 80, 1100 x 577. */
	.mod_article.fullwidth .skk-hero__flaeche {
		left: calc(50% - 680px);
		width: 1100px;
		top: 80px;
		height: 577px;
		/* SKK-Wasserzeichen: 260 breit, ebenfalls auf Leinwand x -60 — also
		 * buendig mit der Flaeche selbst. */
		background-size: 260px auto;
		background-position: 0 0;
	}

	/* Foto: 900 breit, 100 ueber die rechte Leinwandkante hinaus. */
	.mod_article.fullwidth .skk-hero__bild {
		right: calc(50% - 720px);
		width: 900px;
		top: 0;
	}

	/* Text: Leinwand x 40, erste Zeile y 239. */
	.mod_article.fullwidth .skk-hero__inhalt {
		left: calc(50% - 580px);
		top: 239px;
	}

	.mod_article.fullwidth .skk-hero__zeile {
		font-size: 40px;
	}

	.mod_article.fullwidth .skk-hero__button {
		margin-top: 31px;
	}
}

/* Schmale Fenster: Die Ueberlagerung traegt nicht mehr — Foto oben, roter
 * Block darunter, beides im Fluss. */
@media only screen and (max-width: 767px) {
	.skk-hero {
		aspect-ratio: auto;
		container-type: normal;
		overflow: visible;
	}

	.skk-hero__zeile {
		white-space: normal;
	}

	.skk-hero__flaeche {
		display: none;
	}

	.skk-hero__bild {
		position: static;
		width: 100%;
	}

	.skk-hero__inhalt {
		position: static;
		background-color: #bc1313;
		padding: 1.75rem 1.5rem;
	}

	/* Wie im Original: Die drei Zeilen stehen hier nebeneinander in einer
	 * Ueberschrift ("Ihre Steuerberater in Bielefeld"), nicht gestapelt. */
	.skk-hero__zeile {
		display: inline;
		font-size: 1.35rem;
		white-space: normal;
	}

	.skk-hero__zeile + .skk-hero__zeile::before {
		content: " ";
	}

	/* Der Button entfaellt auf schmalen Fenstern — so haelt es die alte Seite. */
	.skk-hero__button {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
 * Ersatz für die Klassen first / last / odd / col_first, die Contao 5 nicht
 * mehr vergibt.
 *
 * Die Theme-CSS hängt daran 23 Regeln — sichtbar vor allem im Hauptmenü
 * (erster Eintrag ohne linken Abstand), in der Brotkrumennavigation und bei
 * den Zebrastreifen in Tabellen. Hier stehen dieselben Regeln noch einmal mit
 * den strukturellen Entsprechungen (:first-child, :nth-child(odd) …).
 * Vorgehen nach Team-Wissen [145].
 * --------------------------------------------------------------------------- */

/* Hauptmenü: die first/last-Klassen kommen jetzt aus NavigationClasses.
 *
 * Hier stand ein Notbehelf mit :first-child. Der war falsch: das Theme
 * schachtelt die Menüpunkte in Hüllen
 *
 *   li.floatbox > ol.inner > li.mlist   HOME
 *                            li.mlist   Kanzlei
 *
 * und die Hülle ist ebenfalls ein erstes Kind — sie soll ihre 15px aber
 * behalten. Der Notbehelf hat sie ihr genommen und das Menü schmaler gemacht.
 * Jetzt vergibt src/EclipseCompat/NavigationClasses.php die Klassen `first`
 * und `last` wieder je Menüebene, so wie Contao 4.9 es tat; die Regeln dafür
 * stehen im Theme (styles.css) und brauchen hier nichts.
 */

.submenu_v2 li a:first-child {
	border-left: 1px solid rgb(229, 229, 229);
}

/* Brotkrumen: vor dem ersten Eintrag kein Trennzeichen */
.mod_breadcrumb li:first-child:before {
	display: none;
}

/* Tabellen: Zebrastreifen. row_0 war „odd", das trifft :nth-child(odd). */
.ce_table.table-striped tbody tr:nth-child(odd) td,
.ce_table.table-striped-dark tbody tr:nth-child(odd) td {
	background-color: rgba(0, 0, 0, 0.03);
}

/* Galerie mit Rahmen: rechte und untere Kante der letzten Spalte/Zeile */
.ce_gallery .borders li:last-child {
	border-right-width: 1px;
}

/* Tabellen: Contao 5 vergibt weder col_first/col_last noch col_0/col_1.
 * Die Theme-Regel für die erste Spalte in .table-clean hier strukturell. */
.ce_table.table-clean th:first-child {
	padding-left: 0;
}

.ce_table.table-clean td:first-child {
	padding-left: 0;
}


/* ---------------------------------------------------------------------------
 * Nachrichten-Kacheln: ab 1024px zwei statt drei Spalten.
 *
 * Die Kacheln tragen `one_third` (grid.css: flex 0 0 33,33 %). Der
 * Tablet-Bereich des Rasters deckt nur die `col_*_t`-Klassen ab, deshalb
 * blieben sie bis hinunter zu 767px dreispaltig.
 *
 * Fensterbereich bewusst wie im Raster: ab 768px greift diese Regel, darunter
 * setzt grid.css ohnehin alles auf volle Breite — eine Spalte.
 * --------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.autogrid_wrapper > .newsteaser_v2 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}


/* ---------------------------------------------------------------------------
 * Raster-Vorgaben für Tablet und Mobil.
 *
 * presets.css der AutoGrid-Erweiterung bringt 25 Desktop-Vorgaben mit (.d_*),
 * aber nur je zwei für Tablet und Mobil: t_100, t_50_50, m_100, m_50_50. Die
 * übrigen standen zwar im Backend zur Auswahl und liegen bis heute in der
 * Datenbank — gewirkt haben sie nie. Zwischen 1024px und 768px blieb es bei
 * der Desktop-Aufteilung; auf der alten Seite ebenso.
 *
 * Hier sind sie aus denselben Definitionen erzeugt, aus denen presets.css die
 * Desktop-Vorgaben baut — 23 für Tablet, 23 für Mobil. Damit wirkt, was im
 * Backend eingestellt ist.
 *
 * Eingegrenzt auf .autogrid_grid: `t_` und `m_` sind sehr kurze Klassennamen,
 * und nichts anderes im Theme soll sie versehentlich treffen.
 *
 * Erzeugen: aus presets.css alle `.d_*`-Zeilen lesen und je Haltepunkt
 * wiederholen. t_55_45 fehlt hier mit Absicht — der Kontakt-Banner weiter
 * unten braucht dafür einen eigenen, früheren Haltepunkt.
 * --------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.autogrid_grid.t_25_25_25_25 { grid-template-columns: 25% 25% 25% 25%; }
	.autogrid_grid.t_33_33_33 { grid-template-columns: 33.3333% 33.3333% 33.3333%; }
	.autogrid_grid.t_50_25_25 { grid-template-columns: 50% 25% 25%; }
	.autogrid_grid.t_25_50_25 { grid-template-columns: 25% 50% 25%; }
	.autogrid_grid.t_25_25_50 { grid-template-columns: 25% 25% 50%; }
	.autogrid_grid.t_40_30_30 { grid-template-columns: 40% 30% 30%; }
	.autogrid_grid.t_30_40_30 { grid-template-columns: 30% 40% 30%; }
	.autogrid_grid.t_30_30_40 { grid-template-columns: 30% 30% 40%; }
	.autogrid_grid.t_20_40_40 { grid-template-columns: 20% 40% 40%; }
	.autogrid_grid.t_40_20_40 { grid-template-columns: 40% 20% 40%; }
	.autogrid_grid.t_40_40_20 { grid-template-columns: 40% 40% 20%; }
	.autogrid_grid.t_85_15 { grid-template-columns: 85% 15%; }
	.autogrid_grid.t_15_85 { grid-template-columns: 15% 85%; }
	.autogrid_grid.t_80_20 { grid-template-columns: 80% 20%; }
	.autogrid_grid.t_20_80 { grid-template-columns: 20% 80%; }
	.autogrid_grid.t_75_25 { grid-template-columns: 75% 25%; }
	.autogrid_grid.t_25_75 { grid-template-columns: 25% 75%; }
	.autogrid_grid.t_70_30 { grid-template-columns: 70% 30%; }
	.autogrid_grid.t_30_70 { grid-template-columns: 30% 70%; }
	.autogrid_grid.t_66_33 { grid-template-columns: 66.6667% 33.3333%; }
	.autogrid_grid.t_33_66 { grid-template-columns: 33.3333% 66.6667%; }
	.autogrid_grid.t_60_40 { grid-template-columns: 60% 40%; }
	.autogrid_grid.t_40_60 { grid-template-columns: 40% 60%; }
}

@media only screen and (max-width: 767px) {
	.autogrid_grid.m_25_25_25_25 { grid-template-columns: 25% 25% 25% 25%; }
	.autogrid_grid.m_33_33_33 { grid-template-columns: 33.3333% 33.3333% 33.3333%; }
	.autogrid_grid.m_50_25_25 { grid-template-columns: 50% 25% 25%; }
	.autogrid_grid.m_25_50_25 { grid-template-columns: 25% 50% 25%; }
	.autogrid_grid.m_25_25_50 { grid-template-columns: 25% 25% 50%; }
	.autogrid_grid.m_40_30_30 { grid-template-columns: 40% 30% 30%; }
	.autogrid_grid.m_30_40_30 { grid-template-columns: 30% 40% 30%; }
	.autogrid_grid.m_30_30_40 { grid-template-columns: 30% 30% 40%; }
	.autogrid_grid.m_20_40_40 { grid-template-columns: 20% 40% 40%; }
	.autogrid_grid.m_40_20_40 { grid-template-columns: 40% 20% 40%; }
	.autogrid_grid.m_40_40_20 { grid-template-columns: 40% 40% 20%; }
	.autogrid_grid.m_85_15 { grid-template-columns: 85% 15%; }
	.autogrid_grid.m_15_85 { grid-template-columns: 15% 85%; }
	.autogrid_grid.m_80_20 { grid-template-columns: 80% 20%; }
	.autogrid_grid.m_20_80 { grid-template-columns: 20% 80%; }
	.autogrid_grid.m_75_25 { grid-template-columns: 75% 25%; }
	.autogrid_grid.m_25_75 { grid-template-columns: 25% 75%; }
	.autogrid_grid.m_70_30 { grid-template-columns: 70% 30%; }
	.autogrid_grid.m_30_70 { grid-template-columns: 30% 70%; }
	.autogrid_grid.m_66_33 { grid-template-columns: 66.6667% 33.3333%; }
	.autogrid_grid.m_33_66 { grid-template-columns: 33.3333% 66.6667%; }
	.autogrid_grid.m_60_40 { grid-template-columns: 60% 40%; }
	.autogrid_grid.m_40_60 { grid-template-columns: 40% 60%; }
}


/* ---------------------------------------------------------------------------
 * Kontakt-Banner: schmalerer Textbereich, breitere rote Fläche.
 *
 * Der Banner trägt im Backend bereits die Tablet-Vorgabe `t_55_45` — nur gibt
 * es dafür keine Regel: presets.css der AutoGrid-Erweiterung enthält von den
 * Tablet-Varianten ausschließlich `t_100` und `t_50_50`. Deshalb blieb es bis
 * hinunter zu 767px bei den 66/33 der Desktop-Vorgabe; auf der alten Seite
 * ebenso, das ist also kein Rückschritt, sondern eine Ergänzung.
 *
 * Der Bereich ist der gewünschte: ab 1150px abwärts 55/45, unterhalb von 768px
 * greift `m_100` und die Inhalte stehen untereinander.
 *
 * Die übrigen Tablet- und Mobil-Vorgaben sind seit dem 23.09.2026 ergänzt
 * (siehe den Block darüber). Nur dieser eine behält seinen früheren
 * Haltepunkt von 1150px statt 1024px — so gewünscht.
 * --------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1150px) {
	.autogrid_grid.t_55_45 {
		grid-template-columns: 55% 45%;
	}
}


/* ---------------------------------------------------------------------------
 * Abstandsklassen für Mobil: die fehlende Stufe „s".
 *
 * framework.css des Themes definiert in der Mobil-Abfrage `.mt-m-m` und
 * `.mb-m-m` **zweimal** — einmal mit 45px, direkt danach mit 35px:
 *
 *     .mt-m-m{margin-top:45px!important;}.mt-m-m{margin-top:35px!important;}
 *
 * Gemeint war offensichtlich die Reihe xxl 80 / xl 70 / l 60 / m 45 / s 35 /
 * xs 25 / xxs 20 — die zweite Zeile sollte `-s-m` heißen. Durch den
 * Tippfehler gibt es die Stufe „s" für Mobil gar nicht, und „m" ist um 10px
 * kleiner als gedacht.
 *
 * Beides wird hier geradegerückt, damit die Auswahlliste im Backend nicht
 * etwas verspricht, das nicht passiert. Betroffen sind im Bestand:
 *   mb-s-m   7 Elemente, alle auf der unveröffentlichten Demo-Seite
 *            „testimonials" — ohne Wirkung auf die Website.
 *   mb-m-m   1 Element auf /datenschutzhinweise — dessen Abstand unter 767px
 *            wächst von 35px auf die gemeinten 45px.
 * --------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.mt-s-m { margin-top: 35px !important; }
	.mb-s-m { margin-bottom: 35px !important; }
	.mt-m-m { margin-top: 45px !important; }
	.mb-m-m { margin-bottom: 45px !important; }
}


/* ---------------------------------------------------------------------------
 * ALTCHA-Widget an das Theme angleichen.
 *
 * Der Sicherheitscode der beiden Formulare (Kontakt, Bewerbung) ist durch
 * ALTCHA ersetzt — in Contao 5.7 ohne Zusatzmodul enthalten. Das Widget
 * bringt eine eigene, neutrale Optik mit und lässt sich über CSS-Variablen
 * einstellen; hier auf die Werte des Themes gesetzt:
 *
 *   Schriftfarbe   #4a4d4b   wie input/textarea
 *   Rahmen         #e3e3e3   wie der Formularrahmen von form.style4
 *   aktiv          #bc1313   die Akzentfarbe
 *   Feldhintergrund #f8f8f8  wie die Eingabefelder in form.style4
 *
 * Die Breite ist offen gelassen: Im Original nimmt das Widget 260px, damit
 * stünde es schmal neben den Feldern, die über die volle Breite gehen.
 * --------------------------------------------------------------------------- */

.widget-altcha altcha-widget {
	--altcha-color-text: #4a4d4b;
	--altcha-color-border: #e3e3e3;
	--altcha-color-border-focus: #bc1313;
	--altcha-color-active: #bc1313;
	--altcha-color-base: #f8f8f8;
	--altcha-color-footer-bg: #f8f8f8;
	--altcha-color-error-text: #bc1313;
	--altcha-border-width: 1px;
	--altcha-border-radius: 0;
	--altcha-max-width: 100%;
	display: block;
	font-family: Roboto, sans-serif;
	margin-bottom: 15px;
}

/* Der Hinweis für Besucher ohne JavaScript soll nicht untergehen. */
.widget-altcha noscript .warning {
	color: #bc1313;
	margin-bottom: 10px;
}