/* ========================================================================== 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', 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', 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', 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', 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; } /* FINDER BUTTON RETTUNG (WICHTIG!) */ #ba-finder-container { min-height: 100px !important; height: auto !important; overflow: visible !important; display: block !important; padding: 40px 20px !important; } .ba-finder-step { height: auto !important; overflow: visible !important; } .ba-finder-actions { display: flex !important; flex-direction: column !important; gap: 15px !important; margin-top: 40px !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 999 !important; padding-bottom: 50px !important; height: auto !important; min-height: 150px !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; } /* RESULT PAGE SICHTBARKEIT */ #ba-result-page { display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } #res-link.ba-btn-primary, #ba-result-page .ba-btn-primary, #ba-result-page a[href*="21bitcoin"] { display: block !important; visibility: visible !important; opacity: 1 !important; background-color: #f7931a !important; color: #ffffff !important; width: 100% !important; padding: 22px !important; font-weight: 900 !important; text-align: center !important; position: relative !important; z-index: 9999 !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; } .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: 320px !important; /* Etwas mehr Platz für die Achsen */ 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; /* Schneidet Überhänge des Canvas radikal ab */ } /* 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', 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', 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. Globaler Transition-Schutz: Verhindert, dass Elemente beim Laden der Seite von 0 auf 100 "hüpfen" oder animieren */ body:not(.loaded) * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; 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; } /* --- BITATLAS TOOLS HEADER BRANDING (ALWAYS ORANGE) --- */ /* 1. Grundzustand, Hover und Klick-Zustand auf Orange zwingen */ .main-navigation .ba-menu-tools a, .main-navigation .ba-menu-tools a:hover, .main-navigation .ba-menu-tools a:active, .main-navigation .ba-menu-tools a:focus { color: var(--ba-orange) !important; font-weight: 800 !important; transition: 0.3s ease; } /* 2. Optional: Ein dezenter Glow-Effekt beim Hover für den WOW-Faktor */ .main-navigation .ba-menu-tools a:hover { text-shadow: 0 0 12px rgba(247, 147, 26, 0.5); opacity: 0.9; /* Minimaler visueller Unterschied beim Hover */ } /* ========================================================================== 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', sans-serif !important; } /* Konsistenz: Tools dauerhaft in Orange */ #ba-master-footer .ba-footer-nav a.ba-footer-tools { color: #f7931a !important; font-weight: 800 !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. BRANDING: "Tools" dauerhaft Orange */ #ba-master-footer .ba-footer-nav a.ba-footer-tools { color: #f7931a !important; font-weight: 800 !important; } /* 6. HOVER-EFFEKTE FÜR ALLE ANDEREN LINKS */ #ba-master-footer .ba-footer-nav a:not(.ba-footer-tools):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; } .ba-float-hover:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12); border-color: var(--ba-orange) !important; } .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-signal-ticker-wrapper, .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-signal-ticker-wrapper + .ba-badge-standalone, .ba-signal-ticker-wrapper + .ba-audit-badge-standalone, .ba-signal-ticker-wrapper + .ba-logbuch-badge-standalone, .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-signal-ticker-wrapper, .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; font-size: 11px !important; /* Kleinerer Font für lange Pfade */ 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', 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); } .ba-data-card:hover { border-color: var(--ba-orange); transform: translateY(-2px); } /* 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%); } /* ═══════════════════════════════════════════════════════════════════════════ 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, 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 Statuspunkt in der Pfadzeile. Er ersetzt die Pille, die eine ganze Zeile kostete, und behaelt ihre einzige Auskunft: dass die Seite geprueft ist. */ 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; } html body .ba-pfad-status .ba-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; flex: 0 0 auto; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); } /* 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: #ef4444 !important; /* Dispatches - die Rubrikfarbe (George, 22.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-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; } html body .ba-pfad-status .ba-pfad-status-text { display: none; } html body .ba-pfad-status { margin-right: 10px; } /* 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; } 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; } html body a.ba-wl-karte:hover { border-color: rgba(247, 147, 26, 0.55); background: #fff; } 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; } /* ══ 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); } /* 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; } }