/*
    Redesign 2026 - Mobile-Stylesheet
    Laedt via media="screen and (max-width: 990px)" (html.lib.php), NACH portal.css -
    bei gleicher Spezifitaet gewinnen die Regeln hier.
    XD-Referenz: "20260708_ttg_mobile_375px_final" (24 Screens, Captures unter data/design/mobile/).
    Breakpoints: 990px = Haupt-Switch Mobile; innerhalb fluid (Referenzbreite 375px).
    Alt-Mobile-Design am 2026-07-25 entfernt (Paket 1 Mobile-Umbau). Der Legacy-Block am
    Dateiende gilt fuer noch nicht umgestellte Bereiche (Dashboard, Alt-Modals) und
    faellt mit deren Redesign weg.
*/

body, h1, h2, h3, h4, a, p, ul, ol, div, font, textarea, label,
.Textnormal {
	font-size: 16px;
}

/*#region Utilities */
.Desktop {
	display: none !important;
}

.Mobile {
	display: revert !important;
}
/*#endregion Utilities */

/*#region Basis */
/* Kopffreistellung: Header 80px + 24px Anschluss-Gap
   (Vollbleed-Sektionen wie hero2026 rechnen mit -24px Anschluss, s. portal.css) */
.Grid {
	margin-top: 104px;
}

#MJUContent .portal > .content {
	width: auto;
}

/* Mapbox-Karte braucht mobil eine feste Hoehe */
#map, .full #map {
	height: 400px;
}

/* Interim gegen horizontales Ueberlaufen: Schritt-Sektionen einspaltig
   (Feinschliff nach XD folgt im Inhaltsseiten-Paket) */
.howto2026 .howto-step, .howto2026 .howto-step.reverse {
	flex-direction: column;
	gap: 30px;
}
/*#endregion Basis */

/*#region Header (XD: Burger links, Logo mittig, Profil-Icon rechts) */
header#MJUHeader.Header, header#MJUHeader.Header.Minimized {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 80px !important;
	background: #FFFFFF;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
	overflow: visible;
	z-index: 101;
}

#MJUHeader.Header .Container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	max-width: none;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	text-align: left;
	float: none;
	width: auto;
}

/* Blau-Flaechenblock des Desktop-Headers entfaellt mobil (XD: nur zentriertes Logo) */
#MJUHeader.Header .Bar {
	display: none;
}

/* XD-Mobile-Header zeigt die reine Wortmarke (Alt-logo.svg), nicht das Flaechen-Logo */
#MJUHeader.Header a.logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: url('../images/logo.svg') center / contain no-repeat;
}

#MJUHeader.Header a.logo img {
	display: none;
}

/* Burger-Button; jquery.toggle setzt toggle-expanded auf dem Trigger -> X */
#MJUHeader.Header #NavigationToggle {
	position: static;
	display: block;
	order: 1;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%231A1A1A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M3 7h22M3 14h22M3 21h22'/%3E%3C/svg%3E") center / 26px auto no-repeat;
}

#MJUHeader.Header #NavigationToggle.toggle-expanded {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
	background-size: 20px auto;
}
/*#endregion Header */

/*#region Hauptmenue (XD "Main Menu": vollbreite Balken auf Blau-Verlauf, Chevrons) */
#MJUHeader.Header nav#Navigation {
	display: none;
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	width: auto;
	margin: 0;
	padding: 0;
	background: linear-gradient(170deg, #29ABE2 0%, #134890 85%);
	border-top: 1px solid #FFFFFF;
	overflow-y: auto;
	z-index: 100000;
}

#MJUHeader.Header nav#Navigation.toggle-visible {
	display: block;
}

#MJUHeader.Header nav#Navigation ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	width: auto;
}

#MJUHeader.Header nav#Navigation li {
	float: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #FFFFFF;
}

/* Reihenfolge nach XD Main Menu (DOM-Reihenfolge bleibt Desktop-Nav) */
#MJUHeader.Header nav#Navigation li.trailers {
	order: 1;
}
#MJUHeader.Header nav#Navigation li.stations {
	order: 2;
}
#MJUHeader.Header nav#Navigation li.partner {
	order: 3;
}
#MJUHeader.Header nav#Navigation li.idea {
	order: 4;
}
#MJUHeader.Header nav#Navigation li.knowledge {
	order: 5;
}
#MJUHeader.Header nav#Navigation li.contact {
	order: 6;
}
#MJUHeader.Header nav#Navigation li.faq {
	order: 7;
}
#MJUHeader.Header nav#Navigation li.registration {
	order: 8;
}

#MJUHeader.Header nav#Navigation li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	margin: 0;
	padding: 0 48px;
	font-family: var(--rd-font);
	font-size: 17px;
	font-weight: 500;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: none;
	background: none;
	box-sizing: border-box;
}

#MJUHeader.Header nav#Navigation li a::after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#MJUHeader.Header nav#Navigation li a:hover {
	color: #FFFFFF;
	background: rgba(11, 42, 86, 0.18);
}

#MJUHeader.Header nav#Navigation li.active a {
	font-weight: 800;
	color: #FFFFFF;
	background: rgba(11, 42, 86, 0.30);
}
/*#endregion Hauptmenue */

/*#region Profil + Account-Menue (XD "Login_Menu": weisse Balkenliste) */
#MJUHeader.Header .Container .profile, #MJUHeader.Header .Container .profile.logged {
	position: static;
	order: 3;
	display: block;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	overflow: visible;
}

/* Nicht eingeloggt: Login-Pill wird zum reinen Icon */
#MJUHeader.Header .profile .login-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 0;
	line-height: 0;
	box-sizing: border-box;
}

#MJUHeader.Header .profile .login-pill .icon {
	display: block;
	width: 30px !important;
	height: 30px !important;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Eingeloggt: Account-Pill wird zum reinen Icon (user_logged.svg via portal.css) */
#MJUHeader.Header .profile .account-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-sizing: border-box;
}

#MJUHeader.Header .profile .account-pill .user, #MJUHeader.Header .profile .account-pill .arrow {
	display: none;
}

