/* ========================================================================== BITATLAS GLOBAL CSS OVERRIDES (MASTER FILE) ========================================================================== */ /* -------------------------------------------------------------------------- 1. PREMIUM HEADER TRANSFORM (NEU) -------------------------------------------------------------------------- */ /* Header Background & Blur */ #masthead { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important; padding: 10px 0 !important; transition: all 0.3s ease-in-out; } /* Menü-Links stylen */ .main-navigation a { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: #334155 !important; transition: 0.3s !important; } .main-navigation a:hover { color: #f7931a !important; } /* Den Button zum "BitAtlas Button" machen */ .header-button .ast-custom-button, .header-button .button { background-color: #0f172a !important; color: #ffffff !important; border-radius: 100px !important; padding: 12px 25px !important; font-weight: 800 !important; font-size: 14px !important; border: none !important; transition: 0.3s !important; } .header-button .ast-custom-button:hover, .header-button .button:hover { background-color: #f7931a !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(247, 147, 26, 0.2) !important; color: #fff !important; } /* Logo-Schrift (falls Text-Logo) */ .site-title a { font-weight: 900 !important; letter-spacing: -1px !important; color: #0f172a !important; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif !important; } /* -------------------------------------------------------------------------- 2. FOOTER STYLES (FULL OVERRIDE + FIXES) -------------------------------------------------------------------------- */ .ba-custom-footer { background: #ffffff; border-top: 1px solid #e2e8f0; padding: 60px 0 40px 0; width: 100%; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif; } .ba-footer-wrap { max-width: 1200px; margin: 0 auto; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; } /* Logo Styles */ .ba-custom-footer .ba-logo-bold { font-size: 22px; font-weight: 900; color: #0f172a !important; letter-spacing: -0.8px; } .ba-custom-footer .ba-logo-light { font-size: 22px; font-weight: 400; color: #94a3b8 !important; } /* Navigation - PIXEL PERFECT FIX */ .ba-footer-nav { display: flex; gap: 30px; /* Exakter Abstand via Flexbox */ align-items: center; } .ba-footer-nav a { text-decoration: none !important; color: #94a3b8 !important; /* Intelligence-Grau */ font-size: 15px !important; font-weight: 600 !important; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif !important; transition: color 0.2s ease-in-out !important; margin-left: 0 !important; /* Margin Reset wegen Gap */ } /* Hover-Effekt */ .ba-footer-nav a:hover { color: #f7931a !important; } /* Copyright */ /* 18.09.2026: Das bisherige Slate-300 ergab auf Weiss 1,48:1 und stand damit auf allen 154 Seiten praktisch unlesbar da. Jetzt Slate-500, also die Hausvariable --ba-slate: 4,76:1. Die Zeile bleibt zurueckhaltend und erfuellt die Norm. Gemessen, nicht geschaetzt. */ .ba-footer-copyright { text-align: center; margin-top: 40px; color: #64748b !important; font-size: 12px; font-weight: 700 !important; } /* -------------------------------------------------------------------------- 3. MOBILE RECOVERY & FIXES (DAS RETTUNGS-PAKET) -------------------------------------------------------------------------- */ @media (max-width: 850px) { /* FOOTER MOBIL */ .ba-footer-wrap { flex-direction: column !important; gap: 30px !important; text-align: center !important; } .ba-footer-nav { flex-direction: column !important; gap: 15px !important; align-items: center !important; } .ba-footer-nav a { margin: 0 !important; } /* GLOBALE SEKTIONEN */ #ba-intelligence-dashboard, #ba-select-section, .ba-section-wrapper, #ba-manifest-wrapper, #ba-finder-wrapper { margin: 60px auto !important; padding: 0 15px !important; } /* HEADER ABSTÄNDE (ASTRA FIX) */ #ba-intelligence-dashboard { margin-top: 140px !important; padding-top: 20px !important; } #ba-finder-wrapper { margin-top: 120px !important; /* Reduziert für bessere Optik */ padding-top: 20px !important; } .ba-finder-header { margin-bottom: 40px; text-align: center; padding-top: 20px; } .ba-finder-header h1 { padding-top: 20px !important; line-height: 1.2 !important; } .ba-finder-header .ba-eyebrow { margin-bottom: 5px !important; display: inline-block; } /* HEADLINES */ h1 { font-size: 34px !important; line-height: 1.1 !important; } h2 { font-size: 28px !important; line-height: 1.2 !important; } .ba-manifest-lead { font-size: 16px !important; } /* GRIDS & CARDS */ .ba-bento-grid, .ba-select-grid, .ba-manifest-grid, .ba-option-grid, .ba-result-grid, .ba-info-footer-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .ba-bento-item, .ba-select-card, .ba-manifest-card, #ba-finder-container { padding: 30px 20px !important; border-radius: 24px !important; } /* Buttons Full Width */ .ba-card-btn-orange, .ba-btn-primary, .ba-btn-ghost, .ba-manifest-btn { width: 100% !important; text-align: center !important; padding: 20px !important; box-sizing: border-box !important; } /* DASHBOARD MOBILE */ .ba-card-top { flex-direction: column; align-items: flex-start; } .ba-card-inputs { width: 100%; margin-top: 20px; } .ba-input-box { flex: 1; } .ba-input-box input, .ba-input-box select { width: 100% !important; } .ba-card-stats { grid-template-columns: 1fr !important; } .ba-chart-wrap { height: 250px !important; } } /* EXTREM KLEINE SCREENS */ @media (max-width: 380px) { h1 { font-size: 28px !important; } .ba-res-value { font-size: 20px !important; } } /* ========================================================================== SOVEREIGN DOT - der orange Punkt der Wortmarke ========================================================================== Hier standen bis zum 19.09.2026 FUENF Fassungen derselben Regel hintereinander (margin-left -4px, -2px, -0.05em, -5px, -1px), alle mit !important und gleicher Spezifitaet; gewirkt hat nur die jeweils letzte. Vier davon sprachen eine Hub-Logo-Klasse an (wie das Footer-Logo, nur mit der Endung -main statt -bold); die gibt es im ganzen Bestand null-mal. Der Name steht hier absichtlich nicht ausgeschrieben: der Pruefschirm zaehlt Zeichenfolgen auch in Kommentaren. Die WIRKUNG ist unveraendert uebernommen: Punkt im Header, kein Punkt im Footer. Der Punkt ist der Glyph der Inter Black, keine gezeichnete Scheibe: Durchmesser 0,2749 der Versalhoehe, Unterkante auf der Grundlinie. Dieselbe Form tragen Signet und Vorschaubild (siehe ~/bin/ba-logo.py). ========================================================================== */ /* Header - Punkt an */ .site-title a::after { content: '.'; color: #f7931a !important; font-weight: 900 !important; display: inline-block !important; margin-left: -5px !important; /* bei 26px Schrift = -0,192em */ line-height: 0; } /* Footer - bewusst ohne Punkt. Von George am 19.09.2026 bestaetigt, nachdem der Block aufgeraeumt war: "der Footer ist der ruhigere Ort - eine Wortmarke ohne Signal am Seitenende traegt." Das ist KEIN Pflegerest und keine vergessene Regel. Wer hier beim naechsten Durchgang eine Ungleichheit zum Header sieht: sie ist gewollt. */ .ba-footer-brand .ba-logo-bold::after, .ba-custom-footer .ba-logo-bold::after { content: none !important; } /* Sperrung der Wortmarke, Header wie Footer */ .site-title a, .ba-logo-bold { letter-spacing: -0.02em !important; } /* Footer-Logo etwas dezenter */ .ba-logo-bold { opacity: 0.8; transition: opacity 0.3s; } .ba-logo-bold:hover { opacity: 1; } /* --- BITATLAS MASTER DESIGN SYSTEM v1.0 --- */ :root { /* Colors */ --ba-dark: #0f172a; --ba-orange: #f7931a; --ba-slate: #64748b; --ba-border: #e2e8f0; --ba-bg-soft: #f8fafc; --ba-white: #ffffff; --ba-green: #22c55e; --ba-red: #ef4444; /* Typo Standards */ --ba-font-main: 'Inter', sans-serif; --ba-h-weight: 900; --ba-h-spacing: -0.05em; /* Manifesto Look */ /* Spacing Standards */ --ba-container-max: 1200px; --ba-content-max: 760px; /* Perfekte Lesebreite für Deep Dives */ --ba-gap-section: 100px; --ba-gap-block: 60px; --ba-gap-item: 24px; } /* 1. Global Base & Layout */ body { font-family: var(--ba-font-main); color: var(--ba-dark); -webkit-font-smoothing: antialiased; margin: 0; } .ba-section-wrapper, .ba-container { max-width: var(--ba-container-max); margin: 0 auto; padding: 0 30px; } .ba-orange-text { color: var(--ba-orange) !important; } /* 2. Typografie DNA */ h1, h2, h3 { font-weight: var(--ba-h-weight); letter-spacing: var(--ba-h-spacing); line-height: 1.1; color: var(--ba-dark); } h1 { font-size: clamp(36px, 5vw, 64px); text-align: center; } h2 { font-size: clamp(28px, 4vw, 36px); } .ba-lead-text, .ba-lead { font-size: 24px; line-height: 1.5; color: #475569; font-weight: 500; text-align: center; } /* 3. Bento Box System (Der Standard für ALLES) */ .ba-bento-item, .ba-card { background: #fff; border: 1px solid var(--ba-border); border-radius: 32px; padding: 40px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01); text-decoration: none !important; color: inherit; display: block; } a.ba-bento-item:hover, .ba-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.06); border-color: #cbd5e1; } /* 4. Spezial-Varianten (Individualisierungen geschützt) */ .ba-dark-mode { background: var(--ba-dark); color: #fff; border-color: #1e293b; } .ba-dark-mode h1, .ba-dark-mode h2, .ba-dark-mode h3, .ba-dark-mode h4 { color: #fff !important; } .ba-dark-mode p { color: #94a3b8; } /* 5. Buttons System */ /* Das Ausrufezeichen an der Schriftfarbe ist am 19.09.2026 entfallen. Der Vorgabegrund ist dunkel, dort ist Weiss richtig - aber Seiten, die den Grund auf eine Markenfarbe setzen, erbten das Weiss und kamen auf 2,30:1. Ohne Ausrufezeichen entscheidet die Seite, und der Vorgabewert bleibt Weiss. */ .ba-btn-primary, .ba-btn-block-primary { background: var(--ba-dark); color: #fff; padding: 14px 32px; border-radius: 100px; font-weight: 800; font-size: 15px; border: none; transition: 0.2s; cursor: pointer; } .ba-btn-primary:hover, .ba-btn-block-primary:hover { background: var(--ba-orange); transform: translateY(-2px); } /* 6. Die "Reise" (Next Steps) & Footer Fixes */ .ba-next-steps-wrapper { background: var(--ba-bg-soft); border-top: 1px solid var(--ba-border); padding: 80px 0; width: 100%; margin-top: var(--ba-gap-section); } .ba-footer-nav a { color: var(--ba-slate) !important; font-weight: 600; font-size: 15px; margin-left: 30px; transition: 0.2s; } .ba-footer-nav a:hover { color: var(--ba-orange) !important; } /* 7. Mobile First Fixes */ @media (max-width: 850px) { .ba-section-wrapper { padding: 0 20px; } .ba-footer-wrap { flex-direction: column; text-align: center; gap: 30px; } .ba-footer-nav { flex-direction: column; gap: 15px; } .ba-footer-nav a { margin-left: 0; } } /* ============================================================ BITATLAS GLOBAL RESPONSIVE RESET Dieser Code gehört in den CUSTOMIZER (Zusätzliches CSS) ============================================================ */ /* 1. DER CONTAINER-SCHUTZ (Global) */ .ba-section-wrapper, .ba-portal-hero, .ba-container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 2. DER MOBILE HAMMER (Trifft alles unter 900px) */ @media screen and (max-width: 900px) { /* Zwingt alle Grids in eine Spalte */ [class*="ba-grid"], .ba-hero-grid, .ba-tracks-grid, .ba-topics-grid, .ba-select-grid-premium, .ba-tool-container, .ba-mission-body-home { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 20px !important; height: auto !important; /* Löst das "Schlauch"-Problem */ } /* Korrektur für Boxen (Pfad-Wahl etc.) */ .ba-bento-item, .ba-topic-card, .ba-track-card { width: 100% !important; min-height: auto !important; /* Verhindert das Strecken ins Leere */ height: auto !important; padding: 30px 20px !important; flex: none !important; /* Stoppt Theme-Flex-Eigenschaften */ } /* FIX: Chart / Simulator (Das "Rausragen" ins Blaue) */ .ba-tool-chart { width: 100% !important; height: 300px !important; min-height: 300px !important; padding: 15px !important; background: #fff !important; order: 2; /* Chart unter die Eingabemaske */ } .ba-tool-intro { order: 1; padding: 40px 20px !important; } /* Verhindert horizontales Scrollen der gesamten Seite */ html, body { overflow-x: hidden !important; position: relative; width: 100%; } /* Typografie Global anpassen */ h1 { font-size: 32px !important; letter-spacing: -1.5px !important; } h2 { font-size: 26px !important; } } @media screen and (max-width: 900px) { /* Erzwingt, dass der Chart-Container absolut sauber abschließt */ .ba-tool-chart { display: block !important; position: relative !important; width: 100% !important; height: auto !important; /* NICHT fest: der Ausgang steht darunter */ min-height: 320px !important; padding: 10px !important; margin: 0 !important; background: #ffffff !important; border-radius: 0 0 32px 32px !important; /* Rundet die Box unten sauber ab */ overflow: hidden !important; /* Auffangnetz fuer ein ausbrechendes Canvas */ } /* Das erste Kind traegt inline min-height:400px und sprengt den Behaelter, bevor der Link überhaupt an die Reihe kommt. Das Canvas darin ist ohnehin auf 280 px gedeckelt. Gemessen am 24.09.2026 bei 390 px: Link bei y=5214, Behaelter endete bei 5094. */ .ba-tool-chart > div:first-child { min-height: 0 !important; height: 280px !important; } /* Zwingt das Canvas-Element (den Graphen selbst) in die Schranken */ .ba-tool-chart canvas { max-width: 100% !important; max-height: 280px !important; width: 100% !important; height: auto !important; } } /* ============================================================= BITATLAS SOVEREIGN DISCOVERY - FINAL CONSOLIDATED CSS ============================================================= */ /* 1. Header Navigation (Exakt wie dein Menü: 15px, 700) */ .ba-search-trigger { display: flex; align-items: center; cursor: pointer; padding: 0 15px; height: 100%; } .ba-search-trigger span { font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: #334155 !important; margin-left: 8px; } .ba-search-trigger svg { stroke: #334155; width: 18px; height: 18px; transition: 0.3s; } .ba-search-trigger:hover span { color: #f7931a !important; } .ba-search-trigger:hover svg { stroke: #f7931a; transform: scale(1.1); } /* 2. Full-Screen Discovery Layer (Minimalist Glass) */ #ba-search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); z-index: 9999999; justify-content: center; padding-top: 15vh; } .ba-search-modal { width: 90%; max-width: 950px; text-align: center; } #ba-search-input { width: 100%; max-width: 600px; background: transparent; border: none; border-bottom: 2px solid #0f172a; color: #0f172a; font-size: 26px; font-weight: 800; letter-spacing: -1px; outline: none; padding: 15px 0; margin: 0 auto 60px; text-align: center; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif; } #ba-search-input::placeholder { color: rgba(15, 23, 42, 0.1); } /* 3. Bento-Discovery-Grid (Die Ergebnisse) */ .ba-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 10px; text-align: left; } .ba-search-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 32px; padding: 35px; display: flex; flex-direction: column; gap: 12px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); text-decoration: none !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); } .ba-search-item:hover { transform: translateY(-8px); border-color: #f7931a; box-shadow: 0 20px 40px rgba(0,0,0,0.06); } .ba-item-cat { font-size: 9px; font-weight: 900; color: #f7931a; text-transform: uppercase; letter-spacing: 2px; } .ba-item-title { font-size: 19px; font-weight: 900; color: #0f172a; margin: 0; letter-spacing: -0.5px; } .ba-item-desc { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0; font-weight: 500; } @media (max-width: 850px) { #ba-search-input { font-size: 24px; } .ba-search-results { grid-template-columns: 1fr; } } /* --- BITATLAS MOBILE MASTER FIX --- */ @media (max-width: 768px) { /* 1. Container & Cards: Mehr Platz für den Content */ .ba-app-outer-container { margin-top: 40px !important; padding: 0 12px !important; } .ba-stage-card { padding: 25px 20px !important; border-radius: 24px !important; } /* 2. Typography: Headlines müssen atmen */ h1 { font-size: 32px !important; letter-spacing: -1.5px !important; } .ba-result-val { font-size: 38px !important; letter-spacing: -1px !important; } /* 3. Grids: Konsequentes Stacking */ .ba-input-grid, .ba-result-grid, .ba-stats-grid, .ba-faq-grid, .ba-milestone-grid { grid-template-columns: 1fr !important; gap: 15px !important; } /* 4. Logbuch & Adressen: Kein Layout-Breaking */ .ba-address-tag { font-size: 11px !important; word-break: break-all !important; display: block; text-align: center; } /* 5. Spezielle Bento-Elemente (z.B. Logbuch Support Panel) */ .ba-support-panel { grid-template-columns: 1fr !important; padding: 30px 20px !important; text-align: center; } .ba-qr-container { margin: 0 auto 20px !important; width: 160px !important; height: 160px !important; } /* 6. Dashboard / Unit Terminal Fixes */ .ba-matrix-readout { font-size: 32px !important; } .ba-input-group { padding: 20px !important; } } /* --- ARTIKEL-FOOTER MOBILE OPTIMIERUNG (MASTER) --- */ @media (max-width: 850px) { /* 1. Nächste Schritte Grid: Von 2 Spalten auf 1 Spalte zwingen */ .ba-next-grid { grid-template-columns: 1fr !important; /* Überschreibt den Inline-Style */ gap: 15px !important; } /* 2. Action Terminal (Der blaue Kasten): Padding & Text-Korrektur */ .ba-action-terminal { padding: 40px 25px !important; /* Weniger Platz verschwenden */ margin: 60px 0 !important; border-radius: 32px !important; } .ba-action-terminal h3 { font-size: 28px !important; /* Kleiner, damit die Headline nicht bricht */ letter-spacing: -1px !important; } /* 3. Sharing & Info-Bereich: Stapeln statt Quetschen */ /* Wir greifen die flex-Container direkt über ihre Eigenschaften */ .ba-article-wrapper > div[style*="display: flex"] { flex-direction: column !important; text-align: center !important; align-items: center !important; gap: 25px !important; } /* 4. Der Text "Wissen ist das einzige Gut..." zentrieren */ .ba-article-wrapper span[style*="font-size: 18px"] { text-align: center !important; display: block; } /* 5. Support-Adresse (bc1q...) mobil schmaler */ code { font-size: 11px !important; word-break: break-all !important; /* Verhindert das Rausragen der Adresse */ } } /* --- BITATLAS ARTIKEL MASTER MOBILE-FIX --- */ @media (max-width: 850px) { /* 1. Container-Abstand nach oben (Safe Space für Astra Header) */ .ba-nav-placeholder { margin-top: 115px !important; } /* 2. TL;DR Bento Box: Die 2 Spalten untereinander zwingen */ .ba-tldr-bento { padding: 30px 20px !important; margin-bottom: 50px !important; } .ba-tldr-grid { grid-template-columns: 1fr !important; /* Killer für das Inline-Grid */ gap: 20px !important; } /* 3. Action Terminal (Blauer Kasten): Padding radikal reduzieren */ .ba-action-terminal { padding: 45px 25px !important; margin: 60px 0 !important; border-radius: 32px !important; } .ba-action-terminal h3 { font-size: 28px !important; letter-spacing: -1px !important; } .ba-action-terminal p { font-size: 18px !important; } /* 4. Share- & Support-Sektion: Alles untereinander stapeln */ /* Zielt auf die flex-Container im Footer des Artikels */ .ba-article-wrapper > div[style*="display: flex"] { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 25px !important; } /* 5. Nächste Schritte: Die Karten stapeln */ .ba-next-grid { grid-template-columns: 1fr !important; gap: 15px !important; } .ba-next-card-premium { padding: 30px 20px !important; } /* 6. Adressen & Code: Verhindert, dass Text rausragt */ code { font-size: 11px !important; word-break: break-all !important; } /* 7. Typografie-Anpassung */ .ba-article-header h1 { font-size: 34px !important; } .ba-lead-text { font-size: 20px !important; padding-left: 20px !important; } } /* ============================================================ BITATLAS MOBILE MASTER FIX (v2.2) - FINAL STABILITY ============================================================ */ @media (max-width: 850px) { /* 1. DOPPEL-LOGO & NAV FIX */ /* Die Ausblendung des zweiten Logos stand hier auf 850 px, waehrend Astras Kopf die Wortmarke schon ab 921 selbst zeigte: zwischen 851 und 921 standen beide nebeneinander, im Bild bei 880 px belegt. Sie steht jetzt im Snippet an der einen Kopf-Grenze. */ /* 2. HEADER: Logo links, Burger rechts (Kein Verrutschen) */ #masthead .ast-container, .ast-mobile-header-wrap .ast-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 5px 15px !important; } /* Logo an den linken Rand */ .site-branding, .ast-site-identity { margin-right: auto !important; padding-left: 0 !important; } /* Hier stand eine Regel fuer einen Burger-Wrapper, den Astras Header-Builder nicht mehr vergibt: gemessen am 20.09.2026 null Vorkommen im Markup auf acht Seitentypen. Die Anordnung Logo links, Burger rechts macht die Grid-Zeile darueber. */ /* 3. BREADCRUMBS & CONTENT POSITIONING */ /* Wir schieben den ersten Inhaltsblock nach dem Header radikal nach unten */ .ba-app-outer-container, #ba-intelligence-dashboard, div.ba-article-wrapper[style*="font-size: 11px"] { margin-top: 125px !important; /* Abstand für Breadcrumbs & Pille */ display: flex !important; /* Stellt sicher, dass Breadcrumbs sichtbar sind */ padding-left: 20px !important; padding-right: 20px !important; } /* Die H1 im Artikel bekommt Luft zu den Breadcrumbs */ article.ba-article-wrapper { margin-top: 30px !important; padding-left: 20px !important; padding-right: 20px !important; } /* 4. STACKING FIX (Simulator & Bento) */ .ba-input-grid, .ba-result-bento, .ba-next-grid, .ba-tldr-grid, .ba-stats-grid, .ba-faq-grid { display: flex !important; flex-direction: column !important; gap: 20px !important; } /* 5. BOXEN-RETTUNG (Kein Abschneiden) */ .ba-stage-card, .ba-bento-item, .ba-res-card-dark, .ba-res-card-white, .ba-tldr-bento { width: 100% !important; padding: 30px 20px !important; border-radius: 28px !important; box-sizing: border-box !important; } /* 6. TYPOGRAFIE */ h1 { font-size: 32px !important; letter-spacing: -1.5px !important; line-height: 1.1 !important; } .ba-stat-main { font-size: 28px !important; word-break: break-all !important; } } /* ============================================================ BITATLAS LOGBUCH RESCUE (v2.3) - ANTI-SQUASH ============================================================ */ @media (max-width: 850px) { /* 1. Zwingt das Logbuch auf die volle Breite (Löst image_7bd533) */ .ba-app-outer-container { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: 130px !important; /* Hält den Abstand für H1 & Breadcrumbs */ padding: 0 20px !important; overflow: visible !important; } /* 2. Audit Status Panel (Adresse & Live-Indikator) sauber stapeln */ .ba-audit-status-panel { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 15px !important; padding: 25px 20px !important; width: 100% !important; } /* 3. Die Bitcoin-Adresse mobil schützen */ .ba-address-tag { font-size: 12px !important; word-break: break-all !important; text-align: center !important; } /* 4. Support-Bereich (Value for Value) stapeln */ .ba-support-panel { display: flex !important; flex-direction: column !important; text-align: center !important; padding: 40px 20px !important; gap: 30px !important; } /* 5. Transaktions-Feed (Breite korrigieren) */ .ba-feed-card { padding: 30px 20px !important; width: 100% !important; } .ba-tx-item { flex-direction: row !important; /* Behält Betrag neben Label, falls Platz ist */ align-items: center !important; gap: 10px !important; } } /* ============================================================ BITATLAS SETUP-FINDER MOBILE RESCUE (v2.4) ============================================================ */ @media (max-width: 850px) { /* 1. Zielt direkt auf die Container in Schritt 1, 2 und 3. DER FRAGEKOPF IST AUSGENOMMEN, seit dem 22.09.2026. Gemeint war das Antwortgitter (`grid-template-columns: 1fr`, "killt das 300px-Problem"); getroffen wurde JEDES direkte Kind eines Schritts, also auch `.ba-question-header` - und mit `margin: 0 !important` bei einer Spezifitaet von (1,0,1) schlug die Regel dessen eigenes `margin-bottom: 25px !important` (0,1,0). Gemessen: Am Rechner 35 px Abstand zwischen Frage und Karten, am Telefon 0. Die Karten klebten an der Frage (George, 22.09.2026). Die Abhilfe setzt KEINEN neuen Wert, sondern nimmt den Kopf aus der Regel heraus - dann gilt wieder, was jede Werkzeugseite fuer ihren Kopf selbst schreibt: 25 px auf 1762, 35 px auf 5548 und 5558. */ #step-1 > div:not(.ba-question-header), #step-2 > div:not(.ba-question-header), #step-3 > div:not(.ba-question-header), #ba-result > div:last-child { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; /* Killt das 300px-Problem */ gap: 15px !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; } /* 2. Macht die Auswahlkarten fit für Mobile */ .ba-selection-card { width: 100% !important; max-width: 100% !important; min-height: auto !important; padding: 30px 20px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* 3. Korrigiert die Icons & Texte in den Karten */ .ba-selection-card div[style*="font-size: 44px"] { font-size: 36px !important; margin-bottom: 15px !important; } .ba-selection-card h4 { font-size: 18px !important; margin-bottom: 5px !important; } } /* --- SPECIFIC FIX: DOPAMIN DRAIN PHILOSOPHY BOXES --- */ @media (max-width: 850px) { /* Findet das Grid mit den 2 Spalten in der Philosophie-Sektion */ .ba-section-wrapper > div[style*="grid-template-columns: 1fr 1fr"], .ba-section-wrapper > div[style*="grid-template-columns:1fr 1fr"] { display: flex !important; flex-direction: column !important; gap: 20px !important; } /* Stellt sicher, dass die Karten darin atmen können */ .ba-section-wrapper .ba-stage-card { width: 100% !important; padding: 30px 20px !important; margin-bottom: 0 !important; } } /* --- LOGO STABILITY FIX (ANTI-FLICKER) --- */ /* 1. Alle Transitionen für das Logo radikal deaktivieren */ .site-logo-img, .custom-logo-link, .site-branding a, .ba-logo-bold, .ba-nav-placeholder a { transition: none !important; -webkit-transition: none !important; backface-visibility: hidden; /* Zwingt den Browser, das Bild im Speicher zu behalten */ -webkit-backface-visibility: hidden; transform: translateZ(0); /* Hardware-Beschleunigung aktivieren */ } /* 2. Verhindern, dass das Logo beim Klicken "ausgraut" oder blinkt */ .site-branding a:active, .site-branding a:focus, .custom-logo-link:active { opacity: 1 !important; background: none !important; } /* 3. Pre-Loading Support */ .site-logo-img { content-visibility: auto; image-rendering: -webkit-optimize-contrast; /* Schärfere Darstellung */ } /* ============================================================ BITATLAS UNIFIED CONTENT FIX (v4.0) - THE GOLDEN RATIO ============================================================ */ @media (max-width: 850px) { /* 1. Der "First Contact" Fix: Das ALLERERSTE Element unter dem Header bekommt den großen Abstand. Das gilt für das Impressum ODER die Breadcrumbs im Artikel. */ div.ba-article-wrapper:first-of-type, article.ba-article-wrapper:first-of-type, .ba-app-outer-container { padding-top: 120px !important; /* Hier wird der Platz für Astra geschaffen */ margin-top: 0 !important; display: block !important; } /* 2. Der "Article-Connector": WENN ein Artikel-Inhalt (article) auf Breadcrumbs (div) folgt, reduzieren wir den Abstand massiv, damit kein Loch entsteht. */ div.ba-article-wrapper + article.ba-article-wrapper { padding-top: 20px !important; } /* 3. H1 & Typo-Politur */ .ba-article-header h1 { font-size: 32px !important; line-height: 1.1 !important; margin-top: 10px !important; } /* 4. Sicherstellen, dass die Breadcrumbs nicht zu fett sind */ div.ba-article-wrapper[style*="font-size: 11px"] { padding-bottom: 0 !important; } } /* --- LOGO STABILITY FIX (ANTI-FLICKER) --- */ /* 1. Alle Transitionen für das Logo radikal deaktivieren */ .site-logo-img, .custom-logo-link, .site-branding a, .ba-logo-bold, .ba-nav-placeholder a { transition: none !important; -webkit-transition: none !important; backface-visibility: hidden; /* Zwingt den Browser, das Bild im Speicher zu behalten */ -webkit-backface-visibility: hidden; transform: translateZ(0); /* Hardware-Beschleunigung aktivieren */ } /* 2. Verhindern, dass das Logo beim Klicken "ausgraut" oder blinkt */ .site-branding a:active, .site-branding a:focus, .custom-logo-link:active { opacity: 1 !important; background: none !important; } /* 3. Pre-Loading Support */ .site-logo-img { content-visibility: auto; image-rendering: -webkit-optimize-contrast; /* Schärfere Darstellung */ } /* --- BITATLAS CORE RESPONSIVE REPAIR --- */ @media (max-width: 850px) { /* 1. Haupt-Container: Mehr Platz am Rand */ .ba-app-outer-container { margin-top: 110px !important; padding: 0 15px !important; } /* 2. Die Stage-Card: Von Grid auf Block-Fluss zwingen */ .ba-stage-card { display: block !important; /* Hebt das 320px/1fr Grid komplett auf */ padding: 30px 20px !important; /* Gleiches Padding wie bei den funktionierenden Tools */ border-radius: 32px !important; } /* 3. Sidebar & Main: Breite auf 100% zwingen */ .ba-sidebar, .ba-arena-sidebar, .ba-arena-main, .ba-result-hero { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-bottom: 25px !important; } /* 4. Alle Grids (Analytics, Milestones, Inputs) untereinander */ .ba-analytics-grid, .ba-milestone-grid, .ba-input-grid, .ba-faq-grid, .ba-result-grid { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 15px !important; } /* 5. Schriftgrößen-Deckelung für mobile Screens */ .ba-score-val, .ba-result-val, .ba-matrix-readout { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.1 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* 6. Bento-Karten (Land, Share, FairShare) Korrektur */ .ba-analy-card { min-height: auto !important; padding: 25px !important; } .ba-analy-top { flex-direction: row !important; /* Behält Icon links vom Text für bessere Lesbarkeit */ align-items: center !important; } /* 7. Speziell für den Scarcity Auditor: Badge Position */ .ba-rank-badge { position: relative !important; top: 0 !important; right: 0 !important; display: inline-block !important; margin-bottom: 15px !important; } } /* --- BITATLAS SELECT MENU FIX (STATIC DOT) --- */ /* 1. Den orangenen Punkt statisch positionieren */ .main-navigation .ba-menu-select a::after { content: '.'; color: var(--ba-orange) !important; font-weight: 900 !important; display: inline-block; margin-left: 1px; transition: 0.3s ease; transform: translateY(0); /* Zwingt ihn auf die Grundlinie */ } /* 2. Hover-Effekt: Nur Glühen, kein Springen */ .main-navigation .ba-menu-select a:hover::after { transform: translateY(0); /* Verhindert das Hochgehen */ text-shadow: 0 0 10px rgba(247, 147, 26, 0.6); /* Eleganter Glow-Effekt */ } /* ========================================================================== BITATLAS GLOBAL ANTI-FLICKER & RENDERING STABILITY ========================================================================== */ /* 1. Hardware-Beschleunigung für kritische Elemente erzwingen */ #masthead, .site-logo-img, .ba-section-wrapper, .ba-bento-item, .ba-article-wrapper, #ba-intelligence-dashboard { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform, opacity; } /* 2. Verhindert das "Springen" von Texten beim Laden der Inter-Font */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 3. Uebergaenge erst NACH dem Laden. Bis zum 25.09.2026 stand hier body:not(.loaded) - eine Klasse, die nichts setzt; damit war jeder Uebergang der Site dauerhaft abgeschaltet. Gesetzt wird html.ba-loaded, und zwar vom Flicker-Snippet (ID 2973) bei DOMContentLoaded. Ohne jede Regel sprang das Layout bei langsamer Verbindung (CLS 0,21 in 4 von 6 Laeufen), mit dieser Bindung nicht (hoechstens 0,015). Siehe CLAUDE.md, Hover. */ html:not(.ba-loaded) * { transition: none !important; } /* 4. Astra Theme Spezifisch: Verhindert das Flickern des Sticky-Headers */ .ast-theme-transparent-header #masthead { position: absolute; left: 0; right: 0; z-index: 99; } /* 5. Logo-Stabilitäts-Fix (v3) */ .site-branding a img, .custom-logo-link img { display: inline-block !important; opacity: 1 !important; visibility: visible !important; /* Verhindert das kurzzeitige Verschwinden */ min-height: 1px; } /* SMOOTH PAGE REVEAL */ html { transition: opacity 0.4s ease-in-out; } /* Verhindert das Flickern von Webfonts (Inter) */ html { font-display: optional; } /* Spezieller Schutz für das Logo und den Header */ #masthead, .site-logo-img { transition: none !important; animation: none !important; } /* --- DER AKTIV-MARKER IM HAUPTMENUE ---------------------------------------- Hier stand bis zum 24.09.2026 die Regel BITATLAS TOOLS HEADER BRANDING (ALWAYS ORANGE) - ein fester Akzent auf dem Menuepunkt Tools, auf jeder Seite derselbe. Eine Marke, die immer dieselbe Stelle zeigt, sagt nichts - und sie besetzte genau den Platz, an dem der Zustand stehen muesste. EINEN AKTIV-MARKER GAB ES NICHT, und das ist gemessen: Astra fuehrt zwar eine eigene Regel - .ast-builder-menu-1 .menu-item.current-menu-item auf #f7931a -, sie wird aber ueberschrieben: auf /wissen/ misst der Browser am aktiven Punkt #334155 wie bei jedem anderen. Die Site hatte also keinen Marker, nicht bloss einen schwachen. Von George am 24.09.2026 entschieden: das feste Orange faellt, die aktuelle Rubrik bekommt einen Marker. DER SCHLUESSEL IST DIE ADRESSE, nicht die Seite, auf der der Link steht - dieselbe Bauform und dieselbe Farbtabelle wie die Pfadzeile weiter unten. Die Klasse ba-rubrik-aktiv setzt das Snippet "BitAtlas Menue-Aktivmarker"; sie steht auf den acht Hubs, auf jeder Artikelseite ihrer Rubrik, auf den 15 Werkzeugen (-> Tools) und auf dem Logbuch. Ohne Filter traegt WordPress current-menu-item nur auf den acht Hubs - auf 132 von 156 Seiten waere ein Marker daran unsichtbar geblieben. DIE FARBE SITZT IM STRICH, NICHT IN DER SCHRIFT, und das ist gerechnet statt gewaehlt. Das Menue ist 15px/700 auf einem Grund von 80 % Weiss; der Text traegt #334155 = 10,35:1. Eingefaerbt laege der AKTIVE Punkt je nach Rubrik bei 2,30 bis 5,38 - ueber einem dunklen Block bei 1,50, also an der Arbeitsgrenze des Hauses. Ausgerechnet die Seite, auf der man steht, waere der am schlechtesten lesbare Punkt. Ein Strich traegt keinen Inhalt; dort gilt die Grenze nicht, und die Rubrikfarbe sagt trotzdem, wo man ist. box-shadow statt border-bottom, weil ein Rahmen die Zeile um 3 px hoeher macht und das Menue beim Seitenwechsel springen liesse. KEINE ZWEITE FETTUNG, und das ist gemessen: Die Regel fuer .main-navigation a erzwingt das Schriftgewicht mit Vorrang auf 700 und schlaegt damit jede Spezifitaet. Ein Gewicht von 800 stand hier kurz und hat nie gewirkt - der Browser mass am aktiven Punkt weiter 700. Es faellt, statt selbst mit einem Vorrang dagegenzuhalten: Der Strich traegt das Signal allein, und der Unterschied 700 zu 800 haette daneben nichts beigetragen. ------------------------------------------------------------------------ */ .main-navigation #ast-hf-menu-1 > li.ba-rubrik-aktiv > a.menu-link { box-shadow: inset 0 -3px 0 0 var(--ba-orange); } .main-navigation #ast-hf-menu-1 > li.ba-rubrik-aktiv > a.menu-link[href$="/praxis/"] { box-shadow: inset 0 -3px 0 0 #10b981; } .main-navigation #ast-hf-menu-1 > li.ba-rubrik-aktiv > a.menu-link[href$="/operations/"] { box-shadow: inset 0 -3px 0 0 #14b8a6; } .main-navigation #ast-hf-menu-1 > li.ba-rubrik-aktiv > a.menu-link[href$="/lifestyle/"] { box-shadow: inset 0 -3px 0 0 #9333ea; } .main-navigation #ast-hf-menu-1 > li.ba-rubrik-aktiv > a.menu-link[href$="/dispatches/"] { box-shadow: inset 0 -3px 0 0 #06b6d4; } /* Dasselbe im Mobilmenue, wo die Lage schlechter war: Astra hebt den aktiven Punkt dort schon mit einem hellen Grund hervor - aber nur ueber current-menu-item, das WordPress allein auf den acht Hubs setzt. Auf einer Artikelseite zeigte das Mobilmenue deshalb gar nichts, waehrend derselbe Hub einen Balken trug (im Browser gemessen am 24.09.2026). Den Grund macht seither Astra selbst, weil der Filter die Klasse mitsetzt; hier steht nur die Farbe. Der Strich liegt LINKS statt unten - in einer senkrechten Liste markiert er die Zeile und nicht das Wort. */ #ast-hf-mobile-menu > li.ba-rubrik-aktiv > a.menu-link { box-shadow: inset 3px 0 0 0 var(--ba-orange); } #ast-hf-mobile-menu > li.ba-rubrik-aktiv > a.menu-link[href$="/praxis/"] { box-shadow: inset 3px 0 0 0 #10b981; } #ast-hf-mobile-menu > li.ba-rubrik-aktiv > a.menu-link[href$="/operations/"] { box-shadow: inset 3px 0 0 0 #14b8a6; } #ast-hf-mobile-menu > li.ba-rubrik-aktiv > a.menu-link[href$="/lifestyle/"] { box-shadow: inset 3px 0 0 0 #9333ea; } #ast-hf-mobile-menu > li.ba-rubrik-aktiv > a.menu-link[href$="/dispatches/"] { box-shadow: inset 3px 0 0 0 #06b6d4; } /* ========================================================================== FINAL MASTER FOOTER CONSOLIDATION ========================================================================== */ /* 1. Alte manuelle Footer-Blöcke auf allen Seiten unsichtbar machen */ .ba-custom-footer { display: none !important; } /* 2. Nur den neuen Master-Footer aus WPCode anzeigen */ #ba-master-footer.ba-custom-footer { display: block !important; } /* 3. Globales Styling für den Master */ #ba-master-footer { background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; padding: 80px 0 40px 0 !important; width: 100% !important; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif !important; } /* Hover-Effekt für die restlichen Links */ #ba-master-footer .ba-footer-nav a:hover { color: #0f172a !important; } /* Mobile Fix für den Master-Footer */ @media (max-width: 850px) { #ba-master-footer .ba-footer-wrap { flex-direction: column !important; gap: 30px !important; text-align: center !important; } #ba-master-footer .ba-footer-nav { flex-direction: column !important; gap: 15px !important; align-items: center !important; } #ba-master-footer .ba-footer-nav a { margin: 0 !important; } } /* --- BITATLAS FOOTER SELECT DOT BRANDING (FIX) --- */ /* Wir nutzen eine extrem hohe Spezifität, damit der Punkt garantiert erscheint */ #ba-master-footer .ba-footer-nav a.ba-footer-select::after { content: '.' !important; color: #f7931a !important; /* Dein Bitcoin-Orange */ font-weight: 900 !important; display: inline-block !important; margin-left: 1px !important; transition: 0.3s ease !important; line-height: 0 !important; transform: translateY(0) !important; } /* Hover-Glow für den Punkt im Footer */ #ba-master-footer .ba-footer-nav a.ba-footer-select:hover::after { text-shadow: 0 0 10px rgba(247, 147, 26, 0.8) !important; } /* ========================================================================== BITATLAS MASTER FOOTER & MISSION CONSOLIDATION (v5.0) ========================================================================== */ /* 1. GLOBALES LÖSCHEN: Verstecke ALLE alten Footer und Mission-Bereiche */ .ba-custom-footer, .ba-footer-mission-area, div[style*="letter-spacing: 0.5px"], #colophon { display: none !important; } /* 2. EXKLUSIVE REAKTIVIERUNG: Nur der WPCode Master-Footer darf leben */ #ba-master-footer.ba-custom-footer { display: block !important; background: #ffffff !important; border-top: 1px solid #e2e8f0 !important; padding: 80px 0 40px 0 !important; width: 100% !important; } /* 3. MISSION AREA IM MASTER ERLAUBEN */ #ba-master-footer .ba-footer-mission-area { display: block !important; /* Erlaubt den Container */ } #ba-master-footer .ba-footer-mission-area > div { display: flex !important; /* Erzwingt die horizontale Ausrichtung */ } /* 4. BRANDING: "Select." mit Punkt (Analog Header) */ #ba-master-footer .ba-footer-nav a.ba-footer-select::after { content: '.' !important; color: #f7931a !important; font-weight: 900 !important; display: inline-block !important; margin-left: 1px !important; line-height: 0 !important; transform: translateY(0) !important; } /* 5. HOVER FUER DIE FUSSNAVIGATION Hier standen bis zum 24.09.2026 zwei Regeln: ein festes Orange auf "Tools" und eine Hover-Ausnahme dafuer. Eine Marke, die immer dieselbe Stelle zeigt, sagt nichts - George. Der Punkt hinter "Select." bleibt. */ #ba-master-footer .ba-footer-nav a:hover { color: #0f172a !important; } /* --- MOBILE SEARCH REFINEMENT --- */ /* Die Lupenfarbe stand hier in einer eigenen Query auf 921 - die dritte Zahl fuer den Kopf-Breakpoint. Sie steht jetzt im Snippet "BitAtlas Mobilmenue" und teilt sich die Zahl mit allem anderen. */ @media (max-width: 1000px) { /* Hier stand eine Regel fuer das Suchfeld in einer Popup-Fassung des Mobilkopfes. Der Kopf laeuft als Dropdown, die Popup-Klasse gibt es im Markup nicht - gemessen am 20.09.2026 ueber acht Seitentypen. Die mobile Suche liegt seit dem Suchbau in einem eigenen Overlay (Snippet 11354). */ /* AJAX-Ergebnisse mobil auf volle Breite */ .is-ajax-search-result { width: 90vw !important; left: 5vw !important; position: fixed !important; } } /* --- BITATLAS ASTRA SEARCH: DESKTOP BRANDING --- */ /* 1. Die Lupe im Desktop-Header orange färben */ .ast-header-search .ast-icon svg { fill: #f7931a !important; /* Dein Marken-Orange */ width: 20px !important; height: 20px !important; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } /* 2. Dezenter Hover-Effekt (WOW-Faktor) */ .ast-header-search:hover .ast-icon svg { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(247, 147, 26, 0.3)); } /* 3. Abstand zum letzten Menüpunkt (Logbuch) korrigieren */ .ast-header-search { margin-left: 25px !important; display: flex !important; align-items: center !important; } /* 4. Sicherstellen, dass die Lupe im mobilen Header identisch bleibt */ .ast-mobile-header-wrap .ast-header-search .ast-icon svg { fill: #f7931a !important; } /* --- BITATLAS CENTRAL AUTHOR BOX MOBILE FIX --- */ @media (max-width: 850px) { /* Den Haupt-Container der Box anpassen */ div[style*="margin-top: 80px"] > div[style*="background: #ffffff"] { padding: 30px 20px !important; border-radius: 32px !important; } /* Avatar und Text untereinander stapeln */ div[style*="display: flex; gap: 40px; align-items: flex-start"] { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 20px !important; } /* Den Avatar-Container zentrieren */ div[style*="width: 140px; height: 140px"] { width: 120px !important; height: 120px !important; margin: 0 auto !important; } /* Den "Verified Stack" Bereich anpassen */ div[style*="background: #f8fafc; border: 1px solid #e2e8f0"] { flex-direction: column !important; gap: 20px !important; text-align: center !important; } /* Den "View Full Stack" Button auf volle Breite bringen */ div[style*="background: #f8fafc; border: 1px solid #e2e8f0"] a { width: 100% !important; display: block !important; } /* Die Social Links (X, Bitcointalk) zentrieren */ div[style*="margin-top: 30px; display: flex; gap: 35px"] { gap: 20px !important; flex-wrap: wrap !important; justify-content: center !important; } } /* BitAtlas Global Mobile Patch */ @media (max-width: 768px) { /* Alle Grids automatisch einspaltig machen */ .ba-article-body div[style*="display: grid"], .ba-article-body div[style*="display:grid"] { grid-template-columns: 1fr !important; gap: 20px !important; } /* Padding-Anpassung für Boxen auf Mobile */ .ba-float-hover, .ba-statement-quote, .ba-formula-box, .ba-chart-container { padding: 25px 20px !important; margin: 30px 0 !important; border-radius: 20px !important; } /* Schriftgrößen-Korrektur */ .ba-article-body h2 { font-size: 28px !important; } .ba-article-body h3 { font-size: 22px !important; } .ba-lead-text { font-size: 20px !important; padding-left: 20px !important; } } /* BITATLAS MASTER FRAMEWORK v2.0 (2026) Inklusive Mobile-Patch, ToC-Styling & Auto-Grids */ :root { --ba-dark: #0f172a; --ba-orange: #f7931a; --ba-slate: #64748b; --ba-border: #e2e8f0; --ba-font: 'Inter', sans-serif; } /* 1. LAYOUT & RESPONSIVENESS */ /* Der neue Standard für alle Grids - stapelt automatisch auf Mobile */ .ba-auto-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 24px !important; } /* Globaler Mobile-Patch für Padding und Textfluss */ @media (max-width: 768px) { .ba-article-wrapper { padding: 0 15px !important; } /* Erzwingt Einspaltigkeit auf sehr kleinen Geräten */ .ba-auto-grid { grid-template-columns: 1fr !important; } .ba-article-header h1 { font-size: 32px !important; letter-spacing: -1.5px !important; } .ba-float-hover, .ba-statement-quote, .ba-formula-box { padding: 25px 20px !important; border-radius: 20px !important; } } /* 2. UI-KOMPONENTEN (Standard-Klassen) */ .ba-float-hover { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important; } /* Hover nur, wo anklickbar (George, 25.09.2026): Von allen Traegern dieser Klasse ist allein die Benefit-Box klickbar. Hausform: 4 px, Schatten waechst, Rand in der Farbe des Ziels. */ .ba-benefit-box.ba-float-hover:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12); border-color: var(--ba-orange); } .ba-formula-box { background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%); border-radius: 24px; padding: 40px; margin: 40px 0; text-align: center; border: 1px solid rgba(247,147,26,0.2); } .ba-statement-quote { margin: 60px 0; padding: 50px 40px; background: #f8fafc; border-radius: 32px; border-top: 1px solid var(--ba-border); border-bottom: 1px solid var(--ba-border); text-align: center; } /* 3. INHALTSVERZEICHNIS (ToC) STYLING */ .ba-toc-container { background: #f8fafc; border: 1px solid var(--ba-border); border-radius: 24px; padding: 30px; margin: 40px 0 60px; } #ba-toc-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } #ba-toc-list li { margin-bottom: 12px; } #ba-toc-list a { font-size: 16px; font-weight: 700; color: var(--ba-dark); display: flex; align-items: center; gap: 10px; transition: 0.2s; } #ba-toc-list a:hover { color: var(--ba-orange); transform: translateX(5px); } #ba-toc-list a::before { content: ''; width: 8px; height: 8px; background: var(--ba-orange); border-radius: 2px; flex-shrink: 0; } /* Styling für H3-Unterpunkte im ToC */ #ba-toc-list .toc-h3 { margin-left: 25px; opacity: 0.8; } #ba-toc-list .toc-h3 a { font-size: 14px; font-weight: 600; } #ba-toc-list .toc-h3 a::before { width: 6px; height: 6px; background: #cbd5e1; } /* 4. HILFSKLASSEN */ .ba-orange-text { color: var(--ba-orange) !important; font-weight: inherit; } .ba-slate-text { color: var(--ba-slate) !important; } /* BITATLAS MASTER FRAMEWORK v2.1 - MOBILE RESCUE PATCH */ :root { --ba-dark: #0f172a; --ba-orange: #f7931a; --ba-slate: #64748b; --ba-border: #e2e8f0; --ba-font: 'Inter', sans-serif; } /* 1. GLOBALE SICHERHEIT */ html, body { max-width: 100%; overflow-x: hidden; /* Verhindert horizontales Scrollen komplett */ } * { box-sizing: border-box; } /* 2. RESPONSIVE GRIDS */ .ba-auto-grid { display: grid !important; /* Nutzt 1fr auf Mobile und min 300px auf Desktop */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; gap: 24px !important; width: 100% !important; } /* 3. MOBILE OPTIMIERUNG (Radikale Anpassung) */ @media (max-width: 768px) { .ba-article-wrapper { padding: 0 15px !important; width: 100% !important; overflow: hidden; } /* Boxen-Paddings reduzieren, damit Platz für Content bleibt */ .ba-float-hover, .ba-statement-quote, .ba-formula-box, .ba-toc-container { padding: 20px 15px !important; /* Weniger Padding = mehr Platz für Text/Grafik */ margin: 25px 0 !important; width: 100% !important; border-radius: 16px !important; } /* Schriften skalieren */ .ba-article-header h1 { font-size: 28px !important; letter-spacing: -1px !important; } .ba-article-body h2 { font-size: 26px !important; margin: 50px 0 20px !important; } .ba-article-body p { font-size: 18px !important; line-height: 1.7 !important; } /* Grafiken/Canvas absichern */ canvas { max-width: 100% !important; height: auto !important; } /* Verhindert, dass lange Wörter oder Formeln die Box sprengen */ .ba-article-body { word-wrap: break-word; overflow-wrap: break-word; } } /* 4. SPEZIAL-FIX FÜR GRIDS IN BOXEN */ .ba-float-hover .ba-auto-grid { grid-template-columns: 1fr !important; /* In Boxen auf Mobile immer einspaltig */ } /* ============================================================ GLOBAL MOBILE RESPONSIVENESS PATCH (BitAtlas Standard) ============================================================ */ @media (max-width: 768px) { /* 1. Verhindert das Abschneiden von Containern */ .ba-article-wrapper { padding-left: 15px !important; padding-right: 15px !important; overflow-x: hidden; /* Verhindert horizontales Wackeln der Seite */ } /* 2. Formel-Boxen & KaTeX Optimierung */ .ba-formula-box { padding: 25px 20px !important; margin: 30px 0 !important; width: 100% !important; overflow-x: auto !important; /* Erlaubt horizontales Scrollen bei langen Formeln */ -webkit-overflow-scrolling: touch; } /* Spezifisch für KaTeX/LaTeX Formeln */ .katex-display { overflow-x: auto !important; overflow-y: hidden !important; padding: 10px 0 !important; -webkit-overflow-scrolling: touch; } /* 3. Float-Hover & Step-Boxen Anpassung */ .ba-float-hover, .ba-step-box, .ba-alert-box, .ba-highlight-box { padding: 25px 20px !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 20px !important; /* Etwas subtiler auf Mobile */ width: 100% !important; box-sizing: border-box !important; } /* 4. Text-Anpassungen innerhalb von Boxen */ .ba-article-body p, .ba-step-box p, .ba-formula-box p { font-size: 17px !important; /* Bessere Lesbarkeit auf kleinen Screens */ line-height: 1.6 !important; } .ba-step-title, .ba-article-body h3 { font-size: 20px !important; letter-spacing: -0.5px !important; } /* 5. Bild- & Video-Container */ .ba-article-body img, .ba-article-body canvas { max-width: 100% !important; height: auto !important; } /* 6. Tabellen-Fix (für die Privacy-Matrix etc.) */ div[style*="overflow-x: auto"] { border-radius: 12px; border: 1px solid var(--ba-border); } } /* Spezieller Fix für extrem kleine Screens (iPhone SE etc.) */ @media (max-width: 400px) { .ba-article-header h1 { font-size: 30px !important; } .ba-formula-box .katex { font-size: 1.1em !important; /* Verkleinert die Formel, damit sie eher passt */ } } /* ============================================================ BITATLAS MOBILE FIX V2 (PRO-LEVEL RESPONSIVENESS) ============================================================ */ @media (max-width: 768px) { /* 1. Globaler Schutz gegen horizontales Ausbrechen */ html, body { overflow-x: hidden !important; position: relative; width: 100%; } /* 2. Wrapper-Korrektur: Verhindert, dass Padding die Breite sprengt */ .ba-article-wrapper { width: 100% !important; max-width: 100vw !important; padding-left: 16px !important; padding-right: 16px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 3. Der ultimative Formel-Box Fix */ .ba-formula-box, .ba-step-box, .ba-alert-box, .ba-highlight-box { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; padding: 30px 20px !important; /* Etwas kompakter auf Mobile */ /* WICHTIG: Erlaubt der Box, Inhalte intern zu scrollen, falls diese zu breit sind (wie die SHA256 Formel) */ overflow-x: auto !important; display: block !important; } /* 4. KaTeX/LaTeX Spezifische Korrektur */ /* Dies verhindert, dass lange Formeln die gesamte Box nach rechts schieben */ .katex-display { margin: 1em 0 !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 5px 0 !important; /* Verkleinert die Schriftgröße leicht, damit mehr auf den Screen passt */ font-size: 0.95em !important; -webkit-overflow-scrolling: touch; } /* Sorgt dafür, dass Inline-Formeln nicht das Layout sprengen */ .katex { white-space: nowrap; } /* 5. Tabellen-Fix für Mobile (Privacy Matrix etc.) */ .ba-article-body table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } /* Spezieller Fix für sehr schmale Geräte (z.B. iPhone 12/13 mini) */ @media (max-width: 380px) { .ba-formula-box .katex-display { font-size: 0.85em !important; } .ba-article-header h1 { font-size: 32px !important; } } /* ============================================================ BITATLAS MASTER NORMALIZER (Standardisierung 2026) ============================================================ */ /* Vereinheitlichung der Meta-Header */ .ba-meta-top { display: flex !important; gap: 12px !important; margin-bottom: 30px !important; align-items: center !important; flex-wrap: wrap !important; justify-content: flex-start !important; } .ba-meta-top span { font-family: var(--ba-font) !important; text-transform: uppercase !important; } /* Vereinheitlichung der Quellen-Boxen */ /* Wir selektieren die Box anhand ihrer typischen Struktur */ div[style*="background: #f8fafc"] h4, div[style*="background:#f8fafc"] h4 { font-size: 13px !important; font-weight: 900 !important; letter-spacing: 2px !important; border-bottom: 1px solid var(--ba-border) !important; padding-bottom: 15px !important; } .ba-article-body div[style*="font-family: monospace"] { line-height: 2.0 !important; font-size: 14px !important; } /* Vereinheitlichung der blauen CTA-Terminals */ .ba-action-terminal, div[style*="linear-gradient(145deg, #0f172a"] { border-radius: 40px !important; padding: clamp(30px, 5vw, 80px) clamp(20px, 5vw, 60px) !important; border: 1px solid rgba(247,147,26,0.3) !important; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important; } /* Globaler Mobile-Fix (V2 integriert) */ @media (max-width: 768px) { .ba-article-wrapper { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } .ba-formula-box, .ba-step-box, .ba-alert-box, .ba-highlight-box { padding: 25px 20px !important; border-radius: 20px !important; overflow-x: auto !important; } } // ========================================== // BitAtlas UI Polisher // ========================================== function polishBitAtlasUI() { // 1. Alle CTA-Terminals finden und Padding/Border fixen const ctas = document.querySelectorAll('div[style*="linear-gradient"]'); ctas.forEach(cta => { if (cta.textContent.includes('→')) { // Erkennt unsere Button-Boxen cta.style.borderRadius = "40px"; cta.style.border = "1px solid rgba(247,147,26,0.3)"; } }); // 2. Alle Quellen-Boxen finden (basierend auf der h4 Überschrift) const headers = document.querySelectorAll('h4'); headers.forEach(h => { if (h.textContent.toLowerCase().includes('quellen')) { const box = h.parentElement; box.style.borderRadius = "32px"; box.style.padding = "40px"; box.style.background = "#f8fafc"; } }); } // Ausführen, wenn das Dokument bereit ist document.addEventListener('DOMContentLoaded', polishBitAtlasUI); /* Hier standen fuenf Regelbloecke fuer einen Monument-Container einer frueheren Fassung und ein Abstandshalter dazu. Beide Klassen gibt es nicht mehr: gemessen am 20.09.2026 ueber alle 156 Seiten, alle zehn publizierten Snippets sowie Theme und Plugins - null Vorkommen im Markup. Der heutige Container heisst anders und traegt padding-top 0; den Abstand zum Kopf macht das Badge darueber (120 px, mobil 100, unter 900 px 150 aus der Regel "Massiver Puffer"). Das ist Gesetz 2: ein Mechanismus, nicht zwei. */ /* Schützt das Logo vor Monument-Overrides */ .site-header .logo a, .site-header .custom-logo-link, header .logo { color: #0f172a !important; /* oder deine Logo-Farbe */ font-family: inherit !important; text-decoration: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ BA-SIGNAL-TICKER Design-Aura: "Intelligence Terminal" Stand: Januar 2026 ═══════════════════════════════════════════════════════════════════════════ */ .ba-signal-ticker { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 18px 28px; font-family: 'JetBrains Mono', monospace; max-width: 1200px; margin: 0 auto; } /* Label Container */ .ba-signal-ticker-label { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Pulsing Red Dot */ .ba-signal-ticker-dot { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; animation: signalPulse 1.5s ease-in-out infinite; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); } @keyframes signalPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); } 50% { opacity: 0.5; box-shadow: 0 0 16px rgba(239, 68, 68, 0.9); } } /* Label Text */ .ba-signal-ticker-tag { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #64748b; } .ba-signal-ticker-tag-bracket { color: #ef4444; } .ba-signal-ticker-tag-text { color: #94a3b8; } /* Message Content */ .ba-signal-ticker-message { flex: 1; font-size: 13px; font-weight: 500; color: #cbd5e1; line-height: 1.5; padding: 0 20px; border-left: 1px solid #1e293b; } /* Link */ .ba-signal-ticker-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #60a5fa; text-decoration: none !important; padding: 10px 18px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px; transition: all 0.3s ease; flex-shrink: 0; } .ba-signal-ticker-link:hover { color: #93c5fd; background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); transform: translateX(2px); } .ba-signal-ticker-link-arrow { transition: transform 0.3s ease; } .ba-signal-ticker-link:hover .ba-signal-ticker-link-arrow { transform: translateX(3px); } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE: Mobile Stacking ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .ba-signal-ticker { flex-direction: column; text-align: center; gap: 16px; padding: 24px 20px; } .ba-signal-ticker-label { justify-content: center; } .ba-signal-ticker-message { border-left: none; border-top: 1px solid #1e293b; padding: 16px 0 0 0; } .ba-signal-ticker-link { width: 100%; justify-content: center; } } @media (max-width: 480px) { .ba-signal-ticker { padding: 20px 16px; border-radius: 10px; } .ba-signal-ticker-tag { font-size: 10px; } .ba-signal-ticker-message { font-size: 12px; } .ba-signal-ticker-link { font-size: 11px; padding: 12px 16px; } } /* Zwingt den Browser zu schärferen Logo-Kanten */ .site-logo-img, .custom-logo-link img { image-rendering: -webkit-optimize-contrast !important; image-rendering: crisp-edges !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* BITATLAS GLOBAL ARCHITECTURE LAW: MOBILE LOGO FIX */ @media (max-width: 768px) { /* Hier stand dieselbe Sicherheitszone ein zweites Mal, auf derselben Klasse, die es nicht gibt. Der wirksame Puffer steht weiter unten unter "Massiver Puffer fuer mobilen Header" und gilt fuer sieben Badge- und Hero-Klassen statt fuer eine. */ /* 2. Zwingt das Astra-Logo in die korrekte Größe & Schärfe */ .ast-mobile-header-wrap .site-logo-img img, .ast-mobile-header-wrap .custom-logo-link img, .site-header .site-logo-img img { width: 145px !important; max-width: 145px !important; height: auto !important; display: block !important; image-rendering: -webkit-optimize-contrast !important; } /* 3. Verhindert das Überlagern durch Z-Index */ .ast-mobile-header-wrap { z-index: 9999 !important; position: relative !important; } } /* ═══════════════════════════════════════════════════════════════ AIRSPACE MOBILE HEADER FIX (BitAtlas v5.7 Gold) Garantiert Sichtbarkeit für Hubs, Monumente & Audits ═══════════════════════════════════════════════════════════════ */ /* 1000 px ist der Kopf-Breakpoint und steht als BA_KOPF_BREAKPOINT im Snippet "BitAtlas Mobilmenue". Hier stand 900 - eine zweite Zahl fuer dieselbe Sache, und zwischen 901 und dem Breakpoint blieben dadurch nur 19 statt 49 px Luft unter dem Kopf. Wer die eine Zahl aendert, aendert diese mit. */ @media (max-width: 1000px) { /* 1. Wir fügen die Audit-Klasse der Sicherheits-Liste hinzu */ .ba-badge-standalone, .ba-audit-badge-standalone, /* NEU für Gold-Audits */ .ba-monument-badge-standalone, .ba-logbuch-badge-standalone, .ba-hub-hero, .ba-portal-hero { margin-top: 150px !important; /* Massiver Puffer für mobilen Header */ margin-bottom: 30px !important; display: block !important; clear: both !important; } /* 2. Logik zur Vermeidung von Doppel-Lücken */ .ba-badge-standalone + .ba-hub-hero, .ba-audit-badge-standalone + .ba-select-audit-gold { margin-top: 20px !important; } } /* Der Avatar behaelt 900 px: er haengt nicht am Kopf, sondern an der Spaltenbreite des Inhalts. Mit dem Puffer mitzuwandern waere eine Nebenwirkung, keine Absicht. */ @media (max-width: 900px) { /* 3. Investigator Avatar Fix für mobile Konsistenz */ .ba-signature-avatar { width: 80px !important; height: 80px !important; outline: 4px solid #fff; box-shadow: 0 0 0 5px #e2e8f0; } } /* Spezial-Korrektur für extrem kleine Bildschirme */ @media (max-width: 480px) { .ba-badge-standalone, .ba-audit-badge-standalone, .ba-logbuch-badge-standalone { margin-top: 130px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ TERMINAL PATH CONSISTENCY (v5.7.2) Zwingt Schrägstriche und Links in absolute farbliche Einheit ═══════════════════════════════════════════════════════════════════════════ */ .ba-terminal-path-text, .ba-audit-id { /* DIE LINKS SIND HIER AM 22.09.2026 HERAUSGEFALLEN (George). Sie tragen die Farbe ihres ZIELS und nicht das Einheitsgrau; die Regel dafuer steht weiter unten bei der Pfadzeile. Was hier bleibt, ist der Text DRUMHERUM - Schraegstriche, Host, Doppelpunkt. Der hat kein Ziel. */ color: #94a3b8 !important; /* Slate 400 - Der Gold-Standard Grauton */ opacity: 1 !important; /* Verhindert Blässe durch Vererbung */ text-decoration: none !important; transition: color 0.2s ease; } /* Der Hover-Effekt bleibt exklusiv für die Links */ .ba-terminal-path-text a:hover { color: var(--ba-orange) !important; text-decoration: underline !important; } /* ═══════════════════════════════════════════════════════════════════════════ STACK MODULE CLEANUP (v5.7.3) Entfernt den Text-Unterstrich für einen puristischen Dossier-Look ═══════════════════════════════════════════════════════════════════════════ */ .ba-stack-module, .ba-stack-module:hover, .ba-stack-module:active, .ba-stack-module:focus { text-decoration: none !important; /* Killt den Unterstrich */ outline: none !important; } .ba-stack-module-name { /* Optional: Ein minimaler Farbumschlag des Namens bei Hover */ transition: color 0.3s ease; } .ba-stack-module:hover .ba-stack-module-name { color: var(--ba-orange); /* Der Name leuchtet dezent auf, ohne Unterstrich */ } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL LINK ENFORCEMENT (v5.7.5) Zwingt JEDEN Link im Audit (Lead & Prose) auf Orange ═══════════════════════════════════════════════════════════════════════════ */ /* Ziel: Lead, Fließtext, Sektionen — aber nur Verweise OHNE eigene Klasse. Ein Link mit Klasse ist ein Knopf und behält seine Gestaltung. Die Kette html body traegt die Regel ueber die Seitenregeln hinweg: die staerkste Seitenregel liegt bei (0,3,2), diese bei (0,3,3). */ html body .ba-monument-v42 .ba-monument-lead a:not([class]), html body .ba-monument-v42 .ba-monument-prose a:not([class]), html body .ba-monument-v42 .ba-monument-section a:not([class]), html body .ba-monument-lead a:not([class]), html body .ba-monument-prose a:not([class]), html body .ba-monument-section a:not([class]), html body .ba-potential-content a:not([class]), html body .ba-philosophy-content a:not([class]), html body .ba-data-card a:not([class]) { color: #b45309 !important; text-decoration: none !important; border-bottom: 1px dashed rgba(180, 83, 9, 0.4) !important; font-weight: 600; } html body .ba-monument-v42 .ba-monument-lead a:not([class]):hover, html body .ba-monument-v42 .ba-monument-prose a:not([class]):hover, html body .ba-monument-v42 .ba-monument-section a:not([class]):hover, html body .ba-monument-lead a:not([class]):hover, html body .ba-monument-prose a:not([class]):hover, html body .ba-monument-section a:not([class]):hover, html body .ba-potential-content a:not([class]):hover, html body .ba-philosophy-content a:not([class]):hover, html body .ba-data-card a:not([class]):hover { color: #92400e !important; border-bottom: 1px solid #b45309 !important; } /* AUSNAHME: dunkle Container. Am 18.09.2026 ueber alle 154 Seiten in BEIDE Richtungen gemessen — je Bauform, wie oft ihr Grund dunkel und wie oft hell ist: ba-formula-box 284 dunkel / 0 hell auf 86 Seiten ba-pullquote-dark 115 dunkel / 0 hell auf 42 Seiten ba-tool-bridge 158 dunkel / 3 hell (hell nur auf 4418, dort ohne klassenlosen Verweis) ba-compliance-checklist 1 dunkel / 0 hell ba-final-quote 1 dunkel / 0 hell NICHT aufgenommen, weil gemischt: ba-pullquote (128 dunkel / 157 hell) und ba-zen-checklist (11 / 4). Ihre dunklen Faelle tragen die Modifikatoren oben. Gleiche Spezifitaet wie die Grundregel, aber spaeter: diese Regel gewinnt. */ html body .ba-monument-v42 .ba-formula-box a:not([class]), html body .ba-monument-v42 .ba-pullquote-dark a:not([class]), html body .ba-monument-v42 .ba-tool-bridge a:not([class]), html body .ba-monument-v42 .ba-compliance-checklist a:not([class]), html body .ba-monument-v42 .ba-final-quote a:not([class]), html body .ba-formula-box a:not([class]), html body .ba-pullquote-dark a:not([class]), html body .ba-tool-bridge a:not([class]), html body .ba-compliance-checklist a:not([class]), html body .ba-final-quote a:not([class]) { color: #fbbf24 !important; border-bottom-color: rgba(251, 191, 36, 0.4) !important; } html body .ba-monument-v42 .ba-formula-box a:not([class]):hover, html body .ba-monument-v42 .ba-pullquote-dark a:not([class]):hover, html body .ba-monument-v42 .ba-tool-bridge a:not([class]):hover, html body .ba-monument-v42 .ba-compliance-checklist a:not([class]):hover, html body .ba-monument-v42 .ba-final-quote a:not([class]):hover, html body .ba-formula-box a:not([class]):hover, html body .ba-pullquote-dark a:not([class]):hover, html body .ba-tool-bridge a:not([class]):hover, html body .ba-compliance-checklist a:not([class]):hover, html body .ba-final-quote a:not([class]):hover { color: #fde68a !important; border-bottom-color: #fbbf24 !important; } /* QUELLENZEILEN: eigene, leise Form. Die Quellenzeile liegt INNERHALB von .ba-monument-prose und wird deshalb von der Hausregel oben miterfasst — das machte 1.155 Quellenlinks auf 115 Seiten farbig und fett 600, neben einer Zeile, die 10px grau und mager ist. Ein Quellenverweis soll belegen, nicht rufen. Gemessen am 18.09.2026: 15 Formen auf 115 Seiten, groesste 43 Prozent (fast schwarz, gepunktet grau, nicht fett) — diese gilt. Der Hover lief vorher auf fuenf verschiedene Farben und geht jetzt auf die Hausfarbe. Spezifitaet: staerkste Seitenregel (0,3,2) im Monument, (0,2,1) ausserhalb; die beiden Selektoren liegen bei (0,3,3) und (0,2,3). Sie stehen NACH der Hausregel und gewinnen bei Gleichstand ueber die Reihenfolge. Kein Quellenlink im Bestand traegt eine Klasse (1.164 geprueft, 0 mit), und keine Quellenzeile sitzt auf dunklem Grund — der Kontrastlauf ueber alle 154 Seiten haette sie sonst gemeldet. */ html body .ba-monument-v42 .ba-source-mini a:not([class]), html body .ba-source-mini a:not([class]) { color: #0f172a !important; text-decoration: none !important; border-bottom: 1px dotted #64748b !important; font-weight: 400 !important; } /* AUSNAHME: Quellenzeilen auf dunklem Grund. Am 18.09.2026 ueber alle 154 Seiten gemessen, in BEIDE Richtungen: 915 Quellenzeilen, davon 13 auf dunklem Grund, auf 7 Seiten (5020, 5025, 5030, 5034, 5038, 5043, 5046 - alle operations). Traeger: ba-data-grid 6 dunkel, 0 hell ba-info-box 7 dunkel, 1 hell Die eine helle steht auf 4929 und traegt dieselbe Klassenfolge wie die dunklen (ba-info-box ba-float-hover). Die Klasse allein trennt die beiden also nicht, und einen Modifikator, der es taete, gibt es dort nicht - deshalb ist 4929 hier namentlich ausgenommen. Eine gemeinsame Farbe fuer beide Gruende ist rechnerisch ausgeschlossen: 4,5:1 auf Weiss verlangt eine Helligkeit unter 0,1833, dieselbe Schwelle auf dunklem Grund eine ueber 0,2344. Die Bereiche ueberschneiden sich nicht. #cbd5e1 traegt auf #0f172a 12,02:1 und ist die Farbe, die diese Seiten ohnehin schon fuehren. Spezifitaet (0,4,3): schlaegt die Grundregel (0,3,3) und jede Seitenregel, deren staerkste bei (0,3,2) liegt. */ html body:not(.page-id-4929) .ba-data-grid .ba-source-mini a:not([class]), html body:not(.page-id-4929) .ba-info-box .ba-source-mini a:not([class]) { color: #cbd5e1 !important; border-bottom-color: rgba(203, 213, 225, 0.4) !important; } html body:not(.page-id-4929) .ba-data-grid .ba-source-mini a:not([class]):hover, html body:not(.page-id-4929) .ba-info-box .ba-source-mini a:not([class]):hover { color: #fbbf24 !important; border-bottom-color: #fbbf24 !important; } /* Dieselbe Stelle noch einmal, fuer die GROESSE. Am 19.09.2026 elementweise gemessen: Auf den Operations-Seiten nimmt die Quellenzeile die Groesse des Kastens an, in dem sie steht - 10px frei stehend, 11px in ba-data-grid, 14px in ba-tactical-note, 15px in ba-info-box, dazu zwei Schriften auf denselben zehn Seiten. Ursache ist die Spezifitaet: eine Kastenregel wie .ba-info-box p (0,1,1) schlaegt die Grundregel der Zeile (0,1,0), und damit hat das Bauteil keine eigene Form mehr. Alle 16 betroffenen Stellen liegen unter /operations/; im ganzen Bestand steht sonst keine Quellenzeile in einem dieser Kaesten - die Regel kann also nichts anderes treffen. Spezifitaet (0,2,2) schlaegt jede gemessene Seitenregel; die staerkste steht auf 5548 bei (0,2,0) und betrifft einen anderen Kasten. Farbe und Rahmen bleiben, wie sie sind: Das haeusliche #64748b traegt auf #0f172a nur 3,75:1, die Farben dieser Seiten tragen 6,96:1 und 14,48:1. */ html body .ba-data-grid .ba-source-mini, html body .ba-info-box .ba-source-mini, html body .ba-tactical-note .ba-source-mini, html body .ba-pitfall-alarm .ba-source-mini { font-family: 'JetBrains Mono', monospace; font-size: 10px; } /* RUECKNAHME 18.09.2026: Hier stand zusaetzlich color: #0f172a !important. Das war falsch. Auf sieben operations-Seiten (5020, 5025, 5030, 5034, 5038, 5043, 5046) liegen Quellenzeilen in dunklen Kaesten; die Regel hat dort 17 Verweise auf 1,00:1 gesetzt - Text exakt in der Farbe des Grundes. Mein Beleg dafuer, dass keine Quellenzeile dunkel sitzt, stammte aus einem Lauf ueber .ba-monument-prose/-lead/-section - diese Kaesten liegen ausserhalb davon und waren darin nie gemessen. Eine Aussage aus einem Lauf, dessen Reichweite die Frage gar nicht abdeckt. Die Farbe kommt zurueck, sobald die dunklen Traeger (ba-data-grid, ba-info-box) in BEIDE Richtungen ueber den Bestand gemessen sind. */ /* ═══════════════════════════════════════════════════════════════════════════ TERMINAL HOST CONSISTENCY (v5.7.6) Harmonisiert den Hostname (@bitatlas) für alle Audits ═══════════════════════════════════════════════════════════════════════════ */ .ba-terminal-path-text .host, .ba-terminal-path-text .at-symbol { color: #94a3b8 !important; /* Zwingt Host und @ in das neutrale Grau */ font-weight: normal !important; } /* Optional: Falls du den Prompt (root) auch einheitlich willst */ .ba-terminal-path-text .prompt { color: #f7931a !important; /* Macht den root-Teil passend zum BitAtlas Orange */ } /* ═══════════════════════════════════════════════════════════════════════════ CTA BUTTON MOBILE FIX (v5.7.7) Verhindert das Herausragen langer Terminal-Befehle ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .ba-cta-btn { display: flex !important; width: 100% !important; /* Nutzt die volle Breite der Box */ box-sizing: border-box !important; padding: 16px 15px !important; /* 14 px seit 01.10.2026 (George): Die 11 px stammten aus der Zeit, als Knoepfe Terminalbefehle trugen (./execute_buy.sh). Seit Gesetz 8 tragen sie Woerter, und 11 px lagen unter jedem anderen Knopf des Hauses. */ font-size: 14px !important; justify-content: center !important; letter-spacing: 0px !important; overflow: hidden !important; } .ba-terminal-body { padding: 30px 15px !important; /* Mehr Platz für den Button */ } .ba-cta-code { font-size: 11px !important; width: 100% !important; box-sizing: border-box !important; } } /* ═══════════════════════════════════════════════════════════════════════════ FIX: GLOBAL TERMINAL & CTA PATH OVERFLOW ═══════════════════════════════════════════════════════════════════════════ */ /* 1. Der Container (Top & Bottom) */ .ba-terminal-path, .ba-terminal-header-bar { display: flex !important; flex-wrap: wrap !important; /* Erlaubt das Umbrechen auf die nächste Zeile */ align-items: center !important; gap: 10px !important; overflow: hidden !important; } /* 2. Der eigentliche Text-Pfad */ .ba-terminal-path-text, .ba-terminal-title { flex: 1; min-width: 0; /* Verhindert, dass Flex-Items ihre Box sprengen */ overflow-wrap: anywhere !important; /* Der "Master-Key": bricht überall, wenn nötig */ word-break: break-all; /* Fallback für ältere Browser */ line-height: 1.4; } /* 3. Die Audit-ID (Top rechts) - soll nicht umbrechen */ .ba-audit-id { flex-shrink: 0; white-space: nowrap; } /* 4. Die Terminal-Punkte (CTA oben links) - sollen nicht umbrechen */ .ba-terminal-dots { flex-shrink: 0; } /* ╔══════════════════════════════════════════════════════════════════════════════╗ ║ BitAtlas Framework v4.6 — Industrial Cyber Standard ║ ║ Global System Styles (Core Architecture) ║ ╚══════════════════════════════════════════════════════════════════════════════╝ */ :root { --ba-orange: #f7931a; --ba-orange-light: #fbbf24; --ba-dark: #0f172a; --ba-dark-deep: #0a0f1a; --ba-slate: #64748b; --ba-slate-400: #94a3b8; --ba-border: #e2e8f0; --ba-border-dark: rgba(255, 255, 255, 0.08); --ba-bg-soft: #f8fafc; --ba-green: #22c55e; --ba-red: #ef4444; --ba-blue: #3b82f6; --ba-cyan: #06b6d4; --ba-terminal-glow: rgba(247, 147, 26, 0.15); } /* 1. ANIMATIONS (The Soul of v4.6) */ @keyframes ba-scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @keyframes ba-crt-flicker { 0% { opacity: 1; } 50% { opacity: 0.96; } 100% { opacity: 1; } } @keyframes ba-cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes ba-pulse-glow { 0%, 100% { box-shadow: 0 0 15px rgba(247, 147, 26, 0.2); } 50% { box-shadow: 0 0 30px rgba(247, 147, 26, 0.4); } } /* 2. GLOBAL RESET & BASE */ .ba-monument-v42 { /* Wir behalten die Klasse für Abwärtskompatibilität */ max-width: 820px; margin: 0 auto; font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif; color: #1e293b; line-height: 1.8; } /* 3. TERMINAL ELEMENTS */ .ba-terminal-base { background: linear-gradient(145deg, var(--ba-dark-deep) 0%, var(--ba-dark) 100%); border: 1px solid var(--ba-border-dark); position: relative; overflow: hidden; } .ba-scanline-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); background-size: 100% 3px, 3px 100%; pointer-events: none; z-index: 2; } /* 4. TOC FIX (No Underlines) */ .ba-toc-link, .ba-toc-link * { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; } /* 5. DATA GRIDS (Industrial Slots) */ .ba-data-grid { display: grid; gap: 20px; margin: 40px 0; } .ba-data-card { background: #fff; border: 1px solid var(--ba-border); /* Vorgabe auf die Hausform gestellt, 19.09.2026. Hier standen 8px und 24px mit dem Vermerk "Industrial style: straighter edges". Gemessen ueber alle 915 Datenkarten: 864 tragen 16px, 771 tragen 25px - der Bestand hat die Vorgabe ueberstimmt, und sie griff zuletzt auf genau einer Seite. Gegengeprueft vor der Aenderung: die 31 Karten mit 24px erklaeren die Polsterung alle selbst (Dispatches), keine einzige erbt sie. */ border-radius: 16px; padding: 25px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* 6. VAULT & RACK (v4.6 Specific) */ .ba-hw-module { background: rgba(15, 23, 42, 0.8); border-left: 4px solid var(--ba-slate); padding: 20px; margin-bottom: 15px; } .ba-hw-module[data-status="mounted"] { border-left-color: var(--ba-green); } /* 7. ARCHITECT BADGE (George V.) */ .ba-architect-badge { background: var(--ba-bg-soft); border: 1px solid var(--ba-border); display: flex; align-items: center; gap: 20px; padding: 25px; border-radius: 12px; } /* 8. COMMAND DECK BUTTONS */ .ba-command-btn { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; font-weight: 700; transition: all 0.2s; cursor: pointer; } .ba-command-btn:hover { filter: brightness(1.2); animation: ba-crt-flicker 0.1s infinite; } /* 9. SOURCE MINI & LINKS */ .ba-source-mini a { color: var(--ba-slate) !important; border-bottom: 1px dotted var(--ba-slate) !important; text-decoration: none !important; } .ba-source-mini a:hover { color: var(--ba-orange) !important; border-bottom-style: solid !important; } /* Nostr Pulse & Social Styles */ .ba-pulse-dot-green { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block; animation: ba-pulse-green 2s infinite; } @keyframes ba-pulse-green { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* Hover-Effekt für den nostr-Link im Hero */ .ba-hero-social-hint a:hover { color: var(--ba-orange) !important; opacity: 1; } /* Social Links im Footer */ .ba-social-link { color: #94a3b8; transition: 0.3s; } .ba-social-link:hover { color: var(--ba-orange); transform: translateY(-2px); } /* Erzeugt dauerhaft weißen Text im Eingabefeld */ .ba-nl-form-row input[type="email"] { color: #ffffff !important; /* Textfarbe beim Tippen */ caret-color: #ffffff; /* Farbe des blinkenden Cursors */ opacity: 1 !important; /* Verhindert Transparenz-Effekte */ } /* Optional: Verhindert, dass der Browser beim 'Focus' (Anklicken) die Farbe ändert */ .ba-nl-form-row input[type="email"]:focus { color: #ffffff !important; outline: none; /* Entfernt eventuelle blaue Rahmen vom Browser */ } /* Falls du den Platzhalter (deine@email.com) auch etwas heller willst */ .ba-nl-form-row input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); /* Ein dezentes Halb-Weiß */ } /* ═══════════════════════════════════════════════════════════════════════════ FUSSZEILEN-NAVIGATION: ETIKETT DARF UMBRECHEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ Die drei Verweise der Fusszeile sind Flex-Elemente zu je einem Drittel der Breite. Das Etikett traegt white-space: nowrap, schrumpft also nicht mit - das laengste ("[ NEXT: SOUVERAEN_AKKUMULIEREN ]") ist 233 px breit und bekommt rund 222 px. Der Rest ragt aus dem Kasten, und weil .ba-footer-terminal auf overflow: hidden steht, faellt der Pfeil weg. Gemessen am 18.09.2026 ueber alle 154 Seiten: 30 Seiten betroffen, 4 bis 24 px fehlend, ausschliesslich im Band um 769 px. Bei 375 px stapeln sich die Verweise ohnehin, bei 1280 px ist Platz genug. Vier Kandidaten wurden am lebenden Dokument gegeneinander gemessen: Schriftgroesse 11px keine Wirkung (19 bleibt 19) Polsterung allein 19 wird 16 Etikett kuerzen mit Auslassung behebt es, schneidet aber Text ab Etikett darf umbrechen behebt es vollstaendig, ohne Verlust Gewaehlt ist der vierte, zusammen mit etwas schmalerer Polsterung, damit das Etikett auf zwei statt drei Zeilen umbricht. Gegenprobe: 30 von 30 Seiten auf 0 px Verlust, danach nachgemessen. */ @media (max-width: 900px) { html body .ba-footer-terminal .ba-footer-label { white-space: normal !important; } html body .ba-footer-terminal-link { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ FORMELKAESTEN: LANGE FORMELN DUERFEN SCROLLEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ .ba-formula-box steht auf overflow: hidden. Eine Formel, die breiter ist als der Kasten, wird damit abgeschnitten - und zwar mitten im Term. Auf 5790 endete die Whitelisting-Formel bei "1.000 EU" im Nichts; die Schwelle, um die es auf der Seite geht, war nicht zu lesen. Gemessen am 18.09.2026 ueber alle 154 Seiten, mit dem geschaerften Pruefer (Pseudoelemente und die MathML-Vorleseschicht zaehlen nicht als Inhalt): 27 Seiten bei 769 px, 4 bis 511 px fehlend, dazu 5790 auch bei 1280 px. Nicht betroffen ist 6202 - dort ragt nur ein ::before mit width 300px und negativem rechten Versatz heraus, der Formeltext endet bei 633 in einem Kasten von 667. Drei Kandidaten am lebenden Dokument gemessen: Schrift auf 0,85em 511 wird 334 - behebt es nicht Formel darf scrollen alle auf 0 Formel und Inhalt ebenfalls 0, aber weiter als noetig Gewaehlt ist der zweite: nur .katex-display bekommt den Scrollbereich, der Kasten und sein Zierrat bleiben unberuehrt. Das ist dieselbe Bauform, die das Haus bei .ba-comparison-table seit jeher nutzt. Gegenprobe: 27 von 27 Seiten auf 0 px Verlust. */ .ba-formula-box .katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; /* HINWEIS AUF DEN UEBERHANG. Die Formel ist scrollbar, aber das sieht man ihr nicht an — wer nicht wischt, liest eine halbe Formel. Der rechte Rand wird deshalb weich ausgeblendet; das liest sich als "es geht weiter". Gewaehlt ist eine MASKE, keine aufgelegte Farbe: Der Kasten traegt je nach Seite drei verschiedene dunkle Verlaeufe, und eine Deckfarbe, die nicht passt, erscheint als harter Block — am Bild geprueft und verworfen. Eine Maske blendet den Inhalt aus und braucht keine Farbe. Die Breite ist gemessen, nicht gegriffen. Eine Formel, die passt, aber naeher als die Ausblendung an den Rand reicht, wird zu Unrecht weich. Ueber 133 Formeln des Bestands gezaehlt: 44 px → 23 Formeln 24 px → 13 Formeln 16 px → 8 Formeln 12 px → 6 Formeln Bei 24 px verlaeuft nur noch das letzte Zeichen; schmaler taugt es als Signal nicht mehr. Der Preis ist damit benannt und nicht null: 13 von 133 Formeln haben ein weiches letztes Zeichen, ohne dass etwas fehlt. Wer das nicht will, entfernt die beiden mask-Zeilen. */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); } /* ══════════════════════════════════════════════════════════════════════════ DERSELBE HINWEIS AN DER VERGLEICHSTABELLE (29.09.2026) ══════════════════════════════════════════════════════════════════════════ Dieselbe Maske, dieselbe Breite — aber sie haengt an .ba-schiebt und NICHT an .ba-comparison-table. Der Grund ist im Bild gemessen und nicht hergeleitet: Die Tabelle traegt auf 24 von 39 schiebbaren Seiten einen Rahmen mit Radius 20, und eine Maske nimmt ihm die ganze rechte Kante samt beiden Rundungen. schiebbare Tabelle der Rahmen laeuft aus -> hier geht es weiter passende Tabelle der Rahmen laeuft aus -> sieht aus wie ein Fehler Bei den Formeln kostet die Maske ein weiches letztes Zeichen (13 von 133); hier kostet sie den Kasten, und das auf 31 von 85 Tabellen ohne Grund. Deshalb die Bedingung: nur wo scrollWidth groesser ist als clientWidth. In reinem CSS ist das nicht ausdrueckbar — die Fassung mit zwei Maskenebenen (eine local, eine scroll) koennte es, aber mask-attachment fehlt in Safari, also ausgerechnet dort, wo geprueft wird; dann griffe die Maske unbedingt, also der schlechtere Fall. Die Klasse setzt das Snippet BitAtlas Tabellen-Scrollhinweis, Nummer 18916 — je Tabelle, beim Laden, beim Schieben und bei einer Breitenaenderung, und nur wo der Kasten den Inhalt ueberhaupt freigibt (overflow-x: auto oder scroll). Sie faellt am rechten Ende wieder weg: ein Verlauf, der dort stehen bliebe, sagt es geht weiter, wo nichts mehr folgt. Faellt das Snippet aus, gibt es keine Maske — also den Zustand von vorher. */ @media (max-width: 768px) { html body .ba-comparison-table.ba-schiebt { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); } } /* ═══════════════════════════════════════════════════════════════════════════ PHASEN-KOPFZEILEN AUF SCHMALEN SCHIRMEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ Die Kopfzeile ist ein Flex-Kasten aus Abzeichen, Titel und Zeitangabe, mit 30 px Polsterung und 20 px Abstand. Bei 375 px bleiben dem Titel rund 175 px — er steht aber in 24 px fett und bricht nicht um. Dadurch wird die Zeitangabe ganz aus dem Kasten gedrueckt, und der traegt overflow: hidden. Gemessen: 13 Seiten, 29 Stellen, 6 bis 84 px fehlend, ausschliesslich bei 375 px. Der weiteste Ueberstand ist nie der Titel, sondern die verdraengte Zeitangabe — die Ursache liegt trotzdem beim Titel. Kandidaten am lebenden Dokument gemessen (schlimmster Fall 5025, 84 px): Polsterung schmaler 84 wird 64 Titel 19 px 84 wird 26 Titel darf im Wort brechen 0, aber "Commu / nicatio / n" — am Bild verworfen Umbruch der Zeile 0, Woerter bleiben ganz Gebaut ist der letzte: Die Zeile darf umbrechen, das Abzeichen rueckt nach oben, der Titel bricht an Wortgrenzen. Gegenprobe: 13 von 13 auf 0 px. Die Grenze liegt bei 520 px, damit Tablet und Desktop unberuehrt bleiben. */ @media (max-width: 520px) { html body .ba-phase-header { flex-wrap: wrap !important; gap: 12px 14px !important; padding-left: 18px !important; padding-right: 18px !important; } html body .ba-phase-header .ba-phase-title { font-size: 20px !important; min-width: 0 !important; overflow-wrap: break-word !important; } } /* ═══════════════════════════════════════════════════════════════════════════ VERGLEICHSGITTER UND VERDIKT-KARTEN AUF SCHMALEN SCHIRMEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ Zwei Bauformen, zwei Ursachen, eine Grenze. .ba-comparison-grid ist NICHT .ba-comparison-table — die Tabelle liegt in einem Kasten, der seitlich scrollt, das Gitter nicht. Seine Zeilen stehen auf festen Spalten (2fr 1fr 1fr und Verwandte), die bei 375 px nicht mehr schrumpfen; die letzte Spalte wird aus dem Kasten gedrueckt. Gemessen: 6 Seiten (2400, 4329, 4423, 4482, 4497, 4800), 3 bis 120 px. Bei der Verdikt-Karte ist es die Kopfzeile: Symbol, Titelblock und Status-Plakette stehen nebeneinander, und die Plakette — etwa "[ AUDIT_CONDITIONAL ]" — faellt hinten heraus. Auf 3225 kommt das vierspaltige Punktegitter dazu, dessen Werte in 38 px gesetzt sind. Gemessen: 4 Seiten (3225, 4995, 5134, 5780), 53 bis 358 px. Am lebenden Dokument gemessen, schlimmster Fall je Gruppe: Punktegitter einspaltig allein 3225: 53 bleibt 43, 5134: 144 bleibt 144 Kopfzeile darf umbrechen allein 5134 auf 0, 3225 bleibt 53 beides zusammen alle vier auf 0 Bei den Gittern genuegte die einspaltige Zeile: 121 wird 1. Gegenprobe nach dem Bau: 10 von 10 Seiten auf 0 px. */ @media (max-width: 560px) { html body .ba-comparison-grid .ba-comparison-row, html body .ba-comparison-grid .ba-comparison-header-row { grid-template-columns: 1fr !important; gap: 6px !important; } html body .ba-verdict-card .ba-verdict-header { flex-wrap: wrap !important; gap: 12px !important; } html body .ba-verdict-card .ba-score-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════════════ EINZELFAELLE: GITTER UND ZEILEN, DIE NICHT MITSCHRUMPFEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ Nach den fuenf grossen Bauformen blieben 20 Seiten mit je einer Stelle. Gemessen ist bei jeder nicht das gemeldete Element, sondern der Container, der das Layout SETZT — und dabei fielen 28 Einzelfaelle auf drei Ursachen zusammen: 1. Gitter mit festen Spalten, die bei schmalem Schirm stehen bleiben ba-guide-grid (5 Spalten), ba-stack-grid, ba-tool-cards, ba-simulation-cards, ba-risk-row, ba-conf-row, ba-alloc-row, ba-privacy-grid, ba-level-row, ba-level-grid 2. Flex-Zeilen ohne Umbruch ba-map-content, ba-tx-stages, ba-axiom-header, ba-wallet-layer, ba-chi-item, ba-timeline-item 3. Einspaltige Gitter, deren Spur vom INHALT bemessen wird statt vom Kasten — auf 4982 sieben Stueck mit Spurbreiten bis 462 px in einem Kasten von 303. Dagegen hilft minmax(0, 1fr) plus min-width: 0. Drei Bauformen brechen erst bei 769 px (ba-tool-cards, ba-privacy-grid, ba-level-row und -grid), die uebrigen bei 375 — daher zwei Baender. Gegenprobe in beide Richtungen: 17 von 17 betroffenen Messungen auf 0 px 8 Seiten MIT ba-data-grid, aber OHNE Befund: 0 vorher, 0 nachher Die Datengitter stehen bei 375 px ohnehin einspaltig (1fr), die Regel aendert dort nichts und trifft nur die inhaltsbemessenen Spuren. Ein Zwischenstand ist dabei verworfen worden: min-width: 0 auf ALLE Kinder der Flex-Zeilen liess 4524 von 0 auf 52 px zurueckfallen — die Kinder schrumpften, statt umzubrechen. Die Regel steht deshalb nur dort, wo sie gemessen noetig ist. */ @media (max-width: 900px) { html body .ba-tool-cards, html body .ba-privacy-grid, html body .ba-level-row, html body .ba-level-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 560px) { html body .ba-guide-grid, html body .ba-stack-grid, html body .ba-simulation-cards, html body .ba-risk-row, html body .ba-conf-row, html body .ba-alloc-row, html body .ba-data-grid, html body .ba-intel-grid { grid-template-columns: minmax(0, 1fr) !important; } html body .ba-map-content, html body .ba-tx-stages, html body .ba-axiom-header, html body .ba-wallet-layer, html body .ba-chi-item, html body .ba-timeline-item { flex-wrap: wrap !important; } html body .ba-data-grid *, html body .ba-intel-grid *, html body .ba-axiom-header > * { min-width: 0 !important; overflow-wrap: break-word !important; } } /* ═══════════════════════════════════════════════════════════════════════════ DIE LETZTEN VIER STELLEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ Nach dem Abschlusslauf blieben vier Stellen auf vier Seiten: 6759 bei 769 px Intel-Briefing 166 px 4944 bei 769 px Protokoll-Vergleich 34 px 7014 bei 375 px CTA-Terminal 33 px 6182 bei 375 px CTA-Terminal 21 px Drei davon waren in der Einzelfall-Runde dabei und sind dort behoben — sie brechen bei einer ANDEREN Breite als der, die ich damals geprueft hatte. Das CTA-Terminal war gar nicht in der Runde, weil ich es faelschlich fuer eine Variante des Footer-Terminals gehalten hatte. Beim Intel-Gitter waere die einspaltige Regel zu grob gewesen: Es steht auf 81 Seiten, dort in drei gleichen Spalten zu 222 px, und die passen. Auf 6759 sind die Spuren dagegen vom Inhalt bemessen (239 / 347 / 247 = 833 px in einem Kasten von 667). repeat(3, minmax(0, 1fr)) macht daraus dieselben gleichen Drittel, die die 81 anderen ohnehin haben. Gegenprobe ueber acht dieser Seiten: Spalten vorher wie nachher 222,328 px dreimal, Ueberstand 0 vorher wie nachher — die Regel aendert dort nichts. Die Reihenfolge der beiden Baender ist Absicht: Das schmalere steht hinten und behaelt bei 375 px das letzte Wort, damit die einspaltige Fassung des Telefons erhalten bleibt. */ @media (max-width: 900px) { html body .ba-intel-grid, html body .ba-protocol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html body .ba-protocol-grid * { min-width: 0 !important; overflow-wrap: break-word !important; } } @media (max-width: 560px) { html body .ba-intel-grid, html body .ba-protocol-grid { grid-template-columns: minmax(0, 1fr) !important; } html body .ba-terminal-header-cta { flex-wrap: wrap !important; } } /* ═══════════════════════════════════════════════════════════════════════════ FORMULARFELDER AUF SCHMALEN SCHIRMEN (18.09.2026) ═══════════════════════════════════════════════════════════════════════════ Gemessen wird nicht der Kasten, sondern ob der laengste Text HINEINPASST: je Feld die breiteste Option (bzw. Wert oder Platzhalter) gegen den inneren Platz. Bei 375 px passten sechs Felder auf fuenf Seiten nicht. Wohin der Platz geht: Das Feld ist 255 px breit in einem Elternkasten von 295 — die 40 px stecken in der Polsterung von .ba-input-group. Dazu reserviert .ba-input-select 45 px rechts fuer den Pfeil. Drei Hebel, gemessen statt geschaetzt: Kastenpolsterung 20 auf 12 px +16 px Pfeilplatz 45 auf 30 px +15 px Schrift auf 14 px Text schrumpft mit Die Schriftgroesse ist die kleinste, die noch traegt: 15 px behebt zwei der drei loesbaren Felder nicht, 13 px behebt kein weiteres mehr als 14. Kleiner als noetig zu werden ist kein Gewinn. Damit passen drei der sechs Felder: 2528 junk_select allein durch die Polsterung 3340 m_growth 70 px zu wenig, jetzt passend 3133 wallet_model 20 px zu wenig, jetzt passend DREI BLEIBEN, und sie sind kein CSS-Problem — der Text ist zu lang: 3371 good_select 141 px fehlen "Einfamilienhaus (DE, bundesweiter …)" 3133 device_location 51 px fehlen Platzhalter "z.B. Tresor im …" 2435 leg_inflation 52 px fehlen "1,9 % — historisch (HICP DE, …)" Sie brauchen kuerzere Beschriftungen, und das ist eine Entscheidung ueber sichtbaren Text, nicht ueber Gestaltung. Gegenprobe ueber alle 13 Seiten mit Eingabefeldern: keine Seite wird schlechter. */ @media (max-width: 560px) { html body .ba-input-group { padding-left: 12px !important; padding-right: 12px !important; } html body .ba-input-select { padding-left: 12px !important; padding-right: 30px !important; background-position: right 10px center !important; } html body .ba-input-select, html body .ba-input-field { font-size: 14px !important; } } /* ══════════════════════════════════════════════════════════════════ SCHWERE KONTRASTSTELLEN — Bauformen mit eindeutigem Grund Gemessen 19.09.2026 ueber alle 154 Seiten, beide Richtungen: Genesis-Zeilen 0 dunkel / 17 hell, Nummernmarke 0 dunkel / 15 hell, Terminal-Koerper 76 dunkel / 0 hell. Kein gemischter Fall. ══════════════════════════════════════════════════════════════════ */ /* Genesis-Zeilen: 34 Stellen auf 17 Seiten standen bei 1,48 zu 1. Der Zielwert ist der der Nachbarzeile derselben Seite, nicht selbst gewaehlt. Kein Ausrufezeichen noetig, die Selektorkette genuegt. */ html body .ba-genesis-label, html body .ba-genesis-val { color: #64748b; } /* Nummernmarke der Datenkarten, 15 Stellen auf einer Seite, ebenfalls 1,48 zu 1 auf weissem Grund. */ html body .ba-data-number { color: #64748b; } /* Klassenlose Verweise im dunklen Terminal und im dunklen Vorteilskasten. BEWUSST OHNE Ausrufezeichen: 22 der 24 Verweise erklaeren ihre Farbe am Element selbst und behalten sie damit; die Regel greift allein bei den zwei, die keine erklaeren. */ html body .ba-terminal-body a:not([class]), html body .ba-select-audit-final .ba-benefit-content a:not([class]) { color: #fbbf24; } /* ══════════════════════════════════════════════════════════════════ SCHLUSSZITAT — eine Groesse, nicht zwei Gemessen 19.09.2026: 20 Schlusszitate im Bestand, zehn bei 20 und zehn bei 22 Pixeln. Ein exaktes Unentschieden, also keine Mehrheit, auf die man ziehen koennte. George hat 22 entschieden, weil ein Modifikator ohne sichtbaren Unterschied keiner ist. Gegengeprueft: alle 20 tragen genau einen Absatz und eine Signatur, die Regel kann also nichts anderes treffen. ══════════════════════════════════════════════════════════════════ */ html body .ba-pullquote-final p { font-size: 22px; } /* ══════════════════════════════════════════════════════════════════════════ BITATLAS KOPF — die Ordnung des ersten Bildschirms 22.09.2026 ────────────────────────────────────────────────────────────────────────── WAS SICH AENDERT: Vor dem Titel standen bis hierher drei Zeilen, die nichts sagen — eine Statuspille, ein Terminal-Pfad und eine Leiste aus Etiketten. Der Titel begann auf dem Rechner bei 399 px und auf dem Telefon bei 548 px. Jetzt steht er unter der Pfadzeile, und die Etikettenleiste ruecken hinter den Lead. Der Statuspunkt wandert in die Pfadzeile und kostet keine eigene Zeile mehr. DER SOCKEL `html body` IST NOETIG, nicht schmueckend. Das Seiten-CSS steht im post_content und wird damit NACH dieser Datei ausgeliefert; eine Regel gleicher Staerke verliert dort ueber die Quellreihenfolge. Die Seitenregeln sind durchweg einklassig (`.ba-terminal-path` = 0,1,0), `html body` hebt uns auf 0,1,2 und gewinnt — ohne eine einzige Vorrangmarkierung. ES GAB HIER EIN TOR, das die Regeln auf acht Musterseiten beschraenkte. Es ist am 22.09.2026 gefallen, im selben Zug mit dem Markup-Teil auf den uebrigen Seiten, damit kein Besucher einen halben Umbau sieht. Die Spezifitaet liegt seither bei 0,1,2 bzw. 0,2,2 und damit weiter ueber dem Seiten-CSS. EINE STELLE WAR KEINE REINE STREICHUNG: Wo der Anker ein direktes Kind ansprach, haette das Wegschneiden den Sockel unmittelbar auf Astras Seitenkopf gerichtet. Gemessen: die 15 Seiten mit klassenlosem Kopf sind genau die 15 mit ba-titan-container, und der steht deshalb jetzt dort. DER ABSTAND OBEN IST EIN CLIP-SCHUTZ, KEIN LEERRAUM. Astras Kopf ist auf dem Rechner `position: absolute` und auf dem Telefon `fixed`, 101 px hoch. Er lag bisher als `margin: 120px auto 40px auto` auf der Statuspille; die faellt aus dem Markup, also traegt ihn jetzt der Wurzelcontainer. Wer ihn fuer Luft haelt und entfernt, schiebt den Titel unter den Kopf. DIE GRENZE 1000 px IST `BA_KOPF_BREAKPOINT` aus Snippet 11393 „BitAtlas Mobilmenue". Dort steht sie als Konstante, hier muss sie als Zahl stehen — eine CSS-Datei kennt keine PHP-Konstante. Wer sie dort aendert, aendert sie hier mit. Das Seiten-CSS bricht daneben bei 768 px um; das ist kein Fehler, sondern eine zweite, engere Grenze fuer den Inhalt. ══════════════════════════════════════════════════════════════════════════ */ html body .ba-monument-v42, html body .ba-select-audit-final, /* `-gold` ist die dritte Wurzelklasse der Select-Reihe und stand hier nicht: 3209, 3216 und 3219 fielen damit aus dem Clip-Schutz, ihr Kopf lag unter der Navigation und der Titel war abgeschnitten. Gemessen am 23.09.2026 ueber alle 14 Reviews - zwoelf mit 120 px Abstand, zwei mit 0 (3216, 3219; die dritte ist nicht oeffentlich). Der Fehler ist AELTER als der Kartenbau: Auch die aelteste Revision von 3219 vom 12.01.2026 traegt kein Badge-Markup, und die Revision von 09:53 - vor dem Kartenbau - ebenso wenig. */ html body .ba-select-audit-gold, html body .ba-titan-container { margin-top: 120px; } /* Der Kopf wird zur Spalte, damit `order` ueberhaupt greift. Gemessen ueber alle 126 Koepfe: genau vier Kindfolgen, immer dieselbe Reihenfolge. Jedes Kind bekommt seine Zahl — ein vergessenes Kind haette `order: 0` und spraenge nach ganz oben. Der Rueckfall auf 7 faengt, was spaeter dazukommt. */ html body .ba-monument-header { display: flex; flex-direction: column; } html body .ba-monument-header > * { order: 7; } html body .ba-monument-header > .ba-terminal-path { order: 1; } html body .ba-monument-header > .ba-monument-title { order: 2; } html body .ba-monument-header > .ba-monument-lead { order: 3; } html body .ba-monument-header > .ba-intel-briefing { order: 4; } html body .ba-monument-header > .ba-insight-card { order: 4; } html body .ba-monument-header > .ba-status-bar { order: 5; } html body .ba-monument-header > .ba-investigator-card { order: 6; } /* Die Etikettenleiste steht jetzt UNTER dem Lead. Ihre Linie gehoert damit nach oben — sie trennt nicht mehr den Kopf vom Titel, sondern den Lead von den Etiketten. Beide Kurzschreibweisen sind vollstaendig gesetzt, damit kein Rest der Seitenregel stehenbleibt. */ html body .ba-monument-header > .ba-status-bar { margin: 0 0 30px 0; padding: 18px 0 0 0; border-bottom: none; border-top: 1px solid rgba(15, 23, 42, 0.10); } /* Der Pfadstatus. Der gruene Punkt davor ist am 29.09.2026 gefallen (George): Er stand auf 23 von 156 Seiten, sagte auf 18 davon gar nichts - dort trug der Rahmen keinen Text - und war auf den uebrigen fuenf IMMER GRUEN, auch neben "STATUS: DELISTED". Eine Anzeige, die immer dasselbe sagt, informiert niemanden; eine, die das Gegenteil sagt, ist falsch. Das Pruefdatum steht im Fuss. */ html body .ba-pfad-status { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; color: #22c55e; white-space: nowrap; } /* Die Pfadteile sind Brotkrumen. Sie duerfen aussehen wie Links, denn sie sind welche — bisher waren sie als Terminal-Pfad getarnt und niemand hat sie angeklickt. */ /* EINE FORM UEBERALL, und sie haengt an der PFADZEILE, nicht am Container. Gemessen am 22.09.2026 ueber neun Seiten: drei Zustaende, drei Ursachen, alle im Seiten-CSS und alle am Wurzelcontainer aufgehaengt — eine Regel auf `.ba-monument-v42 .ba-terminal-path a` nimmt den Rand ganz weg, eine zweite auf `.ba-monument-v42 .ba-terminal-path-text a` macht ihn gestrichelt und grau, und wo keine von beiden steht, gewinnt die Regel von hier. BEIDE SEITENREGELN SIND (0,2,1) MIT VORRANGZEICHEN. Eine Regel mit nur EINER Klasse verliert dagegen, gleich wie oft man den Sockel wiederholt — deshalb steht die Pfadzeile selbst mit im Selektor und hebt ihn auf (0,2,3). DIE LINIE TRAEGT currentColor, nicht das Orange der Vorschau. Dort war der Text orange und die Linie dazu passend; live ist der Text auf ALLEN neun gemessenen Seiten #94a3b8 — eine aeltere Regel mit Vorrangzeichen setzt ihn, und die Vorschau-Farbe ist nie angekommen. Eine orange Linie unter grauem Text waere die Form der Vorschau ohne ihren Grund. An currentColor gebunden bleibt sie eine Form und folgt der Farbe, wie immer sie entschieden wird. UND EINE SEITE HAT (0,3,1) GEFUEHRT, nicht (0,2,1): Auf den Dispatches steht die Regel als `a:link`, und eine Pseudoklasse zaehlt wie eine Klasse. Die erste Fassung dieser Regel hat deshalb acht von neun Seiten vereinheitlicht und die neunte nicht — ein Ergebnis, das ohne die neunte wie ein Erfolg ausgesehen haette. Die drei Zeilen unten heben sie auf (0,3,3). */ html body .ba-terminal-path .ba-terminal-path-text a, html body .ba-terminal-path .ba-terminal-path-text a:link, html body .ba-terminal-path .ba-terminal-path-text a:visited { border-bottom: 1px dotted currentColor !important; text-decoration: none; } /* ── Die Farbe der Pfadzeile ist die Farbe des ZIELS ────────────────────── George, 22.09.2026, nach derselben Regel wie die Fussnavigation. Der Schluessel ist deshalb die ADRESSE und nicht die Seite, auf der der Link steht: Ein Attributselektor zaehlt wie eine Klasse, zusammen mit den zwei Klassen der Pfadzeile sind das (0,3,2) - genug gegen beide Seitenformen, die hier bisher gewonnen haben, (0,2,1) und (0,3,1) auf den Dispatches. BIS HIERHER SETZTE EINE AELTERE REGEL MIT VORRANGZEICHEN ALLE LINKS AUF #94a3b8. Sie steht weiter oben und hat die Links am selben Tag verloren; den Text drumherum faerbt sie weiter, denn der hat kein Ziel. WOHER DIE FARBEN KOMMEN, und die Auskunft ist unvollstaendig: Vier Hubs fuehren ein eigenes Abzeichen (ba-badge-wissen, -praxis, -operations, -lifestyle) und damit eine eigene Farbe. Die uebrigen vier fuehren keines; ihr Hubtitel steht in ba-orange-text, also im Hausorange. Fuer Dispatches hat George die Rubrikfarbe selbst genannt: rot. Es gibt im Haus KEINE gepflegte Tabelle Rubrik -> Farbe; diese hier ist aus den Zielen gemessen und keine Setzung. */ html body .ba-terminal-path .ba-terminal-path-text a[href="/"], html body .ba-terminal-path .ba-terminal-path-text a[href="/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href="/"]:visited, html body .ba-terminal-path .ba-terminal-path-text a[href="https://www.bitatlas.de/"], html body .ba-terminal-path .ba-terminal-path-text a[href="https://www.bitatlas.de/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href="https://www.bitatlas.de/"]:visited { color: #f7931a !important; /* Startseite - das Orange der Marke */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/wissen/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/wissen/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/wissen/"]:visited { color: #f7931a !important; /* Wissen - ba-badge-wissen auf 1881 */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/praxis/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/praxis/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/praxis/"]:visited { color: #10b981 !important; /* Praxis - ba-badge-praxis auf 1887 */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/operations/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/operations/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/operations/"]:visited { color: #14b8a6 !important; /* Operations - ba-badge-operations auf 4764 */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/lifestyle/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/lifestyle/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/lifestyle/"]:visited { color: #9333ea !important; /* Lifestyle - ba-badge-lifestyle auf 1890 */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/select/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/select/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/select/"]:visited { color: #f7931a !important; /* Select - ba-orange-text im Hubtitel */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/reports/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/reports/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/reports/"]:visited { color: #f7931a !important; /* Reports - ba-orange-text im Hubtitel */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/dispatches/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/dispatches/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/dispatches/"]:visited { color: #06b6d4 !important; /* Dispatches - die Rubrikfarbe: Cyan, so wie auf dem ersten Dispatch. Rot, Orange und Gruen auf den spaeteren Seiten sind nach Thema entstanden (George, 24.09.2026) */ } html body .ba-terminal-path .ba-terminal-path-text a[href$="/tools/"], html body .ba-terminal-path .ba-terminal-path-text a[href$="/tools/"]:link, html body .ba-terminal-path .ba-terminal-path-text a[href$="/tools/"]:visited { color: #f7931a !important; /* Tools - ba-orange-text im Hubtitel */ } @media (max-width: 1000px) { /* Eine Zeile statt vier: Statuspunkt und Brotkrumen. Der Dateiname und die Kennung rechts sind Dekoration und kosten je eine eigene Zeile. */ html body .ba-monument-v42, html body .ba-select-audit-final, html body .ba-select-audit-gold, html body .ba-titan-container { margin-top: 130px; } html body .ba-terminal-path { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 9px 13px; gap: 0; text-align: left; overflow: hidden; } /* KUERZEN DARF SIE, ABSCHNEIDEN NICHT. `overflow: hidden` allein schnitt den Pfad bei "wissen" ab, ohne dass etwas darauf hinwies - was ausserhalb liegt, existiert fuer den Leser nicht (George, 22.09.2026). `min-width: 0` ist dabei Pflicht und nicht Geschmack: Ein Flex-Kind hat `min-width: auto` und schrumpft sonst gar nicht erst, dann greift auch `text-overflow` nie. */ html body .ba-terminal-path-text { font-size: 11.5px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* WEG MUSS DAS KOSTUEM, NICHT DIE AUSKUNFT. Hier stand bis zum 22.09.2026 das Gegenteil: Der DATEINAME wurde ausgeblendet, damit die Zeile passt. Gemessen bei 375 px ist das die falsche Haelfte - Platz in der Zeile 250 px root@bitatlas:~/wissen/was-ist-bitcoin.md 287 px (37 zu viel) ~/wissen/was-ist-bitcoin.md 189 px (61 uebrig) - denn `root@bitatlas:` sagt nicht, wo der Leser ist, und der Pfad sagt genau das. Auf dem Telefon faellt deshalb der Vorsatz und der Dateiname bleibt. Was dann noch zu lang ist, kuerzt sichtbar ab. */ html body .ba-terminal-path-text .prompt, html body .ba-terminal-path-text .at-symbol, html body .ba-terminal-path-text .host, html body .ba-terminal-path-text .colon { display: none; } html body .ba-terminal-path .ba-layer-id, html body .ba-terminal-path .ba-audit-id, html body .ba-terminal-path .ba-build-id { display: none; } /* Ohne den Punkt (29.09.2026) bliebe hier ein leerer inline-flex mit 10 px Aussenabstand stehen. Der Rahmen faellt mit. */ html body .ba-pfad-status { display: none; } /* UMBRECHEN STATT SEITLICH SCHIEBEN. Hier stand bis zum 22.09.2026 `flex-wrap: nowrap` mit `overflow-x: auto` - ein Streifen, der sich seitlich schieben laesst. Gemessen bei 360, 375 und 390 px lag die letzte Kachel jedes Mal bei x=457, also weit ausserhalb des Fensters, und nichts zeigte an, dass dort noch etwas ist. Der Zeilenumbruch kostet Hoehe und zeigt alles; das ist der bessere Tausch. */ html body .ba-monument-header > .ba-status-bar { flex-wrap: wrap; gap: 6px; justify-content: flex-start; } html body .ba-monument-header > .ba-status-bar .ba-status-badge { padding: 7px 8px; font-size: 9px; white-space: nowrap; } } /* ── Lesezeit je Abschnitt im Inhaltsverzeichnis ────────────────────────── Kein Tor noetig: Die Klassen gibt es nur dort, wo sie gebaut wurden. DIE MINUTE STEHT AN DER STELLE DER NUMMER, nicht daneben. Der Marker trug eine Zaehlung, die der Leser schon an der Reihenfolge sieht; er traegt jetzt `4 Min`, und damit eine Auskunft, nach der jemand entscheiden kann, ob er den Abschnitt jetzt liest. Die Gestaltung kommt unveraendert von `.ba-toc-marker` (Mono, orange, Kaestchen); noetig ist allein eine groessere Mindestbreite. Der Hinweissatz steht ZWISCHEN Kopfzeile und Liste, nicht in der Kopfzeile: die ist `display:flex; align-items:center`, ein Absatz darin saesse neben der Ueberschrift statt darunter. Sein waagerechter Abstand ist der der Listeneintraege, damit er mit den Markern fluchtet. */ html body .ba-toc-marker.ba-toc-min { min-width: 58px; white-space: nowrap; } html body .ba-toc-hinweis { margin: 0; padding: 14px 28px; border-bottom: 1px solid var(--ba-border); font-size: 13px; line-height: 1.6; color: var(--ba-slate, #64748b); } @media (max-width: 768px) { html body .ba-toc-hinweis { padding: 12px 20px; font-size: 12px; } } /* ── Der Teilen-Knopf zeigt EIN Ergebnis, nicht zwei ───────────────── Beim Drueberfahren stand das Label auf manchen Seiten weiss, auf anderen X-blau - derselbe Knopf, zwei Ergebnisse. Im Browser gemessen: 2400 weiss, Operations blau. Die Ursache ist ein Gleichstand der Spezifitaet (beide Regeln 0,2,0), den auf 24 von 101 Seiten eine Vorrangmarke zugunsten von Blau entscheidet und auf den uebrigen die Quellreihenfolge zugunsten von Weiss. Behoben an der REGEL, nicht an den 24 Seiten: (0,2,2) plus Vorrangmarke schlaegt beide. Die Marke ist hier noetig, weil eine der beiden Vorgaengerregeln selbst eine traegt - Spezifitaet allein reicht dagegen nicht. Weiss ist die gewaehlte Fassung (George, 22.09.2026), und der Kontrast traegt: Der Hover-Grund rgba(29,155,240,0.15) ueber rgb(15,23,42) ergibt effektiv rgb(17,43,72), darauf Weiss = 14,4:1. Das X-Blau selbst laege bei 4,8:1 - ebenfalls ueber der Schwelle, aber deutlich schwaecher. */ /* ── Der Teilen-Knopf, einmal fuer alle ─────────────────────────────────── OHNE SOCKEL, und das ist der ganze Punkt: 108 Seiten fuehren dieselben Regeln selbst, in 14 Schreibvarianten, die sich inhaltlich in nichts unterscheiden. Ihr CSS steht im post_content und wird damit NACH dieser Datei ausgeliefert - bei gleicher Staerke gewinnt es. Diese Fassung ist also die Grundlage fuer die 17 Seiten, die den Knopf am 22.09.2026 erst bekommen haben, und aendert an den uebrigen nichts. Die Schriftfarbe beim Drueberfahren steht absichtlich NICHT hier - sie ist weiss und wird gleich darunter mit Vorrang gesetzt. */ .ba-footer-broadcast { border-left: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06); } .ba-footer-broadcast:hover { background: rgba(29, 155, 240, 0.15); } .ba-footer-broadcast:hover .ba-x-icon { fill: #1d9bf0; } .ba-x-icon { width: 16px; height: 16px; fill: #94a3b8; transition: fill 0.2s; flex-shrink: 0; } @media (max-width: 768px) { .ba-footer-broadcast { border-left: none; border-right: none; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } } html body .ba-footer-broadcast:hover .ba-footer-label { color: #fff !important; } /* Der RAND beim Drueberfahren, einmal fuer alle (George, 22.09.2026). Auf den Dispatches war er rot: der Knopf hat unten einen Rand der Breite 1px, und eine Seitenregel `.ba-monument-v42 a:hover` (0,2,1) faerbt jeden Linkrand in die Rubrikfarbe. Sichtbar wurde es nur dort, weil alle uebrigen Gattungen die Randbreite auf 0 fuehren - die Farbe war ueberall falsch, der Strich nur auf einer Gattung zu sehen. Das Ziel des Knopfes ist X, also traegt er X-Blau: der Grund als Schleier darueber, der Rand voll. Drei Klassen plus Sockel sind (0,3,2). */ html body .ba-footer-terminal-link.ba-footer-broadcast:hover { background: rgba(29, 155, 240, 0.15) !important; border-color: #1d9bf0 !important; } html body .ba-footer-terminal-link.ba-footer-broadcast:hover .ba-x-icon { fill: #1d9bf0 !important; } /* ── Weiterlesen ────────────────────────────────────────────────────────── Kein Tor noetig: Die Klassen gibt es nur auf den Seiten, auf denen der Block gebaut wurde. DIE UNTERSTREICHUNG IST DER GRUND FUER DIE ZWEITE ZEILE. Astra setzt `text-decoration` nicht auf den Link, sondern auf dessen KINDER - eine Regel allein auf `.ba-wl-karte` laesst die Titel unterstrichen. Deshalb `.ba-wl-karte *`, und deshalb mit `html body` davor statt mit einer Vorrangmarkierung: Astras Regel ist einklassig, `html body` schlaegt sie ueber die Spezifitaet. */ /* DER ABSTAND UNTER DER LETZTEN KARTE KOMMT AUS DER POLSTERUNG, NICHT AUS DEM AUSSENABSTAND. George am 22.09.2026: auf den Werkzeugseiten kleben die Karten unten, der untere Rahmen wirkt abgeschnitten. Gemessen im Browser auf allen 15 Werkzeugseiten, Rechner und Telefon: `margin-bottom` kommt dort als 0px an, und der Block endet auf das Pixel genau mit seinem Elternelement `div.entry-content`, das selbst keine Polsterung hat — null Pixel unter der letzten Karte. Zum Vergleich eine Monument-Seite: 40 px Aussenabstand plus 80 px Polsterung des `article.ba-monument-v42`, zusammen 307 px Luft. Der Grund fuer die Null ist die Bauform der Werkzeugseiten: Ihr Inhalt steht in `main.ba-titan-container` (Polsterung unten 80 px), der Block haengt der Filter aber DAHINTER an, also als Geschwister in `div.entry-content` — ausserhalb der Polsterung. Eine Polsterung kann nicht kollabieren und wird von keiner Margin-Ruecksetzung getroffen. Damit die Monument-Seiten gleich bleiben, wandert der Wert vom Aussenabstand IN die Polsterung: 40 + 0 + 80 = 120 wie zuvor. */ html body .ba-weiterlesen { margin: 50px 0 0 0; padding: 30px 0 40px 0; border-top: 1px solid rgba(15, 23, 42, 0.10); } html body .ba-weiterlesen-titel { margin: 0 0 20px 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #64748b; } /* Der Titel ist ein

