/* ===================================================================== mobile-refine.css — Mobile-Feinschliff V3 (Round 6, 2026-07-13) Zuletzt geladen auf allen Seiten. Ziel: schmaler, konsistenter Außenrand (~14px) und flachere Kacheln, damit Inhalte auf dem schmalen Smartphone die volle Breite nutzen (keine "Schläuche"). Konvention (wie im restlichen Projekt): der :not(#____never____)-Trick hebt die Spezifität künstlich über die globalen !important-Regeln in styles.css; die Datei lädt zuletzt und gewinnt daher Gleichstände. Alle Regeln sind mobil-scoped und lassen Desktop/Tablet unberührt. ===================================================================== */ /* -------------------------------------------------------------------------- 1) SCHMALER AUSSENRAND (~14px) AUF DEM SMARTPHONE Heute stapeln sich auf Homepage-Sektionen zwei Einzüge: das Tailwind- Section-Padding (px-margin-mobile = 20px) PLUS der innere Shell-Container (16px). Wir neutralisieren das Section-Padding, sodass der seitliche Rand allein aus dem Shell-Container kommt, und setzen diesen auf 14px. -------------------------------------------------------------------------- */ @media (max-width: 768px) { /* Tailwind-Section-Padding (px-margin-mobile) entfernen — greift <768px, also genau im Bereich, in dem Tailwind das mobile Padding anwendet. */ html body:not(#saig-x) main section[class*="px-margin-mobile"]:not(#____never____) { padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 640px) { /* Shell-Gutter je Seite 16px -> 14px. Die Breiten-Formel in styles.css (Zeile ~11452) konsumiert diese Variable; Neudefinition genügt. */ :root { --saa-shell-x-mobile: 14px; } /* Verschachtelte Shell-Container (z.B. .mx-auto > .swiss-grid) addieren sonst zweimal 14px. Der innere Container nutzt auf Mobile die volle Breite seines bereits eingerückten Elternteils -> einheitlich 14px. */ html body:not(#saig-x) main :where(.mx-auto, .container, .saa-container) :where(.swiss-grid, .container, .mx-auto, .saa-container):not(#____never____) { width: 100% !important; max-width: 100% !important; } } /* -------------------------------------------------------------------------- 2) FLACHERE KACHELN: WENIGER INNENPOLSTER AUF MOBILE Card-Padding mobil von ~22px auf 16px, damit der Text spürbar breiter wird. Dezenter Rahmen/Hintergrund der Karten bleibt erhalten. -------------------------------------------------------------------------- */ @media (max-width: 640px) { :root { --saa-mobile-card-pad: 16px; } html body:not(#saig-x) main :where( .home-process-step, .saa-why__item ):not(#____never____) { padding: 16px !important; } } /* -------------------------------------------------------------------------- 2b) TEXTANFANG BEI 24PX (Teil B, 08.09.) Gemessen bei 390px: Text begann 32-53px vom Fensterrand, weil sich Shell- Gutter, Kachel-Polster UND das Polster eines verschachtelten Absatzes addierten. Diese Gruppe polstert jetzt auf EINER Ebene, das direkte Kind-Polster wird auf 0 genommen, damit eine spätere Kurzschreibweise (padding) nichts still gegen padding-inline zurücksetzt. Familienliste bewusst eng: nur nach Messung erweitern, nicht nach Vermutung (Auftrag Teil B2). -------------------------------------------------------------------------- */ @media (max-width: 640px) { html body:not(#saig-x) main :where( .home-offer-card, .process-card, .bento-cell, .saa-signal-card, .lp-card, .beratung-service-card, .beratung-final-panel, .knowledge-card, .uc-card, .partner-page main article, .ki-beratung-page main article ):not(#____never____) { padding: var(--saig-pad-y-mobile) var(--saig-pad-x-mobile) !important; } html body:not(#saig-x) main :where( .home-offer-card, .process-card, .bento-cell, .saa-signal-card, .lp-card, .beratung-service-card, .beratung-final-panel, .knowledge-card, .uc-card, .partner-page main article, .ki-beratung-page main article ) > :where(p, ul, ol, h2, h3, h4):not(#____never____) { padding-inline: 0 !important; } } /* -------------------------------------------------------------------------- 3) HEADER: LOGO-"Y" NICHT VOM CTA-BUTTON ANSCHNEIDEN Header = Logo | CTA | Menü-Button (space-between). Der Logo-Anker (.site-logo) ist per width:152px/min-width:136px/flex:0 0 auto FIXIERT (styles.css) -> das Bild allein zu verkleinern hilft nichts, der Anker behält seinen Platz und schiebt CTA+Menü über den Rand. Daher wird der ANKER selbst verkleinert (Bild füllt ihn), plus weniger Padding/Gap und kürzerer Button-Text ("Analyse anfragen", im HTML). So haben Logo, Button und Menü auf 320-430px Platz, das "Y" wird nie angeschnitten. -------------------------------------------------------------------------- */ @media (max-width: 640px) { html body:not(#saig-x) .site-header__inner:not(#____never____) { padding-left: 10px !important; padding-right: 10px !important; } html body:not(#saig-x) .site-header__actions:not(#____never____) { gap: 6px !important; } html body:not(#saig-x) .site-header__cta:not(#____never____) { padding-left: 12px !important; padding-right: 12px !important; font-size: 13px !important; } /* Logo-ANKER verkleinern (nicht nur das Bild) und Fix-Breiten/Min-Breiten der styles.css-Regeln aufheben; das Bild füllt den Anker proportional. */ html body:not(#saig-x) .site-logo:not(#____never____) { width: 103px !important; min-width: 0 !important; max-width: 103px !important; flex: 0 0 auto !important; } html body:not(#saig-x) .site-logo img:not(#____never____) { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* Kleine Geräte (<=350px): Logo-Anker weiter verkleinern, damit Logo + CTA + Menü-Button ohne abgeschnittenen Menü-Button nebeneinander passen. */ @media (max-width: 350px) { html body:not(#saig-x) .site-logo:not(#____never____) { width: 87px !important; max-width: 87px !important; } html body:not(#saig-x) .site-header__cta:not(#____never____) { padding-left: 10px !important; padding-right: 10px !important; } } @media (max-width: 320px) { html body:not(#saig-x) .site-logo:not(#____never____) { width: 78px !important; max-width: 78px !important; } } /* -------------------------------------------------------------------------- 4) MOBILE-NAV-OVERLAY KOMPAKTER (Screenshot 1) Das offene Hamburger-Menü (.site-nav-primary[data-mobile-nav-panel]) hat je Eintrag min-height:48px + 14px Padding oben/unten (styles.css:26676) -> sehr luftig. Kompakter: min-height 40px + 8px Padding, engeres Panel-Polster. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { html body:not(#saig-x) nav [data-mobile-nav-panel]:not(#____never____) { padding-top: 12px !important; padding-bottom: 14px !important; } html body:not(#saig-x) nav [data-mobile-nav-panel] a:not(#____never____), html body:not(#saig-x) .site-header nav [data-mobile-nav-panel] a:not(#____never____) { min-height: 40px !important; padding-top: 8px !important; padding-bottom: 8px !important; line-height: 1.2 !important; } } /* -------------------------------------------------------------------------- 5) FOOTER KOMPAKTER (Screenshot 5) — global, Markup identisch auf 16 Seiten Treiber: .saa-footer a{margin-bottom:13px}, __inner{gap:36px}, h6{mb:22px}, Footer-Padding 56/28, Bottom-Abstände. Auf Mobile enger ziehen. -------------------------------------------------------------------------- */ @media (max-width: 900px) { html body:not(#saig-x) .saa-footer:not(#____never____) { padding-top: 34px !important; padding-bottom: 22px !important; } html body:not(#saig-x) .saa-footer__inner:not(#____never____) { gap: 22px !important; } html body:not(#saig-x) .saa-footer :is(h2, h6):not(#____never____) { margin-bottom: 12px !important; } html body:not(#saig-x) .saa-footer a:not(#____never____) { margin-bottom: 7px !important; } html body:not(#saig-x) .footer-logo:not(#____never____) { margin-bottom: 16px !important; } html body:not(#saig-x) .saa-footer__bottom:not(#____never____) { margin-top: 16px !important; padding-top: 16px !important; gap: 8px !important; } html body:not(#saig-x) .saa-footer__bottom nav:not(#____never____) { gap: 8px !important; } } /* -------------------------------------------------------------------------- 6) GLOBALE CARD-/SHELL-REDUKTION AUF MOBILE (Screenshot 3) Die 6 Klassen aus Abschnitt 2 sind auf 16px; hier die übrigen Karten der Unterseiten (bisher 22-34px) ebenfalls auf 16px, plus die seiten-eigenen Shells auf den 14px-Gutter der Homepage bringen. -------------------------------------------------------------------------- */ @media (max-width: 640px) { html body:not(#saig-x) main :where( .beratung-problem-grid article, .beratung-faq-grid details, .beratung-board-card, .beratung-expect-card, .dienste-faq-grid details, .dienste-transition-map article, .dienste-final-panel, .dienste-practice-card, .wissen-feature-panel, .wissen-glossary-grid article, .wissen-faq-grid article, .wissen-check-list details, .wissen-regulation-board article, .wissen-final-panel, .academy-card, .academy-lab-panel, .about-card, .ueber-team-card, .pa-card, .usecase-card, .uc-feature, .holo-offer-card, .holo-static-card > div, .holo-closing ):not(#____never____) { padding: 16px !important; } /* Subpage-Shells auf 14px Gutter (statt eigener 16px-Formeln) */ html body:not(#saig-x) main :where( .beratung-shell, .dienste-shell, .dienste-strip__inner, .wissen-editorial-shell, .academy-program-shell, .saig-shell ):not(#____never____) { width: min(100% - 28px, 1280px) !important; } html body:not(#saig-x) main .holo-shell:not(#____never____) { width: min(100% - 28px, 620px) !important; padding-left: 0 !important; padding-right: 0 !important; } } /* -------------------------------------------------------------------------- 7) UNTERSEITEN-HERO + 8) HERO-TITEL ki-beratung -> ENTFERNT 2026-07-15 Beide Bloecke definierten Hero-Darstellung und liefen damit dem Hero- Contract (css/hero-unify.css) zuwider - diese Datei laedt seit 2026-07-13 NACH hero-unify.css und hat dessen Regeln unbemerkt ueberstimmt. Konkret gemessen: Block 7 gab .hero-scene--subpage mobil display:block, content padding 84/16/36 und min-height clamp(520px,72svh,640px) -> Hero 690-722px statt der 348px von index. Block 8 verkleinerte die H1 von ki-beratung auf clamp(19px,5.4vw,26px) -> 21px Hauptueberschrift bei 390px, waehrend jede andere Seite 36px hatte. Beides war ein Workaround fuer den Reflow des rotierenden Wortes; richtig geloest ist das jetzt ueber einen Typewriter-Slot mit reserviertem Platz (js/typewriter.js + hero-unify.css Block 12). Hero-Darstellung gehoert ausschliesslich in css/hero-unify.css. Regel und Pruefung: SAIG-v3-intern/HERO.md + check_hero.py. Ladereihenfolge ist seit 2026-07-15 korrigiert: hero-unify.css laedt zuletzt. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 9) STARTSEITE "SO GEHEN WIR VOR": ALLE ICON-BALKEN IDENTISCH (2026-07-19) Auf dem Handy sind die Prozess-Schritte einspaltig; die Icon-Box (das einzige direkte
je Schritt) zieht sich ueber die volle Kartenbreite. styles.css faerbt jedoch nur Schritt 1 rot (:first-child), die Schritte 2-5 bleiben transluzent -> uneinheitliche Balken. Nutzerwunsch: alle Balken sollen wie der erste (rot) aussehen. Icon ist bereits in allen Schritten weiss, daher genuegt es, Hintergrund + Rand aller Boxen auf das Rot von Schritt 1 zu setzen. Spezifitaet (1,2,3) via :not(#____never____) schlaegt die (0,2,2)- Regel in styles.css (Zeile ~19578); Datei laedt zuletzt. Nur mobil. -------------------------------------------------------------------------- */ @media (max-width: 640px) { html body.home-page .home-process-step > div:not(#____never____) { background: #d91e18 !important; border-color: #d91e18 !important; } } /* -------------------------------------------------------------------------- 6) MOBILE-NAV: LESBARE LINKS (05.09.2026) Im offenen Menü standen die Einträge in #f7f9fb auf einem weissen Panel — Kontrast 1,06:1, praktisch unsichtbar. Nur der aktive Eintrag (rot) und der CTA waren lesbar. Ursache: zwei !important-Regeln in styles.css widersprechen sich. Die ältere (~22162) färbt Panel und Links für ein DUNKLES Menü (#07111c / #f7f9fb); die neuere (~1279er Media Query) setzt das Panel per ID-Eskalation (:not(#____never____), Spezifität 1,2,3) zurück auf --saa-surface und gewinnt damit gegen die ältere (0,3,3). Das Panel wurde hell, die Linkfarbe blieb hell. Entschieden für das HELLE Panel — es entspricht der Kopfzeile auf dem Desktop und ist die neuere Absicht. Also die Schrift dunkel nachziehen: 13,2:1. Die Spezifität muss über 1,2,3 liegen, daher die doppelte ID-Eskalation. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a:not(#____never____) { color: var(--saa-text) !important; -webkit-text-fill-color: var(--saa-text) !important; opacity: 1 !important; } html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a:not(#____never____):hover, html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a:not(#____never____):focus-visible, html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a.is-active:not(#____never____) { color: #d91e18 !important; -webkit-text-fill-color: #d91e18 !important; } /* Der CTA-Knopf trägt eigene Farben und darf nicht mitgezogen werden. */ html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a.bg-primary:not(#____never____), html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a[class*="hero-scene__primary"]:not(#____never____) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Trennlinien waren für Dunkel gesetzt und auf Weiss unsichtbar. */ html body:not(#saig-x) nav.is-mobile-nav-open [data-mobile-nav-panel] a:not(#____never____) { border-color: rgba(37, 49, 66, .14) !important; } }