#MJUHeader.Header .profile .account-pill .icon {
	display: block;
	width: 30px !important;
	height: 30px !important;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#MJUHeader.Header .account-menu {
	position: fixed;
	left: 0;
	right: 0;
	top: 80px;
	width: auto;
	min-height: calc(100vh - 80px);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: #FFFFFF;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
	z-index: 100000;
}

#MJUHeader.Header .account-menu .title {
	margin: 0;
	padding: 22px 20px;
	text-align: center;
	border-bottom: 1px solid #E3E3E3;
	color: var(--rd-text);
}

#MJUHeader.Header .account-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#MJUHeader.Header .account-menu ul li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #E3E3E3;
}

#MJUHeader.Header .account-menu ul li a {
	display: block;
	padding: 20px;
	text-align: center;
	font-family: var(--rd-font);
	font-size: 16px;
	font-weight: 500;
	color: var(--rd-text);
	text-decoration: none;
}

/* Kind-Punkte des Kundenbereich-Menues: Balkenzeile wie die Hauptpunkte, nur kleiner */
#MJUHeader.Header .account-menu ul li.child a {
	padding: 14px 20px;
	font-size: 15px;
	color: var(--rd-gray);
}

#MJUHeader.Header .account-menu .account-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 24px 20px 4px 20px;
	border-top: 0;
}

#MJUHeader.Header .account-menu .account-info .avatar {
	display: block;
	width: 34px;
	height: 34px;
	background: url('../images/redesign2026/icons/user_logged.svg') center / contain no-repeat;
}

#MJUHeader.Header .account-menu .account-info .email {
	font-size: 15px;
	color: var(--rd-blue);
}

/* Logout als unterstrichener Textlink statt Pill (XD) */
#MJUHeader.Header .account-menu .logout {
	display: block;
	margin: 6px auto 24px auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	min-width: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--rd-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-align: center;
}
/*#endregion Profil + Account-Menue */

/*#region Footer (XD: einspaltig gestapelt) */
footer.Footer {
	padding: 50px 0 40px 0;
}

footer.Footer .Container {
	padding: 0 24px;
}

footer.Footer .footer-columns {
	display: block;
}

footer.Footer .footer-column {
	margin: 0 0 40px 0;
}

footer.Footer .footer-column.cities {
	margin-left: 0;
	margin-bottom: 0;
	max-width: none;
}
footer.Footer .footer-title {
	margin-bottom: 5px;
}
footer.Footer .footer-column ul li {
	margin-bottom: 0;
}

footer.Footer .footer-cities,
footer.Footer .footer-cities a {
	font-size: 14px;
	line-height: 1.44;
}
/*#endregion Footer */

/*#region Startseite (XD Screens 01/02/05) */
/* Hero: hoher Bildausschnitt, Suchkarte schwebt auf dem Foto */
.home .hero2026 .hero-image {
	height: 620px;
}

/* WICHTIG: transform-frei zentrieren - die Desktop-translate(-50%,-50%)-Karte
   wuerde sonst zum Containing Block des fixed positionierten Modellpanels */
.home .hero2026 .hero-search {
	left: 0;
	right: 0;
	top: 90px;
	transform: none;
	margin: 0 auto;
	width: calc(100% - 48px);
	max-width: 420px;
	padding: 26px 24px 30px 24px;
	border-radius: 24px;
}

.home .hero2026 .hero-search-title {
	text-align: center;
	margin-bottom: 20px;
}

.home .hero2026 .hero-search-fields {
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
}

.home .hero2026 .hero-search-fields .field, .home .hero2026 .hero-search-fields .field.location, .home .hero2026 .hero-search-fields .field.model {
	flex: 1 1 100%;
	gap: 8px;
}

.home .hero2026 .hero-search-fields .field label {
	justify-content: center;
	white-space: normal;
}

