/* ============================================================
Mobile-Optimierungen – Brückner Steuerberatung
Gilt nur für Handy/Tablet (max-width:760px), Desktop unverändert.
Enthält:
- klebende Kopfzeile mit Hamburger-Menü
- kürzerer CTA-Text auf schmalen Bildschirmen
- horizontale Swipe-Karussells (CSS Scroll-Snap, ohne Bibliothek)
Auf einer Seite einbinden mit:
============================================================ */
/* Standard (Desktop): Hamburger und Kurztext ausgeblendet */
.nav-toggle { display: none; }
.cta-short { display: none; }
/* Ohne JavaScript gibt es keinen Hamburger – dann bleibt das Menü
dauerhaft sichtbar (siehe Regeln weiter unten). Die Klasse `js`
setzt ein Einzeiler im jeder Seite. */
@media (max-width: 760px) {
/* --- Klebende Kopfzeile --- */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
padding-top: 14px !important;
padding-bottom: 14px !important;
box-shadow: 0 1px 12px rgba(11,61,46,0.10);
}
/* --- Hamburger-Schaltfläche (nur wenn JavaScript verfügbar ist) --- */
html.js .nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block;
width: 24px;
height: 2px;
background: #0B3D2E;
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
/* geöffnet: Balken werden zum X */
.site-header.nav-open .nav-toggle-bars { background: transparent; }
.site-header.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
/* --- Menü: gestapelt unter der Leiste --- */
.site-nav {
flex-basis: 100%;
width: 100%;
flex-direction: column;
align-items: flex-start !important;
gap: 2px !important;
margin-top: 6px;
}
/* Nur mit JavaScript wird es eingeklappt und per Hamburger geöffnet.
Ohne JavaScript bleibt es sichtbar – die Seite ist also auch dann
vollständig bedienbar. */
html.js .site-nav { display: none !important; }
html.js .site-header.nav-open .site-nav { display: flex !important; }
.site-nav a:not(.btn-cta) { padding: 12px 2px; font-size: 15px; }
.site-nav .btn-cta { margin-top: 10px; width: 100%; }
/* --- CTA kompakter: Kurztext statt Langtext --- */
.cta-full { display: none; }
.cta-short { display: inline; }
/* --- Swipe-Karussells --- */
.swipe {
display: flex !important;
grid-template-columns: none !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
gap: 14px !important;
padding-bottom: 12px;
scroll-padding-left: 2px;
scrollbar-width: thin;
}
.swipe > * {
scroll-snap-align: start;
flex: 0 0 82%;
min-width: 0;
}
/* schmalere Karten – mehr Vorschau der nächsten Karte */
.swipe-team > * { flex-basis: 66%; }
/* dezente Scrollleiste als Hinweis „hier kann gewischt werden" */
.swipe::-webkit-scrollbar { height: 6px; }
.swipe::-webkit-scrollbar-thumb { background: rgba(11,61,46,0.25); border-radius: 999px; }
.swipe::-webkit-scrollbar-track { background: transparent; }
/* ------------------------------------------------------------------
Aufzählungszeilen zusammenhalten
Die allgemeine Regel weiter oben im Seitenkopf lässt ALLE Flex-Reihen
umbrechen, damit auf schmalen Schirmen nichts überläuft. Bei Zeilen aus
„kleiner Marker + Text" (gelber Punkt, Haken, Nummer, Ankreuzfeld) ist
das falsch: der Text rutscht unter den Marker statt daneben zu stehen.
Diese Zeilen bleiben deshalb einzeilig; der Text selbst darf umbrechen.
Hinweis zur Schreibweise: Die Regel im Seitenkopf ist bewusst hoch
gewichtet. Die Selektoren hier müssen sie deshalb übertreffen, daher
das zusätzliche :not([hidden]). Ohne das greift die Regel nicht.
Wichtig: Die Regel gilt nur für Zeilen mit GENAU ZWEI Teilen
(Marker + Text). Zeilen mit drei Teilen – etwa in den
Standardleistungen „Symbol + Titel + Beschreibung" – dürfen weiter
umbrechen; sonst würden dort die Überschriften mitten im Wort
getrennt („Jahresab schluss"). Das leistet :not(:has(> :nth-child(3))).
------------------------------------------------------------------ */
li[style*="display:flex"]:not([style*="flex-direction:column"]):not([hidden]):not(:has(> :nth-child(3))),
label[style*="display:flex"]:not([style*="flex-direction:column"]):not([hidden]):not(:has(> :nth-child(3))),
[style*="display:flex"][style*="min-width:150px"]:not([hidden]):not(:has(> :nth-child(3))),
[style*="display:flex"]:not([hidden]):has(> [style*="flex-shrink:0"]):not(:has(> :nth-child(3))),
[style*="display:flex"]:not([hidden]):has(> input[type="checkbox"]):not(:has(> :nth-child(3))) {
flex-wrap: nowrap !important;
}
/* Der Textteil darf schrumpfen und intern umbrechen, statt zu überlaufen */
li[style*="display:flex"]:not([hidden]):not(:has(> :nth-child(3))) > *,
label[style*="display:flex"]:not([hidden]):not(:has(> :nth-child(3))) > *,
[style*="display:flex"][style*="min-width:150px"]:not([hidden]):not(:has(> :nth-child(3))) > *,
[style*="display:flex"]:not([hidden]):has(> [style*="flex-shrink:0"]):not(:has(> :nth-child(3))) > *,
[style*="display:flex"]:not([hidden]):has(> input[type="checkbox"]):not(:has(> :nth-child(3))) > * {
min-width: 0;
}
}
/* ============================================================
Tabletbereich 761 bis 900 px
Die Sicherungen im Seitenkopf greifen erst ab 760 px abwärts.
Zwischen 761 und 900 px lief deshalb an einigen Stellen Inhalt
aus dem Bild: die Standardleistungs-Zeilen (fester Titelbereich
von 220 px neben dem Text) und lange Schaltflächen mit
„white-space:nowrap". Hier gelten dieselben Sicherungen wie
am Handy.
============================================================ */
@media (min-width: 761px) and (max-width: 900px) {
/* feste Mindestbreiten dürfen schrumpfen (Reiter mit 150 px ausgenommen) */
[style*="min-width"]:not([style*="min-width:150px"]) { min-width: 0 !important; }
/* Flex-Reihen dürfen umbrechen statt überzulaufen */
[style*="display:flex"]:not(nav):not([style*="flex-direction:column"]),
[style*="display: flex"]:not(nav):not([style*="flex-direction: column"]) {
flex-wrap: wrap;
}
/* lange Schaltflächen brechen um, statt aus dem Bild zu laufen */
a[style*="white-space:nowrap"], button[style*="white-space:nowrap"],
a[style*="white-space: nowrap"], button[style*="white-space: nowrap"] {
white-space: normal;
height: auto;
min-height: 49px;
padding: 12px 20px;
line-height: 1.25;
text-align: center;
max-width: 100%;
}
/* Aufzählungszeilen bleiben auch hier einzeilig (Marker neben Text).
Wieder nur Zeilen mit genau zwei Teilen – siehe Begründung oben. */
li[style*="display:flex"]:not([hidden]):not(:has(> :nth-child(3))),
label[style*="display:flex"]:not([hidden]):not(:has(> :nth-child(3))),
[style*="display:flex"]:not([hidden]):has(> [style*="flex-shrink:0"]):not(:has(> :nth-child(3))),
[style*="display:flex"]:not([hidden]):has(> input[type="checkbox"]):not(:has(> :nth-child(3))) {
flex-wrap: nowrap !important;
}
}