/*
 * Partnerportal auf Handy und Tablet (Fork portal-mobil, Ansage Sebastian 27.10.2026):
 * alles bedienbar machen, ohne das Design umzubauen. Die Regeln wirken nur bis 991 px
 * Breite; darüber sieht das Portal aus wie bisher. Was es nur auf Handy und Tablet
 * gibt (Menü-Button, Leiste im Warenkorb, Text nur in Kartenansicht), ist darüber
 * ausgeblendet. Beschreibung: docs/11, Abschnitt „Handy und Tablet“.
 *
 * Stufen wie in style_neu.css: bis 991 px (m-, Tablet hochkant und Handy: Seitenleiste
 * wird Menü), bis 767 px und bis 575 px (Handy), dazu 576 bis 991 px für Kartentabellen.
 */

.nav-schalter,
.nav-zu,
.nav-hintergrund { display: none; }

/* ------------------------------------------------------------------ */
/* Tablet hochkant und Handy: Seitenleiste als ausklappbares Menü       */
/* ------------------------------------------------------------------ */
@media all and (max-width: 991px) {
	main.main { padding-left: 0; min-width: 0; }
	/* lange Wörter und Adressen (z. B. ein Buchungslink im Text) brechen um statt über den Rand */
	body { overflow-wrap: break-word; }

	aside.side {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 270px;
		max-width: 85vw;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 9000;
		transform: translateX(-105%);
		transition: transform .25s ease;
		box-shadow: 0 0 20px rgba(0, 0, 0, .15);
	}
	body.nav-offen aside.side { transform: none; }
	body.nav-offen { overflow: hidden; }
	body.nav-offen .nav-hintergrund {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(97, 108, 155, .35);
		z-index: 8999;
	}

	aside.side .p25 { padding: 20px; }
	aside.side ul.nav { margin-bottom: 20px !important; }
	aside.side ul.nav a { padding: 10px; }

	.nav-schalter,
	.nav-zu {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #3d4651;
		font-size: 2rem;
		cursor: pointer;
	}
	.nav-schalter { margin-right: auto; }
	.nav-zu {
		position: absolute;
		right: 4px;
		top: 4px;
		color: #fff;
	}

	header .centered { padding-left: 8px; padding-right: 8px; gap: 4px; }
	header .kopf-ohne-funktion { display: none; }

	/* Kopfzeile bleibt oben stehen (Frage Sebastian): Menü, Postfach und Warenkorb sind beim
	   Scrollen immer erreichbar. Unter Menü (9000), dessen Hintergrund (8999) und Popups (9001);
	   Sprungziele (z. B. /profil#tab-rechnungen) landen unter der Kopfzeile statt dahinter. */
	main.main > header { position: -webkit-sticky; position: sticky; top: 0; z-index: 800; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
	html { scroll-padding-top: 60px; }

	/* Fußzeile: ohne Abstand für die Seitenleiste, Links umbrechen */
	body > footer.bg-white { padding-left: 0 !important; }
	body > footer .centered { justify-content: center; flex-wrap: wrap; }
	header .kopf-studio { margin-right: 4px !important; min-width: 0; }
	header .kopf-studio-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Drei-Punkte-Menü: geht auch per Antippen auf (mobil.js setzt .offen); in Tabellen
   blendet style_neu.css das Menü mit display aus, deshalb beides */
.opcon.offen ul.options { pointer-events: all; opacity: 1; display: block; }

/* Text nur in der Kartenansicht einer Tabelle (Regeln unten in den Media Queries) */
.mobil-nur-karte { display: none; }

/* Warenkorb: Leiste mit Gesamtpreis und „Zur Kasse“ gibt es nur auf Handy und Tablet (unten) */
.warenkorb-leiste { display: none; }

/* ------------------------------------------------------------------ */
/* Tablet und Handy: Tabellen, Popups, Menüs                           */
/* ------------------------------------------------------------------ */
@media all and (max-width: 991px) {
	/* Tabellen ohne eigenen Scrollbereich wischt man seitlich (mobil.js legt die Hülle an) */
	.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
	/* halbe Karten mit Tabelle bekommen die ganze Breite */
	.card.w50:has(table.simple-table) { width: 100% !important; }

	/*
	 * Kartentabellen: .mobil-karten-tablet schon auf dem Tablet, .mobil-karten (unten) erst auf
	 * dem Handy. Jede Zeile wird eine Karte: die erste Zelle ist der Titel, die übrigen stehen
	 * mit dem Spaltennamen darüber (mobil.js setzt data-label) in einem Raster. Über die ganze
	 * Breite gehen der Titel, Zellen mit .mobil-breit, Zellen mit colspan und die Aktionen; die
	 * Einträge des Drei-Punkte-Menüs stehen dort als Buttons. .mobil-nur-karte zeigt Text nur
	 * in der Kartenansicht (z. B. „Bestell-Nr.“ vor der Nummer im Titel).
	 */
	table.mobil-karten-tablet, table.mobil-karten-tablet tbody { display: block; width: 100%; }
	table.mobil-karten-tablet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	table.mobil-karten-tablet tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 14px; padding: 12px 8px; border-bottom: 1px solid #e3e5ea; }
	table.mobil-karten-tablet tbody td { display: block; width: auto; min-width: 0; padding: 0 !important; border: 0 !important; text-align: left !important; overflow-wrap: anywhere; }
	table.mobil-karten-tablet tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 1.1rem; font-weight: 500; color: #626b84; }
	table.mobil-karten-tablet tbody td:first-child,
	table.mobil-karten-tablet tbody td.mobil-breit,
	table.mobil-karten-tablet tbody td[colspan],
	table.mobil-karten-tablet tbody td:has(.opcon) { grid-column: 1 / -1; }
	table.mobil-karten-tablet tbody td:first-child::before { display: none; }
	table.mobil-karten-tablet tbody td:first-child:not([colspan]):not([data-label=""]) { font-size: 1.5rem; font-weight: 500; color: #3d4651; }
	table.mobil-karten-tablet tbody td:empty,
	table.mobil-karten-tablet tbody td:has(.opcon):not(:has(ul.options li)) { display: none; }
	table.mobil-karten-tablet .mobil-nur-karte { display: inline; }
	table.mobil-karten-tablet td .opcon > a.nolink { display: none; }
	table.mobil-karten-tablet td .opcon ul.options { position: static; display: flex !important; flex-wrap: wrap; gap: 6px; opacity: 1; pointer-events: all; white-space: normal; text-align: left; background: none; box-shadow: none; }
	table.mobil-karten-tablet td .opcon ul.options li { border: 0; }
	table.mobil-karten-tablet td .opcon ul.options a { padding: 7px 12px; border: 1px solid #d3d3d3; border-radius: 3px; background: #fff; color: #3d4651; }

	/* Kartentabellen mit Sortierung (.mobil-sortierleiste): die Spaltenköpfe bleiben als Sortierleiste stehen */
	table.mobil-sortierleiste thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; }
	table.mobil-sortierleiste thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; border: 0; }
	table.mobil-sortierleiste thead th { display: block; padding: 5px 9px; border-radius: 4px; font-size: 1.2rem; }
	table.mobil-sortierleiste thead th:empty,
	table.mobil-sortierleiste thead th.leer { display: none; }

	/* Eingabefelder mit 16 px: kleinere Schrift lässt iOS beim Antippen in die Seite zoomen */
	input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"],
	input[type="tel"], input[type="url"], input[type="date"], select, textarea { font-size: 16px; }

	/* Popups: volle Breite des Bildschirms, weniger Rand */
	#popwrapper { padding: 10px; }
	#popwrapper .popdetails { max-width: 100%; }
	.showcontent { max-width: calc(100vw - 20px) !important; max-height: calc(100vh - 20px); padding: 25px 20px; }
	a#popclose, a.popclose { padding: 14px; }

	/* Einträge im Drei-Punkte-Menü gut antippbar */
	ul.options a { padding: 10px 14px; }

	/* Suchfelder breiter */
	.form-field.form-field-icon.w25 { width: 50% !important; }

	/* Filterleisten in Karten umbrechen statt über den Rand */
	.card.flx-hend { flex-wrap: wrap; }

	/* Anmelden und Passwort vergessen: Bild weg, Formular in voller Breite mit weniger Rand */
	.loginwrapper .w50-f.s-hide { display: none !important; }
	.loginwrapper .w50-f.p80 { width: 100% !important; padding: 40px 20px !important; }
	.loginwrapper .w65 { width: 100% !important; max-width: 480px; }

	/* Tipps (Entwurfsseite): Terminbuchung mit Kalender untereinander */
	.card.flx-spc:has(#calendar) > div.w50 { width: 100% !important; flex: 0 0 100% !important; }

	/* Beschriftung und Wert (.mobil-infos: Präventionskurse, Firmenfitness, Speaker):
	   untereinander statt in zwei schmalen Spalten */
	.mobil-infos > p.w30, .mobil-infos > p.w70 { width: 100% !important; }
	.mobil-infos > p.w30 { margin-bottom: 2px !important; }
	/* Trainer-Zugang: Laptop-Bild weg, Zugangsfelder in voller Breite, Beschriftung mit fester Breite */
	.spezhide { display: none !important; }
	.spezw100 { width: 100% !important; flex: 0 0 100% !important; }
	.spezw100 > .flx-spc { flex-wrap: nowrap; }
	.spezw100 .flx-spc > p.w20 { width: 88px !important; flex: 0 0 88px; }
	.spezw100 .flx-spc > p.w80 { width: auto !important; flex: 1 1 auto; min-width: 0; }
	.spezw100 .flx-spc > p.w80 > .w70-f { overflow-wrap: anywhere; }

	/* Kursbericht: Kacheln mit .kb-kachel-halb bleiben zu zweit nebeneinander (im Dashboard die
	   beiden Vergleichskacheln, im Kursbericht alle vier) */
	.card.w25.kb-kachel-halb { width: 49% !important; flex: 0 0 49% !important; -webkit-hyphens: auto; hyphens: auto; }

	/* Speaker-Event: Kacheln mit großen Namen zu zweit, Name etwas kleiner */
	.w33-f.bg-black.rndx2:has(.h1) { width: 49% !important; flex: 0 0 49% !important; }
	.w33-f.bg-black.rndx2 .h1 { font-size: 3rem; }

	/* Formulare: Beschriftung mit fester Breite, damit sie nicht abgeschnitten wird */
	.form-field.flx-spc > label.w15 { width: auto !important; flex: 0 0 110px; }
	.form-field.flx-spc > .w85 { width: auto !important; flex: 1 1 auto; min-width: 0; }

	/* Schrittanzeige der Kasse: Schritte umbrechen statt über den Rand */
	ul.steplist { flex-wrap: wrap; gap: 4px 0; padding-top: 8px; padding-bottom: 8px; }
	.steplist a, .steplist li:first-of-type a { padding: 8px 14px 8px 0; }

	/* Mengenfelder (Warenkorb, Codes): Zahl lesbar, + und - antippbar */
	.form-number.w30, .form-number.w50 { width: auto !important; min-width: 100px; }
	.form-number .btn-plus, .form-number .btn-minus, .form-number button { width: 36px; font-size: 14px; }
	.form-number input[type="number"] { padding-right: 40px; }

	/* Warenkorb: Zusammenfassung unter den Artikeln statt in einer schmalen Spalte daneben;
	   Gesamtpreis und „Zur Kasse“ unten am Bildschirm, bis der Button der Zusammenfassung zu
	   sehen ist (der Warenkorb setzt dann .weg) */
	.warenkorb-spalten > .w70, .warenkorb-spalten > .w30 { width: 100% !important; flex: 0 0 100% !important; }
	.warenkorb-spalten > .w30 { margin-top: 20px; }
	td .flx-spc:has(> .form-number) { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; }
	td .flx-spc:has(> .form-number) > .w50 { width: auto !important; flex: 0 0 auto !important; }
	.warenkorb-spalten td.tar, .warenkorb-spalten td[data-id^="summestaffel"] { white-space: nowrap; }
	.warenkorb-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -2px 10px rgba(0, 0, 0, .08); transition: transform .2s ease; }
	.warenkorb-leiste.weg { transform: translateY(110%); }
	.warenkorb-leiste .btn { padding: 12px 22px; }

	/* Neue Codes und Kampagnen: Artikelkarten in voller Breite, sonst bleibt neben dem Bild kaum
	   Platz für Text, Menge und Button */
	.w50.shop-karte { width: 100% !important; flex: 0 0 100% !important; }

	/* Kasse, Schritt „Individualisierung“: die Auswahl „Logo & Kontakt“ steht unter Bild und
	   Name statt mit 60 px Abstand daneben */
	.orderStep .flx-hstrt.gap60 { flex-wrap: wrap; gap: 12px 16px; }
	.orderStep .flx-hstrt.gap60 > div:nth-child(2) { flex: 1 1 150px; min-width: 0; }

	/* Reiter (Profil u. a.): auf dem Tablet seitlich wischbar statt über den Rand (auf dem Handy
	   brechen sie um, siehe unten) */
	.tab-nav-simple { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.tab-nav-simple::-webkit-scrollbar { display: none; }
	.tab-nav-simple li { flex: 0 0 auto; }
	.tab-nav-simple a { padding: 12px 16px; white-space: nowrap; }

	/* Benachrichtigungen (Dashboard, Postfach): Symbol und Datum in einer Zeile, Betreff darunter */
	.opennewsletterpopup.flx-spc, .openMessagepopup.flx-spc { flex-wrap: wrap; justify-content: flex-start; }
	.opennewsletterpopup > .w5, .openMessagepopup > .w5 { width: 24px !important; }
	.opennewsletterpopup > .w25, .openMessagepopup > .w25 { width: calc(100% - 24px) !important; }
	.opennewsletterpopup > .w70, .openMessagepopup > .w70 { width: 100% !important; padding-left: 24px; }
}

/* Kartentabellen mit Platz für drei und mehr Spalten (großes Handy, Tablet): .mobil-breit
   nimmt zwei Spalten statt der ganzen Zeile */
@media all and (min-width: 576px) and (max-width: 991px) {
	table.mobil-karten-tablet tbody td.mobil-breit,
	table.mobil-karten tbody td.mobil-breit { grid-column: span 2; }
}

/* ------------------------------------------------------------------ */
/* Handy                                                               */
/* ------------------------------------------------------------------ */
@media all and (max-width: 767px) {
	/* Karten und Kacheln nebeneinander werden untereinander gestellt */
	.card.w25, .card.w33, .card.w50, .card.w66, .card.w75 { width: 100% !important; flex: 0 0 100% !important; }
	.w33.bg-black.rndx2, .w33-f.bg-black.rndx2,
	.w33-f.bg-black.rndx2:has(.h1) { width: 100% !important; flex: 0 0 100% !important; margin-bottom: 10px; min-height: 110px; }
	/* Filterleisten in Karten (Marketing u. a.) links beginnen */
	.card.flx-hend { justify-content: flex-start; }
	/* Spalten in Zeilen (Profil, Stammdaten, Warenkorb u. a.) untereinander */
	.flx-spc > div.w25, .flx-spc > div.w30, .flx-spc > div.w33, .flx-spc > div.w40, .flx-spc > div.w45, .flx-spc > div.w50, .flx-spc > div.w60,
	.flx-spc > div.w55, .flx-spc > div.w66, .flx-spc > div.w70, .flx-spc > div.w75 { width: 100% !important; flex: 0 0 100% !important; }
	.flx-spc > .w33, .flx-spc > .w45, .flx-spc > .w50, .flx-spc > .w55, .flx-spc > .w66 { width: 100% !important; flex: 0 0 100% !important; }

	/* Kopfzeilen in Karten (z. B. Kursbericht „Die letzten zwölf Monate“ mit Umschalter): Abstand,
	   wenn sie umbrechen */
	.card > .flx-spc.flx-acnt { row-gap: 10px; }

	/* Kursbericht, „Das fällt auf“: Text in voller Breite, Button darunter */
	.kb-hinweis > span.light { flex: 1 1 calc(100% - 46px) !important; }
	.kb-hinweis > span.flx-acnt { margin-left: 46px; }

	/* Marketing, Kampagne: Vorschaubilder bleiben nebeneinander, weniger Rand ums Bild */
	#kampagnenbild > div.w25 { width: 23% !important; flex: 0 0 23% !important; }
	.card > .w50.pl80 { padding-left: 0 !important; padding-right: 0 !important; }
	.card > .w50.pt40 { padding-top: 20px !important; padding-bottom: 10px !important; }

	/* Karussell mit zwei breiten Kacheln (Ansprechpartner, Ideen für Social Media): eine Kachel
	   je Ansicht (mobil.js), Bild und Text nebeneinander, Button unter dem Text statt darüber */
	.slickCircle2 .flx-spc > div.w25 { width: 30% !important; flex: 0 0 30% !important; }
	.slickCircle2 .flx-spc > div.w75 { width: 66% !important; flex: 0 0 66% !important; padding-right: 0 !important; padding-bottom: 0 !important; }
	.slickCircle2 .flx-spc > div.w75 > footer { position: static !important; margin-top: 10px; }
	.slickCircle2 .flx-spc > div.w25 img { max-width: 100%; height: auto; }

	/* Kartentabellen .mobil-karten: wie .mobil-karten-tablet oben, erst auf dem Handy */
	table.mobil-karten, table.mobil-karten tbody { display: block; width: 100%; }
	table.mobil-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	table.mobil-karten tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 14px; padding: 12px 8px; border-bottom: 1px solid #e3e5ea; }
	table.mobil-karten tbody td { display: block; width: auto; min-width: 0; padding: 0 !important; border: 0 !important; text-align: left !important; overflow-wrap: anywhere; }
	table.mobil-karten tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 1.1rem; font-weight: 500; color: #626b84; }
	table.mobil-karten tbody td:first-child,
	table.mobil-karten tbody td.mobil-breit,
	table.mobil-karten tbody td[colspan],
	table.mobil-karten tbody td:has(.opcon) { grid-column: 1 / -1; }
	table.mobil-karten tbody td:first-child::before { display: none; }
	table.mobil-karten tbody td:first-child:not([colspan]):not([data-label=""]) { font-size: 1.5rem; font-weight: 500; color: #3d4651; }
	table.mobil-karten tbody td:empty,
	table.mobil-karten tbody td:has(.opcon):not(:has(ul.options li)) { display: none; }
	table.mobil-karten .mobil-nur-karte { display: inline; }
	table.mobil-karten td .opcon > a.nolink { display: none; }
	table.mobil-karten td .opcon ul.options { position: static; display: flex !important; flex-wrap: wrap; gap: 6px; opacity: 1; pointer-events: all; white-space: normal; text-align: left; background: none; box-shadow: none; }
	table.mobil-karten td .opcon ul.options li { border: 0; }
	table.mobil-karten td .opcon ul.options a { padding: 7px 12px; border: 1px solid #d3d3d3; border-radius: 3px; background: #fff; color: #3d4651; }
	table.mobil-karten td .w30 { width: auto !important; }
	/* Warenkorb: Zusatzzeile „+ Logo/Kontakt“ nur mit Name und Summe (Menge und Stückpreis sind dort leer) */
	table.mobil-karten tr.zusatz td:not(:first-child):not(:last-child) { display: none; }

	/* Größere Tippflächen für kleine Buttons */
	.btn.btn-small { padding: 7px 11px; }

	/* Lange Wörter in Überschriften mit Trennstrich umbrechen (z. B. „Zugangsvoraussetzungen“) */
	h1, h2, h3, h4, .h1, .h2, .h3, .h4 { -webkit-hyphens: auto; hyphens: auto; }

	/* Formulare: Beschriftung über dem Feld statt daneben */
	.form-field.flx-spc { flex-wrap: wrap; }
	.form-field.flx-spc > label,
	.form-field.flx-spc > .w15,
	.form-field.flx-spc > .w20,
	.form-field.flx-spc > .w25,
	.form-field.flx-spc > .w75,
	.form-field.flx-spc > .w80,
	.form-field.flx-spc > .w85 { width: 100% !important; flex: 0 0 100%; }
	.form-field.flx-spc > label { padding-top: 6px; padding-bottom: 2px; flex: 0 0 100%; }
	.showcontent header { margin-bottom: 15px !important; }

	/* Suchfelder in voller Breite */
	.form-field.form-field-icon.w25 { width: 100% !important; }

	/* Kasse: Zusammenfassung mit Abstand unter dem Schritt */
	.kasse-spalten > .w30 { margin-top: 20px; }

	/* Postfach: Symbol und Datum in einer Zeile, Betreff darunter */
	table.postfach-mobil thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	table.postfach-mobil, table.postfach-mobil tbody { display: block; width: 100%; }
	table.postfach-mobil tr { display: grid; grid-template-columns: 24px 1fr; gap: 2px 6px; padding: 10px 6px; border-bottom: 1px solid #e3e5ea; cursor: pointer; }
	table.postfach-mobil td { display: block; padding: 0 !important; border: 0 !important; }
	table.postfach-mobil td:nth-child(3) { grid-column: 2; }

	/* Reiter: auf dem Handy umbrechen statt seitlich wischen, damit alle Reiter zu sehen sind */
	.tab-nav-simple { flex-wrap: wrap; gap: 6px; overflow-x: visible; margin-bottom: 10px; }
	.tab-nav-simple a { padding: 10px 14px; border: 1px solid #dfe1e7; border-radius: 5px; }
	.tab-nav-simple li.active a { border-color: #fff; font-weight: 500; color: #3d4651; }

	/* Profil, Öffnungszeiten: Tag, Zeiten und Buttons in einer Zeile */
	#opentimes .weekday { flex-wrap: nowrap; }
	#opentimes .weekday > .w15 { width: 84px !important; flex: 0 0 84px; }
	#opentimes .weekday > .w50-f { width: auto !important; flex: 1 1 auto; min-width: 0; }
	#opentimes .weekday > .w35 { width: auto !important; flex: 0 0 auto; }
}

@media all and (max-width: 575px) {
	.centered,
	.centered-small,
	.centered-big { padding-left: 12px; padding-right: 12px; }
	.card { padding: 15px; }
	.card.cardfooter { padding-bottom: 65px; }
	header .kopf-studio { font-size: 1.3rem; }
}