.home .hero2026 .hero-search-fields .field input[type="text"],
.home .hero2026 .hero-search-fields .field input[type="date"],
.home .hero2026 .hero-search-fields .field select,
.home .hero2026 .hero-search-fields .field .model-select {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.home .hero2026 .hero-search-fields .field input[type="date"] {
	text-align: center;
	padding: 0;
}

.home .hero2026 .hero-search-fields .field.date, .home .hero2026 .hero-search-fields .field.duration {
	flex: 1 1 calc(50% - 7px);
}

.home .hero2026 .hero-search-fields .field.submit {
	flex: 1 1 100%;
	margin-left: 0;
	margin-top: 8px;
}

.home .hero2026 .hero-submit {
	width: 100%;
}

/* Claim + Einleitung: volle Breite, Einrueckungen des Desktops aufheben */
.home .home-claim2026 {
	padding: 44px 24px 10px 24px;
}

.home .home-claim2026 .welcome, .home .home-claim2026 .welcome-text {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Modellauswahl als Fullscreen-Sheet (XD Screen 05) */
.model-panel, .home .hero2026 .model-panel, .stations2026 .model-panel {
	position: fixed !important;
	left: 12px;
	right: 12px;
	top: 92px;
	bottom: 12px;
	border-radius: 24px;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	overflow-y: auto;
	padding: 54px 24px 24px 24px !important;
	box-sizing: border-box;
}

.model-panel .model-panel-column {
	flex: 0 0 auto;
	min-width: 0;
}

.model-panel .Textfett {
	margin-bottom: 16px;
}

.model-panel .model-option {
	margin: 14px 0;
}

.model-panel-stationtype {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.model-panel-footer {
	width: auto;
	margin-right: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 20px;
}

.model-panel-footer .More {
	text-align: center;
}

.model-panel-footer .apply-button {
	margin-left: 0;
	width: 100%;
}
/*#endregion Startseite */

/*#region Ergebnisseite + Standorte (XD Screens 06/12) */
.stations2026 {
	padding: 20px 24px 96px 24px;
	/* unten Platz fuer den schwebenden Umschalter */;
}

/* Filterkarte inline statt Overlay; einspaltig wie die Startseiten-Suchkarte */
.stations2026 .stations-filter, .stations2026 .stations-filter.toggle-visible {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0 0 20px 0;
	width: auto;
	padding: 24px 20px;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.stations2026 .stations-filter.toggle-visible::before, .stations2026 .stations-filter.toggle-visible::after {
	display: none;
	/* Karte kommt vom article selbst, kein Dimm-Backdrop inline */;
}

/* Schliessen-X entfaellt mobil (XD 12) - auf/zu geht ueber den Stift der Ergebniskarte */
.stations2026 .filter-close {
	display: none;
}

.stations2026 .filter-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
}

.stations2026 .filter-fields .field, .stations2026 .filter-fields .field.location, .stations2026 .filter-fields .field.model {
	flex: 1 1 100%;
	min-width: 0;
}

/* Feld-Reihenfolge nach XD Screen 12: Ort, Umkreis, Modell, Datum+Dauer */
.stations2026 .filter-fields .field.location {
	order: 1;
}
.stations2026 .filter-fields .field.radius {
	order: 2;
}
.stations2026 .filter-fields .field.model {
	order: 3;
}
.stations2026 .filter-fields .field.date {
	order: 4;
}
.stations2026 .filter-fields .field.duration {
	order: 5;
}
.stations2026 .filter-fields .field.submit {
	order: 6;
}

.stations2026 .filter-fields .field.date, .stations2026 .filter-fields .field.duration {
	flex: 1 1 calc(50% - 7px);
}

.stations2026 .filter-fields .field label {
	white-space: normal;
}

.stations2026 .filter-fields .field input[type="text"], .stations2026 .filter-fields .field input[type="date"], .stations2026 .filter-fields .field select, .stations2026 .filter-fields .field .model-select {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.stations2026 .filter-submit {
	width: 100%;
}

/* Split einspaltig; Liste ODER Karte (Umschalter), Desktop zeigt beides */
.stations2026 .results-split {
	flex-direction: column;
	height: auto;
	min-height: 0;
	gap: 0;
}

.stations2026 .results-left {
	display: block;
	flex: none;
	width: auto;
	min-width: 0;
}

.stations2026 #Results {
	overflow: visible;
	flex: none;
}

.stations2026 .results-map {
	display: none;
}

.stations2026.show-map .results-map {
	display: block;
}

.stations2026.show-map .results-left {
	display: none;
}

.stations2026 .results-map #map, .stations2026 .full #map {
	height: calc(100vh - 280px);
	min-height: 380px;
	border-radius: 18px;
}

/* Schwebender Umschalter Liste/Karte (XD Screen 06) */
.results-toggle {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 3%;
	text-align: center;
	z-index: 90000;
	pointer-events: none;
}

.show-map .results-toggle {
	position: absolute;
	bottom: 6%;
}

.results-toggle .rt-inner {
	display: inline-flex;
	background: var(--rd-cyan);
	border-radius: 26px;
	padding: 5px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
}

.results-toggle .rt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 22px;
	border-radius: 22px;
	font-family: var(--rd-font);
	font-size: 15px;
	font-weight: 800;
	color: #FFFFFF;
	cursor: pointer;
}

.stations2026:not(.show-map) .results-toggle .rt-list, .stations2026.show-map .results-toggle .rt-map {
	background: var(--rd-blue);
}

.results-toggle .rt-ico {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.results-toggle .rt-list .rt-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

.results-toggle .rt-map .rt-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");
}
/*#endregion Ergebnisseite + Standorte */

/*#region Modals: Detail/Buchung/Anfrage (XD Screens 08-11/23/24) */
/* Fancybox-Karte fuellt den Screen fast komplett (XD: schmaler grauer Rand) */
.fancybox-slide {
	padding: 10px !important;
}

.fancybox-slide--html .fancybox-content {
	width: 100% !important;
	max-width: 100% !important;
	max-height: calc(100vh - 20px) !important;
	max-height: calc(100dvh - 20px) !important;
	overflow-y: auto !important;
	border-radius: 18px;
	bottom: env(safe-area-inset-bottom);
}

/* Detail-Modal (Station/Anhaenger): Bild oben, Inhalt einspaltig */
.detail2026 {
	flex-direction: column;
	gap: 24px;
	padding: 20px 18px 26px 18px;
	max-width: 100%;
}

.detail2026 .detail-media {
	flex: none;
	width: 100%;
	min-height: 200px;
}

.detail2026 .Columns {
	flex-direction: column;
	gap: 0;
}

.detail2026 .Columns .Column50Left, .detail2026 .Columns .Column50Right {
	width: 100%;
}

/* Direktaufruf als Seite: Overlay-Rahmen ohne Desktop-Versatz, schmale Seitenraender */
section#Content.site-location_booking,
section#Content.site-location_rent,
section#Content.site-location_contact, section#Content.site-location_detail,
section#Content.site-trailer_detail {
	padding-left: 12px;
	padding-right: 12px;
}

#Content .box-content.Overlay {
	margin: 0;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* Buchungs-/Anfrage-Modal: Karte mit kompakten Innenabstaenden */
.booking2026 {
	padding: 22px 16px;
	border-radius: 18px;
}

/* Login-Schritt/-Seite: Anmeldung- und Registrierung-Karte untereinander (XD 03/08) */
section#Content.site-login .content.login {
	display: block;
}

section#Content.site-login .content.login .loginform {
	float: none;
	width: auto;
	max-width: none;
	margin: 0 0 20px 0;
	box-sizing: border-box;
}

section#Content.site-login .content.login .Columns {
	display: block;
}

section#Content.site-login .content.login .Columns .Column50Left, section#Content.site-login .content.login .Columns .Column50Right {
	float: none;
	width: 100%;
	margin: 0 0 20px 0;
	box-sizing: border-box;
}

/* dl-Panels: Label und Wert untereinander (XD: fette Labels, Werte darunter) */
.booking2026 dl {
	display: block;
}

