/* ============================================================================ FILE: 00-debug.css ROLE: Entwicklungs-/Debug-Overlay & Visualisierung (Outline, Z-Index, Raster, Viewport Info) ACTIVATION (Console Examples): document.body.classList.add('debug-layout'); // Layout Konturen document.body.classList.add('debug-components'); // Komponenten Konturen document.body.classList.add('debug-all'); // Alles + Performance Verlangsamung document.body.classList.remove('debug-*'); // Entfernen (Wildcard manuell ersetzen) COLOR LEGEND (0.5px @ 25% Alpha unless stated): Parallax-Pairs: Green (rgba(0,255,0,.25)) Sections: Yellow (rgba(255,235,59,.25)) + Hairline bottom Containers: Green (same as pairs) Stage: Blue (rgba(0,0,255,.25)) Scroll-Sections: Yellow Content Boxes: Magenta (rgba(255,0,255,.25)) Bottle Items: Cyan (rgba(0,255,255,.25)) Overlays: Orange (rgba(255,165,0,.25)) Focus (A11y): Red (rgba(255,0,0,.25)) offset 2px PERFORMANCE MODE: In debug-all werden Anim / Transitions verlangsamt. ============================================================================ */ /* ===== BASELINE DEV OUTLINES (A - immer leicht sichtbar) ===== Deaktivierbar via body.no-baseline-debug Sehr dezente Linien für Kern-Container. Debug ist jetzt aktiv, wenn die Datei geladen wird. Falls du Debug global deaktivieren willst, füge hinzu. (Für die sehr feinen Baseline-Linien gibt es weiterhin body.no-baseline-debug) */ /* Baseline Header/Navi Outlines deaktiviert (vorher feines Türkis) */ body:not(.no-baseline-debug) #top-header, body:not(.no-baseline-debug) .header-left, body:not(.no-baseline-debug) #left-nav { outline: none; /* entfernt störende grüne/türkise Linien */ } /* ===== GLOBALE DEBUG-AKTIVIERUNG (s. Kopf-Kommentar) ===== */ /* ===== LAYOUT DEBUG ===== */ /* Parallax Pair Grenzen - aktiv, es sei denn body.no-debug ist gesetzt */ body:not(.no-debug):not(.no-baseline-debug) [class^="parallax-pair-"], body:not(.no-debug) [class^="parallax-pair-"] { outline: 0.5px solid rgba(0,255,0,.25) !important; /* 25% Green */ outline-offset: -1px !important; position: relative !important; } /* Pair-Namen anzeigen */ body:not(.no-debug) [class^="parallax-pair-"]::before { content: attr(data-pair) !important; position: absolute !important; left: 10px; top: 10px; padding: 4px 8px; font-family: monospace; font-size: 12px; background: rgba(0,0,0,.8) !important; color: white !important; z-index: 9999 !important; border-radius: 4px !important; } /* Container Debug - Zeige Grenzen */ body:not(.no-debug) .bottles-container, body:not(.no-debug) .ice-glas-container { outline: 0.5px solid rgba(0,255,0,.25) !important; outline-offset: -1px !important; } /* Section Outlines (einheitlich 25% Gelb) */ /* For sections we no longer draw a full outline — keep only the bottom hairline. Maintain position:relative for the ::after hairline to work. */ /* Consolidated: apply when either baseline-debug is enabled or full debug is enabled (equivalent to the previous comma-separated selectors). */ body:is(:not(.no-baseline-debug), :not(.no-debug)) .page-section { outline: none !important; outline-offset: 0 !important; position: relative !important; /* für Hairline ::after */ } /* Scroll Sections Debug (vereinheitlicht 25%) */ body:not(.no-debug) [data-scroll-sections] { outline: 0.5px solid rgba(255,255,0,.25) !important; outline-offset: -1px !important; } /* Stage Debug (25% Blau) */ body:not(.no-debug) [data-parallax-stage] { outline: 0.5px solid rgba(0,0,255,.25) !important; outline-offset: -1px !important; } /* ===== COMPONENTS DEBUG ===== */ /* Debug Modus für Content Boxen (standardmäßig aktiv) */ body:not(.no-debug) .bottle-content-box, body:not(.no-debug) .bottle-ice-selection-box { position: relative !important; transform: none !important; opacity: 1 !important; z-index: 5 !important; outline: 0.5px solid rgba(255,0,255,.25) !important; } /* Bottle Items Debug */ body:not(.no-debug) .bottle-item { outline: 0.5px solid rgba(0,255,255,.25) !important; outline-offset: -1px !important; } /* Overlay Debug */ body:not(.no-debug) .bottles-top-overlay { outline: 0.5px solid rgba(255,165,0,.25) !important; outline-offset: -1px !important; } /* ===== LIGHT DEBUG (OPTIONAL) ===== */ /* Kleine Hilfsregeln — aktiv, solange body.no-debug nicht gesetzt ist */ body:not(.no-debug) .header-left { outline: .5px solid red !important; } body:not(.no-debug) .hamburger-menu { outline: .5px solid white !important; } body:not(.no-debug) .hamburger-menu span { outline: .5px solid yellow !important; } /* ===== HEADER & NAVIGATION DEBUG ===== */ /* Header Container Debug (bewusst deaktiviert) */ body:not(.no-debug) #top-header { outline: none !important; } /* Header Left Group Debug */ body:not(.no-debug) .header-left { outline: none !important; } /* Header Left Label */ body:not(.no-debug) .header-left::before { content: "HEADER-LEFT" !important; position: absolute !important; left: 5px; top: 120px; padding: 4px 8px; font-family: monospace; font-weight: bold; font-size: 12px; background: #ff0000 !important; color: white !important; z-index: 9999 !important; border-radius: 4px !important; } /* Hamburger Menu Debug */ body:not(.no-debug) .hamburger-menu { outline: none !important; } /* Hamburger Label */ body:not(.no-debug) .hamburger-menu::before { content: "HAMBURGER" !important; position: absolute !important; left: 5px; top: 40px; padding: 2px 6px; font-family: monospace; font-weight: bold; font-size: 10px; background: #ffffff !important; color: black !important; z-index: 9999 !important; border-radius: 2px !important; } /* Hamburger Spans Debug */ body:not(.no-debug) .hamburger-menu span { outline: none !important; } /* Navigation Debug */ body:not(.no-debug) #left-nav { outline: none !important; } /* ===== GRID OVERLAY DEBUG (optional Raster) ===== */ body:not(.no-debug):after { content: ''; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; /* Grid + Vertical layout guides (center + container edges) + 25vh horizontal marker */ background-image: /* grid horizontal */ linear-gradient(rgba(255,0,0,.06) 1px, transparent 1px), /* grid vertical */ linear-gradient(90deg, rgba(255,0,0,.06) 1px, transparent 1px), /* centerline */ linear-gradient(to bottom, rgba(0,200,0,.33) 0%, rgba(0,200,0,.33) 100%), /* 2560px container edges (left) */ linear-gradient(to bottom, rgba(150,100,200,.33) 0%, rgba(150,100,200,.33) 100%), /* 2560px container edges (right) */ linear-gradient(to bottom, rgba(150,100,200,.33) 0%, rgba(150,100,200,.33) 100%), /* 768px container edges (left) */ linear-gradient(to bottom, rgba(255,165,0,.33) 0%, rgba(255,165,0,.33) 100%), /* 768px container edges (right) */ linear-gradient(to bottom, rgba(255,165,0,.33) 0%, rgba(255,165,0,.33) 100%), /* 1024px container edges (left) */ linear-gradient(to bottom, rgba(100,150,255,.33) 0%, rgba(100,150,255,.33) 100%), /* 1024px container edges (right) */ linear-gradient(to bottom, rgba(100,150,255,.33) 0%, rgba(100,150,255,.33) 100%), /* 1200px container edges (left) */ linear-gradient(to bottom, rgba(0,150,255,.33) 0%, rgba(0,150,255,.33) 100%), /* 1200px container edges (right) */ linear-gradient(to bottom, rgba(0,150,255,.33) 0%, rgba(0,150,255,.33) 100%), /* 1280px container edges (left) */ linear-gradient(to bottom, rgba(255,0,200,.33) 0%, rgba(255,0,200,.33) 100%), /* 1280px container edges (right) */ linear-gradient(to bottom, rgba(255,0,200,.33) 0%, rgba(255,0,200,.33) 100%), /* 1440px container edges (left) */ linear-gradient(to bottom, rgba(200,200,0,.33) 0%, rgba(200,200,0,.33) 100%), /* 1440px container edges (right) */ linear-gradient(to bottom, rgba(200,200,0,.33) 0%, rgba(200,200,0,.33) 100%), /* 1920px container edges (left) */ linear-gradient(to bottom, rgba(0,200,100,.33) 0%, rgba(0,200,100,.33) 100%), /* Distanzen */ /* 1920px container edges (right) */ linear-gradient(to bottom, rgba(0,200,100,.33) 0%, rgba(0,200,100,.33) 100%), /* 25vh horizontal marker */ linear-gradient(to right, rgba(255,0,0,.33) 0%, rgba(255,0,0,.33) 100%), /* 33vh horizontal marker (white 20%) */ linear-gradient(to right, rgba(255,255,255,.33) 0%, rgba(255,255,255,.33) 100%), /* 50vh horizontal marker (green, matches centerline color) */ linear-gradient(to right, rgba(0,200,0,.33) 0%, rgba(0,200,0,.33) 100%), /* 66vh horizontal marker (white 20%) */ linear-gradient(to right, rgba(255,255,255,.33) 0%, rgba(255,255,255,.33) 100%), /* 75vh horizontal marker */ linear-gradient(to right, rgba(255,0,0,.33) 0%, rgba(255,0,0,.33) 100%); /* Positions for each background layer above (order-sensitive) 1: grid horizontal, 2: grid vertical 3: centerline 4/5: 2560px left/right (half 1280px) 6/7: 768px left/right (half 384px) 8/9: 1024px left/right (half 512px) 10/11: 1200px left/right (half 600px) 12/13: 1280px left/right (half 640px) 14/15: 1440px left/right (half 720px) 16/17: 1920px left/right (half 960px) 18: 25vh horizontal marker */ background-position: 0 0, 0 0, 50% 0, calc(50% - 1280px) 0, calc(50% + 1280px) 0, calc(50% - 384px) 0, calc(50% + 384px) 0, calc(50% - 512px) 0, calc(50% + 512px) 0, calc(50% - 600px) 0, calc(50% + 600px) 0, calc(50% - 640px) 0, calc(50% + 640px) 0, calc(50% - 720px) 0, calc(50% + 720px) 0, calc(50% - 960px) 0, calc(50% + 960px) 0, 0 25vh, 0 33vh, 0 50vh, 0 66vh, 0 75vh; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; /* Explicit sizes: two grid layers, then vertical centerline/edges, then horizontal markers */ background-size: 20px 20px, 20px 20px, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 0.5px 100vh, 100% 0.5px, 100% 0.5px, 100% 0.5px, 100% 0.5px, 100% 0.5px; pointer-events: none; z-index: 10000; } /* ===== VIEWPORT MEASUREMENTS ===== */ body:not(.no-debug):before { content: 'Viewport: ' attr(data-viewport-width) ' × ' attr(data-viewport-height); position: fixed; right: 10px; top: 150px; padding: 6px 10px; font-family: monospace; font-size: 11px; background: rgba(0,0,0,.8); color: white; z-index: 10001; border-radius: 4px; } /* ===== Z-INDEX DEBUG ===== */ /* Z-Index Anzeige für wichtige Elemente */ body:not(.no-debug) #top-header:after { content: 'z: 1200'; position: absolute; right: 0; top: 110px; padding: 2px 4px; font-size: 10px; background: red; color: white; } body:not(.no-debug) #left-nav:after { content: 'z: 1100'; position: absolute; right: 0; top: 90px; padding: 2px 4px; font-size: 10px; background: red; color: white; } body:not(.no-debug) .nav-overlay:after { content: 'z: 1050'; position: absolute; left: 50px; top: 80px; padding: 2px 4px; font-size: 10px; background: red; color: white; } /* ===== CONSOLE HELPER (JS) ===== */ /* Registered Commands (falls helper geladen): debug.layout(), debug.components(), debug.all(), debug.off(), debug.viewport() */ /* ===== PERFORMANCE DEBUG ===== */ /* Zeige langsame Animationen */ body:not(.no-debug) * { animation-duration: 0.5s !important; transition-duration: 0.15s !important; } /* ===== ACCESSIBILITY DEBUG ===== */ /* Zeige Focus-Outline für alle interaktiven Elemente */ body:not(.no-debug) button, body:not(.no-debug) a, body:not(.no-debug) [tabindex] { outline: 0.5px solid rgba(255,0,0,.25) !important; outline-offset: 2px !important; } /* ===== SECTION HAIRLINE (Bottom) ===== */ /* (position: relative für .page-section bereits im Section-Outlines Block gesetzt) */ /* Consolidated selector: apply hairline when either baseline-debug or full debug mode is active. Keeps behavior identical but reduces duplication. */ body:is(:not(.no-baseline-debug), :not(.no-debug)) .page-section::after { content: ""; position: absolute; inset: auto 0 0 0; border-bottom: 0.5px solid rgba(255,235,59,.25); pointer-events: none; z-index: 999; } /* ===== RESPONSIVE DEBUG ===== */ @media (max-width: 48em) { body:not(.no-debug)::before { content: 'Tablet/Mobile: ' attr(data-viewport-width) ' × ' attr(data-viewport-height); background: rgba(255,165,0,.8); } } @media (max-width: 30em) { body:not(.no-debug)::before { content: 'Mobile: ' attr(data-viewport-width) ' × ' attr(data-viewport-height); background: rgba(255,0,0,.8); } }