, und ab 850 px abwaerts schlaegt eine Regel mit !important auf den nackten Typselektor h2 die Hausregel darueber: gemessen 26 px statt 12, also GROESSER als der Kartentitel darunter, den das Etikett ankuendigt. Am Rechner ist die Hierarchie richtig herum, mobil steht sie auf dem Kopf - auf 139 Seiten, und keine Messung bei EINER Breite sieht es. Dieselbe Klasse wie beim Inhaltsverzeichnis am 27.09.2026; gefunden hat sie `ba-breitenkaskade.js`, nicht der Zufall. Gegen ein !important hilft keine Spezifitaet, deshalb hier eines. line-height steht dabei, weil die h2-Regel 1,2 setzt und das Haus 1,3 - sonst bliebe die Zeile mobil 1 px niedriger als am Rechner. */ html body .ba-weiterlesen-titel { font-size: 12px !important; line-height: 1.3 !important; } html body .ba-weiterlesen-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } /* DIE REGEL HAENGT AM BLOCK, NICHT AM CONTAINER. Hier stand bis zum 22.09.2026 `html body a.ba-wl-karte` - Spezifitaet (0,1,3). Astra selbst unterstreicht mit `.ast-single-post .entry-content a` bei (0,2,1), und bei der Klassenzahl gewinnt Astra: 2 schlaegt 1, die drei Elemente helfen nicht. Auf den Reviews war die Karte dadurch unterstrichen, auf den Monumenten nicht - dieselbe Klasse, zwei Bilder (George, 22.09.2026). `.ba-weiterlesen a.ba-wl-karte` ist (0,2,3) und gewinnt damit gegen (0,2,1), ohne Vorrangmarkierung und ohne den Wurzelcontainer zu kennen. Damit sieht der Block in jeder Gattung gleich aus. */ html body .ba-weiterlesen a.ba-wl-karte, html body .ba-weiterlesen a.ba-wl-karte * { text-decoration: none; } /* `border-bottom: none` gilt nur den KINDERN. Es stand am 22.09.2026 kurz auch auf der Karte selbst - und schlug dort mit (0,2,3) ihren eigenen Rahmen bei (0,1,3): Die Karte hatte drei Seiten Rahmen und unten keinen, was aussieht wie abgeschnitten (George). Die Kinder brauchen die Regel, weil Astra die Unterstreichung dort als `border-bottom` setzt. */ html body .ba-weiterlesen a.ba-wl-karte * { border-bottom: none; } html body a.ba-wl-karte { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease; } html body a.ba-wl-karte:hover { transform: translateY(-4px); box-shadow: 0 15px 35px var(--ba-ziel-schatten); border-color: var(--ba-ziel); background: #fff; } /* ZIELFARBE ANKLICKBARER KACHELN (George, 25.09.2026): Hover-Hausform ist anheben um 4 px, Schatten waechst, Rand in der Farbe des ZIELS. Der Schluessel ist die Adresse, wie bei der Pfadzeile. Vier Hubs fuehren eine eigene Farbe, die uebrigen tragen Hausorange. Die Seitenregeln lesen nur diese Variablen. */ .ba-hub-nav-card, html body a.ba-wl-karte { --ba-ziel: #f7931a; --ba-ziel-schatten: rgba(247, 147, 26, 0.12); --ba-ziel-hauch: rgba(247, 147, 26, 0.05); } .ba-hub-nav-card[href*="/praxis/"], html body a.ba-wl-karte[href*="/praxis/"] { --ba-ziel: #10b981; --ba-ziel-schatten: rgba(16, 185, 129, 0.12); --ba-ziel-hauch: rgba(16, 185, 129, 0.05); } .ba-hub-nav-card[href*="/operations/"], html body a.ba-wl-karte[href*="/operations/"] { --ba-ziel: #14b8a6; --ba-ziel-schatten: rgba(20, 184, 166, 0.12); --ba-ziel-hauch: rgba(20, 184, 166, 0.05); } .ba-hub-nav-card[href*="/lifestyle/"], html body a.ba-wl-karte[href*="/lifestyle/"] { --ba-ziel: #9333ea; --ba-ziel-schatten: rgba(147, 51, 234, 0.12); --ba-ziel-hauch: rgba(147, 51, 234, 0.05); } html body .ba-wl-rubrik { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; /* Gemessen, nicht gewaehlt: #b06a10 ergab auf #f8fafc bei 10 px nur 4,08:1 und damit unter der Schwelle. #9a5c0e sind 5,13:1 auf dem Kartengrund und 5,99:1 auf Weiss - beides ueber 4,5. */ color: #9a5c0e; } html body .ba-wl-titel { font-size: 15px; font-weight: 700; line-height: 1.35; color: #0f172a; } html body .ba-wl-zeit { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #64748b; } @media (max-width: 1000px) { html body .ba-weiterlesen-liste { grid-template-columns: 1fr; } } /* ── Das Zierzeichen der Zitatkaesten ──────────────────────────────────── BAUFORM, NICHT EINZELFALL: 285 Marken auf 71 Seiten. Gemessen am 22.09.2026 auf 2400 und 4423: Rechner 1280 Marke endet x=127, erstes Wort ab x=130 -> 3 px Luft Telefon 375 Marke endet x= 92, erstes Wort ab x= 75 -> 17 px darueber Die Ursache steht in der Regel, nicht an der Stelle: `.ba-pullquote-mark` sitzt fest auf `left: 22px` bei 52 px Schriftgroesse, waehrend der Einzug des Kastens auf dem Telefon von 55 px auf 35 px faellt. Der Einzug schrumpft, die Marke nicht - also laeuft sie in den Text. Der Einzug WIEDER zu vergroessern waere der falsche Tausch: Der Kasten ist auf dem Telefon 305 px breit, jedes Pixel Einzug fehlt dem Text. Die Marke tritt deshalb aus der absoluten Lage heraus und stellt sich UEBER den Text. Sie ist dann vollstaendig sichtbar, und der Text gewinnt 10 px Breite. */ @media (max-width: 1000px) { html body .ba-pullquote { padding-left: 25px; } html body .ba-pullquote-mark { position: static; display: block; font-size: 40px; line-height: 0.75; margin: 0 0 8px 0; } } /* ── Der Kopf der Werkzeugseiten ────────────────────────────────────────── Dieselbe Ordnung wie bei den Monumenten, nur an einem anderen Container: Die 14 Werkzeugseiten tragen `main.ba-titan-container > header` statt `header.ba-monument-header`, und die Regeln oben greifen deshalb nicht. Gemessen ueber alle 14: genau ZWEI Kindfolgen, immer dieselbe Reihenfolge (Pfad, Etikettenleiste, Titel, Lead, manchmal eine Systemnotiz). Jedes Kind bekommt seine Zahl; der Rueckfall auf 6 faengt, was spaeter dazukommt. Der Anlass ist gemessen, nicht gestalterisch: Auf dem Setup Finder stand der Titel am Telefon bei 367 px und die erste Frage bei 834 - also unter dem Falz eines jeden Telefons. */ html body .ba-titan-container > header { display: flex; flex-direction: column; } html body .ba-titan-container > header > * { order: 6; } html body .ba-titan-container > header > .ba-terminal-path { order: 1; } html body .ba-titan-container > header > .ba-hero-title { order: 2; } html body .ba-titan-container > header > .ba-hero-subtitle { order: 3; } html body .ba-titan-container > header > .ba-system-note { order: 4; } html body .ba-titan-container > header > .ba-status-bar { order: 5; margin: 0 0 30px 0; padding: 18px 0 0 0; border-bottom: none; border-top: 1px solid rgba(15, 23, 42, 0.10); } @media (max-width: 1000px) { html body .ba-titan-container > header > .ba-status-bar { flex-wrap: wrap; gap: 6px; justify-content: flex-start; } html body .ba-titan-container > header > .ba-status-bar .ba-status-badge { padding: 7px 8px; font-size: 9px; white-space: nowrap; } /* DIE REISE-LEISTE SAGT AM TELEFON ZWEIMAL DASSELBE. Ihre beiden Karten wiederholen die Fragen ("Kapitalziel - Wie viel willst du halten?"), und die Frage darunter stellt sie dann. Gemessen kostete das 184 px, also ein Viertel des Schirms - und seit die Frage `[ FRAGE 1 VON 2 ]` traegt, steht die Ortsangabe ohnehin dort. Die Karten bleiben als Fortschritt, ihr erklaerender Satz faellt. */ html body .ba-journey-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } html body .ba-journey-step { padding: 10px 12px; } html body .ba-journey-step p { display: none; } html body .ba-journey-step h4 { font-size: 13px; margin: 0; } } /* ── Die Kurzfassung „In zwei Minuten" ──────────────────────────────────── Aus der von George freigegebenen Vorschau (~/tmp/lese/muster2.js). Die Zellenueberschrift ist keine Klammer mehr, sondern ein Wort - deshalb braucht sie die Auszeichnung, die vorher die Klammer trug. Kein Tor noetig: Die Klassen gibt es nur dort, wo die Kurzfassung neu geschrieben wurde. */ /* DIE SCHREIBUNG IST GEMISCHT, und das GROSSSCHREIBEN muss ausdruecklich abgeschaltet werden: Das Seiten-CSS setzt es auf 80 Seiten in `.ba-intel-label` (0,1,0). Wer die Zeile hier nur streicht, aendert nichts — dann gewinnt die Seitenregel. Der Sockel html body (0,1,2) schlaegt sie. Von George am 22.09.2026 entschieden: Die Versalien-Entscheidung ist die neuere und begruendete, und sie gilt fuer Ueberschriften, die gelesen werden sollen. Die Sperrung faellt von 1,8 auf 0,6 px mit — sie war fuer Versalien gesetzt, wo sie die Umrisse trennt; in gemischter Schreibung zieht sie das Wort auseinander, das man gerade wieder erkennen koennen soll. */ html body .ba-kf-titel { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 900; letter-spacing: 0.6px; text-transform: none; /* Gemessen, nicht gewaehlt — und in die andere Richtung als bei .ba-wl-rubrik, weil der Grund ein anderer ist. #b06a10 ergab auf dem Verlauf der Briefing-Box bei 10 px nur 3,42:1 (helles Verlaufsende #1e293b) bis 4,48:1 (dunkles Ende #0a0f1a), im Bildabzug an der tatsaechlichen Lage 3,98:1 — unter der Schwelle von 4,5. Dort hilft nicht dunkler, sondern heller. #dd9021 liegt bei 5,63:1 auf #1e293b, 7,38:1 auf #0a0f1a und 6,83:1 auf dem flachen #111827, das 12 der 80 Kaesten fuehren; selbst gegen das radiale Leuchten (12 % #10b981 ueber dem hellen Verlaufsende), das die Etiketten gar nicht erreicht, sind es noch 4,64:1. Von George am 22.09.2026 entschieden: "keine Markenfarbe, sondern ein Etikett, das lesbar sein soll." */ color: #dd9021; } /* Die Voraussetzungszeile der Anleitungen. Sie steht als eigene Zeile UNTER dem Raster, nicht darin — eine vierte Rasterzelle waere eine vierte Spalte. Aussehen und Abstand kommen aus .ba-intel-label und .ba-intel-content, also traegt sie nur ihren eigenen Rahmen und ihre Polsterung. Der Wert 24px/25px ist der der Zellen (28px/25px) minus der Trennlinie darueber. Hier global statt je Seite: dieselbe Regel 80-mal in den post_content zu schreiben ist genau der Fehler, den die Auslagerung am 21.09.2026 behoben hat. */ html body .ba-intel-vorab { padding: 24px 25px; border-top: 1px solid rgba(255, 255, 255, 0.06); position: relative; z-index: 1; } html body .ba-kf-text { font-size: 15px; line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════════════════ KURZURTEIL IM VERDIKT-KASTEN (Stufe 2, Punkt 3d — George, 23.09.2026) Fuenf Zeilen: Preis, Note mit Begruendung, Fuer wen, Grundlage des Urteils, und wo noetig die Einschraenkung. Die Note steht schon im Kasten; die uebrigen kommen als `ba-fakt` dazu. GLOBAL statt je Seite: Dieselbe Regel 14-mal in Seiten zu schreiben ist der Fehler, den die Auslagerung vom 21.09. behoben hat. `html body` hebt die Regel ueber die einklassigen Seitenregeln (0,1,0); mit (0,1,2) gewinnt sie ohne ein einziges !important. ═══════════════════════════════════════════════════════════════════════════ */ html body .ba-fakt { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; } html body .ba-fakt-preis { border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 22px; padding-top: 0; } html body .ba-fakt-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; /* #94a3b8 auf dem Kastengrund #0f172a ergibt 7,6:1 - dieselbe Farbe, die der Kasten fuer `ba-verdict-subtitle` schon fuehrt. */ color: #94a3b8; flex: 0 0 92px; line-height: 1.5; } html body .ba-fakt-wert { font-size: 15px; line-height: 1.6; color: #e2e8f0; flex: 1; } html body .ba-fakt-wert strong { color: #fff; font-weight: 700; } @media (max-width: 600px) { html body .ba-fakt { flex-direction: column; gap: 4px; } html body .ba-fakt-label { flex: none; } } /* Auf dem Telefon bricht "BitAtlas Select Urteil" in ZWEI Zeilen - gemessen bei 390, 375 und 320 px, ueberall zwei. Die Seitenregel gibt ihm dabei eine Zeilenhoehe von 1,2 (26 px Schrift, 31,2 px Zeile); das ist die Enge, die George gesehen hat. Der Fließtext des Hauses laeuft bei 1,6 bis 1,7. Zwei Zeilen bei 1,2 sehen gedraengt aus, eine Zeile nicht - deshalb gilt die Korrektur nur dort, wo umgebrochen wird. Der Abstand zum Untertitel waechst von 5 auf 10 px, weil der Untertitel bei 320 px auf vier Zeilen geht (Versalien mit 1 px Sperrung) und dann direkt unter der zweiten Titelzeile beginnt. */ @media (max-width: 600px) { /* Das !important ist hier kein Ausweg, sondern die Antwort auf ein anderes: Weiter oben steht `h2 { font-size: 28px !important; line-height: 1.2 !important }` fuer alles unter 850 px, und die Zeilenhoehe von 1,2 kommt von dort. Sie ist fuer EINZEILIGE Ueberschriften richtig und darf nicht fallen - ohne sie greift `h1,h2,h3 { line-height: 1.1 }`, also noch enger. Gebraucht wird die Ausnahme nur fuer die Verdikt-Ueberschrift, die auf dem Telefon bei 390, 375 und 320 px zweizeilig bricht. */ html body .ba-verdict-card .ba-verdict-title { line-height: 1.3 !important; margin-bottom: 10px; } } /* ═══════════════════════════════════════════════════════════════════════════ KNOEPFE TRAGEN KEINE UNTERSTREICHUNG ═══════════════════════════════════════════════════════════════════════════ Gefunden am 23.09.2026 im Bild: Der Kaufknopf auf den Select-Reviews steht unterstrichen da - er sagt damit "Link", waehrend seine Form "Knopf" sagt. In Versalien war es genauso und ist niemandem aufgefallen. DIE QUELLE IST ASTRA, NICHT DIE SEITE. Das Theme setzt inline `.ast-single-post .entry-content a` auf `underline`, Spezifitaet (0,2,1). Die Seitenregeln zu `.ba-cta-btn` sind (0,1,0) und verlieren - auch die 61, die ausdruecklich `none` sagen. Gewonnen haben nur die zehn Dispatch-Seiten, die eine Vorrangmarke gesetzt haben. Gemessen: 58 Knoepfe auf 56 Seiten unterstrichen, 40 auf 10 Seiten geschuetzt. EINE STELLE STATT 56 SEITEN, wie beim Linksystem am 21.09.2026: Ein Attributselektor zaehlt wie eine Klasse, mit dem Koerperselektor davor ergibt das (0,3,1) und schlaegt Astra ohne Vorrangmarke. Und er faengt jeden kuenftigen Knopf mit, statt eine Liste zu pflegen - gemessen fuehrt das Haus heute 20 Knopfklassen an Links. */ .ast-single-post .entry-content a[class*="btn"], .ast-single-post .entry-content a[class*="cta"], .ast-single-post .entry-content a[class*="btn"]:hover, .ast-single-post .entry-content a[class*="cta"]:hover { text-decoration: none; } /* ═══ SIGNALKLASSEN (25.09.2026) ═════════════════════════════════════════ Klassen, deren Name ein Aussehen verspricht und die auf einem Teil der Seiten keine Regel hatten - sie renderten dort wie gewoehnlicher Text (ba-klassenregel.py). Die Werte sind die Fassung, die die MEISTEN Seiten des Bestands fuer dieselbe Klasse fuehren, mit festen Farben statt var(), weil nicht jede Seite die Variablen setzt. Eine Seite mit eigener Regel behaelt sie, soweit ihre Werte der Mehrheit folgen. WARUM DOPPELTE KLASSEN: Die Grundregel der Seite (.ba-data-value, .ba-data-card) steht im Stilblock SPAETER als diese Datei und schlaegt eine einfache Klasse gleicher Spezifitaet - gemessen auf 2400, wo ba-value-red dunkel blieb. Deshalb .ba-data-value.ba-value-red, die Form, die neun Seiten schon fuehren. WARUM RUBRIKEN: ba-dossier-security ist Rot in Praxis und Gold in Lifestyle (Rubrikfarbe ist Gattung). Die Rubrik steht als Klasse am body: parent-pageid-1890 = Lifestyle, 6743 = Dispatches (eigene, dunkle Karten). NICHT HIER: ba-card-red, ba-card-warning, ba-formula-critical/-secondary - eine Regel stark genug fuer die Luecken aenderte 30 Seiten mit eigener Gestaltung; George entscheidet (25.09.2026). SEITENAUSNAHMEN: 5152 faerbt ba-value-green bewusst lila, 4524 und 4558 setzen ba-value-orange auf ihre eigene Akzentfarbe, 4448 fuehrt einen eigenen Rot-Ton fuer ba-dossier-security - gemessen, nicht geraten. */ .ba-value-green, body:not(.page-id-5152) .ba-data-value.ba-value-green { color: #22c55e; } .ba-value-red, .ba-data-value.ba-value-red { color: #ef4444; } .ba-value-orange, body:not(.page-id-4524):not(.page-id-4558) .ba-data-value.ba-value-orange { color: #f7931a; } .ba-value-purple, .ba-data-value.ba-value-purple { color: #8b5cf6; } .ba-value-blue, .ba-data-value.ba-value-blue { color: #3b82f6; } .ba-value-cyan, .ba-data-value.ba-value-cyan { color: #06b6d4; } .ba-data-value.ba-value-large { font-size: 36px; letter-spacing: -1px; font-weight: 900; } body:not(.parent-pageid-6743) .ba-data-card.ba-card-green { background: linear-gradient(145deg, #f0fdf4 0%, #fff 100%); border-color: rgba(34, 197, 94, 0.3); } .ba-data-card.ba-card-purple { background: linear-gradient(145deg, #f5f3ff 0%, #fff 100%); border-color: rgba(139, 92, 246, 0.3); } .ba-data-card.ba-card-cyan { background: linear-gradient(145deg, #ecfeff 0%, #fff 100%); border-color: rgba(6, 182, 212, 0.3); } body:not(.parent-pageid-1890):not(.page-id-4448) .ba-dossier-security { background: rgba(239, 68, 68, 0.15); color: #f87171; } .parent-pageid-1890 .ba-dossier-security { color: #d4af37; } .ba-dossier-privacy { background: rgba(99, 102, 241, 0.15); color: #818cf8; } .ba-dossier-economics { color: #f59e0b; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.25); } .ba-dossier-warning { color: #f7931a; background: rgba(247, 147, 26, 0.1); border: 1px solid rgba(247, 147, 26, 0.25); } .ba-dossier-metrics { color: #06b6d4; background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.25); } .ba-signal-callout { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #06b6d4; padding: 25px 30px; margin: 35px 0; border-radius: 0 16px 16px 0; } .ba-winner { font-weight: 700; color: #22c55e; background: rgba(34, 197, 94, 0.1); } .ba-winner-badge { color: #22c55e; margin-left: 6px; font-weight: 900; } .parent-pageid-1890 .ba-winner { background: linear-gradient(145deg, #faf5ff 0%, #f3e8ff 100%); color: #9333ea; font-weight: 600; } .parent-pageid-1890 .ba-winner-badge { color: inherit; } .ba-pulse-dot { display: inline-block; width: 6px; height: 6px; background: #f7931a; border-radius: 50%; margin-right: 6px; vertical-align: middle; } /* INHALTSVERZEICHNIS EINKLAPPBAR (26.09.2026, George) Das Verzeichnis kostete im Median 678 px und war der groesste Posten des Kopfes. Eingeklappt bleibt die Kopfzeile stehen, die ohnehin sagt, was darin steht ("Neun Abschnitte, 3 bis 7 Minuten"). Kein JavaScript: details/summary ist fuer Tastatur und Vorleser bedienbar. Das Haus fuehrte bis heute kein einziges details - deshalb stehen die Regeln hier global und nicht auf 39 Seiten einzeln. Der Winkel ist gezeichnet, nicht geschrieben: ein Schriftzeichen haengt an der Schrift des Geraets, zwei Raender haengen an nichts. */ html body details.ba-toc-klapp > summary.ba-toc-header { cursor: pointer; list-style: none; transition: background 0.2s ease; } /* Die Kopfzeile traegt ein

, und ab 850 px abwaerts schlagen zwei Theme- bzw. Seitenregeln mit !important die Hausregel fuer .ba-toc-header h2, die dort 13 px setzt: gemessen 26 px statt 13, vier Zeilen Umbruch, Kopfzeile 156 statt 74 px hoch - also so gross wie eine Abschnittsueberschrift. Eine Zeile, die sagt, was DARUNTER steht, gehoert unter die Ueberschriftenhierarchie, nicht darueber. Gegen ein !important hilft keine Spezifitaet, deshalb hier eines. */ html body details.ba-toc-klapp > summary.ba-toc-header h2 { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.4 !important; margin: 0 !important; } html body details.ba-toc-klapp > summary.ba-toc-header::-webkit-details-marker { display: none; } /* zu: keine Trennlinie unter einer Zeile, unter der nichts steht */ html body details.ba-toc-klapp:not([open]) > summary.ba-toc-header { border-bottom: none; } html body details.ba-toc-klapp > summary.ba-toc-header::after { content: ''; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.2s ease; } html body details.ba-toc-klapp[open] > summary.ba-toc-header::after { transform: rotate(-135deg) translate(-3px, -3px); } /* Hover ist hier richtig: ein summary IST ein Bedienelement. */ html body details.ba-toc-klapp > summary.ba-toc-header:hover { background: #eef2f7; } html body details.ba-toc-klapp > summary.ba-toc-header:focus-visible { outline: 2px solid #f7931a; outline-offset: -2px; } /* KLICKFLAECHE FUER DIE TOOL-BRUECKEN (26.09.2026) Die Regel "Hover nur wo anklickbar" war auf den Bruecken willkuerlich: Sie heben sich, aber anklickbar war nur der Knopf darin. Fuer den Leser sieht "der Kasten ist ein Link" genauso aus wie "der Kasten enthaelt einen Link". Also wird die Bauform geaendert, nicht die Regel - dieselbe Form wie auf der Startseite, ein Flaechenelement als direktes Kind. GEMESSEN, NICHT UNTERSTELLT: Die Bruecke ist 84 px hoch, position static, ohne Pseudoelemente, und ihr Knopf ist DIREKTES Kind - anders als bei ba-monument-bridge, wo ein Zwischenelement mit z-index 1 sitzt und die Flaeche den Knopf verdecken wuerde. Deshalb bekommt nur diese Form sie. */ html body .ba-tool-bridge { position: relative; } html body .ba-tool-bridge > .ba-karte-flaeche { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; } /* DIE KLICKFLAECHE IST UNSICHTBAR, UND DAS WIRD ERZWUNGEN. Sie ist ein Anker-Element mit aria-hidden und tabindex -1 - und damit faerbt sie jede Seitenregel mit, die einen Link im Fliesstext auszeichnet. Gemessen am 30.09.2026: 50 Seiten fuehren eine solche Regel, die staerkste ist `.ba-monument-v42 .ba-monument-prose a:visited` mit (0,3,1) und !important. Sie setzt `border-bottom: 1px dashed` - auf 4567 lila, auf 4430 gruen -, und weil die Flaeche die GANZE Leiste ueberdeckt, laeuft der Strich ueber 1.138 px an der Unterkante. DER BAU ERZEUGT DAS SELBST: Die heutigen Bruecken haengen an `article.ba-monument-v42` und stehen NICHT in der Prosa - dort greift keine dieser Regeln. Der Brueckenbau setzt sie in den Lesefluss, also IN `.ba-monument-prose`, und erst damit werden sie getroffen. Dieselbe Klasse wie `ba-cta-secondary`, wo eine globale Regel aus 23 Textlinks 23 sichtbare Knoepfe machte. Die Spezifitaet ist gerechnet, nicht geraten: (0,3,2) schlaegt (0,3,1). Die zweite Zeile gilt der Klasse statt dem Ort - auf der Startseite liegt die Flaeche in einer Bento-Kachel, nicht in einer Bruecke, und die Seitenregel dort ist `a` mit !important. BENANNTE AUSLASSUNG: `::before` und `::after` stehen nicht in der Regel. Ein `a::before`/`a::after` mit `content` kommt im ganzen Bestand null-mal vor; eine Regel gegen einen Fall, den es nicht gibt, setzt eine Bedeutung, die niemand beschlossen hat. */ html body .ba-karte-flaeche.ba-karte-flaeche, html body .ba-tool-bridge > .ba-karte-flaeche.ba-karte-flaeche { border: 0 !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; } /* Der Knopf bleibt der eine Weg fuer Tastatur und Vorleser - er liegt UEBER der Flaeche, damit ein Klick auf ihn ihn selbst trifft und nicht sie. */ html body .ba-tool-bridge > .ba-tool-bridge-link { position: relative; z-index: 3; } /* MONUMENT-BRUECKE: KEINE KLICKFLAECHE - entschieden von George am 27.09.2026 Hier stand vom 26. bis zum 27.09.2026 eine Klickflaeche wie bei den Tool-Bruecken. Sie ist zurueckgebaut, und der Grund ist die MARKIERBARKEIT: Eine Flaeche ueber einem Kasten nimmt dem Leser das Markieren des Textes darunter. Bei den 84 px der Tool-Bruecke ist das vertretbar - sie traegt NULL Absaetze und ist faktisch ein Knopf. Die Monument-Bruecke ist 319 bis 379 px hoch (Median 346, 27 Stellen gemessen) und traegt einen Absatz mit 227 bis 349 Zeichen: ein Textblock, aus dem jemand einen Satz kopieren will. DIE MESSUNG DANEBEN WAR DER ZWEITE GRUND: Auf .ba-monument-bridge trifft im ganzen Bestand KEINE :hover-Regel - im Browser ueber alle Stylesheets und el.matches geprueft, nicht am Markup. Die Flaeche war also fuer einen Hover gebaut, den es nie gab; sie machte den Kasten anklickbar, ohne dass der Leser es sehen konnte. Das Gegenstueck steht auf der Startseite: .ba-bento-item.ba-karte-klick:hover hebt wirklich um 4 px, und dort BLEIBEN die fuenf Flaechen trotz 319 bis 523 px Hoehe. Der Weg in die Zielseite ist weiter der Knopf .ba-bridge-btn. Wer hier eine Flaeche wieder einbaut, baut sie gegen diese Messung. */ /* ERKENNTNIS-TITEL IN NORMALER SCHREIBUNG - entschieden von George am 28.09.2026 Die Titel der Erkenntniskaesten standen auf 84 Seiten in Versalien, und zwar nicht im Markup, sondern ueber eine Umwandlung im Stilblock jeder Seite (120 Regeln, alle mit einfacher Klasse). Ein Teil dieser Titel sind ganze Aussagen mit vier und mehr Woertern; in Versalien liest man sie schwerer. Die Doppelklasse schlaegt die Seitenregel, obwohl diese spaeter im Dokument steht. Die Sperrung faellt mit, weil sie fuer Versalien gesetzt war; 4524 fuehrt beide Werte seit jeher so und war die Vorlage. Gemessen vor dem Schreiben im Browser auf 83 oeffentlichen Seiten, bei 1280 und 375 px: die Regel greift an allen 457 Stellen. Am Rechner aendert sich keine Hoehe; auf dem Telefon wird kein Titel hoeher, 84 Titel auf 48 Seiten werden eine Zeile kuerzer. Titel, die im Markup selbst in Versalien stehen (Codeform in eckigen Klammern), aendert sie nicht - die gehoeren in den Etikettenbau. */ .ba-insight-title.ba-insight-title { text-transform: none; letter-spacing: normal; } /* ═══════════════════════════════════════════════════════════════════════ SILBENTRENNUNG — global, entschieden von George am 29.09.2026 ═══════════════════════════════════════════════════════════════════════ Lange deutsche Komposita brechen am Telefon mitten im Wort, weil `overflow-wrap: break-word` greift und kein Trennpunkt gesetzt ist — gemessen am 28.09.2026: 91 Stellen auf 59 von 154 Seiten. `hyphens: auto` braucht zweierlei, und nur das eine liefert die Seite: `lang="de"` steht am (gemessen). Die TRENNMUSTER liefert das GERAET. Chromium 90 auf diesem Server hat keine deutschen, deshalb ist die Wirkung VON HIER AUS NICHT MESSBAR und nur an einem echten Browser zu sehen. Wer sie hier nachmisst, findet keinen Unterschied und haelt die Regel fuer wirkungslos. Die Regel steht am Koerper und wird vererbt. Ausgenommen ist, was NICHT getrennt werden darf: Code und Adressen (ein Trennstrich in einer Bitcoin-Adresse ist falsch), Knoepfe und Etiketten (sie werden wiedererkannt, nicht gelesen), Formularfelder, Zahlen und die Formeln. Die Liste ist gemessen, nicht geraten: jede Klasse darin kommt im Bestand vor. `.katex` steht dabei, obwohl es im Bestand null-mal steht — KaTeX setzt die Klasse erst zur Laufzeit. */ html body { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } code, pre, kbd, tt, samp, input, select, textarea, button, .katex, html body .ba-terminal-path, html body .ba-terminal-path-text, html body .ba-code-path, html body .ba-cta-btn, html body .ba-btn-primary, html body .ba-execute-btn, html body .ba-footer-terminal-link, html body .ba-status-badge, html body .ba-badge-pill, html body .ba-dossier-label, html body .ba-pfad-status-text, html body .ba-layer-id, html body .ba-audit-id, html body .ba-signal-id, html body .ba-tag, html body .ba-data-value, html body .ba-score-value { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } /* ═══════════════════════════════════════════════════════════════════ RUBRIK-ABZEICHEN — eine Form, Farbe je Rubrik George, 29.09.2026. Die TERMINAL-PILLE ist die Hausform. Gemessen am 29.09.2026 ueber den Bestand: elf Seiten tragen ein .ba-badge-standalone. Neun davon (acht Hubs und das Logbuch) fuehrten seitenlokal eine Zusatzregel .ba-badge-standalone .ba-badge-pill (0,2,0) mit heller Kapsel, Inter 800, Radius 100 px und 2 px braunem Rahmen — die einzige Stelle des Hauses in dieser Form. Zwei (Ueber uns, Kontakt) trugen die Terminal-Pille, weil ihnen die Zusatzregel fehlte. Dieselben zwei Klassen im Markup, zweierlei im Bild; der Unterschied steckte allein in der Kaskade. Die FARBE folgt der Rubrik, wie beim Verweis (Gesetz 8). Wo es keine Rubrikklasse gibt — Tools, Select, Reports, Logbuch, Ueber uns, Kontakt —, gilt Hausorange. LIFESTYLE traegt #c4b5fd statt des Rubriklila #9333ea: auf #0f172a kommt das Rubriklila auf 3,32:1. #c4b5fd ist die Lila-Stufe, die das Haus auf dunklem Grund bereits fuehrt (51 Stellen, Linkfarbe in den Formel- und Intel-Kaesten der zwoelf Lifestyle-Seiten) und gibt 9,67:1. Die uebrigen liegen zwischen 7,04 und 7,83:1. KEIN pulsierender Punkt: Wo nichts gemessen wird, behauptet er eine Messung (George, 29.09.2026). html body, weil die Seitenregeln im post_content stehen und damit SPAETER als diese Datei — bei gleicher Spezifitaet gewinnt die Seite. ═══════════════════════════════════════════════════════════════════ */ html body .ba-badge-standalone .ba-badge-pill { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 2px; padding: 12px 22px; border-radius: 8px; background: #0f172a; color: #f7931a; border: 1px solid rgba(247, 147, 26, 0.3); } html body .ba-badge-standalone .ba-badge-praxis { color: #10b981; border-color: rgba(16, 185, 129, 0.3); } html body .ba-badge-standalone .ba-badge-lifestyle { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.3); } html body .ba-badge-standalone .ba-badge-operations { color: #14b8a6; border-color: rgba(20, 184, 166, 0.3); } html body .ba-badge-standalone .ba-badge-dispatches { color: #06b6d4; border-color: rgba(6, 182, 212, 0.3); } /* ═══════════════════════════════════════════════════════════════════ SELECT-KASTEN: DIE HAUSFORM George, 29.09.2026: "Die MEHRHEITSFORM wird Hausform." Gemessen am gerenderten Dokument ueber alle 111 Kaesten (getComputedStyle bei 1280 px, nicht an der Deklaration): Verlauf 76 : 35 Radius 24px 74 : 37 Rahmen 1px 100 : 11 Ueberschrift zentriert 109 : 2 Knopf Inter 14px 68 : 43 Der ABSATZ steht linksbuendig in einem mittigen Block von 60ch (George, 29.09.2026). Bei 375 px traegt er im Median VIER Zeilen, und 88 von 101 messbaren Kaesten liegen ueber drei - zentrierter Flattersatz liest sich dort schlecht. Der begrenzte Block haelt den Kasten trotzdem symmetrisch zu Ueberschrift und Knopf. DER ABSATZ IST `p` OHNE KLASSE (95) bzw. `.ba-terminal-desc` (16). NICHT `.ba-terminal-line`: das sind die Terminal-Ausgabezeilen der Kopfzeile, 94 Stellen - sie tragen aber ALLE eine Klasse, deshalb trennt `p:not([class])` sauber. KEIN Kindkombinator: der Vorspann steht auf den meisten Seiten zwei Ebenen tief in `.ba-terminal-body > .ba-terminal-content > p`, und `> p` fand ihn auf drei von vier Probeseiten nicht. NACHTRAG 29.09.2026, zweite Runde (George): "Ziel war ein einheitlicher Kasten, nicht einzelne einheitliche Eigenschaften." Deshalb stehen jetzt auch Aussenabstand, Polsterung, Schatten, Leuchten, Kopfzeile, Ueberschrifts- groesse, Knopfform und die Rubrikfarbe hier - und die Kopfzeile traegt JEDER Kasten: "sie ist das Markenzeichen, und nur so ist es eine Form." Die elf page-id-Regeln von heute Vormittag sind entfallen; die Rahmenfarbe folgt jetzt der Rubrik und nicht mehr der Bauzeit. ═══════════════════════════════════════════════════════════════════ */ /* Die Grundform aus dem ersten Bau dieses Tages - unveraendert. */ html body .ba-cta-terminal { background: linear-gradient(145deg, #0a0f1a 0%, #0f172a 100%); border-width: 1px; border-style: solid; border-radius: 24px; } html body .ba-cta-terminal p:not([class]), html body .ba-cta-terminal .ba-terminal-desc { max-width: 540px; margin-left: auto; margin-right: auto; text-align: left; } html body .ba-cta-terminal .ba-cta-btn, html body .ba-cta-terminal .ba-cta-secondary, html body .ba-cta-terminal .ba-terminal-cta, html body .ba-cta-terminal .ba-terminal-btn { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; } @media (max-width: 768px) { html body .ba-cta-terminal { border-radius: 20px; } } /* Rubrikfarbe: EINE Quelle fuer Rahmen, Knopf und Kennungspille. Vorgabe ist Hausorange (Wissen, Select, Reports, Tools = 43 von 111); drei Rubriken tragen ihre eigene Farbe aus der Hausfarbtabelle. */ html body .ba-cta-terminal { --ba-kf: #f7931a; --ba-kr: rgba(247,147,26,.40); --ba-kp: rgba(247,147,26,.12); --ba-kh: #f8a138; } html body.parent-pageid-1887 .ba-cta-terminal { --ba-kf: #10b981; --ba-kr: rgba(16,185,129,.40); --ba-kp: rgba(16,185,129,.12); --ba-kh: #12d595; } html body.parent-pageid-1890 .ba-cta-terminal { --ba-kf: #c4b5fd; --ba-kr: rgba(196,181,253,.40); --ba-kp: rgba(196,181,253,.12); --ba-kh: #dcd3fe; } html body.parent-pageid-4764 .ba-cta-terminal { --ba-kf: #14b8a6; --ba-kr: rgba(20,184,166,.40); --ba-kp: rgba(20,184,166,.12); --ba-kh: #17d4bf; } /* Der Kasten. Grund, Rahmenbreite und Radius stehen seit dem Bau vom 29.09.2026 global; hier kommen Abstand, Polsterung und Schatten dazu. Aussenabstand 80/30 = Mehrheit 40 von 111 und der Hausabstand zwischen zwei Bloecken. Polsterung 50/45 = Mehrheit 15 von 42 gesetzten Werte, Schatten keiner = Mehrheit 77 von 111. */ html body .ba-cta-terminal.ba-cta-terminal { margin-top: 80px; margin-bottom: 30px; padding: 50px 45px; border-color: var(--ba-kr); box-shadow: none; overflow: hidden; } /* Das Leuchten faellt mit dem Schatten: 69 von 111 tragen keines. */ html body .ba-cta-terminal.ba-cta-terminal::before { display: none; } /* Die Innencontainer geben ihre eigene Polsterung ab - sonst addiert sie sich auf die des Kastens (gemessen: ba-terminal-body 40 bis 45 px). */ html body .ba-cta-terminal .ba-terminal-body, html body .ba-cta-terminal .ba-cta-inner, html body .ba-cta-terminal .ba-terminal-content { padding: 0; } /* --- Die Kopfzeile ------------------------------------------------------- */ /* Sie bricht aus der Polsterung des Kastens aus und liegt damit als Titelbalken an dessen Oberkante; die Rundung schneidet der Kasten (overflow: hidden). Ihre Seitenpolsterung ist die des Kastens, damit die Titelzeile auf derselben Kante beginnt wie der Absatz darunter. */ html body .ba-cta-terminal .ba-terminal-header, html body .ba-cta-terminal .ba-terminal-header-bar, html body .ba-cta-terminal .ba-terminal-header-cta { display: flex; align-items: center; gap: 15px; margin: -50px -45px 36px; padding: 15px 45px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; } html body .ba-cta-terminal .ba-terminal-dots { display: flex; gap: 6px; flex: 0 0 auto; } html body .ba-cta-terminal .ba-terminal-dots span { width: 12px; height: 12px; border-radius: 50%; display: block; } html body .ba-cta-terminal .ba-terminal-dots span:nth-child(1) { background: #ef4444; } html body .ba-cta-terminal .ba-terminal-dots span:nth-child(2) { background: #eab308; } html body .ba-cta-terminal .ba-terminal-dots span:nth-child(3) { background: #22c55e; } /* Die Titelzeile. 12 px Mono = Mehrheit 29 von 69; Farbe #94a3b8 = Mehrheit 40 von 69 UND die einzige der beiden, die auf dem Kopfgrund 4,5:1 erreicht. nowrap, weil sie heute bei 375 px auf zwei bis vier Zeilen umbricht und die Kopfzeile dadurch 63 bis 102 px hoch wird statt 47. */ html body .ba-cta-terminal .ba-terminal-title, html body .ba-cta-terminal .ba-terminal-title-cta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.4; color: #94a3b8; letter-spacing: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* --- Ueberschrift und Absatz --------------------------------------------- */ /* 32 px: keine Mehrheit im Bestand (24 px 29-mal, 40 px 27-mal), deshalb aus der Groessenhierarchie - H1 56, H2 34, H3 in der Prosa 22. Ein Kastentitel mit 40 px stand ueber jeder Abschnittsueberschrift. */ html body .ba-cta-terminal.ba-cta-terminal h3 { font-size: 32px; line-height: 1.25; text-align: center; margin: 0 0 18px; } /* Absatz: 15 px = Mehrheit 44 von 111 bei 375 px. Linksbuendig in einem mittigen Block von 60ch steht schon global (29.09.2026). */ html body .ba-cta-terminal.ba-cta-terminal p:not([class]), html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-desc { font-size: 15px; line-height: 1.7; } /* WARUM HIER !important STEHT, und nur hier: Die Seitenregel `.ba-monument-v42 .ba-cta-btn` traegt SELBST ein !important (gemessen mit ba-wirktwas.js am ausgelieferten Dokument). Keine Spezifitaet schlaegt das - ein zweites ist die einzige Moeglichkeit. Ohne es stand die Schrift auf 45 von 111 Hauptknoepfen weiss: auf dem Lifestyle-Lila #c4b5fd sind das 1,5:1. Die uebrigen Merkmale der Hausform brauchen es nicht; sie gewinnen ueber die Spezifitaet (Abnahme 1280 px: 111 von 111). Die Seitenregeln fallen im 10f-Lauf, dann kann auch das !important hier wieder weg. UND DIE SPEZIFITAET ENTSCHEIDET AUCH UNTER !important: Der erste Versuch stand auf (0,2,2) und verlor gegen `.ba-monument-v42 .ba-cta-terminal a.ba-cta-btn` (0,3,1). Gemessen ueber alle 111 Seiten ist die staerkste !important-Seitenregel (0,4,0) auf drei Seiten; die Selektoren hier stehen deshalb auf (0,4,2) - die doppelte Klasse ist die Hausform dafuer. */ /* --- Knoepfe ------------------------------------------------------------- */ /* Hauptknopf gefuellt in der Rubrikfarbe, dunkle Schrift: #0a0f1a auf jeder der vier Farben 7,4:1 oder besser, Weiss auf Hausorange nur 2,7:1. Radius 12 px = Mehrheit 60 von 124, Polsterung 16/32 aus derselben Reihe. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-btn.ba-cta-btn, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cta.ba-terminal-cta, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; background: var(--ba-kf) !important; background-image: none !important; color: #0a0f1a !important; border: 1px solid var(--ba-kf) !important; border-radius: 12px; padding: 16px 32px; margin-left: 12px; margin-right: 12px; text-decoration: none; } /* Nebenknopf: derselbe Rahmen, kein Grund. Sonst sehen beide gleich wichtig aus - im Mock vom 29.09.2026 gesehen und dort korrigiert. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-secondary.ba-cta-secondary, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; background: transparent !important; background-image: none !important; color: var(--ba-kf) !important; border: 1px solid var(--ba-kr) !important; border-radius: 12px; padding: 16px 32px; margin-left: 12px; margin-right: 12px; text-decoration: none; } /* DER HOVER TRAEGT DIE RUBRIKFARBE, EINE STUFE HELLER - George, 01.10.2026. Hier stand bis dahin, der Farbwechsel sei genommen und ersetzt durch Anheben und Schatten. Gemessen am 01.10.2026 im Bild, mit Rauschboden und Positivkontrolle: Der Knopf BEWEGT sich, seine Farbe bleibt - Ruhe srgba(202,122,26), Hover srgba(199,120,26), also derselbe Ton. Das !important oben schlaegt jede Seiten-Hoverregel, und die setzten ohnehin keine Rubrikfarbe, sondern Bernstein #fbbf24 fuer JEDE Bruecke und Weiss fuer den Hauptknopf. DIE STUFE IST GERECHNET, NICHT GEWAEHLT: HSL-Helligkeit plus 6 Prozentpunkte, gedeckelt bei 92 Prozent. Das ergibt ueber die vier Rubrikfarben den gleichmaessigsten Schritt - Summenabstand 45 bis 56, und ein Schritt ist im Bild ab rund 30 sicher zu sehen. Die Alternativen sind gemessen und verworfen: 12 Prozent Weissanteil laesst Lifestyle bei 16 Abstand (unsichtbar), plus 10 Prozentpunkte bei 25. DIE SCHRIFT BLEIBT #0a0f1a, und der Kontrast steigt dabei: 9,26 bis 13,49 gegen 7,55 bis 10,38 in Ruhe. Bewegung und Schatten bleiben, wie sie sind. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-btn.ba-cta-btn, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cta.ba-terminal-cta, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-primary, html body .ba-cta-terminal.ba-cta-terminal .ba-cta-secondary.ba-cta-secondary, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-secondary { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } html body .ba-cta-terminal.ba-cta-terminal .ba-cta-btn.ba-cta-btn:hover, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cta.ba-terminal-cta:hover, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-primary:hover { background: var(--ba-kh) !important; border-color: var(--ba-kh) !important; transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--ba-kf); } html body .ba-cta-terminal.ba-cta-terminal .ba-cta-secondary.ba-cta-secondary:hover, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-secondary:hover { background: var(--ba-kp) !important; transform: translateY(-2px); } /* Die Kennungspille nennt den Rabatt und gehoert zur Rubrikfarbe. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-code.ba-cta-code, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-code.ba-terminal-code { background: var(--ba-kp) !important; color: var(--ba-kf) !important; border-color: var(--ba-kr) !important; } /* --- 768 px und darunter ------------------------------------------------- */ @media (max-width: 768px) { html body .ba-cta-terminal.ba-cta-terminal { margin-top: 60px; padding: 35px 20px; } html body .ba-cta-terminal .ba-terminal-header, html body .ba-cta-terminal .ba-terminal-header-bar, html body .ba-cta-terminal .ba-terminal-header-cta { margin: -35px -20px 26px; padding: 13px 20px; gap: 12px; } /* Der Prompt faellt: mit ihm braucht die laengste Titelzeile 281 px, die Kopfzeile gibt bei 375 px aber nur 191 px her. Ohne ihn sind es 180 px. Die Alternative waere, das Ende abzuschneiden - also genau den Teil, der etwas sagt. */ html body .ba-cta-terminal .ba-tt-host { display: none; } html body .ba-cta-terminal .ba-terminal-title, html body .ba-cta-terminal .ba-terminal-title-cta { font-size: 11px; } html body .ba-cta-terminal.ba-cta-terminal h3 { font-size: 26px; } html body .ba-cta-terminal.ba-cta-terminal .ba-cta-btn.ba-cta-btn, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cta.ba-terminal-cta, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-primary, html body .ba-cta-terminal.ba-cta-terminal .ba-cta-secondary.ba-cta-secondary, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-btn-secondary { width: 100%; padding: 15px 20px; margin-left: 0; margin-right: 0; } } /* ───────────────────────────────────────────────────────────────── DAS INNERE DES KASTENS — zweite Runde, George am 30.09.2026: "Alle Kästen identisch, nur Rubrikfarbe und Inhalt unterscheiden sich." Die erste Runde hat die Hülle vereinheitlicht und die Füllung stehen lassen; im Bild sah man das sofort. Jede Zahl unten ist die gemessene Mehrheit über die 111 Kästen. ───────────────────────────────────────────────────────────────── */ /* --- Die Terminal-Ausgabezeilen ------------------------------------------ */ /* Sie standen in drei Ausrichtungen (46 zentriert, 36 linksbündig) und ohne Breitengrenze, also auf einer anderen linken Kante als der Absatz (x=46 gegen x=300). Jetzt: derselbe 60ch-Block, dieselbe Kante. `ba-terminal-output` trägt in Bauform D seit dem 30.09.2026 auch der echo-Behälter, damit EINE Regel beide Formen fasst. */ /* Die Breite des Textblocks steht als EINE Zahl, nicht als 60ch je Element: `ch` haengt an der Schriftgroesse des Elements, das die Grenze traegt - und dieselbe Angabe ergab am Absatz 540 px, am Ausgabeblock 660 und in Bauform D 484. Die drei Bloecke standen dadurch auf drei linken Kanten. 540 px sind genau die 60ch des Absatzes bei 15 px. */ html body .ba-cta-terminal.ba-cta-terminal { --ba-block: 540px; } /* Die dritte Zeilenform: `ba-terminal-command` auf den 23 Kaesten der Bauform C (zehn Werkzeuge, dreizehn Testberichte). Sie ist Behaelter UND Zeile zugleich und traegt ihr Zeichen in `.prompt` statt in `.ba-prompt` - beides hatte die erste Runde uebersehen. */ html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-command { font-size: 13px !important; line-height: 1.8; color: #94a3b8 !important; max-width: var(--ba-block); margin-left: auto; margin-right: auto; margin-bottom: 30px; text-align: left !important; } html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-output { /* 15 px, weil `ch` an der Schriftgroesse DIESES Elements haengt: mit der geerbten Groesse ergaben 60ch 660 px statt 540, und die Zeilen standen 60 px weiter links als der Absatz (x=240 gegen x=300). */ max-width: var(--ba-block); margin-left: auto; margin-right: auto; margin-bottom: 30px; text-align: left; } /* Eine Erfolgszeile AUSSERHALB des Zeilenblocks ist eine Statusmarke und traegt die Rubrikfarbe; INNERHALB traegt nur das Zeichen sie. */ html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-success { color: var(--ba-kf) !important; } html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-line.ba-terminal-success { color: #94a3b8 !important; } html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-line { text-align: left !important; font-size: 13px !important; line-height: 1.8; color: #94a3b8 !important; margin: 0; } /* Das Zeichen trägt die Rubrikfarbe, der Text nicht - so bleibt die Zeile lesbar und die Farbe sagt etwas. `$` und `✓` stehen beide in `.ba-prompt`. */ html body .ba-cta-terminal.ba-cta-terminal .ba-prompt, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-prompt, html body .ba-cta-terminal.ba-cta-terminal .prompt { color: var(--ba-kf) !important; font-weight: 700; } html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cmd { color: #94a3b8 !important; font-size: 13px !important; } /* --- Die Kacheln ---------------------------------------------------------- */ html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-stack-grid, html body .ba-cta-terminal.ba-cta-terminal .ba-stack-grid, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-grid { gap: 15px; margin-top: 0; margin-bottom: 30px; } html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-stack-item, html body .ba-cta-terminal.ba-cta-terminal .ba-stack-item, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-item { padding: 20px !important; background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 12px !important; } /* Das Symbol: 24 px = Mehrheit 25 von 41. */ html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-stack-icon, html body .ba-cta-terminal.ba-cta-terminal .ba-stack-icon, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-icon { font-size: 24px !important; line-height: 1; } /* Das Etikett (Rolle) - 10 px Versalien in Hausgrau, Mehrheit 17 von 41. */ html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-stack-name, html body .ba-cta-terminal.ba-cta-terminal .ba-stack-name, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-role { font-size: 10px !important; color: #94a3b8 !important; letter-spacing: .08em; text-transform: uppercase; } /* Der PRODUKTNAME trägt die Rubrikfarbe (George: "ALLE Akzente tragen dieselbe Rubrikfarb-Stufe wie der Hauptknopf"). Vorher: 51 weiss, 50 im dunklen #9333ea, 15 gruen, 4 orange - und das dunkle Violett ist auf dem Kastengrund zu schwach. Kontrast der vier Rubrikfarben auf der Kachel: 6,3:1 bis 10:1. */ html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-stack-rec, html body .ba-cta-terminal.ba-cta-terminal .ba-stack-rec, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-name { font-size: 14px !important; color: var(--ba-kf) !important; font-weight: 700; } html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-num { color: var(--ba-kf) !important; } /* Die ZEILE der Werkzeug-Checkliste: Nummer und Name linksbuendig, die Rolle darunter, der Pfeil rechts (George, 30.09.2026). Vorher stand der Name mittig zwischen Nummer und Etikett, und die Zeile sagte dreimal "Unser Testbericht" statt der Rolle. */ html body .ba-cta-terminal.ba-cta-terminal a.ba-checklist-item { display: flex !important; align-items: center; gap: 14px; text-align: left !important; } html body .ba-cta-terminal.ba-cta-terminal a.ba-checklist-item .ba-checklist-info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left !important; gap: 2px; } html body .ba-cta-terminal.ba-cta-terminal a.ba-checklist-item .ba-checklist-name { text-align: left !important; } /* Die Rolle steht jetzt UNTER dem Namen: 10 px Versalien, keine Sperrung - mit Sperrung bricht "COLD STORAGE" bei 375 px auf zwei Zeilen. */ html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-desc, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-discount { font-size: 13px !important; color: #94a3b8 !important; } html body .ba-cta-terminal.ba-cta-terminal a.ba-checklist-item .ba-checklist-discount { font-size: 10px !important; letter-spacing: normal !important; text-transform: uppercase; text-align: left !important; } /* --- Die PILLE traegt nur den Rabattmechanismus ---------------------------- */ /* George, 30.09.2026. Gemessen standen dort DREI Sorten in SECHS Formen: der Rabattmechanismus (ba-cta-code, 16), ein Spruch (ba-cta-mantra, 8) und eine Frage an den Leser (ba-cta-question, 12, in Lora kursiv auf Gold d4af37 - der Farbe, die am 29.09. aus den Kastenrahmen gefallen ist). Spruch und Frage werden EINE kursive Zitatzeile; die Pille bleibt der Kennung. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-mantra.ba-cta-mantra, html body .ba-cta-terminal.ba-cta-terminal .ba-cta-question.ba-cta-question { display: block; background: none !important; border: 0 !important; border-radius: 0; padding: 0; margin: 0 auto 30px; max-width: var(--ba-block); /* LORA, nicht Inter: Das Haus liefert seine Schriften seit dem 23.09.2026 selbst aus und hat von Inter NUR den aufrechten Schnitt. Ein `font-style: italic` darauf laesst der Browser synthetisch schraeg stellen - bei 15 px grotesk sieht man das nicht, und George sah im Bild keine Kursive. Lora liegt MIT Italic-Schnitt im Haus und ist ohnehin die Zitatschrift (ba-pullquote, ba-quote-text). */ font-family: 'Lora', Georgia, serif !important; font-style: italic !important; font-size: 15px !important; font-weight: 400 !important; color: #94a3b8 !important; text-align: left !important; letter-spacing: normal !important; } /* Der Zeilenumbruch vor dem Knopf addierte 21 px auf die 30 der Zitatzeile. Gemessen: Luecke oben 30, unten 34 - im Bild ungleich. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-mantra + br, html body .ba-cta-terminal.ba-cta-terminal .ba-cta-question + br { display: none; } /* Die Kennungspille selbst stand in drei Formen: 14 und 13 px, mit und ohne Rahmen, dazu eine mit 24 px. Sie traegt jetzt eine. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-code.ba-cta-code, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-code.ba-terminal-code { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 14px !important; font-style: normal !important; color: var(--ba-kf) !important; background: var(--ba-kp) !important; border: 1px dashed var(--ba-kr) !important; border-radius: 10px; padding: 14px 28px; margin: 0 auto 30px; display: inline-block; text-align: center; } /* --- Der Knopf traegt KEINE Sperrung --------------------------------------- */ /* 55 von 101 Knoepfen trugen letter-spacing: 1px aus ihrer Seitenregel, 46 nicht. Bei 14 px Inter laesst 1 px den Text technisch aussehen - im Bild wie eine andere Schrift. Meine Messung vom 30.09. las nur font-family und meldete deshalb "113 Knoepfe Inter 14 px": richtig und an der Sache vorbei. */ html body .ba-cta-terminal.ba-cta-terminal .ba-cta-btn.ba-cta-btn, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cta.ba-terminal-cta, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-btn.ba-terminal-btn, html body .ba-cta-terminal.ba-cta-terminal .ba-cta-secondary.ba-cta-secondary { letter-spacing: normal !important; } html body .ba-cta-terminal.ba-cta-terminal p a, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-desc a { color: var(--ba-kf) !important; } /* --- Abstände ------------------------------------------------------------- */ /* Der Absatz stand in vier Abständen zum Nächsten (30/35/25/24 px). */ /* Der Absatz: Inter und aufrecht. Zwoelf Lifestyle-Kaesten standen in Lora kursiv, zwoelf andere derselben Rubrik nicht - ein Patt innerhalb einer Rubrik, und 98 von 111 tragen Inter. */ html body .ba-cta-terminal.ba-cta-terminal p:not([class]), html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-desc { margin-bottom: 30px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-style: normal !important; max-width: var(--ba-block); } /* Ein hervorgehobenes Wort in der Ueberschrift traegt die Rubrikfarbe, nicht fest Hausorange. */ html body .ba-cta-terminal.ba-cta-terminal .ba-orange-text { color: var(--ba-kf) !important; } html body .ba-cta-terminal.ba-cta-terminal h3 { font-weight: 900; } @media (max-width: 768px) { html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-line, html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-cmd { font-size: 12px !important; } html body .ba-cta-terminal.ba-cta-terminal .ba-terminal-stack-grid, html body .ba-cta-terminal.ba-cta-terminal .ba-stack-grid, html body .ba-cta-terminal.ba-cta-terminal .ba-checklist-grid { gap: 12px; } } /* ═══════════════════════════════════════════════════════════════════ SIGNAL REPORTS: DIE UNTERZEILE STEHT IN MARKENORANGE George, 29.09.2026. "Das Rostbraun bleibt den Links vorbehalten." Gemessen: Signal #01-#04 tragen #f7931a am `.ba-title-sub`, #05-#08 seit dem 15.09.2026 das dunkle #92400e - und zwar alle vier zwischen 10:37:40 und 10:37:45, also in EINEM Sammellauf von fuenf Sekunden. Das war die Kontrast-Runde jenes Tages; sie kannte die Entscheidung vom 20.09.2026 noch nicht ("Markenfarben bleiben, Befund erst unter 1,5:1"). Alle 47 Wissens-Seiten tragen #f7931a. DIE ZAHL GEHOERT DAZU, damit niemand sie fuer einen Fehler haelt: der Rueckbau senkt diese vier Seiten von 7,09:1 auf 2,30:1 (24 px, Gewicht 700, WCAG-Schwelle fuer grosse Schrift 3:1). Das ist bewusst und entspricht dem Rest des Hauses - es ist keine uebersehene Stelle. #92400e bleibt, wo es hingehoert: `.ba-highlight-link` (2 Seiten), `.ba-verdict-neutral` (15) und `.ba-pitfall-alarm p` (7). Auf 3225 traegt es die Unterzeile ebenfalls - das ist die delistete Pocket- Review und KEIN Report, sie bleibt unberuehrt. ═══════════════════════════════════════════════════════════════════ */ html body.parent-pageid-5794 .ba-title-sub { color: #f7931a; } /* ═══════════════════════════════════════════════════════════════════════════ DIE LEISTE - die eine Bruecke des Hauses (George, 30.09.2026) ═══════════════════════════════════════════════════════════════════════════ Sie ist ABGESCHIRMT, nicht nur gestaltet: Eine neue Leiste auf einer Lifestyle-Seite erbte Lora, ein dunkles Grau auf dunklem Grund und eine gestrichelte Unterkante - und stand mobil als schmale Spalte NEBEN dem Knopf, der aus der Leiste herausragte. Im Bestand gibt es auf keiner Lifestyle-Seite eine Leiste; gemessen am 30.09.2026 ueber alle 59, die eine fuehren, streuen ausserdem Text (52x Mono 12, 6x Inter 13, 1x Mono 14) und Knopf (53x Mono 11, 4x Mono 12, 2x mit Sperrung), und zwei brechen mobil nicht um. Jede Eigenschaft, die eine Seitenregel treffen koennte, steht deshalb hier - Schrift, Farbe, Rahmen, Umbruch, Innenabstand, Ausrichtung. */ html body .ba-tool-bridge.ba-tool-bridge { display: flex !important; flex-direction: row; align-items: center; gap: 18px; position: relative; padding: 12px 18px !important; margin: 30px 0 !important; border: 1px solid rgba(247, 147, 26, .2) !important; border-radius: 12px !important; /* Der DUNKLE Verlauf ist die Hausform, 79 von 92 Seitenregeln tragen ihn - und er ist die Voraussetzung dafuer, dass der Text lesbar bleibt: Die Leiste steht im Fliesstext auf WEISSEM Grund, und mein erster Bau hat ihn durch rgba(255,255,255,.02) ersetzt. Der Text blieb #94a3b8 und stand damit auf 2,56:1 statt auf 9,05:1. Gemessen am 30.09.2026 an der gerenderten Leiste, nicht an der Deklaration. */ background: linear-gradient(145deg, #0a0f1a 0%, #0f172a 100%) !important; text-align: left !important; box-shadow: none !important; } html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left !important; } html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-icon { font-size: 24px !important; line-height: 1; flex-shrink: 0; } html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-text { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 12px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.5; color: #94a3b8 !important; letter-spacing: normal !important; text-align: left !important; } /* Die Hervorhebung traegt ein neutrales Hell, nicht die Rubrikfarbe: Die Rubrik steht schon im Rahmen und im Knopf. Gemessen: 46 Seitenregeln fuehren #e2e8f0, 39 das Cyan der Dispatches - auf einer Wissens- oder Praxis-Seite sagt es nichts. */ html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-text strong { color: #e2e8f0 !important; font-weight: 700 !important; } /* Der Knopf folgt der Knopf-Hausform in der SCHRIFT (Inter, keine Sperrung) und dem Leistenmass in der GROESSE (George, 30.09.2026). */ /* Der Knopfselektor traegt die DOPPELTE Klasse und steht damit auf (0,4,2). Gemessen am 30.09.2026: Die staerkste !important-Seitenregel des Bestands ist .ba-monument-v42 .ba-monument-prose .ba-tool-bridge a.ba-tool-bridge-link auf (0,4,1) - sie hat 17 Knoepfe auf #0f172a gehalten und einen auf Gold #d4af37, die Farbe, die am 29.09.2026 gefallen ist. Drei ihrer Geschwister setzen WEISS; auf Hausorange waeren das 2,7:1. */ html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-link.ba-tool-bridge-link { flex-shrink: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; letter-spacing: normal !important; padding: 10px 18px !important; border-radius: 10px !important; border: 0 !important; background: #f7931a !important; color: #0a0f1a !important; text-decoration: none !important; white-space: nowrap; text-align: center !important; } /* Mobil: Text UEBER dem Knopf, beide auf voller Breite - zwei Leisten blieben bei 375 px nebeneinander, und der Knopf ragte aus der Leiste. */ @media (max-width: 768px) { html body .ba-tool-bridge.ba-tool-bridge { flex-direction: column !important; align-items: stretch !important; gap: 14px; padding: 14px 16px !important; } html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-link.ba-tool-bridge-link { width: 100%; box-sizing: border-box; } /* Symbol und Text bleiben auch mobil NEBENEINANDER. Die Seitenregeln stellen den Inhalt bei 768 px auf `column` mit `align-items: center`: Das Symbol steht dann zentriert ueber linksbuendigem Text, und es kostet eine Zeile Hoehe. Gemessen am 30.09.2026 - auf Seiten OHNE eigene Leistenregel (Lifestyle) blieb es `row`, also sahen zwei Leisten derselben Hausform verschieden aus. */ html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-content { flex-direction: row !important; align-items: center !important; text-align: left !important; } } /* Die Farbe folgt der Rubrik des ZIELS, nicht der Quellseite (George): Sie sagt dem Leser, wohin der Klick fuehrt. Eine Leiste auf einen Testbericht traegt Hausorange, weil Select keine eigene Farbe fuehrt. */ /* Die Farbe steht DIREKT je Rubrik, nicht ueber eine CSS-Variable. Gemessen am 30.09.2026: Chromium 90 loest `var()` in einer !important- Kurzform nicht auf. Die Variable stand am Kasten UND am Knopf auf #10b981, und der Knopf blieb orange - auch wenn sie inline am Knopf selbst gesetzt wurde. Eine Farbe, die von einer Browser-Eigenheit abhaengt, ist der falsche Bau; Hausorange bleibt die Vorgabe und braucht keine eigene Regel. */ html body .ba-tool-bridge.ba-ziel-praxis { border-color: rgba(16, 185, 129, .2) !important; } html body .ba-tool-bridge.ba-ziel-praxis .ba-tool-bridge-link.ba-tool-bridge-link { background: #10b981 !important; } html body .ba-tool-bridge.ba-ziel-lifestyle { border-color: rgba(196, 181, 253, .2) !important; } html body .ba-tool-bridge.ba-ziel-lifestyle .ba-tool-bridge-link.ba-tool-bridge-link { background: #c4b5fd !important; } html body .ba-tool-bridge.ba-ziel-operations { border-color: rgba(20, 184, 166, .2) !important; } html body .ba-tool-bridge.ba-ziel-operations .ba-tool-bridge-link.ba-tool-bridge-link { background: #14b8a6 !important; } /* DER HOVER DER LEISTE - George, 01.10.2026, dieselbe Stufe wie am Kasten. Die Farbe steht DIREKT je Rubrik und nicht ueber eine Variable; der Grund steht im Block darueber und ist gemessen (Chromium 90 loest `var()` in einer !important-Kurzform hier nicht auf). BEWEGUNG UND SCHATTEN KOMMEN MIT, weil sie bisher aus den SEITENregeln kamen: Die trugen `transform: scale(1.02)`. Sie fallen in diesem Durchgang, also braucht die Hausform beides selbst - sonst verliert die Leiste ihre Rueckmeldung. Genommen ist die Bewegung des Kastens (anheben um 2 px), damit Leiste und Abschlusskasten EINE Form haben statt zweier. */ html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-link.ba-tool-bridge-link { transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; } html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-link.ba-tool-bridge-link:hover, html body .ba-tool-bridge.ba-tool-bridge .ba-tool-bridge-link.ba-tool-bridge-link:focus-visible { background: #f8a138 !important; transform: translateY(-2px); box-shadow: 0 10px 24px -10px #f7931a; } html body .ba-tool-bridge.ba-ziel-praxis .ba-tool-bridge-link.ba-tool-bridge-link:hover, html body .ba-tool-bridge.ba-ziel-praxis .ba-tool-bridge-link.ba-tool-bridge-link:focus-visible { background: #12d595 !important; box-shadow: 0 10px 24px -10px #10b981; } html body .ba-tool-bridge.ba-ziel-lifestyle .ba-tool-bridge-link.ba-tool-bridge-link:hover, html body .ba-tool-bridge.ba-ziel-lifestyle .ba-tool-bridge-link.ba-tool-bridge-link:focus-visible { background: #dcd3fe !important; box-shadow: 0 10px 24px -10px #c4b5fd; } html body .ba-tool-bridge.ba-ziel-operations .ba-tool-bridge-link.ba-tool-bridge-link:hover, html body .ba-tool-bridge.ba-ziel-operations .ba-tool-bridge-link.ba-tool-bridge-link:focus-visible { background: #17d4bf !important; box-shadow: 0 10px 24px -10px #14b8a6; } /* VORTEILS-KASTEN (ba-benefit-box) - HAUSFORM, 30.09.2026 17 Stellen auf 12 Seiten, alle in Select, also Rubrikfarbe Hausorange. GEMESSEN: 200 Seitenregeln auf 15 Seiten (drei davon - 3209, 3225, 3231 - ohne Markup, also tote Reste), staerkste Spezifitaet (0,3,0) und NULL `!important`. Eine globale Regel bei (0,2,2) genuegt damit ohne `!important`; nur die Hover-Regel `.ba-benefit-box.ba-float-hover:hover` steht auf (0,3,0) und bleibt unberuehrt. ZWEI ROLLEN, NICHT EINE: Auf den elf Reviews ist die Box ein eigenstaendiger Kasten im Fliesstext auf dunklem Grund. Auf dem Hub 2949 sitzt sie IN einer hellen Produktkarte (`ba-product-card`, Verlauf rgb(255,251,242)) und ist dort eine Rabattzeile, kein Kasten - eine dunkle Kastenform waere dort ein Fremdkoerper. Deshalb gilt die Kastenform NUR ausserhalb von 2949. */ html body .ba-benefit-box.ba-benefit-box { border: 1px solid rgba(247, 147, 26, .4); border-radius: 24px; background: linear-gradient(145deg, #0a0f1a 0%, #0f172a 100%); } @media (max-width: 768px) { html body .ba-benefit-box.ba-benefit-box { border-radius: 20px; } } /* Der Rahmen stand auf 2 px volldeckend. Bei 40 Prozent ist die Rubrikfarbe noch zu erkennen und der Kasten schreit nicht - dieselbe Entscheidung wie beim Abschlusskasten am 29.09.2026. */ /* DER HUB 2949: die Rabattzeile traegt die RUBRIKFARBE, nicht Gruen. Gemessen: Grund hellgruen (240,253,244 -> 236,253,245), Rahmen und Etikett gruen. Gruen heisst im Haus "verifiziert/souveraen" - an einer Rabattzeile signalisiert es etwas, das sie nicht ist. Und das Etikett stand bei 10 px und Gewicht 700 auf 3,15:1, also unter der Schwelle von 4,5. */ html body.page-id-2949 .ba-benefit-box.ba-benefit-box { border: 1px solid rgba(247, 147, 26, .35); border-radius: 12px; background: linear-gradient(145deg, #fffbf2 0%, #fff7e8 100%); } html body.page-id-2949 .ba-benefit-box.ba-benefit-box .ba-benefit-label { color: #8a4a00; } html body.page-id-2949 .ba-benefit-box.ba-benefit-box .ba-benefit-text, html body.page-id-2949 .ba-benefit-box.ba-benefit-box .ba-benefit-code { color: #6b4a1a; } html body.page-id-2949 .ba-benefit-box.ba-benefit-box .ba-benefit-code code { background: rgba(247, 147, 26, .12); color: #8a4a00; } /* DIE NEGATIVBOXEN (5143 Ledger, 5780 ShopinBit) tragen ein NEUTRALES Etikett. Nach dem Bau vom 30.09.2026 fuehren die sieben Rabattboxen gar kein Etikett mehr; von den drei verbliebenen nennt 3222 einen Gegenstand ("Offizielles Trezor-Zubehoer") und traegt zu Recht die Rubrikfarbe. Die beiden anderen sagen, dass es KEIN Angebot gibt - in der Farbe und mit dem Grund der Rabattmarke widerspricht sich die Box selbst. Und das Amber auf 5143 ist derselbe Fall, der am 25.09.2026 am Disclaimer entschieden wurde: eine Farbe mit Sonderbedeutung auf einer von siebzehn Stellen kann niemand lesen. */ html body.page-id-5143 .ba-benefit-box.ba-benefit-box .ba-benefit-label, html body.page-id-5780 .ba-benefit-box.ba-benefit-box .ba-benefit-label { color: #94a3b8; background: rgba(148, 163, 184, .12); } /* Das Label des Codekastens stand auf 5143 bei 9 px in #64748b und damit auf 3,3:1 - der Wert gilt auf WEISSEM Grund (4,76), nicht auf dem dunklen Verlauf. Gemessen, nicht geschaetzt. */ html body.page-id-5143 .ba-benefit-box.ba-benefit-box .ba-benefit-code-label { color: #94a3b8; font-size: 10px; } /* ═══════════════════════════════════════════════════════════════════ DER KNOPF OBEN IM TESTBERICHT — George, 01.10.2026 Der Weg zum Anbieter steht nicht nur am Seitenende, sondern auch in der Vorteil-Box (bzw. auf 4995 im Kurzurteil). Dasselbe Ziel wie der Abschlussknopf, dieselbe Hausform: Inter 14 px, Polsterung 16/32, Radius 12, Hausorange (Select), dunkle Schrift (#0a0f1a, 7,6:1). Am Rechner so breit wie sein Text, am Telefon volle Breite. !important steht an Grund, Farbe, Rahmen und Unterstreichung aus demselben Grund wie am Abschlussknopf: Seitenregeln auf `a` und `a:hover` tragen selbst eins. */ html body .ba-benefit-weg { flex: 0 0 auto; text-align: left; } html body .ba-monument-v42 a.ba-anbieter-knopf.ba-anbieter-knopf, html body a.ba-anbieter-knopf.ba-anbieter-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: normal !important; white-space: nowrap; background: #f7931a !important; background-image: none !important; color: #0a0f1a !important; border: 1px solid #f7931a !important; border-radius: 12px; padding: 16px 32px; text-decoration: none !important; box-shadow: none; -webkit-hyphens: manual; hyphens: manual; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } html body .ba-monument-v42 a.ba-anbieter-knopf.ba-anbieter-knopf:hover, html body a.ba-anbieter-knopf.ba-anbieter-knopf:hover { background: #f8a138 !important; border-color: #f8a138 !important; color: #0a0f1a !important; transform: translateY(-2px); box-shadow: 0 10px 24px -10px #f7931a; } /* Die Kennzeichnung unter dem Knopf: #94a3b8 auf dem dunklen Grund der Box (6,96:1); #64748b laege dort bei 3,75:1. */ html body .ba-benefit-weg .ba-benefit-hinweis { margin: 10px 0 0; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; color: #94a3b8; } html body .ba-anbieter-fakt { margin-top: 22px; } /* Der letzte Absatz der Box traegt keinen Aussenabstand nach unten. Die Seitenregel setzt 0, Astras `.entry-content p` (0,1,1) setzt 1,6 em und gewinnt - gemessen 22,4 px, die am Telefon als Luecke zwischen Text und Code-Kasten stehen. */ html body .ba-benefit-box .ba-benefit-content > p:last-child { margin-bottom: 0; } @media (max-width: 768px) { html body .ba-benefit-weg { width: 100%; text-align: center; } html body .ba-monument-v42 a.ba-anbieter-knopf.ba-anbieter-knopf, html body a.ba-anbieter-knopf.ba-anbieter-knopf { display: flex; width: 100%; box-sizing: border-box; padding: 15px 20px; white-space: normal; } } /* KORREKTURHINWEIS an datierten Formaten (George, 01.10.2026, CLAUDE.md 4a): eine Zeile am Seitenende, unmittelbar vor der Signatur. Zurueckhaltend, aber lesbar: Slate auf Weiss 4,76 zu 1. */ html body .ba-korrektur { max-width: 680px; margin: 60px auto 0; padding: 0 20px; text-align: center; font-size: 13px; line-height: 1.6; color: #64748b; } html body .ba-korrektur strong { color: #0f172a; font-weight: 700; } /* Autorenkarte: der Name verlinkt auf Ueber uns (George, Z9-1, 01.10.2026). Ohne Unterstreichung, Farbe vom Namen; sichtbar wird der Link beim Zeigen und beim Tastaturfokus. Kein Hover am Kasten: ein Link IM Kasten macht den Kasten nicht anklickbar. html body vorn, damit die Seitenregeln fuer Links im Artikel nicht gewinnen. */ html body .ba-investigator-card a.ba-investigator-link { display: inline-block; color: inherit; text-decoration: none; border-bottom: 0; } /* Der Name ist display: block - eine Unterstreichung am Link reicht nicht hinein. Sie sitzt deshalb am Namen selbst; inline-block haelt die Klickflaeche so breit wie den Namen (vorher 974 px bei 1280). */ html body .ba-investigator-card a.ba-investigator-link:hover .ba-investigator-name, html body .ba-investigator-card a.ba-investigator-link:focus-visible .ba-investigator-name { /* !important, weil die Seitenregeln .ba-monument-v42 a und a:visited die Unterstreichung selbst mit !important abschalten (gemessen 01.10.2026). */ text-decoration: underline !important; text-underline-offset: 3px; } /* ══ BitAtlas Mobilmenue ══ Ein Ort fuer alles, was das Telefonmenue betrifft. Gebaut 20.09.2026. Die Formen sind BESTANDSFORMEN, nicht neu erfunden: Kante 1px solid var(--ba-border) 144 von 156 Seiten Schatten 0 8px 24px rgba(0,0,0,.1) 114 Seiten (dort mit Ring) Die Spezifitaetsketten sind gemessen, nicht geraten: .ast-theme-transparent-header #masthead (1,1,0) <- Astras Positionsregel html body.ast-theme-transparent-header #masthead (1,1,2) gewinnt. html body #masthead allein waere (1,0,2) und WUERDE VERLIEREN - b zaehlt vor c. */ @media (max-width: 1000px) { /* 1 ── Der Kopf bleibt erreichbar. Vorher: position:absolute. Bei scrollY=600 lag der Burger bei y=-572; auf einer 10.175 px hohen Seite gab es nach dem ersten Wisch keine Navigation mehr. fixed statt sticky, weil sticky Platz im Fluss beansprucht und den Inhalt um 101 px nach unten schoebe - der Kopf liegt hier bewusst UEBER dem Seitenanfang. */ html body #masthead, html body.ast-theme-transparent-header #masthead { position: fixed; top: 0; left: 0; right: 0; } /* Gescrollt: deckend und mit Kante. Ohne das scheint der Inhalt durch den zu 80 % transparenten Kopf. Gegen #masthead{background:...!important} (1,0,0 !important) braucht es beides: !important UND (1,1,2). */ html body #masthead.ba-kopf-fest { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body #masthead.ba-kopf-fest .ast-primary-header-bar { border-bottom: 1px solid var(--ba-border, #e2e8f0); } /* 1b ── Bei OFFENEM MENUE ist der Kopf immer deckend, egal wo man steht. Gefunden am 23.09.2026 von George am Telefon: "manchmal milchig, manchmal nicht". Die Ursache ist die Scrollsperre, nicht der Weichzeichner. `baScrollSperre.an()` setzt body auf `position: fixed` mit negativem top - damit faellt window.scrollY auf 0, der Scroll-Horcher rechnet `fest` als falsch und NIMMT `ba-kopf-fest` WIEDER WEG. Der Kopf verliert seine Deckung, und der Inhalt dahinter - der ja nur verschoben, nicht weg ist - scheint durch. Ganz oben faellt es nicht auf, weil dort nichts dahinter steht; genau daher das "manchmal". Die Abhilfe haengt am Menue statt am Scrollstand: Bei offenem Menue sieht der Kopf immer gleich aus. Spezifitaet (1,1,2) plus Vorrangmarke, wie bei `ba-kopf-fest` - gegen die Hintergrundregel am Kopf aus der Customizer-CSS braucht es beides. */ html body.ba-menue-auf #masthead { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.ba-menue-auf #masthead .ast-primary-header-bar { border-bottom: 1px solid var(--ba-border, #e2e8f0); } /* 2 ── Der Kopf schrumpft beim Scrollen. 101 px sind im Querformat 27 % des Schirms. Gemessen setzt sich die Hoehe zusammen aus 10 px Polsterung + 80 px min-height + 10 px. Der Burger ist 45 px hoch, die Wortmarke 28 - in 56 px passt beides. KEINE Groessen-Transition: das Menue rechnet mit --ba-kopf-h, und ein Wert waehrend einer laufenden Transition ist keiner. */ html body #masthead.ba-kopf-fest .ast-primary-header-bar { min-height: 56px; } html body #masthead.ba-kopf-fest { padding-top: 4px; padding-bottom: 4px; } html body #masthead.ba-kopf-fest .site-branding { padding-top: 6px; padding-bottom: 6px; } /* 3 ── Das offene Menue bekommt eine Kante und einen Grund. Vorher endete es unsichtbar: weisser Grund auf weissem Inhalt, keine Unterkante, kein Schatten. Sichtbar war die Grenze nur an der mitten durchgeschnittenen Textzeile darunter. */ html body .ast-mobile-header-content { background: #fff; border-bottom: 1px solid var(--ba-border, #e2e8f0); /* Der negative Spread ist keine neue Form, sondern die Hausform an einem Element, dessen Oberkante unter einem anderen klebt. Ein box-shadow ohne inset umgibt das GANZE Element: bei 0 8px 24px reicht er ueber die Oberkante hinaus um blur/2 - offsetY = 12 - 8 = 4 px. Diese 4 px lagen IM Kopf, dessen Grund zu 80 % durchsichtig ist - George hat sie als Balken gesehen, gemessen am Pixel bei y=86..89. Mit -6 endet der Schatten 2 px innerhalb der Oberkante und wirft nur noch nach unten (12 - 6 + 8 = 14 px). */ box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .1); /* 4 ── und es ist scrollbar. Das ist ZWINGEND, nicht schmueckend: Sobald der Kopf fix ist, scrollt das Menue nicht mehr mit dem Dokument. Ohne max-height waeren im Querformat Lifestyle, Tools und Logbuch UNERREICHBAR - vorher kam man wenigstens durch Scrollen der Seite hin. Gemessen: das Menue ist 405 px hoch, ein Querformat-Schirm 375. Die Leiste wegzunehmen reicht deshalb nicht. */ max-height: calc(100vh - var(--ba-kopf-h, 90px) - var(--ba-leiste-h, 0px)); /* DIESELBE GROESSE IN DYNAMISCHER FASSUNG, und die Reihenfolge ist der Rueckfall: `vh` bemisst sich am Layout-Viewport, also dem OHNE Adresszeile - auf Chrome Android ist das Menue damit hoeher als der sichtbare Bereich und scrollt, auch wenn es hineinpasst. `dvh` folgt dem sichtbaren Bereich. Browser, die es nicht kennen, ueberlesen die Zeile und behalten die darueber. Gemessen am Such-Overlay, wo derselbe Mechanismus einen mitlaufenden Scrollbalken erzeugt hat. */ max-height: calc(100dvh - var(--ba-kopf-h, 90px) - var(--ba-leiste-h, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* 4b ── Die Andeutung, dass es weitergeht. Im Querformat sind fuenf der neun Punkte sichtbar und vier hinter dem Scrollrand - ohne Hinweis sieht das aus wie ein Menue mit fuenf Punkten. Der Verlauf erfindet nichts: Er geht von durchsichtig auf denselben Grund, den das Menue ohnehin hat. Die Klasse setzt das Skript und nimmt sie zurueck, sobald zu Ende gescrollt ist. sticky + negativer Aussenabstand: so klebt der Streifen am unteren Sichtrand, ohne Platz im Fluss zu beanspruchen. */ html body .ast-mobile-header-content::after { content: ''; display: block; position: sticky; bottom: 0; height: 24px; margin-top: -24px; pointer-events: none; opacity: 0; transition: opacity .18s linear; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); } html body .ast-mobile-header-content.ba-mehr::after { opacity: 1; } /* 5 ── Bei offenem Menue ueber den Schatten der Fussleiste. .ba-sovereignty-bar traegt z-index 99999 und box-shadow 0 -8px 48px rgba(0,0,0,.6) - der Schatten reicht rund 60 px darueber hinaus und verdunkelte die untersten Menuepunkte. 100000 liegt darueber und unter dem Tooltip der Leiste (100001). */ html body.ba-menue-auf #masthead { z-index: 100000; } /* 6 ── Lupe und Burger als Gruppe rechts. Die Anordnung heute ist kein Entwurf, sondern ein Rest: Astras Header-Builder legt die Suche in den LINKEN Bereich neben die Wortmarke, und `.ast-header-search { margin-left: 25px !important }` aus der Customizer-CSS - ausweislich ihres Kommentars fuer den Abstand zum letzten Desktop-Menuepunkt gedacht und ohne Media Query - schiebt sie dort weiter nach rechts. Gemessen bei 375 px: 45 px vom Titel, 103 px vom Burger. Die Grid-Zeile traegt zwei Spalten (229 px / 86 px bei 375). Mit 1fr auto nimmt der rechte Bereich nur, was der Burger braucht; die Suche wandert mit margin-left:auto an das Ende des linken. Zwischen beiden bleibt der vorhandene Spaltenabstand von 20 px - kein neuer Wert. */ html body #ast-mobile-header .ast-builder-grid-row { grid-template-columns: 1fr auto; } html body #ast-mobile-header .ast-header-search { margin-left: auto !important; margin-right: 0 !important; } /* Das Dokument haelt still, solange das Menue offen ist. Als Klasse, nicht als Inline-Stil: das Such-Overlay setzt body.style.overflow selbst, und zwei Inline-Schreiber auf derselben Eigenschaft ueberschreiben einander. */ /* Hier stand eine Regel, die den Ueberlauf am body verbarg. Sie hat nie gewirkt: Es scrollt das Wurzelelement, und dessen Ueberlauf steht auf `auto`, also propagiert der Wert vom body nicht ans Fenster. Am 22.09.2026 gemessen - die Seite scrollte mit offenem Menue von 900 auf 1600 px. Gesperrt wird jetzt in JavaScript ueber baScrollSperre, zusammen mit der Suche. */ /* 7 ── Kein zweites Logo, solange der mobile Kopf laeuft. Impressum und Datenschutz sind eigenstaendig gebaut und tragen einen eigenen Wortmarken-Platzhalter. Solange Astras Kopf die Wortmarke selbst zeigt, waeren es zwei. Die Customizer-CSS blendete ihn bisher unter 850 px aus - zwischen 851 und dem Kopf-Breakpoint standen beide nebeneinander, im Bild bei 880 px belegt. Die Grenze ist jetzt dieselbe wie oben. */ html body .ba-nav-placeholder { display: none; } /* 8 ── Die Lupe im mobilen Kopf traegt die Hausfarbe. Stand bisher in einer eigenen Query auf 921 - eine dritte Zahl fuer dieselbe Sache. */ html body .ast-mobile-header-wrap .ast-header-search .ast-icon svg { fill: #f7931a; width: 18px; height: 18px; } } /* ══ Der Desktop-Kopf zwischen dem Breakpoint und 1180 px ══ Gemessen am 20.09.2026: Zwischen 922 und 1140 px reicht die Breite fuer neun Menuepunkte plus Wortmarke nicht. Das Grid gibt der Navigation den Platz und quetscht die Wortmarke - bei 922 px war sie 19 px breit und 217 px hoch, also ein Buchstabe je Zeile, und das zweizeilige Menue lief ueber das Badge. Zwei Eingriffe, beide gemessen: nowrap allein -> Kopf 274 auf 181 px, Menue bleibt zweizeilig nowrap + engere Punkte -> ab 990 px einzeilig, Kopf 101 px, kein Ueberlauf Darunter traegt der mobile Kopf, deshalb steht der Breakpoint auf 1000. */ /* AM RECHNER IST DIE KOPF-UNSCHAERFE UNSICHTBAR - und dort kostet sie nur. Der Kopf ist oberhalb der Grenze `position: absolute`: Oben steht nichts hinter ihm, und gescrollt ist er aus dem Bild (gemessen bei scrollY 1400: top=-1400). Ein Verlauf, der nichts hinter sich hat, hat nichts zu verwischen. Der Bildvergleich mit und ohne ergab am 22.09.2026 bei 1280x110 px genau 45 abweichende Pixel, RMSE 0,00004 - also nichts. Unterhalb der Grenze bleibt sie: Dort ist der Kopf fix, der Inhalt laeuft tatsaechlich dahinter durch, und beim Scrollen nimmt ihn die Regel zu `ba-kopf-fest` ohnehin heraus. Die Grenze steht als Platzhalter, nicht als Zahl. Vier Zahlen fuer diese eine Grenze haben am 20.09.2026 zwei Fehler zwischen sich versteckt; eine fuenfte in der Customizer-CSS waere dieselbe Wette noch einmal. Gegen die Regel aus der Customizer-CSS (1,0,0 mit Vorrangmarke) braucht es beides: die Vorrangmarke UND die hoehere Spezifitaet (1,0,2) - dieselbe Bauform wie bei der Mobilregel darueber. */ @media (min-width: 1001px) { html body #masthead { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (min-width: 1001px) and (max-width: 1180px) { html body #ast-desktop-header .site-title, html body #ast-desktop-header .site-title a { white-space: nowrap; } html body #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 10px; padding-right: 10px; font-size: 14px; } html body #ast-desktop-header .ast-header-search { margin-left: 10px !important; } }