.booking2026 dl dt, .booking2026 dl dd {
	float: none;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

.booking2026 dl dd {
	margin: 2px 0 12px 0;
}

/* Formular-Spalten untereinander (50%-Spalten sind mobil zu schmal fuer die Labels) */
.booking2026 .Columns {
	display: block;
}

.booking2026 .Columns .Column50Left, .booking2026 .Columns .Column50Right {
	float: none;
	width: 100%;
	margin: 0 0 10px 0;
	box-sizing: border-box;
}

/* Aktions-Buttons vollbreit statt rechtsbuendig */
.booking2026 input.Button, .booking2026 a.Button {
	display: block;
	float: none;
	width: 100%;
	box-sizing: border-box;
	margin: 8px 0;
}

/* Buchung Select-Schritt: die zwei Spalten (Station+Anhaenger | Zeitraum/Termine) untereinander */
.booking2026 .booking-select2026 {
	display: block;
}

/* XD 05: Boxzeilen (Abholtermin/Mietdauer) umbrechen, Datums-Navigation kompakt */
.booking2026 .bk-boxrow, .freetime2026 .bk-boxrow {
	flex-wrap: wrap;
}
.booking2026 .bk-datenav, .freetime2026 .bk-datenav {
	gap: 8px;
}
.booking2026 .bk-datenav .d, .freetime2026 .bk-datenav .d {
	font-size: 13px;
}
.booking2026 .bk-datenav .d.current, .freetime2026 .bk-datenav .d.current {
	padding: 0 8px;
}
.booking2026 .bk-pricebox {
	margin-bottom: 16px;
}
/*#endregion Modals */

/*#region CMS-Sektionen einspaltig (alle Inhaltsseiten) */
#Content .infopanels2026 {
	flex-direction: column;
	align-items: stretch;
}

#Content .cms-claim:has(+ .infopanels2026.blue) + .infopanels2026.blue {
	padding-top: 30px;
	padding-bottom: 30px;
}

#Content .cms-claim:has(+ .infopanels2026.blue) + .infopanels2026.blue {
	gap: 0;
}

/* Zweispaltige Karten-Texte (.cols) untereinander */
#Content .infopanels2026 .infopanel .panel-text .cols {
	flex-direction: column;
	gap: 0;
}

#Content .cms-teaser {
	flex-direction: column;
	gap: 24px;
}

/* Teaser: Bild immer OBEN (XD), Desktop alterniert seitlich */
#Content .cms-teaser .teaser-media {
	order: -1;
	width: 100%;
}

#Content .cms-cards {
	grid-template-columns: 1fr;
}

/* Sprechblasen-Claim: zentrierte Blase in Textgroesse, Einstein-Motiv entfaellt mobil */
/*#Content .cms-claim.bubble {
	margin: 20px calc(50% - 50vw) 10px calc(50% - 50vw);
	min-height: 0;
	background-image: none;
	text-align: center;
}*/

#Content .cms-claim.bubble .claim-title {
	font-size: 2em;
	line-height: 1.25;
	/*font-size: 30px;
	margin: 0;
	padding: 30px 26px 38px 26px;
	*/
	margin: 5vw 0 0 47vw;
	background-size: contain;
	background-position: center;
}

.knowledge2026 {
	grid-template-columns: 1fr;
}

.fleet2026 .fleet-grid {
	grid-template-columns: 1fr;
}

#Content .boxes {
	flex-wrap: wrap;
}

#Content .boxes .box {
	max-width: none;
}

/* Fleetslider: 1 Slide + Anschnitt, ohne Pfeile (XD) */
#Content .fleetslider2026 .glide__track {
	margin: 0;
}

#Content .fleetslider2026 .glide__arrows {
	display: none;
}

#Content .fleetslider2026 .glide__slide {
	padding: 0 10px;
}

#Content .fleetslider2026 .fleet-slide .illu {
	height: auto;
}

#Content .fleetslider2026 .fleet-slide .illu img {
	width: 100%;
	max-height: none;
}
/* Tablet-Zwischenstufe (700-990px): Karten-Grids zweispaltig, sonst wie Mobil */
@media (min-width: 700px) {
    #Content .cms-cards {
    	grid-template-columns: 1fr 1fr;
    }

    .knowledge2026 {
    	grid-template-columns: 1fr 1fr;
    }

    .fleet2026 .fleet-grid {
    	grid-template-columns: 1fr 1fr;
    }
}
/*#endregion CMS-Sektionen einspaltig */

/*#region Inhaltsseiten-Feinschliff (XD Screens 13-15/17/18/21/22) */
/* 24/7: 5-Schritte-Panels vollbreit statt 20%-Spalten, ohne Verbinder-Linien */
#Content .infopanels2026.steps {
	padding: 30px 24px 10px 24px;
}

#Content .infopanels2026.steps .infopanel {
	flex: none;
	width: 100%;
	padding: 0 0 26px 0;
}

#Content .infopanels2026.steps .infopanel::before, #Content .infopanels2026.steps .infopanel::after {
	display: none;
}

/* 24/7: FAQ-Klone auf dem Vollbleed-Band mit Seitenrand */
section#Content.site-24_7 h2.toggle[data-group="accordeon"] {
	padding-left: 24px;
	padding-right: 48px;
	box-sizing: border-box;
}

section#Content.site-24_7 h2.toggle[data-group="accordeon"] + article.toggle-content {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* 24/7: Video-Kacheln im Hochformat (1080 x 1350) - Titel und Play-Kreis mitskalieren */
section#Content.site-24_7 .boxes .box.video .Title {
	padding: 10px 16px;
	font-size: 15px;
}

section#Content.site-24_7 .boxes .box.video a::after {
	width: 72px;
	height: 72px;
}

/* Flotte: Hero einspaltig - Titel/Text oben, Einstein darunter zentriert (XD 17) */
.fleet2026 .fleet-hero {
	display: flex;
	flex-direction: column;
	padding: 0;
	/* Desktop bringt u.a. festes padding-right mit -> Textblock sonst nur 225px */;
}

.fleet2026 .fleet-hero-image {
	order: 2;
	width: 72%;
	max-width: 320px;
	margin: 18px auto 0 auto;
	align-self: center;
}

