/* ───────────────────────────── ui.css ───────────────────────────── Chart- & Modal-Interface | iPad-mini Perfect – **KEIN SCROLLEN** ────────────────────────────────────────────────────────────────── • Container bleibt starr: keinerlei horizontales oder vertikales Scrollen • Body & erhalten overflow:hidden • Chart-Höhe passt sich fluid an (je nach Viewport), trotzdem fix im View • Modal bleibt zentriert, Overlay verdeckt unverrückbar den gesamten Screen ------------------------------------------------------------------ */ /* ❶ Fonts & Root-Variablen */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"); :root { /* Farben */ --clr-back : #0e2d56; --clr-accent : #3178c6; --clr-text : #fff; --clr-border : rgba(255,255,255,.28); /* Shadow & Radius */ --shadow-1 : 0 4px 8px rgba(0,0,0,.20); --shadow-2 : 0 8px 16px rgba(0,0,0,.35); --radius : 6px; /* Fluid-Sizing (linear ↓ bis 600 px) */ --fs-base : clamp(.9rem, .88rem + .12vw, 1rem); --btn-pad-v : clamp(.55rem, .45rem + .27vw, .75rem); --btn-pad-h : clamp(1rem, .9rem + .27vw, 1.4rem); /* Safe-Area (Notch) */ --safe-top : env(safe-area-inset-top, 0px); --safe-bot : env(safe-area-inset-bottom, 0px); } /* ❷ Global-Reset – Scroll komplett deaktivieren */ *,*::before,*::after{box-sizing:border-box;} html,body{ height:100%; margin:0; overflow:hidden; /* WICHTIG: keine Scrollbars */ font-family:"Roboto",sans-serif; color:var(--clr-text); background:#000; padding-top:var(--safe-top); padding-bottom:var(--safe-bot); } /* ❸ Top-Bar */ .top-bar{ width:100%; padding:calc(.5rem + var(--safe-top)) 1.25rem .5rem; background:var(--clr-back); opacity:.85; } .top-bar-button{color:#fff;text-decoration:none;} /* ❹ Chart-Container – starr, overflow:hidden */ #data-visualization-container{ display:flex; justify-content:center; align-items:center; width:100%; height:clamp(380px,50vh,600px); /* fluid, aber fix im View */ max-width:100%; overflow:hidden; /* definitiv kein Scrollen */ margin-top:3.5rem; /* sicherer Abstand nach oben*/ } /* Canvas / SVG skalieren sich selbst innerhalb des Containers */ #data-visualization-container canvas, #data-visualization-container svg{ max-width:100%; max-height:100%; } /* ❺ Buttons */ .custom-button{ text-align:center; margin:2rem 0; } .custom-button button{ padding:var(--btn-pad-v) var(--btn-pad-h); font:500 var(--fs-base)/1.3 "Roboto","Helvetica Neue",sans-serif; letter-spacing:.05em; color:var(--clr-text); background:rgba(255,255,255,.15); border:1px solid var(--clr-border); border-radius:var(--radius); cursor:pointer; transition:transform .25s,box-shadow .25s,color .25s; position:relative; } .custom-button button:hover, .custom-button button:focus{ transform:translateY(-2px); box-shadow:var(--shadow-2); color:rgba(0,0,0,.58); } .custom-button button:active{ transform:scale(.97); box-shadow:var(--shadow-1); } .custom-button button::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; transition:background .25s; } .custom-button button:hover::after, .custom-button button:focus::after{ background:var(--clr-accent); } /* ❻ Modal-Overlay (starr) */ .modal{ display:none; position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.45); padding:calc(4vh + var(--safe-top)) 1rem calc(4vh + var(--safe-bot)); } .modal.show{ display:block; } .modal-content{ background:#fefefe; color:#000; margin:auto; max-width:680px; width:90%; padding:1.5rem; border:1px solid #ccc; border-radius:var(--radius); box-shadow:var(--shadow-2); animation:modalPop .3s ease-out; } @keyframes modalPop{ from{transform:translateY(20px); opacity:0;} to {transform:none; opacity:1;} } .close{ position:absolute; right:1rem; top:.5rem; font-size:1.75rem; font-weight:bold; color:#777; cursor:pointer; line-height:1; } .close:hover,.close:focus{ color:#000; } /* ❼ Responsive Tweaks (Höhen­anpassung ohne Scroll) */ @media(max-width:820px) and (orientation:portrait){ #data-visualization-container{ height:48vh; } } @media(min-width:821px) and (max-width:1133px) and (orientation:landscape){ #data-visualization-container{ height:60vh; } } @media(max-width:600px){ #data-visualization-container{ height:42vh; } .modal-content{ width:95%; } } /* ❽ Motion-Safe */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none !important; animation:none !important; } }