/* ==========================================================================
BCS Mobile – Mobile-Overlay (Übergangsschicht) norbloom
Datei: wp-content/uploads/norbloom/bcs-mobile.css
Lader: wp-content/mu-plugins/norbloom-mobile-overlay.php
Stand: 08.10.2026 – Entwurf 40 (global, Startseite, Tarifseite, Firmenhandys mieten, Verwaltung,
Warum BCS, Über uns, Netz-Seiten, Certified, Kundenstimmen, Karriere, Circle, Kontakt, News; geprüft bei 390 px)
Für Dirk – so ist die Datei gedacht:
- Sie ändert NUR Tablet/Mobile. Jede Regel steht in einem Media Query
(Oxygen-Breakpoints 1023 / 767 px). Desktop bleibt wie es ist.
- Sie lädt am Ende des , also nach global-settings.css und
selectors.css.
- Jeder Selektor beginnt mit "html:not(#nb) body". Das ":not(#nb)" trifft
immer zu und hebt die Spezifität über jede reine Klassen-Kette. Nötig,
weil in global-settings.css viele Mobile-Regeln mit mehreren Klassen
und !important stehen (z. B. ".c-stack-header-left .c-stack-title").
- Pro Block steht: welcher Figma-Stil, welche Klassen, warum. Die Werte
lassen sich 1:1 als Breakpoint-Werte in die Oxygen-Klassen übernehmen;
danach kann der Block hier raus.
- Abschalten: Lader-Datei löschen (oder NB_MOBILE_OVERLAY_MODE auf 'off').
Nebenbefund für Dirk: selectors.css lädt NACH global-settings.css. Mobile-
Regeln in global-settings.css mit nur einer Klasse und ohne !important
verlieren deshalb gegen den Desktop-Wert der Klasse (Beispiel:
.c-video-feature-stage-title bleibt mobil bei 50 px statt 32 px).
========================================================================== */
/* ==========================================================================
0 SICHERHEITSNETZ (Tablet + Mobile, bis 1023 px)
========================================================================== */
@media (max-width: 1023px) {
/* 0.1 Seitliches Scrollen
"clip" statt "hidden": schneidet Überstand ab, macht body aber nicht zum
Scroll-Container (hidden würde Sticky-Elemente wie den Header stören).
Ursachen werden zusätzlich pro Komponente behoben (Abschnitt 5). */
html:not(#nb),
html:not(#nb) body {
overflow-x: clip !important;
}
/* 0.2 Sticky außerhalb der Navigation aus
Mobil stapeln die Spalten untereinander. Die klebende FAQ-Überschrift
und die Service-Seitenleiste legen sich dann über den Inhalt.
Klassen: .faq-sidebar (in global-settings bis 900 px bewusst sticky),
.service-links-sidebar. Header/Menü bleiben unberührt. */
html:not(#nb) body .faq-sidebar,
html:not(#nb) body .c-faq .faq-sidebar,
html:not(#nb) body .service-links-sidebar {
position: static !important;
top: auto !important;
}
}
/* ==========================================================================
1 TEXTSTILE (Mobile, bis 767 px)
Zuordnung über das Desktop-Aussehen der Klasse -> Figma-Stil -> Mobile-Wert.
Unverändert mobil (laut Figma-Mobile-Frame): H3 22/130 %, H4 18/24,
Body Regular 16/26, Body Small 14/20, Overline 12/20, Label XS 12/16.
========================================================================== */
@media (max-width: 767px) {
/* 1.1 H1 – Figma Mobile 34/44 (Desktop-Klasse: 40/47; Dirks Mobile-Wert
war 34 px mit Zeilenhöhe 1.08 = sehr eng bei zwei Zeilen) */
html:not(#nb) body .hero-title {
font-size: 34px !important;
line-height: 44px !important;
}
/* 1.2 H2 – Figma "Mobile/Heading/H2" 28/38
Alle Klassen, die am Desktop 40/48 Inter Tight 600 sind. Bisher mobil
unverändert 40/48 (4–6 Zeilen pro Überschrift, lange Wörter laufen
aus dem Bild). */
html:not(#nb) body .is-h2,
html:not(#nb) body .faq-title,
html:not(#nb) body .c-split-title,
html:not(#nb) body .c-c-split-title,
html:not(#nb) body .c-split-header-title,
html:not(#nb) body .c-stats-title,
html:not(#nb) body .c-benefits-title,
html:not(#nb) body .c-stack-title,
html:not(#nb) body .c-stack-title-small,
html:not(#nb) body .c-costcalc-title,
html:not(#nb) body .c-compare-title,
html:not(#nb) body .c-audience-title,
html:not(#nb) body .c-video-testimonials-title,
html:not(#nb) body .c-video-feature-title,
html:not(#nb) body .c-service-overview-title,
html:not(#nb) body .service-links-title,
html:not(#nb) body .c-check-process-title,
html:not(#nb) body .c-tariff-choice-title,
html:not(#nb) body .c-industry-slider-title,
html:not(#nb) body .c-device-slider-title,
html:not(#nb) body .c-device-slider-footer-title,
html:not(#nb) body .c-advantages-title,
html:not(#nb) body .c-request-form-title,
html:not(#nb) body .c-control-header-title,
html:not(#nb) body .c-co2-title,
html:not(#nb) body .c-certificate-header-title,
html:not(#nb) body .c-certificate-title,
html:not(#nb) body .c-horizontal-story-title,
html:not(#nb) body .c-legal-hero-title,
html:not(#nb) body .c-metric-value {
font-size: 28px !important;
line-height: 38px !important;
/* Notbremse: ein einzelnes Wort, das breiter ist als der Bildschirm,
bricht um statt aus dem Bild zu laufen */
overflow-wrap: break-word !important;
}
/* 1.3 Stat – Figma "Mobile/Other/Stat" 20/28
Im Mobile-Frame bilden Zahl und Titel EINEN Block in 20/28 ("Über 25
Jahre / Erfahrung"), darunter 24 px Abstand, dann der Text in 14/20.
Klassen: .c-stat-value (Desktop 32/40), .c-stat-title (Desktop 18/24). */
html:not(#nb) body .c-stat-value,
html:not(#nb) body .c-stat-title {
font-size: 20px !important;
line-height: 28px !important;
}
html:not(#nb) body .c-stat-card {
gap: 0 !important; /* war 64 px zwischen Zahl und Titel */
}
html:not(#nb) body .c-stat-content {
gap: 24px !important; /* Titel -> Text, wie im Frame */
}
/* 1.4 Label im großen Button – Figma Mobile "Label XS" 12/16
Der große Button (.is-tall, Desktop Label 14/18, 48 px hoch) ist im
Mobile-Frame 40 px hoch: Label 12/16 Semibold, Innenabstand 12/14 px,
Pfeil-Button 40 x 40. Behebt nebenbei, dass "Kostenloser Business
Mobilfunk Check" mit Pfeil breiter war als der Bildschirm. */
html:not(#nb) body .c-btn.is-tall .btn-txt {
font-size: 12px !important;
line-height: 16px !important;
font-weight: 600 !important;
}
html:not(#nb) body .c-btn.is-tall:not(.is-btn-icon) {
padding: 12px 14px !important;
}
html:not(#nb) body .c-btn.is-tall.is-btn-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
flex: 0 0 40px !important;
}
}
/* ==========================================================================
1b TEXTSTILE – VORSCHLÄGE (Mobile, bis 767 px)
Für diese Stile gibt es im Mobile-Frame kein Beispiel. Werte sind aus dem
Frame abgeleitet und warten auf Moritz' Bestätigung.
========================================================================== */
@media (max-width: 767px) {
/* 1b.1 Body Large 18/26 -> 16/26
Im Mobile-Frame ist Fließtext unter H2 durchgehend 16/26. */
html:not(#nb) body .c-conversion-copy,
html:not(#nb) body .c-video-feature-copy,
html:not(#nb) body .c-audience-copy,
html:not(#nb) body .c-video-testimonials-copy,
html:not(#nb) body .c-certificate-benefit-text {
font-size: 16px !important;
line-height: 26px !important;
}
/* 1b.2 Funnel Headline 48/56 -> 34/40
Klasse: .c-conversion-title ("Business Mobilfunk Check"). Bewusst eine
Stufe über H2 (28): darunter steht die Frage in 22 px, mit 28 px war
der Abstand in der Rangfolge zu klein. */
html:not(#nb) body .c-conversion-title {
font-size: 34px !important;
line-height: 40px !important;
}
}
/* ==========================================================================
2 AUSRICHTUNG: LINKSBÜNDIG (Mobile, bis 767 px)
In global-settings.css wird ab 1199 px fast alles zentriert. Mobil lesen
sich mehrzeilige Überschriften und Fließtext linksbündig besser; so zeigt
es auch der Mobile-Frame. Buttons, Chips, Formular/Check-Karte, Footer und
Navigation sind bewusst NICHT enthalten. Ausnahmen, die doch zentriert
bleiben sollen: Abschnitt 6.
========================================================================== */
@media (max-width: 767px) {
/* 2.1 Kopf- und Inhaltsblöcke: Kinder links anschlagen */
html:not(#nb) body .c-section-header,
html:not(#nb) body .c-split-header,
html:not(#nb) body .c-split-content,
html:not(#nb) body .c-split-copy,
html:not(#nb) body .c-stack-header,
html:not(#nb) body .c-stack-header-left,
html:not(#nb) body .c-service-overview-header,
html:not(#nb) body .c-industry-slider-header,
html:not(#nb) body .c-device-slider-header,
html:not(#nb) body .c-advantages-header,
html:not(#nb) body .c-control-header,
html:not(#nb) body .c-certificate-header,
html:not(#nb) body .c-costcalc-header,
html:not(#nb) body .c-logo-slider-header,
html:not(#nb) body .c-refurbishment,
html:not(#nb) body .c-refurbishment-content {
align-items: flex-start !important;
text-align: left !important;
}
/* 2.2 Überschriften und Fließtext der Sektionen */
html:not(#nb) body .is-h2,
html:not(#nb) body .c-split-title,
html:not(#nb) body .c-c-split-title,
html:not(#nb) body .c-split-header-title,
html:not(#nb) body .c-split-header-copy,
html:not(#nb) body .c-split-txt,
html:not(#nb) body .c-split-txt li,
html:not(#nb) body .c-split-txt strong,
html:not(#nb) body .c-stack-title,
html:not(#nb) body .c-stack-copy,
html:not(#nb) body .c-costcalc-title,
html:not(#nb) body .c-costcalc-copy,
html:not(#nb) body .c-logo-slider-title,
html:not(#nb) body .c-logo-slider-copy,
html:not(#nb) body .c-service-overview-title,
html:not(#nb) body .c-service-overview-copy,
html:not(#nb) body .c-check-process-title,
html:not(#nb) body .c-tariff-choice-title,
html:not(#nb) body .c-industry-slider-title,
html:not(#nb) body .c-industry-slider-copy,
html:not(#nb) body .c-device-slider-title,
html:not(#nb) body .c-device-slider-copy,
html:not(#nb) body .c-advantages-title,
html:not(#nb) body .c-control-header-eyebrow,
html:not(#nb) body .c-control-header-title,
html:not(#nb) body .c-co2-title,
html:not(#nb) body .c-co2-copy,
html:not(#nb) body .c-certificate-header-title,
html:not(#nb) body .c-certificate-header-copy,
html:not(#nb) body .c-refurbishment-title,
html:not(#nb) body .c-refurbishment-copy {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2.3 Aufzählungen: Punkt direkt vor dem Text (zentriert stand der Punkt
am linken Rand und der Text in der Mitte) */
html:not(#nb) body .c-split-txt ul,
html:not(#nb) body .c-split-txt ol {
padding-left: 24px !important;
text-align: left !important;
}
/* 2.4 Chips und Button-Zeilen in diesen Blöcken: links statt mittig */
html:not(#nb) body .c-split-content .c-chip,
html:not(#nb) body .c-split-content .c-info-chip,
html:not(#nb) body .c-split-content .c-eyebrows,
html:not(#nb) body .c-stack-header-left .c-info-chip,
html:not(#nb) body .c-stack-header-left .c-stack-kicker {
align-self: flex-start !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html:not(#nb) body .c-split-chips,
html:not(#nb) body .c-split-actions,
html:not(#nb) body .c-split-actions .c-btn-group,
html:not(#nb) body .c-stack-kicker,
html:not(#nb) body .c-stack-header-left .c-btn-group {
justify-content: flex-start !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ==========================================================================
3 SEITENRÄNDER (Mobile, bis 767 px)
Mobile-Frame: Inhalt steht 24 px vom Rand (354 von 402 px). Live waren es
je nach Sektion 20, 24 oder 40 px.
========================================================================== */
@media (max-width: 767px) {
/* 3.1 Standard-Container: 24 px */
html:not(#nb) body .l-container {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Panels (.l-panel) sind selbst 4 px eingerückt: 4 + 20 = 24 */
html:not(#nb) body .l-panel > .l-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* 3.2 Split-Sektion: hatte zusätzlich 20 px Innenabstand (Text bei 40 px) */
html:not(#nb) body .c-split {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 3.3 Leistungs-Karten (01 Tarif / 02 Hardware / 03 Verwaltung):
wie im Mobile-Frame 8 px breiter als der Inhalt auf jeder Seite
(Karte 370 von 402 px = 16 px Rand). Dadurch steht das Bild in der
Karte genau auf der 24-px-Linie. Aufbau der Karte: Abschnitt 5.4. */
html:not(#nb) body .c-stack-list > .c-stack-card {
margin-left: -8px !important;
margin-right: -8px !important;
width: calc(100% + 16px) !important;
max-width: none !important;
}
/* 3.4 Kundenstimmen-Slider: läuft bewusst über die volle Breite, der
Kopf hält aber 24 px Rand (Kopf und Button sind mittig, Abschnitt 6) */
html:not(#nb) body .c-testimonial-slider-header {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* 3.5 FAQ: Titel und Fragen hatten zusätzlich 16 px (Text bei 40 px) */
html:not(#nb) body .c-faq .faq-sidebar,
html:not(#nb) body .c-faq .faq-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* dazu 20 px über der Überschrift, die mobil nur den Sektionsabstand
vergrößert haben */
html:not(#nb) body .c-faq .faq-sidebar {
padding-top: 0 !important;
}
}
/* ==========================================================================
4 SEKTIONSABSTÄNDE – VORSCHLAG (Mobile, bis 767 px)
Die Desktop-Abstände 160/120 px galten mobil unverändert. Im Mobile-Frame
liegen zwischen den großen Blöcken 120 px, sonst 80 px.
Klassen: .is-space-before-160, .is-space-before-120 (padding-top).
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .l-section.is-space-before-160 {
padding-top: 120px !important;
}
html:not(#nb) body .l-section.is-space-before-120 {
padding-top: 96px !important;
}
/* 4.1 Abstand nach + Abstand vor addieren sich nicht mehr
Hat eine Sektion .is-space-after-* und die nächste .is-space-before-*,
standen beide Werte übereinander (Startseite: 96 + 96 + 20 = 212 px vor
den FAQ, 48 + 120 = 168 px vor den Vorteilen). Mobil zählt in diesem
Fall nur der Abstand der folgenden Sektion. Größter Abstand zwischen
zwei Sektionen ist damit 120 px. */
html:not(#nb) body .l-section[class*="is-space-after-"]:has(+ .l-section[class*="is-space-before-"]:not(.is-space-before-0)) {
padding-bottom: 0 !important;
}
html:not(#nb) body .l-section.is-space-after-160,
html:not(#nb) body .l-section.is-space-after-120 {
padding-bottom: 96px; /* ohne !important: 4.1 gewinnt */
}
}
/* ==========================================================================
5 KOMPONENTEN-KORREKTUREN (Mobile, bis 767 px)
Einzelfälle, die an der Startseite aufgefallen sind.
========================================================================== */
@media (max-width: 767px) {
/* 5.1 Video-Bühne: Titel im Vorschaubild
Blieb mobil bei 50 px (siehe Nebenbefund im Dateikopf) und lief über
Bildrand und Bildunterschrift. Jetzt H3-Größe, oben links. */
html:not(#nb) body .c-video-feature-stage-title {
left: 16px !important;
top: 16px !important;
width: auto !important;
max-width: calc(100% - 32px) !important;
font-size: 22px !important;
line-height: 1.3 !important;
letter-spacing: -0.4px !important;
}
html:not(#nb) body .c-video-feature-stage-title span {
padding: 1px 6px !important;
}
/* 5.2 Chip-Zeile "Tarif + Hardware + Verwaltung = 360° Paket"
War breiter als der Bildschirm und links/rechts abgeschnitten.
Jetzt schmaler gesetzt, passt bei 390 px in eine Zeile, mittig. */
html:not(#nb) body .c-stack-meta {
flex-wrap: wrap !important; /* Reserve für sehr schmale Geräte */
justify-content: center !important;
gap: 2px !important;
row-gap: 8px !important;
max-width: 100% !important;
}
html:not(#nb) body .c-stack-meta .c-info-chip {
padding-right: 8px !important;
}
html:not(#nb) body .c-stack-meta .c-info-chip:not(.is-result) {
padding-left: 8px !important;
}
html:not(#nb) body .c-stack-meta .c-stack-plus {
flex: 0 0 12px !important;
width: 12px !important;
}
/* 5.3 Zielgruppen ("Für wen ist BCS Mobile geeignet?")
- Innenabstand der grauen Fläche oben/unten 48 px (war 96/80)
- "Sim Karten" steht unter der Zahl statt daneben; so bleibt Platz
für das Status-Chip und "50 – 150" bricht nicht mehr um */
html:not(#nb) body .c-audience {
padding-top: 48px !important;
padding-bottom: 20px !important; /* wie der seitliche Abstand der Karten */
}
/* Die Zeile "Und 17 weitere Branchen" gehört zur Ansicht "Branche". In der
Ansicht "Unternehmensgröße" ist sie unsichtbar, hielt aber 52 px frei. */
html:not(#nb) body .c-audience-content:has(> .c-audience-grid.is-company.is-active) > .c-audience-more {
display: none !important;
}
html:not(#nb) body .c-audience-card-range {
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
html:not(#nb) body .c-audience-card-number {
white-space: nowrap !important;
text-align: left !important;
}
html:not(#nb) body .c-audience-card-head {
margin-bottom: 24px !important;
}
/* Kopf mittig (Abschnitt 6) und dichter: Titel -> Text 16 (war 20),
Text -> Umschalter 24 (war 48), Umschalter -> erste Karte 24 (war 48) */
html:not(#nb) body .c-audience-title {
margin-bottom: 16px !important;
}
html:not(#nb) body .c-audience-copy {
margin-bottom: 24px !important;
}
html:not(#nb) body .c-audience-toggle {
margin-bottom: 24px !important;
}
/* 5.4 Leistungs-Karten (01 Tarif / 02 Hardware / 03 Verwaltung)
Aufbau wie im Mobile-Frame (Werte aus Figma gelesen):
- Karte: Innenabstand 8 / 8 / 32 (war 20 rundum), Ecken 32 (war 16),
ohne Schatten, 16 px Abstand zwischen den Karten
- Bild: volle Kartenbreite minus 8 px, Format 3:2 (354 x 236, war
16:9), Ecken 24 (war 12)
- Text: 12 px eingerückt, Titel/Text/Button weitere 4 px und rechts
24 px Luft; Abstand Bild -> Nummer/Chip 32, darunter je 24 */
html:not(#nb) body .c-stack-list {
gap: 16px !important;
}
html:not(#nb) body .c-stack-list > .c-stack-card {
box-shadow: none !important;
padding: 8px 8px 32px !important;
border-radius: 32px !important;
gap: 32px !important;
}
html:not(#nb) body .c-stack-card .c-stack-card-media {
width: 100% !important;
height: auto !important;
aspect-ratio: 3 / 2 !important;
border-radius: 24px !important;
overflow: hidden !important;
}
html:not(#nb) body .c-stack-card .c-stack-card-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
html:not(#nb) body .c-stack-card .c-stack-card-content {
padding-left: 12px !important;
padding-right: 0 !important;
}
html:not(#nb) body .c-stack-card .c-stack-card-meta {
margin-bottom: 24px !important;
}
html:not(#nb) body .c-stack-card .c-stack-card-body {
padding-left: 4px !important;
padding-right: 24px !important;
gap: 24px !important;
}
/* 5.5 Kopf "Unsere Leistungen im Überblick": Reihenfolge Chip, Titel,
Text, Button (vorher stand der Button direkt unter dem Titel, vor dem
Text). .c-stack-header-left wird dafür aufgelöst (display: contents),
die Reihenfolge kommt über order. */
html:not(#nb) body .c-stack-header {
gap: 0 !important;
}
html:not(#nb) body .c-stack-header-left {
display: contents !important;
}
html:not(#nb) body .c-stack-header .c-stack-kicker {
order: 1 !important;
margin-bottom: 20px !important;
}
html:not(#nb) body .c-stack-header .c-stack-title {
order: 2 !important;
margin-bottom: 16px !important; /* Titel -> Text, siehe 5.13 */
}
html:not(#nb) body .c-stack-header > .c-stack-copy {
order: 3 !important;
margin-bottom: 32px !important;
}
html:not(#nb) body .c-stack-header-left > .c-btn-group {
order: 4 !important;
margin-bottom: 40px !important;
}
/* 5.6 Erklärvideo: Kopf mittig über dem Video (Abschnitt 6), Titel ->
Text 16 (war 20), Button näher ans Video (24 px, war 96) */
html:not(#nb) body .c-video-feature-title {
margin-bottom: 16px !important;
}
html:not(#nb) body .c-video-feature-header {
margin-bottom: 32px !important;
}
html:not(#nb) body .c-video-feature {
margin-bottom: 0 !important;
}
html:not(#nb) body .c-video-feature-section > .c-btn-group {
margin-top: 24px !important;
}
/* 5.7 Video-Kundenstimmen: Abstand Titel -> Text (war 0) */
html:not(#nb) body .c-video-testimonials-title {
margin-bottom: 16px !important;
}
html:not(#nb) body .c-video-testimonials-header {
margin-bottom: 32px !important;
}
/* Name/Funktion im Videobild: Platz für den Play-Button rechts lassen.
Der feste Umbruch nach "Head of IT," ist mobil aufgehoben (7.3), die
Zeile bricht ausgeglichen in höchstens zwei Zeilen. */
html:not(#nb) body .c-video-card-person {
max-width: calc(100% - 40px) !important;
}
/* 5.8 Mobilfunk-Check (Karte bleibt zentriert)
Frage gehört zu den Antworten: 40 px Abstand zum Text darüber,
16 px zu den Antworten. Unter "Ich bin bereits BCS-Kunde" 40 px
statt 128. */
html:not(#nb) body .c-conversion {
gap: 40px !important;
}
html:not(#nb) body .c-conversion-header {
margin-top: 40px !important;
}
html:not(#nb) body .c-conversion-choice {
gap: 16px !important;
}
html:not(#nb) body .c-conversion-options {
margin-top: 0 !important;
gap: 12px !important;
}
html:not(#nb) body .c-conversion .c-choice-card {
gap: 12px !important; /* war 32: Karte wirkte halb leer */
min-height: 0 !important;
height: auto !important;
}
html:not(#nb) body .c-conversion .c-choice-copy {
text-wrap: balance !important; /* "Solo-" / "Selbstständige(r)": siehe auch 7.3 */
}
html:not(#nb) body .c-conversion-login {
margin-top: 8px !important;
margin-bottom: 40px !important;
}
/* 5.9 Kundenstimmen-Slider: mobil natives Wischen
Das Slider-Skript verschiebt die Karten per transform und rastet erst
ein, wenn man mehr als eine halbe Karte zieht; kurze Wischer springen
zurück, und es startet auf der mittleren Karte. Mobil übernimmt hier
deshalb der Browser: die Kartenreihe ist eine normale waagerechte
Scroll-Leiste mit Einrasten (scroll-snap). Das transform des Skripts
wird ausgeschaltet, das Skript selbst bleibt unangetastet.
- Start auf der ersten Karte, Karte beginnt auf der 24-px-Linie
- Karte 88 px schmaler als der Bildschirm -> die nächste schaut 48 px
herein; 16 px Abstand (war 32)
- Pfeile mobil aus (sie steuern nur das transform; gewischt wird
mit dem Finger)
Am Desktop bleibt alles beim Skript. */
html:not(#nb) body .c-testimonial-slider-header {
margin-bottom: 32px !important;
}
html:not(#nb) body .c-testimonial-slider-nav {
display: none !important;
}
html:not(#nb) body .c-testimonial-slider-viewport {
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 24px !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
transform: none !important;
margin-bottom: 32px !important;
touch-action: pan-x pan-y !important;
cursor: auto !important;
}
html:not(#nb) body .c-testimonial-slider-viewport::-webkit-scrollbar {
display: none !important;
}
html:not(#nb) body .c-testimonial-slider-track {
transform: none !important;
transition: none !important;
gap: 16px !important;
padding-left: 24px !important;
padding-right: 64px !important; /* letzte Karte rastet auch links ein */
touch-action: pan-x pan-y !important;
}
html:not(#nb) body .c-testimonial-card {
width: calc(100vw - 88px) !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 calc(100vw - 88px) !important;
padding: 24px !important; /* war 32/64/32/32: Text sehr schmal */
gap: 24px !important;
scroll-snap-align: start !important;
}
/* Text in der Karte: Zitat Body Small 14/20 (war 16/26), Kennzahl 14/18
(war 22/130 %) */
html:not(#nb) body .c-testimonial-card-quote {
font-size: 14px !important;
line-height: 20px !important;
}
html:not(#nb) body .c-testimonial-stat-value {
font-size: 14px !important;
line-height: 18px !important;
margin-bottom: 2px !important;
}
html:not(#nb) body .c-testimonials-card-stats {
gap: 16px !important;
width: 100% !important;
}
html:not(#nb) body .c-testimonial-card-stat {
flex: 1 1 0 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-testimonial-stat-value,
html:not(#nb) body .c-testimonial-stat-label {
text-align: left !important;
}
/* Fester Platz für das Kundenlogo (100 x 40)
Die Logos laden erst, wenn die Karte ins Bild kommt (loading="lazy"),
und hatten vorher keine Höhe. Beim Hereinwischen wuchs dadurch die
Fußzeile und alle Karten sprangen nach oben auf. Mit festem Platz
bleibt die Höhe gleich; das Logo wird darin eingepasst, rechts unten. */
html:not(#nb) body .c-testimonial-card-footer {
gap: 8px !important;
width: 100% !important;
}
html:not(#nb) body .c-testimonial-logo {
flex: 0 0 100px !important;
width: 100px !important;
max-width: 100px !important;
height: 40px !important;
object-fit: contain !important;
object-position: right bottom !important;
}
html:not(#nb) body .c-testimonial-company {
min-width: 0 !important;
overflow-wrap: break-word !important;
hyphens: auto !important; /* nur für sehr lange Firmennamen */
-webkit-hyphens: auto !important;
}
/* 5.10 Logo-Raster ("Auszeichnungen & Partnerschaften", "Bekannt durch")
Letzte Zeile steht mittig statt links. Standard: 3 pro Zeile.
.is-partners (7 Logos): 4 + 3 statt 3 + 3 + 1. */
html:not(#nb) body .c-media-logos-list {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
html:not(#nb) body .c-media-logos-list > .c-media-logo {
grid-column: span 2 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-media-logos:not(.is-partners) .c-media-logo:nth-last-child(2):nth-child(3n+1) {
grid-column: 2 / span 2 !important;
}
html:not(#nb) body .c-media-logos:not(.is-partners) .c-media-logo:last-child:nth-child(3n+1) {
grid-column: 3 / span 2 !important;
}
html:not(#nb) body .c-media-logos.is-partners .c-media-logos-list {
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
html:not(#nb) body .c-media-logos.is-partners .c-media-logo {
padding: 6px !important;
}
html:not(#nb) body .c-media-logos.is-partners .c-media-logo:nth-last-child(3):nth-child(4n+1) {
grid-column: 2 / span 2 !important;
}
html:not(#nb) body .c-media-logos.is-partners .c-media-logo:nth-last-child(2):nth-child(4n+1) {
grid-column: 3 / span 2 !important;
}
html:not(#nb) body .c-media-logos.is-partners .c-media-logo:last-child:nth-child(4n+1) {
grid-column: 4 / span 2 !important;
}
html:not(#nb) body .c-media-logos-header,
html:not(#nb) body .c-media-logos {
gap: 24px !important;
}
html:not(#nb) body .c-media-logos-header {
gap: 0 !important;
}
/* graue Unterzeile "Erfahren Sie, wie wir …" unter "Auswahl unserer
Auszeichnungen" mobil aus (zuerst nur Startseite, jetzt überall) */
html:not(#nb) body .c-media-logos.is-partners .c-medialogos-subtitle {
display: none !important;
}
/* 5.11 Hero: Porträt endet mit der Unterkante der Hero-Fläche
Das Bild ragte 4 px unter die Fläche und rechts über die runde Ecke.
Die Fläche schneidet jetzt ab (wie im Mobile-Frame). */
html:not(#nb) body .l-panel:has(> .l-container > .c-hero_2) {
overflow: clip !important;
}
/* 5.12 Split-Sektionen: Bild über dem Text (wie im Mobile-Frame).
In global-settings.css steht mobil der Text zuerst (order 1/2). */
html:not(#nb) body .c-split > .c-split-media {
order: 1 !important;
}
html:not(#nb) body .c-split > .c-split-content {
order: 2 !important;
}
html:not(#nb) body .c-split {
row-gap: 40px !important;
}
/* 5.13 Überschrift -> Fließtext: einheitlich 16 px
In den Split-Sektionen standen 32 px zwischen Titel und Text und 48 px
vor den Chips darunter; der Titel wirkte dadurch losgelöst. Jetzt
Titel -> Text 16, Text -> Chips 24, Text -> Button 32.
(Gleicher Wert in 5.3, 5.5, 5.6, 5.7.) */
html:not(#nb) body .c-split-content .c-split-copy {
margin-top: 16px !important;
}
html:not(#nb) body .c-split-content .c-split-chips {
margin-top: 24px !important;
}
/* 5.14 FAQ: Gruppen-Chips ("1 Überblick", "2 Leistungen") mittig */
html:not(#nb) body .c-faq .faq-group-header {
text-align: center !important;
}
}
/* ==========================================================================
6 AUSNAHMEN: BLEIBT ZENTRIERT (Mobile, bis 767 px)
Diese Blöcke stehen bewusst NICHT in Abschnitt 2 und bleiben mittig:
- Kennzahlen-Kopf: "SEIT 2001", Überschrift, Button darunter
(.c-stats-header, .c-stats-title, .c-stats-meta, .c-stats-actions)
- "Einzeln oder kombinierbar …" als mittiger Störer
(.c-stack-footer, .c-stack-meta, .c-stack-title-small)
- Logo-Raster mit Titel (.c-media-logos, .c-media-logos-header)
- Vorteile-Kopf: Chip und Überschrift (.c-benefits-header)
- FAQ-Überschrift (.faq-title in .faq-sidebar)
- Zielgruppen-Kopf "Für wen ist BCS Mobile geeignet?" (.c-audience-header)
- Erklärvideo: Kopf und Button (.c-video-feature-header)
- Video-Kundenstimmen: Kopf (.c-video-testimonials-header)
- Kundenstimmen-Slider: Kopf und Button (.c-testimonial-slider-header)
- Mobilfunk-Check (.c-conversion), Footer
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .c-stats-header {
align-items: center !important;
}
html:not(#nb) body .c-stats-meta {
margin-left: auto !important;
margin-right: auto !important;
}
html:not(#nb) body .c-benefits-header {
align-items: center !important;
text-align: center !important;
}
html:not(#nb) body .c-benefits-title {
text-align: center !important;
}
html:not(#nb) body .c-faq .faq-sidebar,
html:not(#nb) body .c-faq .faq-title {
text-align: center !important;
}
html:not(#nb) body .c-audience-header,
html:not(#nb) body .c-video-feature-header,
html:not(#nb) body .c-video-testimonials-header {
align-items: center !important;
text-align: center !important;
}
html:not(#nb) body :is(.c-audience-title, .c-audience-copy,
.c-video-feature-title, .c-video-feature-copy,
.c-video-testimonials-title, .c-video-testimonials-copy) {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
html:not(#nb) body .c-video-feature-section > .c-btn-group {
align-self: center !important;
}
html:not(#nb) body .c-testimonial-slider-header,
html:not(#nb) body .c-testimonial-slider-heading {
align-items: center !important;
text-align: center !important;
}
html:not(#nb) body .c-testimonial-slider-title,
html:not(#nb) body .c-testimonial-slider-copy {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
html:not(#nb) body .c-testimonial-slider > .c-btn-group {
align-self: center !important;
margin-left: 0 !important;
}
html:not(#nb) body .c-stack-footer {
margin-top: 64px !important;
}
html:not(#nb) body .c-stack-meta {
margin-bottom: 24px !important;
}
html:not(#nb) body .c-stack-title-small {
margin-bottom: 24px !important;
}
}
/* ==========================================================================
7 ZEILENUMBRUCH (Mobile, bis 767 px)
========================================================================== */
@media (max-width: 767px) {
/* 7.1 Fließtext: "pretty" vermeidet ein einzelnes Wort in der letzten
Zeile. Keine automatische Silbentrennung (zu viele Bindestriche). */
html:not(#nb) body .l-section,
html:not(#nb) body .l-footer {
text-wrap: pretty;
hyphens: manual !important;
-webkit-hyphens: manual !important;
}
/* 7.2 Überschriften und kurze zentrierte Texte: "balance" verteilt die
Zeilen gleichmäßig */
html:not(#nb) body :is(.hero-title, .is-h2, .is-h3, .faq-title,
.c-split-title, .c-split-header-title, .c-stats-title,
.c-benefits-title, .c-stack-title, .c-stack-title-small,
.c-stack-card-title, .c-audience-title, .c-video-feature-title,
.c-video-testimonials-title, .c-testimonial-slider-title,
.c-testimonial-slider-copy, .c-media-logos-title,
.c-medialogos-subtitle, .c-conversion-title,
.c-conversion-question, .c-audience-copy, .c-video-feature-copy,
.c-video-card-role, .footer-check-copy),
html:not(#nb) body .l-footer .copy {
text-wrap: balance !important;
}
/* 7.3 Feste Umbrüche (
) aus dem Desktop-Layout
Mobil erzeugen sie einzelne Wörter in einer eigenen Zeile ("…
kombinierbar für / umfänglichen …"). Das
wird hier durch ein
unsichtbares 1-px-Bild in Leerzeichen-Breite ersetzt, der Text läuft
dann normal um. In Chrome geprüft. Wo ein Browser das nicht kann,
bleibt der Umbruch einfach stehen. Sauberer:
in Oxygen entfernen.
Bewusst NICHT für linksbündige Überschriften: bricht die Zeile genau
an dieser Stelle, stünde das Ersatz-Leerzeichen am Zeilenanfang und
die Zeile wäre sichtbar eingerückt. Dort reicht "balance" aus 7.2. */
html:not(#nb) body :is(.c-stats-title, .c-benefits-title,
.c-stack-title-small, .c-video-testimonials-copy, .c-stat-copy,
.c-video-card-role) br,
html:not(#nb) body .l-footer .copy br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
width: 0.25em !important;
height: 1px !important;
}
html:not(#nb) body .c-conversion .c-choice-copy br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
height: 1px !important;
}
/* hier steht vor dem
schon ein Leerzeichen bzw. ein Bindestrich.
.c-stack-title-small nur auf Startseite und Karriere: auf den anderen
Seiten steht kein Leerzeichen am
, dort klebten die Wörter
zusammen ("IhrenBusiness"), deshalb bleibt es dort bei 0.25em. */
html:not(#nb) body:is(.page-id-198, .page-id-1988) .c-stack-title-small br,
html:not(#nb) body .c-conversion .c-choice-copy br {
width: 0 !important;
}
}
/* ==========================================================================
8 FOOTER (Mobile, bis 767 px)
Alles in einer Spalte, mittig. Reihenfolge: Logo, Text, Social,
Kontakt, Check-Button, Link-Gruppen, Siegel, ganz unten Copyright und
Rechtliches. .footer-left und .footer-brand werden dafür aufgelöst
(display: contents), die Reihenfolge kommt über order.
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .l-footer-panel {
padding-top: 64px !important; /* war 160 */
padding-bottom: 32px !important; /* war 128 */
}
html:not(#nb) body .l-grid-footer {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
}
html:not(#nb) body .l-grid-footer > .footer-left,
html:not(#nb) body .l-grid-footer .footer-brand {
display: contents !important;
}
html:not(#nb) body .l-footer .copy {
max-width: 310px !important;
margin: 24px auto 0 !important;
}
/* Kontakt: Sprechzeiten und E-Mail/Telefon untereinander statt in zwei
schmalen Spalten */
html:not(#nb) body .l-footer .footer-contact {
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
width: 100% !important;
margin-top: 32px !important;
}
html:not(#nb) body .l-footer .footer-bottom {
margin-top: 32px !important;
width: 100% !important;
}
html:not(#nb) body .l-footer .footer-check {
align-items: center !important;
margin-top: 32px !important;
}
html:not(#nb) body .l-footer .footer-check-copy {
line-height: 26px !important; /* war 30 */
}
/* Link-Gruppen: untereinander, mittig */
html:not(#nb) body .l-grid-footer > .footer-right {
order: 6 !important;
width: 100% !important;
margin-top: 56px !important;
gap: 48px !important;
}
html:not(#nb) body .l-footer .footer-top {
display: flex !important; /* war ein zweispaltiges Raster */
flex-direction: column !important;
align-items: center !important;
gap: 40px !important;
padding: 0 !important;
}
html:not(#nb) body .l-footer :is(.footer-service, .footer-company, .footer-provider) {
align-items: center !important;
width: 100% !important;
margin: 0 !important;
}
html:not(#nb) body .l-footer .footer-nav {
align-items: center !important;
}
html:not(#nb) body .l-footer .footer-nav-link,
html:not(#nb) body .l-footer .footer-nav-title {
text-align: center !important;
align-self: center !important;
}
/* Copyright und Rechtliches ganz nach unten */
html:not(#nb) body .l-footer .footer-legal {
order: 7 !important;
margin-top: 48px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
}
/* ==========================================================================
9 TARIFSEITE UND WEITERE BAUSTEINE (Mobile, bis 767 px)
Aufgefallen auf /business-handyvertraege/. Die Regeln hängen an den
Klassen und gelten überall, wo der Baustein vorkommt.
========================================================================== */
@media (max-width: 767px) {
/* 9.1 Check-Banner mit Experten-Foto (.c-check-banner)
Vorher: Innenabstand 20/64/64/40 (Inhalt hing nach links, nur 238 px
breit), Name lief aus dem Chip, drei Chips in zwei Zeilen.
Jetzt: Fläche bis 8 px an den Bildschirmrand, eine Spalte, alles
mittig. Foto max. 280 px, Namens-Chip so breit wie der Text (8/16),
Kundenhinweis als Zeile (Gesichter links, Text rechts), Chips in einer
Zeile, Titel 26/34, Frage 16 px über den Antworten. Zwischen
Kundenhinweis und Chips 56 px, damit beide Blöcke getrennt wirken. */
html:not(#nb) body .l-container > .c-check-banner {
display: flex !important;
flex-direction: column !important;
gap: 56px !important;
width: calc(100% + 32px) !important;
max-width: none !important;
margin-left: -16px !important;
margin-right: -16px !important;
padding: 24px 24px 32px !important;
border-radius: 32px !important;
}
html:not(#nb) body .c-check-banner-media {
width: 100% !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
}
html:not(#nb) body .c-check-banner-image {
display: block !important;
width: 100% !important;
max-width: 280px !important;
height: auto !important;
margin: 0 auto 16px !important;
}
html:not(#nb) body .c-check-banner-person {
align-self: center !important;
width: auto !important;
max-width: 100% !important;
padding: 8px 16px !important;
margin: 0 0 24px !important;
}
html:not(#nb) body .c-check-banner-person-name {
font-size: 12px !important;
line-height: 16px !important;
white-space: normal !important;
text-align: center !important;
text-wrap: balance !important;
width: auto !important;
}
html:not(#nb) body .c-check-banner-proof {
align-self: center !important;
width: auto !important;
max-width: 100% !important;
justify-content: center !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 !important;
}
html:not(#nb) body .c-check-banner-proof-avatars {
flex: 0 0 auto !important;
}
html:not(#nb) body .c-check-banner-proof-copy {
flex: 0 1 auto !important;
width: auto !important;
max-width: 210px !important;
font-size: 12px !important;
line-height: 16px !important;
text-align: left !important;
}
html:not(#nb) body .c-check-banner-content {
width: 100% !important;
padding: 0 !important;
align-items: center !important;
}
html:not(#nb) body .c-check-banner-chips {
flex-wrap: nowrap !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 0 16px !important;
width: 100% !important;
}
html:not(#nb) body .c-check-banner-title {
font-size: 26px !important;
line-height: 34px !important;
margin: 0 0 32px !important;
text-align: center !important;
text-wrap: balance !important;
}
html:not(#nb) body .c-check-banner-question {
margin: 0 0 16px !important;
text-align: center !important;
}
html:not(#nb) body .c-check-banner-option {
gap: 12px !important;
width: 100% !important;
}
html:not(#nb) body .c-check-banner .c-check-option {
padding: 20px 24px !important;
min-height: 0 !important;
height: auto !important;
}
/* 9.2 "Welches Netz? Das entscheiden Sie!" (.c-network-choice)
Bild, Titel und Button mittig, je 24 px Abstand (waren 60 und 48).
Darunter standen 100 px Außenabstand plus 120 px der eingeschachtelten
nächsten Sektion = 220 px Lücke; jetzt 96 px. */
html:not(#nb) body .c-network-choice > .c-split {
row-gap: 24px !important;
margin-bottom: 0 !important;
}
html:not(#nb) body .c-network-choice .c-split-content {
align-items: center !important;
text-align: center !important;
}
html:not(#nb) body .c-network-choice .c-split-title {
margin-top: 0 !important;
text-align: center !important;
}
html:not(#nb) body .c-network-choice .c-split-copy {
margin-top: 0 !important;
}
html:not(#nb) body .c-network-choice .c-split-actions {
margin-top: 24px !important;
justify-content: center !important;
}
html:not(#nb) body .c-network-choice .c-split-actions .c-btn-group {
justify-content: center !important;
}
html:not(#nb) body .l-section > .l-section.is-space-before-160 {
padding-top: 96px !important;
}
/* 9.3 Text-Split ohne Bild (.c-split.is-text): Titel, Text, Button
Vorher: Titel, Button, 40 px, Text. Die erste Spalte wird aufgelöst
(display: contents), die Reihenfolge kommt über order. Titel -> Text
16 px, Text -> Button 32 px. */
html:not(#nb) body .c-split.is-text {
row-gap: 0 !important;
}
html:not(#nb) body .c-split.is-text > .c-split-content:first-child {
display: contents !important;
}
html:not(#nb) body .c-split.is-text > .c-split-content:first-child > .c-split-title {
order: 1 !important;
margin-top: 0 !important;
}
html:not(#nb) body .c-split.is-text > .c-split-content:not(:first-child) {
order: 2 !important;
}
html:not(#nb) body .c-split.is-text > .c-split-content:first-child > .c-split-actions {
order: 3 !important;
margin-top: 32px !important;
}
/* 9.4 Vergleichstabelle Direktanbieter / BCS (.c-compare-table.is-provider)
Vorher: 1060 px breit im 342-px-Fenster, seitlich zu scrollen; die
BCS-Spalte war beim Einstieg nicht zu sehen.
Jetzt: passt ohne seitliches Scrollen und läuft rechts bis an den
Bildschirmrand (die hellblaue BCS-Spalte schließt mit dem Rand ab).
Spalten 88 px + zweimal der Rest, Zeilentitel 12/16, Text 13/18,
Zellen 20/8 px. Die Kopfzeile bleibt beim Scrollen oben stehen
(unter dem Seitenkopf, solange der sichtbar ist).
Abstand zur Sektion darüber 48 px (war 80), gehört inhaltlich dazu. */
html:not(#nb) body .l-section:has(> .l-container > .c-provider-compare) {
padding-top: 48px !important;
}
html:not(#nb) body .c-provider-compare .c-table-scroll {
overflow: visible !important;
padding-bottom: 0 !important;
width: auto !important;
max-width: none !important;
margin-right: -24px !important;
}
html:not(#nb) body .c-compare-table.is-provider {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-row {
grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-cell {
padding: 20px 8px !important;
min-width: 0 !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-cell.is-highlight {
padding-right: 12px !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-cell.is-label {
padding: 20px 4px 20px 0 !important;
justify-content: flex-start !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-copy.is-row-label {
font-size: 12px !important;
line-height: 16px !important;
text-align: left !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
overflow-wrap: break-word !important;
min-width: 0 !important;
}
html:not(#nb) body .c-compare-table.is-provider :is(.c-table-copy, .c-table-copy-fat):not(.is-row-label) {
font-size: 13px !important;
line-height: 18px !important;
text-wrap: balance !important;
hyphens: auto !important; /* nur lange Wörter, siehe Grenzen */
-webkit-hyphens: auto !important;
hyphenate-limit-chars: 14 6 6 !important;
-webkit-hyphenate-limit-before: 6 !important;
-webkit-hyphenate-limit-after: 6 !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
}
html:not(#nb) body .c-compare-table.is-provider :is(.c-table-copy, .c-table-copy-fat) br,
html:not(#nb) body .c-tariff-choice-card-copy br,
html:not(#nb) body .c-tariff-choice-footer-copy br,
html:not(#nb) body .c-split-title.is-h3 br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
width: 0.25em !important;
height: 1px !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-row.is-head {
position: sticky !important;
top: 0 !important;
z-index: 3 !important;
background: #fff !important;
transition: top 0.25s ease !important;
}
html:not(#nb) body:has(> .c-header:not(.is-hidden)) .c-compare-table.is-provider .c-table-row.is-head {
top: 64px !important; /* Höhe des Seitenkopfs */
}
html:not(#nb) body .c-compare-table.is-provider .c-table-row.is-head .c-table-cell {
padding: 12px 8px !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-headline.is-pill {
font-size: 12px !important;
line-height: 16px !important;
padding: 6px 10px !important;
white-space: nowrap !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-brand-logo {
width: auto !important;
height: 32px !important;
max-width: 100% !important;
}
html:not(#nb) body .c-compare-table.is-provider .c-table-head-brand {
width: auto !important;
max-width: 100% !important;
}
/* 9.5 "Firmentarife mit oder ohne Handy?" (.c-tariff-choice)
Vorher: Bild 160 px links, Text in 126 px Breite rechts daneben.
Jetzt wie die Leistungs-Karten (5.4): Titel mittig, Karte 8 px über
die Inhaltslinie, Bild oben in 16:9 mit Ecken 24, Text darunter über
die volle Breite; Kartentitel H3 22, Text 14/20.
Hinweis-Karte darunter ("Sie entscheiden …"): mittig, Innenabstand
24 px, Text 20/26 (war 18/28). */
html:not(#nb) body .c-tariff-choice-title {
text-align: center !important;
margin-bottom: 32px !important;
}
html:not(#nb) body .c-tariff-choice-options {
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
width: calc(100% + 16px) !important;
max-width: none !important;
margin-left: -8px !important;
margin-right: -8px !important;
}
html:not(#nb) body .c-tariff-choice-card {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
padding: 8px 8px 32px !important;
border-radius: 32px !important;
}
html:not(#nb) body .c-tariff-choice-media {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
border-radius: 24px !important;
overflow: hidden !important;
object-fit: cover !important;
}
html:not(#nb) body .c-tariff-choice-media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html:not(#nb) body .c-tariff-choice-content {
padding: 0 24px 0 16px !important;
width: 100% !important;
}
html:not(#nb) body .c-tariff-choice-card-title {
font-size: 22px !important;
line-height: 1.3 !important;
margin-bottom: 12px !important;
}
html:not(#nb) body .c-tariff-choice-card-copy {
font-size: 14px !important;
line-height: 20px !important;
}
html:not(#nb) body .c-tariff-choice-footer {
width: calc(100% + 16px) !important;
max-width: none !important;
align-self: auto !important;
margin: 16px -8px 0 !important;
border-radius: 32px !important;
padding: 24px !important;
align-items: center !important;
}
html:not(#nb) body .c-tariff-choice-chip {
align-self: center !important;
margin: 0 0 16px !important;
}
html:not(#nb) body .c-tariff-choice-footer-copy {
font-size: 20px !important;
line-height: 26px !important;
text-align: center !important;
text-wrap: balance !important;
}
/* 9.6 Überschrift über einer Split-Gruppe (.c-c-split-title)
"Business Mobilfunk Neuverträge und Vertragsverlängerungen …" stand
80 px unter der Sektion davor und 99 px über dem Bild, zu dem sie
gehört. Jetzt 120 px davor, 32 px danach. */
html:not(#nb) body .l-section:has(> .l-container > .c-c-split-title) {
padding-top: 120px !important;
}
html:not(#nb) body .l-container > .c-c-split-title {
margin-bottom: 32px !important;
}
/* 9.7 Split-Sektionen: Abstand Bild -> Titel
Steht kein Chip über dem Titel, entfallen die 20 px Außenabstand des
Titels (Bild -> Titel 40 statt 60). Untertitel (.is-h3, z. B.
"Neuvertrag – Durchdacht von Anfang an") sind H3 22/130 % statt H2 und
stehen 24 px unter ihrem Bild, damit klar ist, wozu sie gehören.
Der feste Umbruch in diesen Untertiteln ist mobil aufgehoben (9.4). */
html:not(#nb) body .c-split-content > .c-split-title:first-child {
margin-top: 0 !important;
}
html:not(#nb) body .c-split-title.is-h3 {
font-size: 22px !important;
line-height: 1.3 !important;
}
html:not(#nb) body .c-split:has(.c-split-title.is-h3) {
row-gap: 24px !important;
}
/* 9.9 "Noch mehr aus Ihrem Business-Mobilfunk herausholen"
(.c-service-overview): Kopf -> Karten 32 px (waren 40 + 48 = 88),
Titel -> Text 16 px (war 20). */
html:not(#nb) body .c-service-overview {
gap: 32px !important;
}
html:not(#nb) body .c-service-overview-header {
margin-bottom: 0 !important;
}
html:not(#nb) body .c-service-overview-title {
margin: 0 0 16px !important;
}
/* 9.8 FAQ-Sektion mit eigenem Abstand nach unten (.content-section)
Hatte 160 px nach unten plus 96 px der nächsten Sektion = 256 px vor
"Bekannt durch". Wie in 4.1 zählt nur der Abstand der nächsten. */
html:not(#nb) body .l-section.content-section:has(+ .l-section[class*="is-space-before-"]:not(.is-space-before-0)) {
padding-bottom: 0 !important;
}
}
/* ==========================================================================
10 SEITE "FIRMENHANDYS MIETEN" (Mobile, bis 767 px)
Aufgefallen auf /firmenhandys-mieten-device-as-a-service/. Die Regeln
hängen an den Klassen und gelten überall, wo der Baustein vorkommt.
========================================================================== */
@media (max-width: 767px) {
@keyframes nb-ds-reset {
from { margin-left: calc(-100vw + 72px); opacity: 0; }
to { margin-left: 0; opacity: 1; }
}
/* 10.1 Hero "Firmenhandys mieten" (.c-hero_2.is-paas-hero)
Das Geräte-Bild war 510 px breit an den rechten Rand geschoben und links
abgeschnitten, darunter blieb Leerraum. Jetzt: Bild über die volle
Breite der Fläche, ganz sichtbar, mittig, schließt unten ab. */
html:not(#nb) body .c-hero_2.is-paas-hero,
html:not(#nb) body .c-hero_2.is-paas-hero > .l-grid {
min-height: 0 !important;
height: auto !important;
}
html:not(#nb) body .c-hero_2.is-paas-hero .hero_media {
grid-column: 1 / -1 !important;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 32px -20px 0 !important;
}
html:not(#nb) body .c-hero_2.is-paas-hero .hero_image {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
html:not(#nb) body .c-hero_2.is-paas-hero .hero_portrait {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
transform: none !important;
object-fit: contain !important;
}
/* 10.2 Geräte-Slider "Top Firmenhandys & Tablets" (.c-device-slider)
Vorher: 20 px zusätzlich eingerückt, Karte am Rand hart abgeschnitten,
Kategorie-Chips in drei Zeilen, Ziehen über das Skript hakelig.
Jetzt wie der Kundenstimmen-Slider (5.9): natives Wischen mit Einrasten,
Kartenreihe bis an beide Bildschirmränder, erste Karte auf der
24-px-Linie, die nächste schaut 48 px herein. Die vier Kategorie-Chips
stehen in einer Zeile; die Pfeile sind mobil aus (sie wechseln nur die
Kategorie, das machen die Chips). Das transform des Skripts ist mobil
ausgeschaltet, das Skript selbst unangetastet.
Kategoriewechsel: Das Skript setzt neue Karten ein, die Scroll-Position
bliebe sonst stehen. Die Karten 2 und 3 werden deshalb für 150 ms ohne
Breite eingeblendet (Animation nb-ds-reset), dadurch springt die Reihe
zurück auf die erste Karte. */
html:not(#nb) body .c-device-slider {
padding-left: 0 !important;
padding-right: 0 !important;
}
html:not(#nb) body .c-device-slider-header {
margin-bottom: 32px !important;
}
html:not(#nb) body .c-device-slider-title {
margin-bottom: 16px !important;
}
html:not(#nb) body .c-device-slider-toolbar {
display: block !important;
}
html:not(#nb) body .c-device-slider-tabs {
flex-wrap: nowrap !important;
gap: 6px !important;
width: 100% !important;
margin: 0 0 16px !important;
}
html:not(#nb) body .c-device-slider-tab {
flex: 0 0 auto !important;
padding: 0 12px !important;
height: 36px !important;
min-height: 0 !important;
}
html:not(#nb) body .c-device-slider-controls {
display: none !important;
}
html:not(#nb) body .c-device-slider-viewport {
width: auto !important;
max-width: none !important;
margin-left: -24px !important;
margin-right: -24px !important;
padding-bottom: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 24px !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
touch-action: pan-x pan-y !important;
cursor: auto !important;
}
html:not(#nb) body .c-device-slider-viewport::-webkit-scrollbar {
display: none !important;
}
html:not(#nb) body .c-device-slider-track {
transform: none !important;
transition: none !important;
gap: 16px !important;
width: max-content !important;
padding-left: 24px !important;
padding-right: 64px !important;
touch-action: pan-x pan-y !important;
}
html:not(#nb) body .c-device-slider-track > .c-device-card {
flex: 0 0 calc(100vw - 88px) !important;
width: calc(100vw - 88px) !important;
min-width: 0 !important;
max-width: none !important;
scroll-snap-align: start !important;
}
html:not(#nb) body .c-device-slider-track > .c-device-card:not(:first-child) {
animation: nb-ds-reset 150ms step-end 1;
}
html:not(#nb) body .c-device-slider-footer {
margin-top: 32px !important;
}
/* 10.3 Vorteile-Raster "Firmenhandy als DaaS" (.c-advantages)
Vorher: sechs Kacheln untereinander, ohne die Linien vom Desktop.
Jetzt: 2 x 3 mit Trennlinien und Plus-Zeichen an den Kreuzungen wie am
Desktop. Überschrift mittig. Titel 16/20 (war 20/26), Text 13/18
(war 14/26). */
html:not(#nb) body .c-advantages-header {
padding: 0 !important;
margin-bottom: 32px !important;
width: 100% !important;
align-items: center !important;
}
html:not(#nb) body .c-advantages-title {
margin-top: 0 !important;
text-align: center !important;
}
html:not(#nb) body .c-advantages-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
padding: 0 !important;
width: 100% !important;
border-top: 1px solid #E8EDEF !important;
}
html:not(#nb) body .c-advantage-item {
grid-column: auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding: 24px 10px !important;
justify-content: flex-start !important;
border-bottom: 1px solid #E8EDEF !important;
}
html:not(#nb) body .c-advantage-item:nth-child(odd) {
border-right: 1px solid #E5E7EB !important;
}
html:not(#nb) body .c-advantage-item:nth-child(even) {
border-right: 0 !important; /* Linie am rechten Rand (Desktop-Rest) */
}
html:not(#nb) body .c-advantage-item:nth-child(odd)::after,
html:not(#nb) body .c-advantage-item:first-child::before {
content: "" !important;
display: block !important;
position: absolute !important;
right: -4px !important;
left: auto !important;
width: 7px !important;
height: 7px !important;
background: linear-gradient(to right, transparent 3px, #161A1D 3px, #161A1D 4px, transparent 4px), linear-gradient(transparent 3px, #161A1D 3px, #161A1D 4px, transparent 4px) !important;
transform: none !important;
z-index: 1 !important;
}
html:not(#nb) body .c-advantage-item:nth-child(odd)::after {
bottom: -4px !important;
top: auto !important;
}
html:not(#nb) body .c-advantage-item:first-child::before {
top: -4px !important;
bottom: auto !important;
}
html:not(#nb) body .c-advantage-02-icon {
margin-bottom: 12px !important;
}
html:not(#nb) body .c-advantage-02-title {
font-size: 16px !important;
line-height: 20px !important;
margin-bottom: 6px !important;
text-wrap: balance !important;
hyphens: manual !important;
-webkit-hyphens: manual !important;
overflow-wrap: break-word !important;
}
html:not(#nb) body .c-advantage-02-copy {
font-size: 13px !important;
line-height: 18px !important;
text-wrap: balance !important;
}
html:not(#nb) body .c-advantage-02-copy br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
width: 0.25em !important;
height: 1px !important;
}
/* 10.4 Vergleichstabelle Kauf / Leasing / Vertrag / Miete
(.c-compare-table.is-5-col)
Vorher: 1276 px breit im 342-px-Fenster, beim Einstieg nur die
Zeilentitel sichtbar, die BCS-Spalte drei Bildschirme weiter rechts.
Jetzt eine echte Tabelle mit zwei festen Spalten:
- links die Zeilentitel (124 px), daneben die BCS-Spalte "Miete" als
durchgehendes hellblaues Band; beide bleiben beim seitlichen
Wischen stehen (position: sticky, BCS per order nach vorn geholt)
- Kauf / Leasing / Vertrag (je 114 px) laufen rechts daran vorbei;
beim Einstieg ist Kauf ganz und Leasing angeschnitten zu sehen
- Hinweiszeile "Seitlich wischen zum Vergleichen" über der Tabelle
(Text steht hier im CSS, ::before)
- Tabelle über die volle Bildschirmbreite, Werte 12/16
Die Kopfzeile kann nicht oben stehen bleiben: eine Fläche, die
seitlich scrollt, hält nichts am oberen Bildschirmrand fest. */
html:not(#nb) body .c-compare-header {
margin-bottom: 32px !important;
}
html:not(#nb) body .c-compare .c-compare-copy {
margin-top: 24px !important;
}
html:not(#nb) body .c-compare .c-table-scroll {
display: block !important;
align-self: stretch !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin-left: -24px !important;
margin-right: -24px !important;
padding-bottom: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity !important;
scroll-padding-left: 226px !important;
overscroll-behavior-x: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
html:not(#nb) body .c-compare .c-table-scroll::-webkit-scrollbar {
display: none !important;
}
html:not(#nb) body .c-compare .c-table-scroll::before {
content: "Seitlich wischen zum Vergleichen \2192" !important;
display: block !important;
position: sticky !important;
left: 0 !important;
width: 100vw !important;
box-sizing: border-box !important;
padding: 0 24px 12px !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 500 !important;
color: #6B7280 !important;
text-align: right !important;
}
html:not(#nb) body .c-compare .c-table-scroll .c-compare-table.is-5-col {
width: max-content !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-row {
grid-template-columns: 124px 102px repeat(3, 114px) !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-cell {
padding: 14px 5px !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
scroll-snap-align: start !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-cell::before,
html:not(#nb) body .c-compare-table.is-5-col .c-table-cell::after {
display: none !important; /* Plus-Zeichen an den Kreuzungen */
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-cell.is-label,
html:not(#nb) body .c-compare-table.is-5-col .c-table-row.is-head .c-table-cell.is-label {
order: -2 !important;
grid-column: auto !important;
display: flex !important;
position: sticky !important;
left: 0 !important;
z-index: 3 !important;
background: #fff !important;
justify-content: flex-start !important;
align-items: center !important;
padding: 14px 4px 14px 24px !important;
border-left: 0 !important;
scroll-snap-align: none !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-cell.is-label > * {
font-size: 12px !important;
line-height: 16px !important;
font-weight: 600 !important;
text-align: left !important;
min-width: 0 !important;
overflow-wrap: break-word !important;
hyphens: manual !important;
-webkit-hyphens: manual !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-cell.is-highlight {
order: -1 !important;
position: sticky !important;
left: 124px !important;
z-index: 2 !important;
background: #F1F9FF !important; /* deckend, sonst scheint Text durch */
border-left: 0 !important;
border-right: 0 !important; /* die Linie kommt von der Nachbarspalte */
box-shadow: none !important;
scroll-snap-align: none !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-pill {
font-size: 12px !important;
line-height: 16px !important;
padding: 4px 8px !important;
white-space: normal !important;
text-align: center !important;
border-radius: 10px !important;
max-width: 100% !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
hyphenate-limit-chars: 12 6 5 !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-row.is-head .c-table-cell {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-headline {
font-size: 14px !important;
line-height: 18px !important;
text-align: center !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-head-brand {
flex-direction: column-reverse !important;
gap: 2px !important;
width: auto !important;
max-width: 100% !important;
}
html:not(#nb) body .c-compare-table.is-5-col .c-table-brand-logo {
width: auto !important;
height: 16px !important;
max-width: 100% !important;
}
/* 10.5 "Fazit" direkt unter der Vergleichstabelle
Gehört zur Tabelle: 48 px Abstand statt 96, erst der Text, dann das
Bild als Abschluss der Sektion, 24 px unter dem Text. Die quadratische
Bildfläche (.is-square) war fest 412 px hoch, das Bild darin 342 px:
70 px Leerraum über dem Bild, jetzt weg. */
html:not(#nb) body .l-section:has(> .l-container > .c-compare) + .l-section {
padding-top: 48px !important;
}
html:not(#nb) body .l-section:has(> .l-container > .c-compare) + .l-section .c-split > .c-split-content {
order: 1 !important;
}
html:not(#nb) body .l-section:has(> .l-container > .c-compare) + .l-section .c-split > .c-split-media {
order: 3 !important;
}
html:not(#nb) body .c-split-media:has(> .c-split-visual.is-square),
html:not(#nb) body .c-split-visual.is-square {
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
/* 10.6 Kostenrechner "Was ein Firmenhandy wirklich kostet" (.c-costcalc)
Vorher: Regler 126 px breit neben 96 px Leerraum; Karten mit 40 px
Innenabstand und noch einmal 32 px im inneren Kasten, dadurch brach
jede Zeile um; Summenzeile lief ineinander.
Jetzt: Regler nutzt die ganze Breite, 8 px zwischen allen Kästen (waren
20), Karte 16/12 und Kasten 16 px Innenabstand, Zeilen 13/18 mit Betrag
in einer Zeile, Beispiel-Gerät mit 24 px Abstand zum Bild, Ergebnis
("… gespart") mittig mit mehr Luft. */
html:not(#nb) body .c-costcalc-header {
margin-bottom: 32px !important;
}
html:not(#nb) body .c-costcalc-title {
margin-bottom: 16px !important;
}
html:not(#nb) body .c-costcalc-controls {
gap: 8px !important;
margin-bottom: 8px !important;
}
html:not(#nb) body .c-costcalc-slider-wrap {
gap: 16px !important;
padding: 20px !important;
}
html:not(#nb) body .c-costcalc-slider-main {
flex: 1 1 0 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-costcalc-range {
width: 100% !important;
}
html:not(#nb) body .c-costcalc-count {
flex: 0 0 72px !important;
}
html:not(#nb) body .c-costcalc-product {
gap: 24px !important;
padding: 16px 20px !important;
}
html:not(#nb) body .c-costcalc-product-copy {
flex: 1 1 0 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-cosctcalc-compare {
gap: 8px !important;
margin-bottom: 8px !important;
}
html:not(#nb) body .c-costcalc-card {
padding: 16px 12px !important;
}
html:not(#nb) body .c-costcalc-card-label {
align-self: flex-start !important;
width: auto !important;
white-space: nowrap !important;
margin: 0 0 12px 4px !important;
font-size: 13px !important;
line-height: 18px !important;
}
html:not(#nb) body .c-costcalc-card-breakdown {
padding: 16px !important;
width: 100% !important;
gap: 10px !important;
}
html:not(#nb) body .c-costcalc-row {
gap: 12px !important;
}
html:not(#nb) body .c-costcalc-row-label {
flex: 1 1 0 !important;
min-width: 0 !important;
font-size: 13px !important;
line-height: 18px !important;
}
html:not(#nb) body .c-costcalc-row-value {
flex: 0 0 auto !important;
white-space: nowrap !important;
font-size: 13px !important;
line-height: 18px !important;
text-align: right !important;
}
html:not(#nb) body .c-costcalc-info-text {
font-size: 13px !important;
line-height: 18px !important;
}
html:not(#nb) body .c-costcalc-card-total {
width: 100% !important;
padding: 16px !important;
gap: 12px !important;
margin-top: 8px !important;
}
html:not(#nb) body .c-costcalc-total-label {
flex: 1 1 0 !important;
min-width: 0 !important;
font-size: 14px !important;
line-height: 18px !important;
}
html:not(#nb) body .c-costcalc-total-value {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
html:not(#nb) body .c-costcalc-savings {
align-items: center !important;
text-align: center !important;
gap: 24px !important;
padding: 32px 24px !important;
margin-bottom: 32px !important;
}
html:not(#nb) body .c-costcalc-saving-copy {
align-items: center !important;
gap: 8px !important;
}
html:not(#nb) body .c-costcalc-savings-label,
html:not(#nb) body .c-costcalc-saving-sub,
html:not(#nb) body .c-costcalc-saving-value {
text-align: center !important;
text-wrap: balance !important;
}
html:not(#nb) body .c-costcalc-saving-sub {
font-size: 14px !important;
line-height: 20px !important;
}
/* 10.7 "So funktioniert's" (.c-check-process)
Vorher: Titel links, 48 px bis zum Bild, Bildfläche 502 px hoch mit
viel Leerraum, 40 px bis zu den Schritten. Jetzt: Titel mittig, 20 px
zum Bild, Bild im eigenen Format (390:311) ohne Leerraum, 12 px zu den
Schritten: Schritt antippen und das Bild darüber wechselt sichtbar. */
html:not(#nb) body .c-check-process-title {
text-align: center !important;
margin-bottom: 20px !important;
}
html:not(#nb) body .c-check-process-inner {
gap: 12px !important;
}
html:not(#nb) body .c-check-process-visuals {
height: auto !important;
min-height: 0 !important;
aspect-ratio: 390 / 311 !important;
}
html:not(#nb) body .c-check-process-visual {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html:not(#nb) body .c-chceck-process-actions {
margin-top: 24px !important;
}
/* 10.8 Split direkt nach "So funktioniert's" ("Altgeräte nachhaltig
verkaufen …"): erst Überschrift, Text und Button, dann das Bild. */
html:not(#nb) body .l-section:has(> .l-container > .c-check-process) + .l-section .c-split > .c-split-content {
order: 1 !important;
}
html:not(#nb) body .l-section:has(> .l-container > .c-check-process) + .l-section .c-split > .c-split-media {
order: 2 !important;
}
/* 10.9 Überschrift über einer Split-Gruppe (.c-split-header)
"Firmenhandy ohne & mit Vertrag – Was lohnt sich mehr?" stand 20 px
eingerückt und 80 px über dem Bild. Jetzt mittig über dem Bild, 32 px
Abstand. */
html:not(#nb) body .l-container > .c-split-header {
padding: 0 !important;
margin-bottom: 32px !important;
align-items: center !important;
}
html:not(#nb) body .c-split-header-title {
margin: 0 !important;
text-align: center !important;
}
}
/* ==========================================================================
11 SEITE "VERWALTUNG" (BCS CONTROL) (Mobile, bis 767 px)
Aufgefallen auf /business-mobilfunk-verwaltung/. Die Regeln hängen an
den Klassen und gelten überall, wo der Baustein vorkommt (Ausnahme 11.2).
========================================================================== */
@media (max-width: 767px) {
/* 11.1 Hero "Verwaltung" (.c-hero_2.is-control-hero)
Wie 10.1: Das Tablet-Bild war 566 px breit nach rechts geschoben und
links abgeschnitten. Jetzt über die volle Breite der Fläche, ganz
sichtbar, schließt unten ab, 48 px unter dem Button. Tablet und Stift
sitzen in der Bilddatei links von der Mitte, deshalb ist das Bild um
5 % nach rechts geschoben, damit es mittig wirkt. */
html:not(#nb) body .c-hero_2.is-control-hero,
html:not(#nb) body .c-hero_2.is-control-hero > .l-grid {
min-height: 0 !important;
height: auto !important;
}
html:not(#nb) body .c-hero_2.is-control-hero .hero_media {
grid-column: 1 / -1 !important;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 48px -20px 0 !important;
padding: 0 !important;
}
html:not(#nb) body .c-hero_2.is-control-hero .hero_image {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
html:not(#nb) body .c-hero_2.is-control-hero .hero_portrait {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
transform: translateX(5%) !important;
object-fit: contain !important;
}
/* 11.2 Nur Verwaltungsseite (page-id-1258): in den beiden Split-Sektionen
"Mobilfunk läuft …" und "Alles in einem System …" steht das Bild unter
dem Text (sonst mobil Bild zuerst, siehe 5.12). */
html:not(#nb) body.page-id-1258 .c-split:not(.is-text) > .c-split-content {
order: 1 !important;
}
html:not(#nb) body.page-id-1258 .c-split:not(.is-text) > .c-split-media {
order: 3 !important;
}
/* 11.3 Sechs Funktions-Kacheln (.c-advantages.is-control)
Diese Variante hat graue Kacheln statt Linien. Das Zweier-Raster mit
Linien und Plus-Zeichen aus 10.3 passt hier nicht: sechs Kacheln
untereinander, 8 px Abstand, 24 px Innenabstand, Ecken 16, Titel 20/26,
Text 14/20, alles linksbündig, keine Linien, keine Plus-Zeichen. */
html:not(#nb) body .c-advantages.is-control {
gap: 32px !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantages-header {
margin-bottom: 0 !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantages-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
border-top: 0 !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantage-item {
padding: 24px !important;
gap: 0 !important;
border: 0 !important;
border-radius: 16px !important;
align-items: flex-start !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantage-item::before,
html:not(#nb) body .c-advantages.is-control .c-advantage-item::after {
display: none !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantage-02-icon {
margin-bottom: 20px !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantage-02-title {
font-size: 20px !important;
line-height: 26px !important;
margin-bottom: 8px !important;
text-align: left !important;
}
html:not(#nb) body .c-advantages.is-control .c-advantage-02-copy {
font-size: 14px !important;
line-height: 20px !important;
text-align: left !important;
text-wrap: pretty !important;
}
/* 11.4 Text-Split mit den zwei Karten darunter ("Empfohlene Basis" /
"Optional dazu", .c-value-cards)
Reihenfolge Titel, Text, Karten, Button: Der Button stand über den
Karten und steht jetzt mittig darunter. Dafür wird der Container zur
Spalte (flex), der Split aufgelöst (display: contents), die Reihenfolge
kommt über order. Karten 8 px Abstand (waren 20). */
html:not(#nb) body .l-container:has(> .c-split.is-text):has(> .c-value-cards) {
display: flex !important;
flex-direction: column !important;
}
html:not(#nb) body .l-container:has(> .c-value-cards) > .c-split.is-text {
display: contents !important;
}
html:not(#nb) body .l-container:has(> .c-value-cards) > .c-value-cards {
order: 3 !important;
gap: 8px !important;
margin-top: 40px !important;
}
html:not(#nb) body .l-container:has(> .c-value-cards) > .c-split.is-text > .c-split-content:first-child > .c-split-actions {
order: 4 !important;
margin-top: 24px !important;
justify-content: center !important;
align-self: center !important;
}
html:not(#nb) body .l-container:has(> .c-value-cards) > .c-split.is-text > .c-split-content:first-child > .c-split-actions .c-btn-group {
justify-content: center !important;
}
html:not(#nb) body .c-value-card-title {
margin-top: 24px !important;
}
html:not(#nb) body .c-value-card-list-text {
line-height: 20px !important;
margin-bottom: 0 !important;
}
/* 11.5 "BCS CONTROL / Ein MDM verwaltet Geräte. …" (.c-control-header)
Mittig zueinander und zum Bildschirm (war links, 16 px eingerückt); die
festen Umbrüche des Desktop-Layouts sind aufgehoben. */
html:not(#nb) body .c-control-header {
padding: 0 !important;
align-items: center !important;
text-align: center !important;
}
html:not(#nb) body .c-control-header-eyebrow,
html:not(#nb) body .c-control-header-title {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
html:not(#nb) body .c-control-header-title {
text-wrap: balance !important;
}
html:not(#nb) body .c-control-header-title br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
width: 0.25em !important;
height: 1px !important;
}
/* 11.6 "Sie sind bereits BCS-Kunde?" mit Formular (.c-client-unlock)
- Fläche: 40 px Innenabstand oben und unten (oben waren 120).
- Zugeklappt hielt das Formular 130 px frei (Außen- und Innenabstand);
jetzt 0.
- Aufgeklappt: Rahmen 8 px statt 40 px Innenabstand, das eingebettete
Zoho-Formular ist dadurch 310 statt 260 px breit, und 1260 px hoch
statt 500, damit es nicht in sich scrollt. Felder, Schriften und
Abstände IM Formular kommen von Zoho und sind hier nicht änderbar. */
html:not(#nb) body .c-client-unlock {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
html:not(#nb) body .c-client-unlock:not(.is-open) .c-client-unlock-form {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-width: 0 !important;
gap: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
html:not(#nb) body .c-client-unlock.is-open .c-client-unlock-form {
margin-top: 32px !important;
padding: 24px 8px 8px !important;
gap: 8px !important;
}
html:not(#nb) body .c-client-unlock-form-header {
padding: 0 16px !important;
}
html:not(#nb) body .c-client-unlock-form.is-zoho-embed .c-client-unlock-iframe {
height: 1260px !important;
}
}
/* ==========================================================================
12 VERTRAUENS-SIEGEL UNTER DEM HERO (Mobile, bis 767 px)
.c-trust-section mit TÜV, Google und Trustpilot, auf allen Seiten mit
diesem Baustein. Vorher: drei Kacheln 152 x 88 px mit Schatten in der
Anordnung 2 + 1, 120 px unter dem Hero. Jetzt: eine Reihe mit drei gleich
breiten Kacheln, 24 px unter dem Hero, Ecken 12, ohne Schatten.
- Google: Logo oben, Sterne, darunter "4,7 · 1.421 Bewertungen" (die
Zahlen kommen weiter vom Skript; " von 5 | " ist mobil ausgeblendet)
- Trustpilot: das eingebettete Widget lässt sich nicht umbauen, es wird
nur kleiner skaliert (0,54 statt 0,63)
Gilt auch für dieselben Siegel im Hero der Seite "Warum BCS"
(.is-why-hero .hero_brands), siehe 13.1.
Die Siegel im Footer (.footer-trust) sind nicht betroffen.
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .l-section.is-trust-badges-section {
padding-top: 24px !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trust-logos {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
max-width: none !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trust-logos > :not(.c-trust-logo) {
display: none !important; /* leeres Element des Trustpilot-Skripts */
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trust-logo {
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 76px !important;
padding: 8px !important;
gap: 6px !important;
border-radius: 12px !important;
box-shadow: none !important;
overflow: hidden !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trust-logo-img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 56px !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trust-logo.is-google {
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 6px !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .trust-icon-box {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-google-content {
flex: 0 0 auto !important;
align-items: center !important;
gap: 4px !important;
width: 100% !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-google-rating-meta {
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: baseline !important;
gap: 0 3px !important;
width: auto !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-google-meta-row {
width: auto !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-google-rating-copy01 {
display: none !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-google-rating-value {
font-weight: 600 !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-google-rating-value::after {
content: "\00a0\00b7" !important;
font-weight: 400 !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trustpilot-scale-wrap {
width: 92px !important;
height: 54px !important;
flex: 0 0 92px !important;
}
html:not(#nb) body :is(.c-trust-section, .is-why-hero .hero_brands) .c-trustpilot-code {
transform: scale(0.54) !important;
}
}
/* ==========================================================================
13 SEITE "WARUM BCS" (Mobile, bis 767 px)
Aufgefallen auf /warum-bcs/. Die Regeln hängen an den Klassen und gelten
überall, wo der Baustein vorkommt.
========================================================================== */
@media (max-width: 767px) {
/* 13.1 Hero "Warum BCS" (.c-hero_2.is-why-hero)
Vorher: Raster mit zwei schmalen Spalten (127 + 163 px). Die Siegel
standen einzeln untereinander, 120 px unter dem Button; der Hinweis
"Ulrike Siebert und über 75.182 weitere Kunden …" war in die rechte
Spalte gequetscht (Text 96 px breit, sechs Zeilen, lief über den Rand);
das Porträt war absolut positioniert und saß nicht mittig. Höhe 1370 px.
Jetzt: eine Spalte in der Reihenfolge Text, Button, Kunden-Hinweis
(Avatare links, Text daneben in drei Zeilen), Siegel (drei Kacheln in
einer Reihe, siehe Abschnitt 12), Porträt mittig, schließt unten ab.
Höhe rund 1180 px. */
html:not(#nb) body .c-hero_2.is-why-hero,
html:not(#nb) body .c-hero_2.is-why-hero > .l-grid {
min-height: 0 !important;
height: auto !important;
}
html:not(#nb) body .c-hero_2.is-why-hero > .l-grid {
display: flex !important;
flex-direction: column !important;
}
html:not(#nb) body .c-hero_2.is-why-hero .c-why-proof {
order: 1 !important;
width: 100% !important;
margin: 32px 0 0 !important;
}
html:not(#nb) body .c-hero_2.is-why-hero .c-why-proof .c-check-banner-proof {
align-items: center !important;
gap: 12px !important;
width: 100% !important;
margin: 0 !important;
}
html:not(#nb) body .c-hero_2.is-why-hero .c-why-proof .c-check-banner-proof-avatars {
flex: 0 0 auto !important;
margin: 0 !important;
}
html:not(#nb) body .c-hero_2.is-why-hero .c-why-proof .c-check-banner-proof-copy {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
font-size: 13px !important; /* war 12/16 */
line-height: 18px !important;
text-wrap: pretty !important;
}
html:not(#nb) body .c-hero_2.is-why-hero .hero_brands {
order: 2 !important;
display: block !important;
width: 100% !important;
margin: 24px 0 0 !important; /* war 120 */
}
html:not(#nb) body .c-hero_2.is-why-hero .hero_media {
order: 3 !important;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 24px -20px 0 !important;
transform: none !important; /* war 20 px nach oben geschoben */
}
html:not(#nb) body .c-hero_2.is-why-hero .hero_image {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
html:not(#nb) body .c-hero_2.is-why-hero .hero_portrait {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 320px !important;
height: auto !important;
margin: 0 auto !important;
transform: none !important;
object-fit: contain !important;
}
/* 13.2 Zweispaltige Vergleichstabelle "BCS Mobile im Vergleich"
(.c-provider-compare.is-simple-compare)
Die Tabelle hat nur zwei Spalten mit je 183 px. Die Silbentrennung aus
9.4 (dort für drei schmale Spalten nötig) hat hier unnötig getrennt
("kontinu-ierliche", "Mobilfunkbe-treuung"). Hier ohne automatische
Trennung; die Wörter passen in die Spalte. Der Abstand zur Sektion
danach ist 96 px (war 120, dazu kommt die Luft der letzten Zeile). */
html:not(#nb) body .c-provider-compare.is-simple-compare .c-compare-table.is-provider :is(.c-table-copy, .c-table-copy-fat):not(.is-row-label) {
hyphens: manual !important;
-webkit-hyphens: manual !important;
text-wrap: pretty !important;
}
html:not(#nb) body .l-section:has(> .l-container > .c-provider-compare.is-simple-compare) + .l-section.is-space-before-160 {
padding-top: 96px !important;
}
/* 13.3 Leere Überschriften-Zeile über einem Split (.c-split-header ohne
Inhalt, z. B. über "Erstklassige Bewertungen")
Sie hat keinen Inhalt, brachte aber 32 px Abstand mit. Mobil aus. */
html:not(#nb) body .l-container > .c-split-header:empty {
display: none !important;
}
/* 13.4 Karten mit Icon ("Transparenz", "Zeitersparnis", …, .c-value-card)
Zwischen Icon und Titel standen 52 px (28 unter dem Icon + 24 über dem
Titel). Jetzt 20 px, Titel 8 px über dem Text (war 21), Karte innen
24 px (war 32). Karten ohne Icon (Verwaltungsseite) behalten 11.4. */
html:not(#nb) body .c-value-card {
padding: 24px !important;
}
html:not(#nb) body .c-value-card-icon {
margin-bottom: 20px !important;
}
html:not(#nb) body .c-value-card-icon + .c-value-card-title {
margin-top: 0 !important;
margin-bottom: 8px !important;
}
/* 13.5 Branchen-Slider "Für Unternehmen jeder Branche & Größe"
(.c-industry-slider): mobil natives Wischen, wie 5.9 und 10.2
Vorher: Das Skript verschiebt die Kartenreihe per transform, startet
auf der fünften Karte, die Karte ist 340 px breit (die nächste ist
nicht zu sehen), dazu Pfeile und Verlaufsränder.
Jetzt: normale waagerechte Scroll-Leiste mit Einrasten, Start auf der
ersten Karte, Karte 88 px schmaler als der Bildschirm (die nächste
schaut herein), 12 px Abstand, Pfeile und Verläufe mobil aus. Das
Skript bleibt unangetastet, nur sein transform wird ausgeschaltet. */
html:not(#nb) body .c-industry-slider-header {
margin-bottom: 32px !important; /* war 48 */
}
html:not(#nb) body .c-industry-slider-controls,
html:not(#nb) body .c-industry-slider-fade {
display: none !important;
}
html:not(#nb) body .c-industry-slider-viewport {
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 24px !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
transform: none !important;
touch-action: pan-x pan-y !important;
cursor: auto !important;
}
html:not(#nb) body .c-industry-slider-viewport::-webkit-scrollbar {
display: none !important;
}
html:not(#nb) body .c-industry-slider-track {
transform: none !important;
transition: none !important;
gap: 12px !important;
width: max-content !important;
padding-left: 24px !important;
padding-right: 64px !important; /* letzte Karte rastet auch links ein */
touch-action: pan-x pan-y !important;
}
html:not(#nb) body .c-industry-card {
width: calc(100vw - 88px) !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 calc(100vw - 88px) !important;
scroll-snap-align: start !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================================
14 SEITE "ÜBER UNS" (Mobile, bis 767 px)
Aufgefallen auf /ueber-bcs/. Die Regeln hängen an den Klassen und gelten
überall, wo der Baustein vorkommt.
========================================================================== */
@media (max-width: 767px) {
/* 14.1 Chip über einer Überschrift ("Unser Team", "Wer wir sind")
Der Chip klebte ohne Abstand an der Überschrift. Jetzt 16 px. Über der
linksbündigen Überschrift (.c-service-overview-header) steht er auch
links (war mittig). */
html:not(#nb) body .c-service-overview-header > .c-chip {
margin: 0 auto 16px 0 !important;
}
html:not(#nb) body .l-container > .c-split-header > .c-chip {
margin-bottom: 16px !important;
}
/* 14.2 Unternehmensgeschichte (.c-company-history)
Vorher: Die Jahres-Spalte war 128 px breit, für Titel und Text blieben
194 px (sehr schmal, viele Zeilen). Das Jahr stand bei geöffnetem
Eintrag in der Mitte des langen Textes. Die Kapitel-Überschrift "Vom
Mobilfunkvertrieb zum Systempartner" lief rechts aus dem Bildschirm.
Jetzt: Jahres-Spalte 64 px, Inhalt 262 px. Das Jahr steht oben neben
dem Titel; lange Angaben ("2003 - 2004", "seit 2022") brechen im Chip
auf zwei Zeilen um. Die Kapitel-Überschrift darf umbrechen. */
html:not(#nb) body .c-history-chapter-left {
align-items: flex-start !important;
gap: 4px !important;
}
html:not(#nb) body .c-history-number {
flex: 0 0 auto !important;
}
html:not(#nb) body .c-history-label {
flex: 0 1 auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 32px !important;
padding: 4px 14px !important;
border-radius: 16px !important;
white-space: normal !important;
text-wrap: balance !important;
}
html:not(#nb) body .c-history-item {
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: 16px !important;
}
html:not(#nb) body .c-history-marker {
width: auto !important;
padding: 20px 12px 0 0 !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
html:not(#nb) body .c-history-marker::before {
top: 32px !important; /* Punkt auf Höhe des Jahres */
}
html:not(#nb) body .c-history-year {
width: 52px !important;
min-width: 0 !important;
height: auto !important;
min-height: 24px !important;
padding: 5px 4px !important;
border-radius: 12px !important;
white-space: normal !important;
text-align: center !important;
line-height: 14px !important;
}
html:not(#nb) body .c-history-trigger {
gap: 12px !important;
}
html:not(#nb) body .c-history-title {
flex: 1 1 0 !important;
min-width: 0 !important;
}
/* 14.3 Zitat mit Foto ("Kunden zu gewinnen war nie unser eigentliches
Ziel", .c-testimonial-highlight)
Vorher: Innenabstand 8/64/8/8 aus dem Desktop-Layout. Das Foto war
dadurch 304 px breit und links abgeschnitten, rechts blieb ein blauer
Streifen, zwischen Foto und Zitat lagen 80 px.
Jetzt: Foto über die volle Kartenbreite, 24 px bis zum Zitat, Text mit
24 px Rand, unten 32 px. */
html:not(#nb) body .c-testimonial-highlight {
padding: 8px 8px 32px !important;
gap: 24px !important;
}
html:not(#nb) body .c-testimonial-highlight .c-testimonial-media {
width: 100% !important;
max-width: none !important;
border-radius: 14px !important;
}
html:not(#nb) body .c-testimonial-highlight .c-testimonial-image {
width: 100% !important;
height: 100% !important;
}
html:not(#nb) body .c-testimonial-highlight .c-testimonial-content {
width: auto !important;
padding: 0 16px !important;
gap: 20px !important;
}
}
/* ==========================================================================
13.6 NACHTRAG ZU ABSCHNITT 13: Zweispaltige Vergleichstabelle
"BCS Mobile im Vergleich" (.c-provider-compare.is-simple-compare)
Vorher: Die zwei Kopf-Elemente waren verschieden groß (links Icon und
Text als zwei einzelne Pillen mit 28 px Höhe, zusammen breiter als die
Spalte; rechts eine Pille mit 48 px Höhe). Die Tabelle lief nur rechts
bis an den Rand, Zellen 20/8 px.
Jetzt:
- beide Kopf-Elemente als gleich große Pille (Spaltenbreite, 44 px hoch),
Inhalt mittig: links nur der Text "99% aller Mitbewerber" in einer
Zeile, rechts nur das Logo (24 px hoch). Das rote X und der grüne
Haken sind mobil ausgeblendet (Wunsch Moritz: wirkte unausgewogen)
- Tabelle beidseitig 16 px über den Seitenrand (374 statt 366 px,
symmetrisch), Zellen 16/12 px, Zeilen ausgeglichen umbrochen
- BCS-Spalte durchgehend hellblau hinterlegt (#F1F9FF, wie die
BCS-Spalte in 10.4), ohne Trennlinie und ohne die kleinen
Plus-Zeichen an den Kreuzungen
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-scroll {
margin-left: -16px !important;
margin-right: -16px !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-row > .c-table-cell {
flex: 1 1 0 !important;
width: 50% !important;
padding: 16px 12px !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-row.is-head > .c-table-cell {
padding: 12px 8px !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-cell.is-highlight {
background: #F1F9FF !important;
border-left: 0 !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-cell.is-highlight::before,
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-cell.is-highlight::after {
display: none !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-head-brand {
box-sizing: border-box !important;
width: 100% !important;
min-height: 44px !important;
padding: 6px 10px !important;
gap: 6px !important;
justify-content: center !important;
background: #F5F6F9 !important;
border-radius: 999px !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-cell.is-highlight .c-table-head-brand {
background: #fff !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-status-pill {
display: none !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-headline.is-pill {
min-width: 0 !important;
padding: 0 !important;
justify-content: center !important;
background: transparent !important;
font-size: 12px !important;
line-height: 16px !important;
text-align: center !important;
white-space: nowrap !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-table-brand-logo {
width: auto !important;
height: 24px !important;
}
html:not(#nb) body .c-provider-compare.is-simple-compare .c-compare-table.is-provider :is(.c-table-copy, .c-table-copy-fat):not(.is-row-label) {
text-wrap: balance !important;
}
}
/* ==========================================================================
15 NETZ-SEITEN (Telekom, o2, Vodafone, klarmobil, congstar, freenet)
(Mobile, bis 767 px)
Aufgefallen auf /business-handyvertraege/telekom-business-tarife/. Die
sechs Seiten sind gleich aufgebaut; die Regeln hängen an den Bausteinen.
========================================================================== */
@media (max-width: 767px) {
/* 15.1 Hero der Netz-Seiten (.c-hero_2.is-competitor-hero)
Wie 10.1: Das Tablet-Bild war 462 px breit absolut positioniert und
links abgeschnitten. Jetzt über die volle Breite der Fläche, ganz
sichtbar, mittig, 32 px unter dem Button. */
html:not(#nb) body .c-hero_2.is-competitor-hero,
html:not(#nb) body .c-hero_2.is-competitor-hero > .l-grid {
min-height: 0 !important;
height: auto !important;
}
html:not(#nb) body .c-hero_2.is-competitor-hero .hero_media {
grid-column: 1 / -1 !important;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 32px -20px 0 !important;
transform: none !important;
}
html:not(#nb) body .c-hero_2.is-competitor-hero .hero_image {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
html:not(#nb) body .c-hero_2.is-competitor-hero .hero_portrait {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
transform: none !important;
object-fit: contain !important;
}
/* 15.2 Tarif-Tabelle "Business Mobil S / M / L / XL"
(.c-compare-table.is-tariffs in .c-provider-compare)
FEHLER BEHOBEN: Regel 9.4 (overflow: visible für die Tabelle der
Tarifseite) galt auch hier. Die Tabelle ist 900 px breit, ließ sich
nicht seitlich bewegen und wurde am Bildschirmrand abgeschnitten: nur
der erste Tarif war ganz zu sehen, L und XL gar nicht.
Jetzt: waagerecht wischbar bis an beide Bildschirmränder, Spalten
224 px (die nächste schaut herein), Einrasten je Spalte, Hinweiszeile
"Seitlich wischen für alle Tarife" darüber. Zellen 16/12 (waren 28/20).
Die Spaltenzahl kommt aus dem Inhalt (grid-auto-flow), nicht aus einer
festen Zahl. */
html:not(#nb) body .c-provider-compare:has(> .c-table-scroll > .c-compare-table.is-tariffs) > .c-table-scroll {
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 -24px !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity !important;
scroll-padding-left: 24px !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
}
html:not(#nb) body .c-provider-compare:has(> .c-table-scroll > .c-compare-table.is-tariffs) > .c-table-scroll::-webkit-scrollbar {
display: none !important;
}
html:not(#nb) body .c-provider-compare:has(> .c-table-scroll > .c-compare-table.is-tariffs) > .c-table-scroll::before {
content: "Seitlich wischen für alle Tarife \2192" !important;
display: block !important;
position: sticky !important;
left: 0 !important;
box-sizing: border-box !important;
width: 100vw !important;
padding: 0 24px 12px !important;
font-size: 12px !important;
line-height: 16px !important;
color: #6B7280 !important;
text-align: right !important;
}
html:not(#nb) body .c-compare-table.is-tariffs {
box-sizing: content-box !important;
width: max-content !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 24px !important;
}
html:not(#nb) body .c-compare-table.is-tariffs .c-table-row {
grid-template-columns: none !important;
grid-auto-flow: column !important;
grid-auto-columns: 224px !important;
}
html:not(#nb) body .c-compare-table.is-tariffs .c-table-cell {
min-width: 0 !important;
padding: 16px 12px !important;
scroll-snap-align: start !important;
}
html:not(#nb) body .c-compare-table.is-tariffs .c-table-row.is-head .c-table-cell {
padding: 14px 12px !important;
}
/* 15.3 Chip über dem Titel im Text-Split ("Darum über BCS",
.c-split.is-text): klebte ohne Abstand am Titel (Folge von 9.3,
row-gap 0). Jetzt 16 px. */
html:not(#nb) body .c-split.is-text > .c-split-content:first-child > .c-chip {
order: 0 !important;
margin-bottom: 16px !important;
}
/* 15.4 "Welches Netz? Das entscheiden Sie!" mit Fließtext
(.c-network-choice .c-split-copy): Der Text stand linksbündig und ohne
Abstand unter der zentrierten Überschrift. Jetzt mittig, 16 px Abstand.
Ergänzt 9.2. */
html:not(#nb) body .c-network-choice .c-split-copy {
margin-top: 16px !important;
align-items: center !important;
}
html:not(#nb) body .c-network-choice .c-split-copy,
html:not(#nb) body .c-network-choice .c-split-copy .c-split-txt {
text-align: center !important;
}
/* 15.5 FAQ-Sektion (.content-section mit .c-faq): 96 px nach oben und
80 px nach unten (waren je 160). Wo 9.8 greift (nächste Sektion bringt
eigenen Abstand mit), bleibt es unten bei 0. */
html:not(#nb) body .l-section.content-section:has(.c-faq) {
padding-top: 96px !important;
padding-bottom: 80px !important;
}
/* 15.6 Sechs Vorteile im Zweier-Raster (freenet-Seite,
.c-advantages-grid.is-wide-grid): lange Wörter wurden mitten im Wort
umbrochen ("Vertragsoptimierun / g", "Rufnummernmitnah / me"). Jetzt
15/20 (war 16/20), 8 px Seitenabstand in der Zelle (war 10) und
Silbentrennung nur für sehr lange Wörter. */
html:not(#nb) body .c-advantages-grid.is-wide-grid .c-advantage-item {
padding-left: 8px !important;
padding-right: 8px !important;
}
html:not(#nb) body .c-advantages-grid.is-wide-grid .c-advantage-02-title {
font-size: 15px !important;
line-height: 20px !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
hyphenate-limit-chars: 12 6 5 !important;
overflow-wrap: break-word !important;
text-wrap: balance !important;
}
/* 15.7 Sektion "Praxisbeispiel Telekom-Netz" (Video Heidi Hummelberger,
Reviderm AG) auf den Seiten o2 (1027) und Vodafone (1028) mobil
ausgeblendet. Wunsch Moritz vom 9.10.: Das Beispiel passt nur zur
Telekom-Seite. Auf klarmobil, congstar und freenet gibt es die Sektion
nicht. ACHTUNG: gilt nur mobil; am Desktop steht die Sektion auf o2 und
Vodafone weiter, bis sie in Oxygen entfernt wird. */
html:not(#nb) body:is(.page-id-1027, .page-id-1028) .l-section:has(> .l-container > .c-split.is-reverse.is-align-start) {
display: none !important;
}
}
/* ==========================================================================
15.8 bis 15.11 NACHTRAG NETZ-SEITEN (Mobile, bis 767 px)
Rückmeldung Moritz vom 9.10. zur Telekom-Seite. Die Seiten-Regeln gelten
für alle sechs Netz-Seiten: Telekom 886, o2 1027, Vodafone 1028,
klarmobil 1031, congstar 1032, freenet 1033.
========================================================================== */
@media (max-width: 767px) {
/* 15.8 Hinweis im Hero ("BCS Mobile steht in keiner Verbindung zur …",
.c-hero-disclaimer)
Vorher: Info-Symbol (44 px) neben einer Text-Pille (74 px), die unten
auf dem Tablet-Bild saß; das Bild wirkte dadurch unten angeschnitten.
Jetzt (Wunsch Moritz): mobil ohne Symbol und ohne Pille, nur der Text,
mittig, 11/16, 24 px unter dem Bild und 28 px über dem unteren Rand der
Fläche. Der feste Umbruch nach dem ersten Satz ist mobil aufgehoben
(
-Ersatz wie in 7.3), die Zeilen sind ausgeglichen. */
html:not(#nb) body .c-hero-disclaimer {
display: block !important;
margin: 24px 0 0 !important;
padding: 0 0 28px !important;
}
html:not(#nb) body .c-hero-disclaimer-icon {
display: none !important;
}
html:not(#nb) body .c-hero-disclaimer-text {
display: block !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
font-size: 11px !important;
line-height: 16px !important;
text-align: center !important;
text-wrap: balance !important;
}
html:not(#nb) body .c-hero-disclaimer-text br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
width: 0.25em !important;
height: 1px !important;
}
/* 15.9 Bild-Text-Sektionen der Netz-Seiten: erst Text, dann Bild
Gilt für "… Netz behalten oder wechseln?", das Praxisbeispiel und
"Wie gut ist Ihr Business Mobilfunk tatsächlich aufgestellt?". Die
allgemeine Regel (Bild über dem Text, Entwurf 4) wird hier umgedreht,
wie in 11.2 für die Verwaltungsseite.
Ausnahme: die Sektion direkt nach der Tarif-Tabelle (Bild, dann "Besonders
bei kleineren Unternehmen …") bleibt Bild zuerst, dort bleibt auch das
Trustpilot-Element im Bild (Moritz schaut sich das noch an). */
html:not(#nb) body:is(.page-id-886, .page-id-1027, .page-id-1028, .page-id-1031, .page-id-1032, .page-id-1033) .l-section:not(.l-section:has(.c-compare-table.is-tariffs) + .l-section) > .l-container > .c-split:not(.is-text) > .c-split-content {
order: 1 !important;
}
html:not(#nb) body:is(.page-id-886, .page-id-1027, .page-id-1028, .page-id-1031, .page-id-1032, .page-id-1033) .l-section:not(.l-section:has(.c-compare-table.is-tariffs) + .l-section) > .l-container > .c-split:not(.is-text) > .c-split-media {
order: 3 !important;
}
/* 15.10 Trustpilot-Element in den Bildern dieser Sektionen
(.c-split-trust) mobil ausgeblendet: im Bild "Business Tarif Vergleich"
und im Bild der Certified-Sektion. Ausnahme wie in 15.9. */
html:not(#nb) body:is(.page-id-886, .page-id-1027, .page-id-1028, .page-id-1031, .page-id-1032, .page-id-1033) .l-section:not(.l-section:has(.c-compare-table.is-tariffs) + .l-section) > .l-container > .c-split:not(.is-text) .c-split-trust {
display: none !important;
}
/* 15.11 "Welches Netz?" mit den drei Kennzahlen (.c-network-choice mit
.c-metrics): Button -> Kennzahlen 80 px (waren 36), zwischen den
Kennzahlen 24 px (waren 16), Kennzahlen -> nächste Sektion 80 px
(unverändert). Die Kennzahlen stehen damit gleich weit von der Sektion
darüber und der darunter. Gilt nur, wo der Baustein Kennzahlen enthält;
ohne Kennzahlen (Tarifseite, Warum BCS) bleibt 9.2. */
html:not(#nb) body .c-network-choice:has(> .c-metrics) {
gap: 80px !important;
}
html:not(#nb) body .c-network-choice .c-metrics {
gap: 24px !important;
}
html:not(#nb) body .l-section:has(> .l-container > .c-network-choice > .c-metrics) + .l-section {
padding-top: 80px !important;
}
}
/* ==========================================================================
16 SEITE "CERTIFIED" (Mobile, bis 767 px)
Aufgefallen auf /certified/ (Beitrag 1422), Rückmeldung Moritz vom 9.10.
Die Regeln hängen an den Bausteinen; nur 16.3 ist an die Seite gebunden.
========================================================================== */
@media (max-width: 767px) {
/* 16.1 Bilder in den fünf Karten "Was ist BCS Certified?" bis "Darum lohnt
sich die Zusammenarbeit mit BCS" (.c-horizontal-story-mobile-visual)
Auf dem iPhone war das Bild der letzten Karte angeschnitten. Das Bild
hatte Breite und Höhe 100 % in einer quadratischen Fläche; das rechnen
nicht alle Browser gleich. Jetzt: Bild in natürlichem Seitenverhältnis,
höchstens 310 px hoch und so breit wie die Fläche, mittig; die Fläche
richtet sich nach dem Bild.
Letzte Karte ("Darum lohnt sich …", .is-horizontal-slide05): In der
Bilddatei certified-last-slide.png ist das Schild "360° Business
Mobilfunk" am oberen Bildrand abgeschnitten (die Datei beginnt mitten
im Schild). Mit 20 px Rand darüber sah das angeschnitten aus. Jetzt
sitzt das Bild bündig an der Oberkante der Fläche, das Schild hängt
wie ein Reiter an der Kante. Sauberer wäre ein neuer Export mit Luft
über dem Schild.
Zähler "1/5" bis "5/5" (.c-horizontal-story-eyebrow): Geist Mono
12/20, -1 % Laufweite, wie die anderen Chips. In selectors.css steht
font-family: "var(--font-mono)" in Anführungszeichen; dadurch greift
die Variable nicht und der Browser nimmt eine Ersatzschrift. Am
Desktop besteht das weiter (für Dirk: Anführungszeichen entfernen). */
html:not(#nb) body .c-horizontal-story-mobile-visual {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: 20px !important;
}
html:not(#nb) body .c-horizontal-story-mobile-image {
position: static !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 310px !important;
margin: 0 auto !important;
object-fit: contain !important;
transform: none !important;
}
html:not(#nb) body .c-horizontal-story-mobile-visual.is-horizontal-slide05 {
align-items: flex-start !important;
padding-top: 0 !important;
}
html:not(#nb) body .c-horizontal-story-eyebrow {
font-family: "Geist Mono", sans-serif !important;
font-size: 12px !important;
line-height: 20px !important;
letter-spacing: -0.01em !important;
font-weight: 500 !important;
}
/* 16.2 Award-Fläche "Ausgezeichnet mit dem Best Practice Award …"
(.c-award-section, .c-award-gallery)
Die zwei Fotos standen 8 px links und rechts über dem Inhalt, 20 px
auseinander, 64 px unter dem Text; darunter 80 px graue Fläche.
Jetzt überall derselbe Abstand von 16 px: zwischen den Fotos, links
und rechts bis zum Rand der grauen Fläche und darunter. 32 px unter dem
Text. */
html:not(#nb) body .c-award-section {
gap: 32px !important;
padding-bottom: 16px !important;
}
html:not(#nb) body .c-award-gallery {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
gap: 16px !important;
position: static !important; /* war left 50 % + translate */
left: auto !important;
right: auto !important;
transform: none !important;
align-self: stretch !important;
width: auto !important;
max-width: none !important;
margin: 0 -4px !important;
}
/* 16.3 Bild-Text-Sektionen der Certified-Seite: erst Text, dann Bild
("Zertifikat als starkes Trust-Element …", "Was das Siegel bedeutet",
"So erhält Ihr Unternehmen BCS Certified"). Wie 11.2 und 15.9. Die
Award-Fläche (16.2) bleibt Bild zuerst. */
html:not(#nb) body.page-id-1422 .l-container > .c-split:not(.is-text) > .c-split-content {
order: 1 !important;
}
html:not(#nb) body.page-id-1422 .l-container > .c-split:not(.is-text) > .c-split-media {
order: 3 !important;
}
/* 16.4 "Alle Zertifikate im Überblick" (.c-certificate-header in
.is-certificate-stack): Überschrift und Text mittig, 12 px Abstand
(waren 28). */
html:not(#nb) body .is-certificate-stack .c-certificate-header {
align-items: center !important;
gap: 0 !important;
}
html:not(#nb) body .is-certificate-stack .c-certificate-header-title {
margin-bottom: 12px !important;
text-align: center !important;
}
html:not(#nb) body .is-certificate-stack .c-certificate-header-copy {
text-align: center !important;
text-wrap: balance !important;
}
/* 16.5 Die drei Zertifikat-Flächen (Tarife, Hardware, Device Management;
.c-certificate-frame, .c-certificate-details)
Vorher Reste des Desktop-Layouts: vier Chips mittig untereinander über
der Überschrift; "Wer profitiert" links neben der Liste; rund 300 px
leere Fläche unter dem Bild; "Nutzung", "Warum …" und "Geprüfte
Kernpunkte" 48 px eingerückt in 222 px Breite.
Jetzt:
- Überschrift zuerst, darunter die Chips in EINER Zeile zum seitlichen
Wischen (laufen bis an die Ränder der Fläche, der nächste Chip
schaut herein)
- "Was das Siegel bedeutet" 12 px über seinem Text (waren 32)
- "Wer profitiert" über der Liste, Liste als 2 x 2
- alles in derselben Inhaltsbreite (294 px bei 390 px Bildschirm),
Abstand Bild -> "Nutzung" rund 70 px */
html:not(#nb) body .c-certificate-frame {
padding-bottom: 16px !important;
}
html:not(#nb) body .c-certificate-title {
order: -2 !important;
margin-bottom: 16px !important;
}
html:not(#nb) body .c-certificate-chips {
order: -1 !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
align-self: stretch !important;
gap: 8px !important;
width: auto !important;
max-width: none !important;
margin: 0 -44px 28px !important;
padding: 0 44px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
}
html:not(#nb) body .c-certificate-chips::-webkit-scrollbar {
display: none !important;
}
html:not(#nb) body .c-certificate-chip {
flex: 0 0 auto !important;
margin: 0 !important;
white-space: nowrap !important;
}
html:not(#nb) body .c-certificate-subtitle {
margin-bottom: 12px !important;
}
html:not(#nb) body .c-certificate-benefits {
flex-direction: column !important;
align-items: flex-start !important;
align-self: stretch !important;
gap: 16px !important;
}
html:not(#nb) body .c-certificate-benefits-list {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 12px 16px !important;
width: 100% !important;
}
html:not(#nb) body .c-certificate-details {
grid-template-columns: minmax(0, 1fr) !important;
padding: 8px 12px 40px !important; /* war 124/48/80 */
}
html:not(#nb) body .c-certificate-details-content {
gap: 32px !important;
}
html:not(#nb) body .c-certificate-detail-copy {
padding-left: 0 !important;
}
html:not(#nb) body .c-certificate-point {
grid-template-columns: 20px minmax(0, 1fr) !important;
}
/* 16.6 "Werden Sie BCS Certified GOLD-Partner" (.c-certified-gold)
Die Reihe mit den vier Siegeln stand rund 160 px unter dem Text (80 px
Außenabstand plus 78 px Leerraum in der Reihe selbst). Jetzt rund
40 px. Der Chip darüber hat 16 px Abstand zur Überschrift und ist nur
so breit wie sein Text. "GOLD PARTNER" 10 px, damit es nicht an den
Bildschirmrand stößt. */
html:not(#nb) body .c-certified-gold {
margin-top: -40px !important;
}
html:not(#nb) body .c-certified-gold-result-label {
font-size: 10px !important;
padding: 4px 6px !important;
}
html:not(#nb) body .c-split.is-text > .c-split-content:first-child > .c-info-chip {
order: 0 !important;
justify-self: start !important;
align-self: flex-start !important;
width: auto !important;
max-width: 100% !important;
margin-bottom: 16px !important;
}
/* 16.7 Schritte mit Bild ("Bedarfsanalyse", "Struktur umsetzen",
"Zertifikatvergabe"; .c-steps). Gilt überall, wo der Baustein vorkommt.
Vorher stand der Text 32 px unter seinem Bild, aber nur 20 px über dem
nächsten Bild; er wirkte dadurch dem falschen Bild zugeordnet. Jetzt
16 px unter dem eigenen Bild und 48 px bis zum nächsten. Bild immer in
voller Breite. */
html:not(#nb) body .c-steps {
gap: 48px !important;
}
html:not(#nb) body .c-step-content {
margin-top: 16px !important;
}
html:not(#nb) body .c-step-visual img {
display: block !important;
width: 100% !important;
height: auto !important;
}
}
/* ==========================================================================
16.8 NACHTRAG ZU ABSCHNITT 16 (Certified) (Mobile, bis 767 px)
Zweite Rückmeldung Moritz vom 9.10. Die Regeln hier stehen nach
Abschnitt 16 und überschreiben dort gleich lautende Werte.
========================================================================== */
@media (max-width: 767px) {
/* Letzte Karte "Darum lohnt sich …": Das Bild sitzt wieder mit Abstand
(24 px) unter der Oberkante statt bündig daran. Das Schild "360°
Business Mobilfunk" wirkte an der Kante weiter angeschnitten. In der
Datei fehlen oben nur rund 3 von 980 Bildzeilen des Schilds. */
html:not(#nb) body .c-horizontal-story-mobile-visual.is-horizontal-slide05 {
align-items: center !important;
padding-top: 24px !important;
}
/* Award-Fläche: überall 12 px statt 16 px (zwischen den Fotos, seitlich,
unten). */
html:not(#nb) body .c-award-section {
padding-bottom: 12px !important;
}
html:not(#nb) body .c-award-gallery {
gap: 12px !important;
margin: 0 -8px !important;
}
/* Chip auf grauer Fläche weiß (z. B. "BCS Certified" in der Award-Fläche).
Der Chip hatte dieselbe Farbe wie die graue Fläche (#F5F6F9) und war
dadurch nicht als Chip zu erkennen. Gilt für alle grauen Flächen. */
html:not(#nb) body .l-panel:is(.is-award-panel, .is-neutral-100, .is-horizontal-story-panel) .c-chip .chip-label {
background-color: #fff !important;
}
/* "Ihr BCS Certified Marketing-Kit …": Überschrift 24 px über ihren drei
Karten (waren 72), Karten exakt so breit wie die Überschrift (waren je
1 px schmaler eingerückt). */
html:not(#nb) body .c-certificate-header:has(+ .c-value-cards) {
margin-bottom: 0 !important;
}
html:not(#nb) body .c-certificate-header:has(+ .c-value-cards) .c-certificate-header-title {
margin-bottom: 0 !important;
}
html:not(#nb) body .l-container > .c-certificate-header + .c-value-cards {
width: 100% !important;
margin-top: 24px !important;
}
html:not(#nb) body .c-value-cards > .c-value-card {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
/* Zertifikat-Flächen: mehr Inhaltsbreite. Der Inhalt hatte 44 px Rand in
der farbigen Fläche, jetzt 24 px (334 statt 294 px Breite bei 390 px
Bildschirm). Kernpunkte kleiner: Titel 15/20 halbfett (war 18/20 fett),
Unterzeile 13/18 (war 16/20), 16 px zwischen den Punkten (waren 24).
Zwischen den farbigen Flächen 4 px, gleich wie links und rechts zum
Bildschirmrand (waren 16). */
html:not(#nb) body .c-certificate-frame {
padding-left: 0 !important;
padding-right: 0 !important;
}
html:not(#nb) body .c-certificate-main-content {
padding-left: 4px !important;
padding-right: 4px !important;
}
html:not(#nb) body .c-certificate-chips {
margin: 0 -24px 28px !important;
padding: 0 24px !important;
}
html:not(#nb) body .c-certificate-details {
padding: 8px 0 40px !important;
}
html:not(#nb) body .c-certificate-details-content,
html:not(#nb) body .c-certificate-details-points {
padding-left: 4px !important;
padding-right: 4px !important;
}
html:not(#nb) body .c-certificate-points-list {
gap: 16px !important;
}
html:not(#nb) body .c-certificate-point-title {
font-size: 15px !important;
line-height: 20px !important;
font-weight: 600 !important;
}
html:not(#nb) body .c-certificate-point-copy {
font-size: 13px !important;
line-height: 18px !important;
}
html:not(#nb) body .is-certificate-stack:not(.is-last-certificate-stack) {
padding-bottom: 4px !important;
}
}
/* ==========================================================================
16.9 ZERTIFIKAT-FLÄCHEN: dunklere Töne (Mobile, bis 767 px)
Dritte Rückmeldung Moritz vom 9.10. Am Desktop liegt in jeder Fläche ein
dunkleres Feld (900er-Ton) auf dem 800er-Ton; mobil ist dieses Feld in
global-settings.css ausgeschaltet, die Fläche war dadurch nur im helleren
800er-Ton. Jetzt mobil die ganze Fläche im 900er-Ton, dieselben Werte
wie das dunkle Feld am Desktop:
Tarife #001A29 (blue_900), Hardware #0B2228 (teal_900),
Device Management #161A1D (neutral_900).
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .l-panel.is-certificate-panel.is-tariff-certificate {
background-color: #001A29 !important;
}
html:not(#nb) body .l-panel.is-certificate-panel.is-hardware-certificate {
background-color: #0B2228 !important;
}
html:not(#nb) body .l-panel.is-certificate-panel.is-control-certificate {
background-color: #161A1D !important;
}
/* Kleine Chips "Wer profitiert", "Nutzung", "Warum das …", "Geprüfte
Kernpunkte": Innenabstand seitlich 14 px (waren 10). Hintergrund weiß
mit 8 % statt schwarz mit 22 %: auf dem dunkleren Ton wäre ein
schwarzer Chip kaum noch zu sehen. Der zweizeilige Chip hat Ecken 14 px
statt einer Pillenform. */
html:not(#nb) body .c-certificate-benefits-label,
html:not(#nb) body .c-certificate-detail-label,
html:not(#nb) body .c-certificate-points-label {
padding: 6px 14px !important;
background-color: rgba(255, 255, 255, 0.08) !important;
line-height: 18px !important;
}
html:not(#nb) body .c-certificate-detail-label {
border-radius: 14px !important;
}
/* Fließtext in den Flächen einheitlich 15/24 (waren 16/26 oben und 15/22
unten) und mit normalem Zeilenumbruch statt "pretty": Die Zeilen
werden gefüllt, der rechte Rand ist ruhiger. */
html:not(#nb) body .c-certificate-copy,
html:not(#nb) body .c-certificate-detail-copy {
font-size: 15px !important;
line-height: 24px !important;
text-wrap: wrap !important;
}
}
/* 16.10 Zertifikat-Flächen: grüne Chips kleiner (Mobile, bis 767 px)
Wunsch Moritz vom 9.10.: Schrift 12/16 (war 13/17), Innenabstand 5/10
(war 8/12), Höhe damit 28 px statt 35 px; 6 px Abstand zwischen den
Chips (waren 8). */
@media (max-width: 767px) {
html:not(#nb) body .c-certificate-chips {
gap: 6px !important;
}
html:not(#nb) body .c-certificate-chip {
padding: 5px 10px !important;
font-size: 12px !important;
line-height: 16px !important;
}
}
/* 16.11 Zertifikat-Flächen: grüne Chip-Zeile blendet an den Rändern aus
(Mobile, bis 767 px)
Idee Moritz vom 9.10. Die Zeile läuft bis an den Rand der Fläche; ohne
Verlauf endete der letzte sichtbare Chip hart an der Kante. Jetzt blendet
sie rechts über 48 px und links über 20 px aus (Maske, deshalb passend
zu jeder Hintergrundfarbe). Der erste Chip beginnt bei 24 px und ist am
Anfang nicht betroffen. */
@media (max-width: 767px) {
html:not(#nb) body .c-certificate-chips {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 48px), transparent 100%) !important;
mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 48px), transparent 100%) !important;
}
}
/* ==========================================================================
17 SEITE "KUNDENSTIMMEN" (Mobile, bis 767 px)
Aufgefallen auf /kundenstimmen/ (Beitrag 2073), Rückmeldung Moritz vom
9.10. 17.1 und 17.2 sind an die Seite gebunden, 17.3 hängt am Baustein.
========================================================================== */
@media (max-width: 767px) {
/* 17.1 Hero (.c-hero_2.is-editorial-split): Grafik über den Siegeln
Reihenfolge vorher: Text, Button, Siegel (TÜV, Google, Trustpilot),
Grafik. Jetzt: Text, Button, Grafik, Siegel. Dafür wird der Text-Block
(.hero-content) aufgelöst (display: contents), damit die Grafik
zwischen Button und Siegel einsortiert werden kann. Abstände: Button ->
Grafik 40 px, Grafik -> Siegel 32 px (vorher Button -> Siegel 120 px).
Die 60 px Abstand oben, die am Text-Block hingen, sitzen jetzt am
Raster. Derselbe Hero steht auch auf "Über uns" und "Karriere"; dort
bleibt die Reihenfolge, wie sie ist. */
html:not(#nb) body.page-id-2073 .c-hero_2.is-editorial-split > .l-grid.is-editorial-split-grid {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding-top: 60px !important;
}
html:not(#nb) body.page-id-2073 .c-hero_2.is-editorial-split .hero-content {
display: contents !important;
}
html:not(#nb) body.page-id-2073 .c-hero_2.is-editorial-split .hero-media-editorial {
order: 1 !important;
margin-top: 40px !important;
}
html:not(#nb) body.page-id-2073 .c-hero_2.is-editorial-split .hero_brands {
order: 2 !important;
margin-top: 32px !important;
}
/* 17.2 "Darum entscheiden sich Unternehmen für BCS Mobile"
(.c-split.is-text, zweite Spalte .is-padding-top32): Der Text stand
64 px unter der Überschrift (48 px Innenabstand der Spalte + 16 px am
Text). Jetzt 16 px, wie in den anderen Text-Splits. */
html:not(#nb) body.page-id-2073 .c-split.is-text > .c-split-content.is-padding-top32 {
padding-top: 0 !important;
}
/* 17.3 Vorteils-Kacheln (.c-advantages.is-control, siehe 11.3):
Zeilenumbruch im Kacheltext
In 11.3 stand text-wrap: pretty. Das verhindert ein einzelnes Wort in
der letzten Zeile, bricht dafür aber weiter oben früher um; die Zeilen
wurden ungleich lang ("Kunde erhält einen persönlichen" nur zu drei
Vierteln gefüllt). Safari verteilt mit "pretty" sogar den ganzen
Absatz neu. Jetzt normaler Umbruch: jede Zeile wird gefüllt. Dafür
kann in der letzten Zeile ein einzelnes Wort stehen. Gilt für den
Baustein auf allen Seiten (Verwaltung, Über uns, Karriere,
Kundenstimmen). */
html:not(#nb) body .c-advantages.is-control .c-advantage-02-copy {
text-wrap: wrap !important;
}
}
/* ==========================================================================
18 SEITE "KARRIERE" (Mobile, bis 767 px)
Aufgefallen auf /karriere/ (Beitrag 1988), Durchsicht vom 9.10., von
Moritz freigegeben. 18.1 und 18.4 sind an die Seite gebunden, 18.2, 18.3
und 18.5 hängen am Baustein.
========================================================================== */
@media (max-width: 767px) {
/* 18.1 "Wer wir sind" (erster Bild-Text-Split der Seite, Sektion
.is-space-before-80): erst Text, dann Bild. Wie 11.2, 15.9 und 16.3.
Die Standort-Sektionen München, Berlin und Dortmund bleiben Bild
zuerst. */
html:not(#nb) body.page-id-1988 .l-section.is-space-before-80 > .l-container > .c-split:not(.is-text) > .c-split-content {
order: 1 !important;
}
html:not(#nb) body.page-id-1988 .l-section.is-space-before-80 > .l-container > .c-split:not(.is-text) > .c-split-media {
order: 3 !important;
}
/* 18.2 "Wir stellen Menschen ein, keine Branchenerfahrung"
(.c-split.is-career-requirements): Die zwei Kacheln standen 100 px
unter dem Text (40 px Rasterabstand + 60 px Innenabstand oben am
Kachel-Block). Jetzt 32 px. */
html:not(#nb) body .c-split.is-career-requirements {
row-gap: 32px !important;
}
html:not(#nb) body .c-career-requirements {
padding-top: 0 !important;
}
/* 18.3 Text-Split mit zweiter Spalte .is-padding-top32
("Was andere über uns als Arbeitgeber sagen"): Die zweite Spalte hat
48 px Innenabstand oben; ist ihr Textfeld leer, belegt es trotzdem
16 px. Die Auszeichnungen standen dadurch 96 px unter der Überschrift.
Jetzt: Innenabstand 0, leeres Textfeld ausgeblendet, Abstand 32 px.
Gilt für den Baustein auf allen Seiten und schließt 17.2
(Kundenstimmen) mit ein. */
html:not(#nb) body .c-split.is-text > .c-split-content.is-padding-top32 {
padding-top: 0 !important;
}
html:not(#nb) body .c-split.is-text > .c-split-content > .c-split-copy:empty {
display: none !important;
}
/* 18.4 "Wo du bei uns arbeitest" (.c-split-header über den Standorten)
Vorher: Chip und Überschrift mittig, der Text ohne Abstand darunter,
linksbündig, mit drei festen Umbrüchen mitten im Satz ("klarer
Struktur: In / Deutschland …"). Jetzt alles linksbündig, 12 px Abstand,
feste Umbrüche mobil aufgehoben (
-Ersatz wie in 7.3). */
html:not(#nb) body.page-id-1988 .l-container > .c-split-header > .c-chip.is-chip-centered {
margin-left: 0 !important;
margin-right: auto !important;
}
html:not(#nb) body.page-id-1988 .l-container > .c-split-header > .c-split-header-title {
margin-bottom: 12px !important;
text-align: left !important;
}
html:not(#nb) body.page-id-1988 .l-container > .c-split-header > .c-split-header-copy br {
content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==") !important;
display: inline-block !important;
width: 0.25em !important;
height: 1px !important;
}
/* 18.5 "Dein Start bei BCS Mobile": Kopf der Karten 00 bis 04
(.c-career-process-head)
Nummer und Titel standen je nach Titellänge nebeneinander ("01
Ankommen") oder ohne Abstand untereinander ("03" / "Ausprobieren &
Wachsen"). Jetzt einheitlich untereinander mit 8 px Abstand. */
html:not(#nb) body .c-career-process-head {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 8px !important;
}
}
/* ==========================================================================
19 SEITE "BCS CIRCLE" (Mobile, bis 767 px)
Aufgefallen auf /firmenhandys-mieten-device-as-a-service/verkaufen-bcs-circle/
(Beitrag 1200), Durchsicht vom 9.10. Nur klare Darstellungsfehler; die
Regeln hängen an den Bausteinen.
========================================================================== */
@media (max-width: 767px) {
/* 19.1 Nachhaltigkeits-Rechner: Mengen-Regler (.c-co2-control)
FEHLER: Das Raster hatte mobil drei Spalten in einer Zeile (340 px /
0 px / 96 px). Schieberegler und Zahlenfeld lagen rechts außerhalb des
Bildschirms, der Rechner war nicht bedienbar.
Jetzt zwei Zeilen: oben Symbol + Bezeichnung und rechts das Zahlenfeld
(88 px), darunter der Schieberegler über die volle Breite. Zahlenfeld
mit 16 px Schrift (darunter zoomt das iPhone beim Antippen hinein). */
html:not(#nb) body .c-co2-control {
grid-template-columns: minmax(0, 1fr) 88px !important;
gap: 16px 12px !important;
padding: 20px !important;
align-items: center !important;
}
html:not(#nb) body .c-co2-control-info {
grid-column: 1 !important;
grid-row: 1 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-co2-control-label {
min-width: 0 !important;
}
html:not(#nb) body .c-co2-control-meta {
white-space: normal !important;
}
html:not(#nb) body .c-co2-control-number-wrap {
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-co2-control-number-code,
html:not(#nb) body .c-co2-number {
box-sizing: border-box !important;
width: 100% !important;
}
html:not(#nb) body .c-co2-number {
font-size: 16px !important;
}
html:not(#nb) body .c-co2-control-range-wrap {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
min-width: 0 !important;
}
html:not(#nb) body .c-co2-range {
width: 100% !important;
}
/* 19.2 Nachhaltigkeits-Rechner: Vergleichswerte (.c-co2-equivalents)
FEHLER: drei Kacheln nebeneinander mit je 26 px Platz für den Text;
"Kilometer Autofahrt" und "Kurzstreckenflüge" waren abgeschnitten.
Jetzt untereinander, je eine Zeile: Symbol, Zahl, Bezeichnung. */
html:not(#nb) body .c-co2-equivalents {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
html:not(#nb) body .c-co2-equivalent {
align-items: center !important;
padding: 14px 16px !important;
}
html:not(#nb) body .c-co2-equivalent-content {
flex: 1 1 0 !important;
min-width: 0 !important;
flex-direction: row !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 8px !important;
}
html:not(#nb) body .c-co2-equivalent-value {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
}
html:not(#nb) body .c-co2-equivalent-label {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
text-align: left !important;
}
/* 19.3 "Was kaufen wir an?": Bildfläche .c-split-visual.is-630
FEHLER: .is-630 setzt flex: 0 0 630px. Am Desktop ist das die Breite;
mobil steht die Fläche in einer Spalte, dort wird daraus die Höhe:
630 px hohe Fläche, das Bild (171 px) unten, darüber rund 450 px weiß.
Jetzt richtet sich die Höhe nach dem Bild. */
html:not(#nb) body .c-split-media > .c-split-visual.is-630 {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
}
/* 19.4 Anfrage-Formular "Jetzt Anfrage starten" (.c-request-form,
#bcs-ankauf)
Vier Innenabstände ineinander (40 + 8 + 16 + Rand) ließen dem Formular
212 von 390 px. Die Auswahlknöpfe waren 102 px breit, "Gebrauchsspuren"
war abgeschnitten. Jetzt 12 px am Formular-Block, 0 am Wrapper: Knöpfe
138 px breit. Eingabefelder im zweiten Schritt mit 16 px Schrift (kein
Hineinzoomen auf dem iPhone). */
html:not(#nb) body .c-request-form {
padding: 48px 12px 32px !important;
}
html:not(#nb) body .c-request-form #bcs-ankauf {
padding-left: 0 !important;
padding-right: 0 !important;
}
html:not(#nb) body .c-request-form .bca-opt {
min-width: 0 !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
html:not(#nb) body .c-request-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
font-size: 16px !important;
}
}
/* ==========================================================================
20 SEITE "KONTAKT" (Mobile, bis 767 px)
Aufgefallen auf /kontakt/ (Beitrag 1631), Durchsicht vom 9.10. Die Regeln
hängen an den Bausteinen; 20.1 wirkt auch auf /terminbuchung/.
========================================================================== */
@media (max-width: 767px) {
/* 20.1 Leerraum zwischen den Siegeln und "Unsere Standorte"
FEHLER: rund 650 px leer. Zwei Ursachen: Die Siegel-Sektion hat 160 px
Innenabstand unten, und der Split darunter beginnt mit einer leeren
Bildfläche (.c-split-visual ohne Inhalt, 414 px hoch; die Karte steckt
im Textblock).
Jetzt: leere Bildfläche ausgeblendet, Siegel-Sektion 80 px unten. */
html:not(#nb) body .c-split > .c-split-media:has(> .c-split-visual:empty) {
display: none !important;
}
html:not(#nb) body .l-section.is-trust-badges-section:has(+ .l-section.is-space-after-120) {
padding-bottom: 80px !important;
}
/* 20.2 Überschrift "Unsere Standorte" klebte ohne Abstand an der Karte
(Bild direkt nach dem Titel im Textblock). Jetzt 16 px. */
html:not(#nb) body .c-split-content > .c-split-title + .c-split-image {
margin-top: 16px !important;
}
/* 20.3 Formular "Stellen Sie uns Ihre Frage" (.c-kontakt-form-shell)
Die weiße Formularfläche hatte mobil keinen Seitenabstand; die grauen
Eingabefelder liefen von Rand zu Rand und waren von der grauen Fläche
drumherum nicht zu unterscheiden (es sah aus wie weiße Streifen mit
den Feldnamen). Jetzt 16 px Seitenabstand: Felder sind als Felder zu
erkennen.
Eingabefelder 16 px Schrift (waren 13; darunter zoomt das iPhone beim
Antippen hinein). Senden-Knopf 44 px hoch, 14 px Schrift (war 32 px
hoch, 11 px Schrift). */
html:not(#nb) body .c-kontakt-form-shell {
padding-left: 16px !important;
padding-right: 16px !important;
}
html:not(#nb) body .c-kontakt :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
font-size: 16px !important;
}
html:not(#nb) body .c-kontakt-form-submit {
min-height: 44px !important;
padding-left: 20px !important;
padding-right: 20px !important;
font-size: 14px !important;
}
}
/* ==========================================================================
21 NEWS (Mobile, bis 767 px)
Aufgefallen auf /news/ (Beitrag 1943) und in den Beiträgen (Vorlage
1956), Durchsicht vom 9.10.
========================================================================== */
@media (max-width: 767px) {
/* 21.1 Übersicht: Beitragskarten (.c-news-grid, .c-news-card)
FEHLER: Die Rasterzeilen waren fest 382 px hoch, zwischen den Karten
0 px: "Weiterlesen" klebte am Bild des nächsten Beitrags. Die
Bildfläche war 228 px hoch (3:2), die Bilder nur 196 px: weißer
Streifen unter dem Bild, untere Ecken eckig. "Weiterlesen" stand 24 px
unter dem Titel, also näher am nächsten Beitrag als am eigenen.
Jetzt: 48 px zwischen den Karten, Bildfläche so hoch wie das Bild
(alle Ecken 8 px rund), Kategorie 16 px unter dem Bild, Titel und
"Weiterlesen" je 8 px darunter. */
html:not(#nb) body .c-news-grid {
row-gap: 48px !important;
grid-auto-rows: auto !important;
}
html:not(#nb) body .c-news-card {
height: auto !important;
min-height: 0 !important;
margin-bottom: 0 !important;
}
html:not(#nb) body .c-news-card-media {
height: auto !important;
aspect-ratio: auto !important;
overflow: hidden !important;
border-radius: 8px !important;
}
html:not(#nb) body .c-news-card-media img {
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
}
html:not(#nb) body .c-news-card-content {
gap: 8px !important;
padding-top: 16px !important;
}
html:not(#nb) body .c-news-card-content > * {
margin-top: 0 !important;
min-height: 0 !important;
}
html:not(#nb) body .c-news-loadmore {
padding-top: 48px !important;
}
/* 21.2 Beitrag: Text aus dem WordPress-Editor (.c-news-single-conent,
Schreibweise wie in Oxygen)
Zwischenüberschriften waren 39/47 fett und standen ohne Abstand unter
dem Absatz davor; Bilder ohne Abstand zum Text.
Jetzt H2 24/30, H3 20/26, H4 17/24 (je 600), 40/32/24 px darüber und
12/8 px darunter; Bilder mit 24 px Abstand und 8 px Eckenradius;
Listen mit 20 px Einzug. */
html:not(#nb) body .c-news-single-conent h2 {
margin: 40px 0 12px !important;
font-size: 24px !important;
line-height: 30px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
html:not(#nb) body .c-news-single-conent h3 {
margin: 32px 0 8px !important;
font-size: 20px !important;
line-height: 26px !important;
font-weight: 600 !important;
}
html:not(#nb) body .c-news-single-conent h4 {
margin: 24px 0 8px !important;
font-size: 17px !important;
line-height: 24px !important;
font-weight: 600 !important;
}
html:not(#nb) body .c-news-single-conent figure {
margin: 0 0 24px !important;
}
html:not(#nb) body .c-news-single-conent :is(p, ul, ol) + figure {
margin-top: 24px !important;
}
html:not(#nb) body .c-news-single-conent figure img {
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 8px !important;
}
html:not(#nb) body .c-news-single-conent :is(ul, ol) {
margin: 0 0 16px !important;
padding-left: 20px !important;
}
html:not(#nb) body .c-news-single-conent li {
margin-bottom: 8px !important;
}
html:not(#nb) body .c-news-single-conent > div > :first-child {
margin-top: 0 !important;
}
}
/* ==========================================================================
22 MENÜ UND AKKORDEON (Rückmeldung Moritz vom 9.10.)
========================================================================== */
@media (max-width: 1023px) {
/* 22.1 Offenes Menü: Seite dahinter scrollt nicht mehr
FEHLER AUS DIESEM OVERLAY: Dirks Menü setzt bei offenem Menü
body.is-menu-open { overflow: hidden }. Das sperrt das Scrollen nur,
solange html selbst overflow: visible hat (dann gilt der Wert von body
für das Browserfenster). Regel 0.1 dieses Overlays setzt auf html
overflow-x: clip gegen seitliches Scrollen; damit galt Dirks Sperre
nicht mehr für das Fenster und die Seite ließ sich hinter dem offenen
Menü scrollen. Jetzt wird bei offenem Menü html selbst gesperrt.
Gilt wie 0.1 bis 1023 px; ab 1024 px gibt es das Menü nicht. */
html:not(#nb):has(> body.is-menu-open) {
overflow: hidden !important;
}
}
@media (max-width: 767px) {
/* 22.2 Aufklapp-Listen der Standorte auf "Karriere" ("Kundensupport",
"Vertragsfreischaltung" …; .c-split-accordion, -Elemente)
a) Linie: Nur der erste Eintrag hatte oben eine 1-px-Linie, zwischen
den Einträgen und am Ende gab es keine. Die einzelne Linie ist
mobil entfernt. (Am Desktop steht sie weiter.)
b) Bewegung: Beim Öffnen sprang die Höhe sofort auf, nur der Text
blendete in 240 ms ein; beim Schließen verschwand alles ohne
Übergang. Jetzt fährt die Höhe in 420 ms weich auf und zu
(Kurve cubic-bezier(.22, 1, .36, 1), dieselbe wie beim Menü), der
Text blendet dabei ein und aus, der Pfeil dreht im selben Tempo.
Technik: Der Inhaltsbereich des (::details-content) ist
ein Raster mit einer Zeile, die von 0fr auf 1fr wächst.
content-visibility wechselt erst am Ende des Schließens. Browser,
die ::details-content nicht kennen, überspringen den ganzen Block
und verhalten sich wie vorher.
Der untere Innenabstand (16 px) sitzt dafür am Text statt an der
Fläche, sonst bliebe er im geschlossenen Zustand sichtbar. */
html:not(#nb) body .c-split-accordion-item:first-child {
border-top: 0 !important;
}
/* 22.2 c) Nachbesserung (Entwurf 31, Rückmeldung Moritz: Bewegung wirkt
zu aggressiv, Inhalt springt): Die Kurve aus Entwurf 30 legte in
den ersten 60 ms schon rund 90 von 156 px zurück. Jetzt 500 ms mit
weichem An- und Auslauf (cubic-bezier(.45, 0, .15, 1)): nach 60 ms
rund 6 px. Öffnen und Schließen laufen gleich lang; wechselt man von
einem Eintrag zum nächsten, bleibt alles unterhalb der Liste an
seinem Platz.
Außerdem hängt das Schließen nicht mehr davon ab, dass der Browser
content-visibility zeitversetzt umschaltet (unsicher in Safari; dort
wäre der Eintrag sofort zugesprungen): Der Inhaltsbereich bleibt
gerendert und wird über Rasterhöhe 0, visibility und max-height
geschlossen; visibility und max-height schalten erst nach den
500 ms um. */
html:not(#nb) body .c-split-accordion-trigger::after {
transition: transform .5s cubic-bezier(.45, 0, .15, 1) !important;
}
@supports selector(::details-content) {
html:not(#nb) body .c-split-accordion-item::details-content {
display: grid !important;
grid-template-rows: 0fr !important;
content-visibility: visible !important;
visibility: hidden !important;
opacity: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
transition: grid-template-rows .5s cubic-bezier(.45, 0, .15, 1), opacity .3s ease, visibility 0s linear .5s, max-height 0s linear .5s !important;
}
html:not(#nb) body .c-split-accordion-item[open]::details-content {
grid-template-rows: 1fr !important;
visibility: visible !important;
opacity: 1 !important;
max-height: 200vh !important;
transition: grid-template-rows .5s cubic-bezier(.45, 0, .15, 1), opacity .4s ease .1s, visibility 0s linear 0s, max-height 0s linear 0s !important;
}
html:not(#nb) body .c-split-accordion-item > .c-split-accordion-panel {
min-height: 0 !important;
overflow: hidden !important;
padding-bottom: 0 !important;
animation: none !important;
}
html:not(#nb) body .c-split-accordion-item > .c-split-accordion-panel > .c-split-accordion-copy {
padding-bottom: 16px !important;
}
}
@media (prefers-reduced-motion: reduce) {
html:not(#nb) body .c-split-accordion-item::details-content,
html:not(#nb) body .c-split-accordion-item[open]::details-content,
html:not(#nb) body .c-split-accordion-trigger::after {
transition: none !important;
}
}
}
/* ==========================================================================
23 SEITE "BCS CIRCLE", ZWEITER DURCHGANG (Mobile, bis 767 px)
Rückmeldung Moritz vom 9.10. zu /…/verkaufen-bcs-circle/ (Beitrag 1200).
23.1 bis 23.3 und 23.6 sind an die Seite gebunden (dieselben Bausteine
stehen auch auf anderen, schon abgenommenen Seiten); der Rest hängt an
Bausteinen, die es nur hier gibt.
========================================================================== */
@media (max-width: 767px) {
/* 23.1 "Unser Firmengeräte-Ankauf-Programm: Was ist BCS Circle?":
erst Text, dann Bild (wie 11.2, 15.9, 16.3, 18.1). */
html:not(#nb) body.page-id-1200 .l-section.is-space-after-48 > .l-container > .c-split:not(.is-text) > .c-split-content {
order: 1 !important;
}
html:not(#nb) body.page-id-1200 .l-section.is-space-after-48 > .l-container > .c-split:not(.is-text) > .c-split-media {
order: 3 !important;
}
/* 23.2 "So einfach funktioniert's" (.l-grid.is-service-links):
Überschrift mittig, 32 px über den Kacheln (waren 40). */
html:not(#nb) body.page-id-1200 .l-grid.is-service-links {
gap: 32px !important;
}
html:not(#nb) body.page-id-1200 .service-links-sidebar {
align-items: center !important;
}
html:not(#nb) body.page-id-1200 .service-links-sidebar > .c-content {
width: 100% !important;
max-width: none !important;
}
html:not(#nb) body.page-id-1200 .service-links-title {
text-align: center !important;
text-wrap: balance !important;
}
/* 23.3 Die sechs Schritt-Kacheln (.service-link-card): Symbol 48 px
(war 32) und über der Kachel-Überschrift statt daneben, 16 px
dazwischen. Leerraum unter dem Text der Kachel (21 px) entfernt. */
html:not(#nb) body.page-id-1200 .service-link-head {
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
margin-bottom: 12px !important;
}
html:not(#nb) body.page-id-1200 .service-link-icon {
flex: 0 0 auto !important;
width: 48px !important;
height: 48px !important;
}
html:not(#nb) body.page-id-1200 .service-link-copy {
margin-bottom: 0 !important;
}
html:not(#nb) body.page-id-1200 .service-link-card {
height: auto !important;
min-height: 0 !important;
}
/* 23.4 Kachel "Refurbishment" (.c-refurbishment)
Stand 96 px unter den Schritt-Kacheln, Bild klein links oben, Text
linksbündig mit 12 px Rand. Jetzt direkt unter den Kacheln mit
demselben Abstand wie zwischen den Kacheln (16 px), alles mittig,
Innenabstand 32/24, Bild 112 px, Ecken 8 px wie die Kacheln, Text
15/22 (war 14/20). */
html:not(#nb) body .l-section:has(.c-service-links) + .l-section:has(.c-refurbishment) {
padding-top: 16px !important;
}
html:not(#nb) body .c-refurbishment {
align-items: center !important;
gap: 20px !important;
padding: 32px 24px !important;
border-radius: 8px !important;
text-align: center !important;
}
html:not(#nb) body .c-refurbishment-media {
justify-content: center !important;
}
html:not(#nb) body .c-refurbishment-image {
width: 112px !important;
height: auto !important;
}
html:not(#nb) body .c-refurbishment-content {
align-items: center !important;
}
html:not(#nb) body .c-refurbishment-title,
html:not(#nb) body .c-refurbishment-copy {
text-align: center !important;
}
html:not(#nb) body .c-refurbishment-copy {
font-size: 15px !important;
line-height: 22px !important;
}
/* 23.5 Anfrage-Formular: noch 12 px mehr Breite je Seite (ergänzt 19.4;
Formular jetzt 342 statt 318 px, Auswahlknöpfe 150 px). */
html:not(#nb) body .c-request-form {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 23.6 "Was kaufen wir an?" (.c-split.is-wide): Überschrift 24 px unter
dem Bild (waren 40), Überschrift und Text mittig. */
html:not(#nb) body.page-id-1200 .c-split.is-wide {
row-gap: 24px !important;
}
html:not(#nb) body.page-id-1200 .c-split.is-wide > .c-split-content {
align-items: center !important;
}
html:not(#nb) body.page-id-1200 .c-split.is-wide > .c-split-content :is(.c-split-title, .c-split-copy, .c-split-txt) {
text-align: center !important;
}
/* 23.7 "Ihr Nachhaltigkeits-Potenzial" (.c-co2-header): Überschrift und
Text mittig; 12 px dazwischen (waren 20), 32 px bis zum Rechner
(waren 48). */
html:not(#nb) body .c-co2-header {
margin-bottom: 32px !important;
}
html:not(#nb) body .c-co2-title,
html:not(#nb) body .c-co2-copy {
text-align: center !important;
}
html:not(#nb) body .c-co2-title {
margin-bottom: 12px !important;
}
/* 23.8 Schieberegler (.c-co2-range): Tippfläche 44 px hoch (war 24).
Die Fläche wächst nach oben und unten je 10 px in den vorhandenen
Abstand (negativer Außenabstand), das Layout ändert sich nicht.
Senkrechtes Wischen über dem Regler scrollt weiter die Seite. */
html:not(#nb) body .c-co2-range {
height: 44px !important;
margin: -10px 0 !important;
touch-action: pan-y !important;
}
/* 23.9 Ergebnis "Vermiedene Emissionen gesamt" (.c-co2-result)
Vorher drei Spalten: Bezeichnung links in drei Zeilen, Zahl daneben,
Info-Knopf rechts. Jetzt mittig untereinander: Bezeichnung, darunter
die Zahl groß (44/48, war 32); der Info-Knopf sitzt oben rechts in
der Ecke. */
html:not(#nb) body .c-co2-result {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
padding: 24px 48px !important;
text-align: center !important;
}
html:not(#nb) body .c-co2-result-label {
text-align: center !important;
}
html:not(#nb) body .c-co2-result-value {
justify-content: center !important;
align-items: baseline !important;
}
html:not(#nb) body .c-co2-result-number {
font-size: 44px !important;
line-height: 48px !important;
}
html:not(#nb) body .c-co2-info-toggle {
position: absolute !important;
top: 12px !important;
right: 12px !important;
}
}
/* ==========================================================================
24 FARBFLÄCHEN: EINHEITLICHER RAND ZUM BILDSCHIRM (Mobile, bis 767 px)
Rückmeldung Moritz vom 9.10. Gemessen auf 13 Seiten: Alle großen
Farbflächen (.l-panel: Hero, graue und farbige Flächen, Formular-Fläche)
stehen 4 px vom Bildschirmrand. Zwei Ausnahmen standen 16 px vom Rand:
der Footer (.l-footer, margin: var(--space-4)) und die Abschluss-Fläche
"Business Mobilfunk Check" (.c-conversion-panel, margin: 0 16px).
Jetzt beide 4 px wie alle anderen. Oben und unten bleibt der Abstand,
wie er war. Der Inhalt der Abschluss-Fläche steht damit 24 px vom Rand,
in einer Linie mit dem Seiteninhalt.
Ausgenommen: die Karriere-Fläche "Werde Teil des BCS Teams!"
(.c-conversion-panel.is-career-cta). Sie steht schon 4 px vom Rand, weil
ihr Container den Abstand mitbringt; mit der Regel wären es 8 px.
========================================================================== */
@media (max-width: 767px) {
html:not(#nb) body .l-footer,
html:not(#nb) body .c-conversion-panel:not(.is-career-cta) {
margin-left: 4px !important;
margin-right: 4px !important;
}
}
/* ==========================================================================
25 TOUCH-GERÄTE: HOVER-EFFEKTE AUS (Geräte ohne Maus, bis 1023 px)
Rückmeldung Moritz vom 9.10. Auf dem Handy gibt es kein "Darüberfahren":
Der Hover-Zustand springt beim Antippen an und bleibt hängen, bis man
woanders tippt (Knopf bleibt angehoben, Karte bleibt verschoben, eine
Auswahl sieht halb gewählt aus). Dirks Hover-Regeln stehen ohne
Geräte-Bedingung in selectors.css / global-settings.css. Hier werden sie
für Geräte ohne Maus (hover: none) auf den Ruhezustand zurückgesetzt.
Mit Maus (auch in einem schmalen Desktop-Fenster) bleibt alles, wie es
ist. Für Dirk: sauberer wäre, die Hover-Regeln in
@media (hover: hover) { … } zu setzen.
Nicht angefasst: Video-Karten (Hover blendet dort Text ein), Linkfarbe.
========================================================================== */
@media (hover: none) and (max-width: 1023px) {
/* 25.1 Anheben / Verschieben / Vergrößern */
html:not(#nb) body .c-btn:hover,
html:not(#nb) body .c-social-link:hover,
html:not(#nb) body .c-check-option:hover,
html:not(#nb) body .c-contact-toggle-btn:hover,
html:not(#nb) body .c-kontakt-choice-card:hover,
html:not(#nb) body .c-kontakt-choice-card:hover .c-kontakt-choice-card-arrow,
html:not(#nb) body .c-kontakt-form-back:hover,
html:not(#nb) body .c-kontakt-channel-appointment:hover,
html:not(#nb) body .c-menu-flyout-sublink:hover,
html:not(#nb) body .c-video-card-play:hover,
html:not(#nb) body .c-video-modal-close:hover {
transform: none !important;
}
html:not(#nb) body .c-video-feature:hover .c-video-feature-play {
transform: translate(-50%, -50%) !important;
}
/* 25.2 Farbe / Deckkraft (Werte = Ruhezustand aus Dirks CSS) */
html:not(#nb) body .c-social-link:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
html:not(#nb) body .c-kontakt-form-back:hover {
border-color: rgba(7, 26, 41, 0.14) !important;
}
html:not(#nb) body .c-kontakt-field-input:hover:not(:focus) {
background: #F5F6F9 !important;
}
html:not(#nb) body .accordion-header:hover,
html:not(#nb) body .c-menu-flyout-link:hover,
html:not(#nb) body .c-menu-flyout-trigger:hover,
html:not(#nb) body .c-menu-flyout-sublink:hover {
opacity: 1 !important;
}
html:not(#nb) body .c-menu-flyout-sublink:hover {
color: #23282B !important;
}
html:not(#nb) body .c-media-logo.is-greyscale:hover > .c-media-logo-image {
filter: grayscale(100%) !important;
opacity: 0.65 !important;
}
/* 25.3 Circle-Formular: Ein angetippter und wieder abgewählter Knopf sah
durch den hängenden Hover weiter halb gewählt aus (heller Rand, weiße
Schrift). Gewählte Knöpfe (.bca-sel) sind ausgenommen. */
html:not(#nb) body .bca-opt:not(.bca-sel):hover {
border-color: rgba(255, 255, 255, 0.14) !important;
color: rgba(255, 255, 255, 0.78) !important;
}
html:not(#nb) body .bca-cta:hover,
html:not(#nb) body .bca-cta-arrow:hover {
background: #CBFF00 !important;
}
}
/* ==========================================================================
26 KONTAKT: FORMULAR FÜR BESTANDSKUNDEN (Mobile, bis 767 px)
Rückmeldung Moritz vom 9.10. Das Formular ist ein eingebettetes
Zoho-Formular (