.fleet2026 .fleet-hero-text {
	margin: 10px 0 0 0;
	padding: 0 24px;
	max-width: none;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

.fleet2026 .fleet-hero-text h1 {
	max-width: none;
}

.fleet2026 .fleet-hero-text p {
	margin: 16px 0 0 0;
}

/* Flotte: Modellsuche einspaltig, Feld vollbreit */
.fleet2026 .fleet-search {
	flex-direction: column;
	gap: 12px;
	padding: 0 24px;
	box-sizing: border-box;
}

.fleet2026 .fleet-search .field {
	display: block;
	width: 100%;
}

.fleet2026 .fleet-search input {
	width: 100%;
	box-sizing: border-box;
}

/* Partner: Produktkarten mit kompakten Innenabstaenden */
.partner2026 .product-card {
	padding: 26px 20px;
}

/* Kontakt: Formularfelder vollbreit untereinander (XD 21) */
.contact2026 .row {
	flex-direction: column;
}

/* Anfrage-Modal: Formularzeilen mobil ebenfalls vollbreit untereinander */
.booking2026 .row {
	flex-direction: column;
}

.booking2026 .row .floating-label {
	width: 100%;
}

.contact2026 .row .floating-label {
	width: 100%;
	box-sizing: border-box;
}

/* Anrede/Titel bleiben nebeneinander (XD mobile 21), drittes Feld bricht vollbreit um */
.contact2026 .row.three {
	flex-direction: row;
	flex-wrap: wrap;
}

.contact2026 .row.three > .floating-label {
	width: auto;
	flex: 1 1 40%;
}

.contact2026 .row.three > .floating-label:nth-child(3) {
	flex: 1 1 100% !important;
}

/* Bordered-Fieldsets (Registrierung + Kontakt): festes Padding statt 7%-Prozentwert -
   die Legende sitzt absolut, bei schmalen Karten rutschten die Felder darueber.
   Padding-Top deckt zweizeilige Legenden ab (z.B. "Newsletter, AGB und Datenschutzerklaerung") */
fieldset.bordered {
	padding: 80px 14px 14px 14px !important;
}

fieldset.bordered > legend {
	top: 20px;
}
/* Registrierung (XD 19/20): Formular-Spalten und Felder vollbreit */
.registration2026 .registration2026-content form.registration {
	width: 100%;
	max-width: none;
}

.registration2026 .registration2026-content .row {
	flex-direction: column;
}

.registration2026 .registration2026-content .row > * {
	width: 100%;
	box-sizing: border-box;
}

/* Anrede/Titel bleiben nebeneinander (XD mobile 19/20), drittes Feld bricht vollbreit um */
.registration2026 .registration2026-content .row.three {
	flex-direction: row;
	flex-wrap: wrap;
}

.registration2026 .registration2026-content .row.three > .floating-label {
	width: auto;
	flex: 1 1 40%;
}

.registration2026 .registration2026-content .row.three > .floating-label:nth-child(3) {
	flex: 1 1 100%;
}

/* Strasse/Hausnr. und PLZ/Ort mobil untereinander (XD mobile: vollbreite Felder) */
.registration2026 .registration2026-content .row .pair {
	flex-direction: column;
	gap: 8px;
}

.registration2026 .registration2026-content .row .pair > .floating-label {
	width: 100%;
	box-sizing: border-box;
}

.registration2026 .registration2026-content .row > .floating-label:empty {
	display: none;
}

.registration2026 .registration2026-content .duty-note {
	text-align: left;
}

.registration2026 .registration2026-content input[type="text"], .registration2026 .registration2026-content input[type="password"], .registration2026 .registration2026-content input[type="email"], .registration2026 .registration2026-content select, .registration2026 .registration2026-content textarea {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.registration2026 .registration2026-content fieldset {
	float: none;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.registration2026 .registration2026-content .CheckboxContainer {
	width: 100%;
	box-sizing: border-box;
}

.registration2026 .registration2026-content a.Button, .registration2026 .registration2026-content input.Button {
	display: block;
	float: none;
	width: 100%;
	box-sizing: border-box;
	margin: 8px 0;
}
/*#endregion Inhaltsseiten-Feinschliff */

/*#region Kundenbereich 2026 (Sidebar entfaellt mobil - Punkte in der Burger-Navigation) */
.kb2026 {
	display: block;
	min-height: 0;
}

.kb-nav {
	display: none;
}

.kb-content {
	padding: 26px 16px 60px 16px;
}

.kb-head h1 {
	font-size: 28px;
}

.kb-card {
	padding: 20px 16px;
}

/* Buchungsdetails als Seite (siehe .kb-content > .kb-detailcard in portal.css) */
.kb-content > .kb-detailcard {
	padding: 20px 16px;
}

.kb-rescols {
	grid-template-columns: 1fr;
	gap: 18px;
}

/* einspaltig gestapelt: Preisspalte nicht mehr zentriert, sondern linksbuendig
   wie die uebrigen Bloecke der Karte */
.kb-rescols .cap.center {
	justify-content: flex-start;
}
.kb-rescols .price,
.kb-rescols .price-coupon {
	text-align: left;
}
.kb-rescols .kb-countdown {
	justify-content: flex-start;
}

.kb-rescard-head {
	flex-wrap: wrap;
}

.kb-toolbar .kb-search input {
	width: 100%;
}

.kb-button,
.kb-toolbar .kb-button.toggle,
.kb-toolbar .kb-button.toggle.toggle-collapsed,
.kb-toolbar .kb-button.toggle.toggle-expanded {
	padding: 6px 18px;
	font-size: 14px;
}

.kb-toolbar {
	gap: 10px;
}

.kb-toolbar .kb-search input {
	width: 200px;
	padding: 6px 6px 6px 40px;
	font-size: 14px;
}

/* Kundenbereich-Punkte im Burger-Menue: eigener Block unter den Website-Punkten */
/* Legacy-Regel aus portal.css ("header.logged .Mobile { display:none !important }", Zeile 684)
   versteckt im eingeloggten Header ALLE .Mobile-Punkte - also mobil auch die Burger-Punkte
   Wissen/Kontakt/FAQ und das ganze Kundenbereich-Menue. Im Mobile-Kontext zuruecknehmen. */
#MJUHeader.Header.logged nav#Navigation li.Mobile {
	display: list-item !important;
}

#MJUHeader.Header nav#Navigation li.kb-nav-mobile {
	order: 20;
	background: rgba(11, 42, 86, 0.25);
}

#MJUHeader.Header nav#Navigation li.kb-nav-mobile.first {
	margin-top: 14px;
	border-top: 1px solid #FFFFFF;
}

/* Kind-Punkte des Kundenbereich-Menues: flachere Zeile, kleinere Schrift */
#MJUHeader.Header nav#Navigation li.kb-nav-mobile.child a {
	height: 46px;
	font-size: 15px;
	font-weight: 400;
}

/* K8: Karten-Grids der Pakete K3-K7 (Desktop mehrspaltig) stufen auf 2 Spalten */
.kb-tiles, .kb-fleet, .kb-kpis, .kb-kpis.cols3, .kb-packages {
	grid-template-columns: repeat(2, 1fr);
	max-width: none;
}

.kb-dashrow, .kb-detailcols, .kb-rentcols {
	grid-template-columns: 1fr;
}

/* Profil (Mieter + Vermieter): Profilbild/Statistiken ueber die Datenkarte, Feldzeilen
   einspaltig - gleiche Mechanik wie im Registrierungs-Raster weiter oben */
.kb-profilegrid {
	grid-template-columns: 1fr;
}
.kb-profile .row {
	flex-direction: column;
}
.kb-profile .row > * {
	width: 100%;
	box-sizing: border-box;
}
/* Anrede/Titel bleiben nebeneinander, drittes Feld bricht vollbreit um */
.kb-profile .row.three {
	flex-direction: row;
	flex-wrap: wrap;
}
.kb-profile .row.three > .floating-label {
	width: auto;
	flex: 1 1 40%;
}
.kb-profile .row.three > .floating-label:nth-child(3) {
	flex: 1 1 100%;
}
/* Strasse/Hausnr. und PLZ/Ort mobil untereinander */
.kb-profile .row .pair {
	flex-direction: column;
	gap: 8px;
}
.kb-profile .row .pair > .floating-label {
	width: 100%;
	box-sizing: border-box;
}
.kb-profile .row .filler {
	display: none;
}

/* Vermieter-Buchungsliste: alle Spalten behalten, Karte wird seitlich wischbar */
.kb-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kb-thead, .kb-trow {
	min-width: 760px;
}

/* Ansichts-Umschalter (Terminkalender) darf umbrechen statt rechts abzuschneiden */
.kb-toolbar .kb-segment {
	display: flex;
	flex-wrap: wrap;
}

.kb-toolbar .kb-segment .seg {
	flex: 1 1 auto;
	text-align: center;
}

.kb-calcard .calendar-container .header {
	flex-wrap: wrap;
	justify-content: center;
}

/* Pakete-Seite: Schliessmodul-Panel untereinander */
.kb-lockmodule {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Profil (beide Rollen): Formular-Spalten untereinander */
.kb-profile .Columns {
	display: block;
}

.kb-profile .Columns > div {
	width: 100%;
	box-sizing: border-box;
}

.kb-profile .Columns .Column50Left, .kb-profile .Columns .Column50Right {
	display: block;
	width: 100%;
}

@media(max-width: 700px) {

	.contact2026 {
		padding: 5% 5% 10% 5%;
	}

	#Content .cms-claim.hero {
		padding: 5% 10%;
	}

	#Content .cms-claim.hero .claim-content {
		margin: 0;
		padding: 5%;
	}

	#Content .infopanels2026.blue .infopanel {
		padding: 15% 4% 5% 4%;
	}
	#Content .infopanels2026 .infopanel .panel-title {
		margin: 0 0 2% 0;
	}

    .kb-tiles, .kb-fleet, .kb-kpis, .kb-kpis.cols3, .kb-packages {
    	grid-template-columns: 1fr;
    }

    .kb-fieldgrid, .kb-fieldgrid.cols3, .kb-rentsearch .filter-fields {
    	grid-template-columns: 1fr;
    }

	.registration2026 .registration-intro {
		display: block;
		gap: 0px;
	}

	.registration2026 .registration-intro .introbox {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}

	.registration2026 .registration-intro .introbox + .introbox {
		margin-top: 15%;
	}
}
/*#endregion Kundenbereich 2026 */

/*#region Legacy (Alt-Bestand fuer noch nicht umgestellte Bereiche: Dashboard, Alt-Modals) */
#dashboard {
	display: block;
	padding: 0 2% 4% 2%;
}

#dashboard.tenant {
	display: flex;
	flex-direction: column;
}

#dashboard.tenant #profile {
	order: 3;
}

#dashboard.tenant #services {
	order: 2;
}

#dashboard.tenant #reservations {
	order: 1;
}

#dashboard.tenant #reservations .reservation .flex-row:not(.action) {
	flex-direction: column;
}

#dashboard.tenant #reservations .reservation .info {
	display: flex;
	flex-direction: column;
}

#dashboard.tenant #reservations .reservation .info .image {
	order: 3;
	margin: 30px 0px 0px 0px;
}

#dashboard.tenant #reservations .reservation .info .action {
	order: 4;
}

.dashboard .grid-item {
	flex-direction: column;
	padding: 3vw 3vw;
}

.dashboard > .flex-row {
	align-items: stretch;
	gap: 0px;
}

#dashboard .grid-item .title h3 {
	-webkit-writing-mode: unset;
	-ms-writing-mode: unset;
	writing-mode: unset;
	-o-transform: none;
	-ms-transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	transform: none;
}

#dashboard .grid-item + .grid-item {
	margin-top: 4%;
}

.dashboard.flex-row, .dashboard.list_view {
	flex-direction: column;
}

.dashboard #sidebar, .dashboard #sidebar + .content, .dashboard.list_view .content {
	width: 100% !important;
	box-sizing: border-box;
	padding-top: 40px;
	padding-bottom: 40px;
}

#sidebar .CheckboxList {
	display: flex;
	flex-wrap: wrap;
}

#sidebar .CheckboxList .CheckboxContainer {
	width: 30%;
	margin-bottom: 10px;
}

#sidebar input[type='checkbox'] + label, #sidebar input[type='radio'] + label {
	font-size: 16px;
	line-height: 22px;
}

#sidebar .calendar_views .calendar_view {
	width: 20%;
}

#sidebar .calendar_views .calendar_view.trailer {
	display: none;
}

.datatable-container {
	overflow-x: auto;
	margin: 0px auto;
}

.MatomoOptout {
	height: 140px;
}

@media(max-width: 800px) {
    #sidebar .CheckboxList .CheckboxContainer {
    	width: 48%;
    }

    .calendar .calendar-row {
    	flex-direction: column;
    	margin: 0;
    }

    .calendar .calendar-row .day, .calendar .calendar-row .weekday {
    	margin: 0 0 10px 0;
    }
}

@media(max-width: 700px) {
    .list .row.header {
    	display: none;
    }

    .list .data .row {
    	display: block;
    }

    .list .data .row .item {
    	padding: 1vw 2vw 1vw 2vw;
    }

    .fancybox-slide--html .fancybox-close-small {
    	padding: 5px;
    }

    .fancybox-close-small {
    	width: 40px !important;
    	height: 40px !important;
    }

    .Overlay .Contact, .Overlay .Infos, .Overlay .Offeror, .Overlay .Address, .Overlay .Trailers, .Overlay .Opening, .Overlay .Servicepartner, .Overlay .Booking247partner {
    	display: block;
    	float: none;
    	width: auto;
    	margin: 0px;
    }

    .Overlay .Address, .Overlay .Contact, .Overlay .Infos, .Overlay .Trailers, .Overlay .Opening {
    	margin: 0px 0px 25px 0px;
    }

    .dashboard .box, .dashboard .box.double {
    	width: 96%;
    }
}

@media(max-width: 600px) {
    .fancybox-content .actions a.Button {
    	width: 100%;
    	box-sizing: border-box;
    	margin-left: 0 !important;
    	margin-right: 0 !important;
    	text-align: center;
    }

    .fancybox-content .actions a.Button + a.Button {
    	margin-top: 10px !important;
    }

    #dashboard.tenant #reservations .reservation .image {
    	float: none;
    }

    #dashboard.tenant #reservations .reservation .Button {
    	box-sizing: border-box;
    	width: 100%;
    	margin: 5px 0 5px 0;
    	font-size: 20px;
    	line-height: 24px;
    }

    #dashboard.tenant #reservations .reservation .Information .Button, #dashboard.tenant #reservations .reservation .Error .Button, #dashboard.tenant #reservations .reservation .Warning .Button, #dashboard.tenant #reservations .reservation .Success .Button {
    	width: auto;
    	margin: 0px;
    	padding: 7px 20px;
    }

    .calendar-container .header .btn {
    	font-size: 14px;
    	line-height: 16px;
    }
}

@media(max-width: 500px) {
    #sidebar .CheckboxList .CheckboxContainer {
    	width: 100%;
    }

    .Column50Left, .Column50Right {
    	float: none;
    	width: 100%;
    	margin: 5px 0 5px 0;
    }

    .Overlay fieldset .flex-row {
    	flex-direction: column;
    }

    .Overlay fieldset .col-50 {
    	width: 100% !important;
    }
}
/*#endregion Legacy */

/* XD-Update 2026-08 (U3): Zeilen-Tabellen (kb-rt) mobil horizontal wischbar */
@media screen and (max-width: 990px) {
	.kb-rt {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.kb-rt .kb-rt-head, .kb-rt .kb-rt-row {
		min-width: 860px;
	}
}
/* XD-Update 2026-08 (U11): Mobile-Feinschliff Kundenbereich */
@media screen and (max-width: 990px) {
	.kb-calcard .kb-grid .calendar-wrap, .kb-calcard #Results {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.kb-calcard .kb-grid .calendar .calendar-row, .kb-calweekdays {
		min-width: 720px;
	}
	.kb-calbar {
		justify-content: flex-start;
	}
	.kb-pagebar {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.kb-dpanel {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.kb-dpanel .dcontent.cols2 {
		grid-template-columns: 1fr;
	}
	.kb-fieldgrid.cols3, .kb-fieldgrid.cols4 {
		grid-template-columns: 1fr 1fr;
	}
	.kb-formpanel .kb-fieldgrid.form {
		grid-template-columns: 1fr;
	}
}
@media screen and (max-width: 700px) {
	.kb-new {
		gap: 20px;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	.kb-new .plus {
		width: 32px;
		height: 22px;
		font-size: 34px;
	}

	/* Vermieter-Dashboard "Meine Vorgaenge": schmal bekommt der Anhaengername eine eigene
	   Zeile. Zeitraum, Kennung und Kebab bleiben oben zusammen - dafuer rutscht .what per
	   order hinter sie und erzwingt mit flex-basis 100% den Umbruch davor. */
	.kb-daylist .dayrow {
		flex-wrap: wrap;
		gap: 5px 15px;
	}
	/* Umbruch nach der Kopfzeile hart erzwingen: ein leeres Flex-Element mit 100%
	   Breite. Ohne das entscheidet Flexbox den Zeilenumbruch nach den Inhaltsbreiten -
	   bei 375px passte der Kebab nicht mehr dazu und stand allein in einer Zeile. */
	.kb-daylist .dayrow::after {
		content: "";
		flex: 0 0 100%;
		height: 0;
		order: 3;
	}
	.kb-daylist .dayrow .kb-badge {
		order: 2;
		padding: 5px 15px;
	}
	/* Name und Kebab teilen sich die zweite Zeile - gleicher order-Wert, die Reihenfolge
	   ergibt sich aus dem Markup, das margin-left:auto des Kebabs haelt ihn rechts */
	.kb-daylist .dayrow .kb-kebab {
		order: 4;
	}
	.kb-daylist .dayrow .what {
		order: 4;
		flex: 1 1 0;
		min-width: 0;
		margin-left: 51px;
	}
	.kb-daylist .dayrow .what br {
		display: none;
	}
	.kb-daylist .dayrow .what .sub {
		margin-left: 10px;
		white-space: nowrap;
	}
	.kb-fieldgrid.cols3, .kb-fieldgrid.cols4 {
		grid-template-columns: 1fr;
	}
	.kb-servicegrid {
		grid-template-columns: 1fr;
	}
	/* Uebersicht der Buchungsmaske: Beschriftung und Wert passen nebeneinander nur auf
	   breiten Schirmen in eine Zeile, schmal darf umbrochen werden */
	.kb-bookingoverview .ovrow {
		flex-wrap: wrap;
		gap: 2px 12px;
	}
	.kb-bookingoverview .ovrow .cap {
		flex: 0 0 auto;
	}
	.kb-bookingoverview .ovrow .cap,
	.kb-bookingoverview .ovrow .val {
		white-space: normal;
	}
	/* Neue Buchung: die Beschriftung steht auf schmalen Schirmen wieder ueber dem Feld,
	   nebeneinander bleibt fuer Datum und Dauer zu wenig Platz */
	.kb-newbooking .kb-formbox .kb-formrow .f {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.kb-newbooking .kb-formbox .kb-formrow .f label {
		margin-bottom: 4px;
	}
	.kb-hourslot {
		grid-template-columns: 48px 1fr;
		gap: 8px;
	}
	.kb-hourrow {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 14px;
	}
	.kb-hourrow .range {
		flex: 1 1 100%;
	}
	.kb-hourrow .loc {
		flex: 1 1 100%;
	}
	.kb-dfoot, .kb-modal-foot, .kb-cardfoot.split {
		flex-wrap: wrap;
	}
	.kb-rescard-head {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	/* Fussleiste der Mietvorgangs-Karte: nebeneinander wird es zu eng - Rechnungslink
	   bleibt oben, der Aktionsbutton rutscht rechtsbuendig darunter */
	.kb-rescard-foot {
		flex-wrap: wrap;
		row-gap: 15px;
	}
	/* Listen-Fussleiste (dashboard.paging.php): drei Bloecke untereinander, zentriert */
	.kb-pagebar {
		flex-wrap: wrap;
		row-gap: 12px;
		justify-content: center;
	}
	.kb-pagebar .kb-pagecount,
	.kb-pagebar .kb-pagepick,
	.kb-pagebar .kb-perpage {
		flex: 1 1 100%;
		justify-content: center;
		text-align: center;
	}
	/* Abgeschaltete Trefferzahl (dashboardPaging mit $SHOW_COUNT=false) laesst eine leere
	   Huelle stehen - auf dem Desktop noetig als Flex-Platzhalter, mobil wuerde sie eine
	   leere Zeile samt row-gap erzeugen */
	.kb-pagebar .kb-pagecount:empty {
		display: none;
	}
	.kb-formrow .f.radios {
		padding-top: 0;
	}
	.kb-stepperwrap {
		width: 100%;
	}

	.kb-toolbar .spacer {
		display: none;
	}

	#Content .cms-claim.bubble .claim-title {
		font-size: 1em;
	}

	.fleet2026 .fleet-card .illu {
		max-height: 170px;
	}

	.kb-panel .floating-label {
		margin-top: 10px;
	}

	.kb-panel .flex-row:not(:first-child) > .floating-label,
	.kb-panel .flex-row + .flex-row,
	.kb-panel .Space10 + .floating-label {
		margin-top: 0px;
	}

	#Content .fleetslider2026 + script + .cms-claim {
		margin: 0 auto 15% auto;
	}

	#Content .cms-teaser:not(.blue) .teaser-content,
	#Content .cms-teaser .teaser-content {
		flex: auto;
		padding: 4% 0 0 0 !important;
		margin: 0 !important;
	}

	#Content .cms-teaser:not(.blue) .teaser-content {
		padding: 18% 7% 7% 7% !important;
	}

	#Content .cms-teaser:not(.blue) .teaser-media {
		transform: translateY(50px);
	}

	#Content .cms-teaser.blue .teaser-button {
		margin-top: 4%;
	}

	#Content .cms-teaser.blue {
		gap: 0;
	}

	#Content .cms-teaser:not(.blue) {
		margin-top: 0;
		margin-bottom: 0;
	}

	.contact2026 .contact-card {
		padding: 5% 5%;
	}
}

@media screen and (max-width: 500px) {
	/* schmale Karte: Aktionsbutton der Mietvorgangs-Fussleiste ueber die volle Breite */
	.kb-rescontrols input#ButtonStart,
	.kb-rescontrols input#ButtonFinish {
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 420px) {
	/* Vermieter-Dashboard "Meine Vorgaenge": die laengere Kennung "Standard" (90px statt 62px
	   bei "24/7") sprengt auf schmalen Geraeten die Kopfzeile - gemessen fiel sie bei 361px
	   auf eine dritte Zeile. Engere Spaltenabstaende schaffen den noetigen Platz und lassen
	   auch bei 375px Luft statt der vorherigen zwei Pixel. */
	.kb-daylist .dayrow {
		gap: 5px 8px;
	}
}

@media screen and (max-width: 360px) {
	/* Vermieter-Dashboard "Meine Vorgaenge": gemessen bei 320px stehen der Zeile 228px zur
	   Verfuegung, die Kopfzeile braucht mit Modell-Icon (36), Zeitraum (125) und Kennung
	   (62 bei "24/7", 90 bei "Standard") samt Abstaenden 253 bis 281px. Damit sie auch hier
	   zweizeilig bleibt, entfaellt hier das rein dekorative Modell-Icon (der engere
	   Spaltenabstand kommt aus dem 420px-Block); ohne Icon braucht der Anhaengername
	   auch keine Einrueckung mehr. */
	.kb-daylist .dayrow .ticon {
		display: none;
	}
	.kb-daylist .dayrow .what {
		margin-left: 0;
	}
}