/* ========================================================================== CRIMEHUB — GEMEINSAMES STYLESHEET · „STREET" Wird von jeder Seite geladen. Seitenspezifisches CSS bleibt in der Seite. Später: public/css/crimehub.css Hinweis: @import blockiert das Rendern — im PHP-Layout durch im ersetzen (mit preconnect auf fonts.gstatic.com). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ========================================================================== TOKENS · „STREET" — Graffiti / Blutrot / Chrom ========================================================================== */ :root{ --ink:#0B0810; --panel:#120C18; --panel-head:#1C1226; --panel-2:#170F1E; --bar:#0A0709; --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.15); --line-red:rgba(224,30,36,.34); --text:#EFEBF2; --text-dim:#A9A0B4; --text-mute:#7C7288; --text-faint:#544C5E; --red:#E01E24; --red-hot:#FF3A40; --red-deep:#8E0F14; --silver:#D7D9DC; --silver-dim:#9AA0A6; --gold:#E0A82E; --ok:#4ADE80; /* Schrift: Graffiti nur dort, wo es groß genug zum Lesen ist. tag = Marker/Graffiti — Headlines und Kartentitel display = Plakat-Grotesk — große Zahlen, Countdown, Buttons ui = schmale Grotesk — Navigation und Labels, muss klein lesbar bleiben */ --font-tag:'Permanent Marker','Segoe Print',cursive; --font-display:'Anton','Impact','Bahnschrift Condensed',system-ui,sans-serif; --font-ui:'Barlow Condensed','Bahnschrift Condensed','Archivo',system-ui,sans-serif; --font-body:'Inter','Geist','Segoe UI Variable Text',system-ui,sans-serif; --font-mono:'JetBrains Mono','Cascadia Mono',Consolas,ui-monospace,monospace; --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.8125rem; --text-md:.875rem; --text-base:.9375rem; --text-lg:1.125rem; --text-xl:1.5rem; --text-2xl:clamp(1.6rem,1.1rem + 1.8vw,2.25rem); --text-hero:clamp(2.4rem,1.6rem + 3vw,3.75rem); --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --shadow-sm:0 2px 6px rgba(0,0,0,.5); --shadow-md:0 14px 34px -12px rgba(0,0,0,.85); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.92); --glow-red:0 0 0 1px rgba(224,30,36,.3),0 0 40px -14px rgba(224,30,36,.65); --nav-h:66px; --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:130ms; --t-base:220ms; --t-slow:380ms; /* Papierrauheit — als Overlay über Flächen, killt den flachen Karten-Look */ --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* Abrisskante — kachelt nahtlos, Farbe = Kopfzeilenfarbe */ --tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='9'%3E%3Cpath d='M0 0 H80 V3 L70 6 L63 2 L56 5 L49 2 L42 6 L35 3 L28 6 L21 2 L14 5 L7 2 L0 3 Z' fill='%231C1226'/%3E%3C/svg%3E"); /* Abrisskante nach unten — Karte endet wie abgerissenes Papier */ --tear-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='9'%3E%3Cpath d='M0 9 H80 V6 L70 3 L63 7 L56 4 L49 7 L42 3 L35 6 L28 3 L21 7 L14 4 L7 7 L0 6 Z' fill='%23120C18'/%3E%3C/svg%3E"); /* Spraydosen-Spritzer — Akzent in Kartenköpfen, nie flächig */ --splat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='54'%3E%3Cg fill='%23E01E24'%3E%3Ccircle cx='12' cy='16' r='3.4'/%3E%3Ccircle cx='26' cy='34' r='1.6'/%3E%3Ccircle cx='38' cy='9' r='2.2'/%3E%3Ccircle cx='47' cy='27' r='4.6'/%3E%3Ccircle cx='61' cy='42' r='1.4'/%3E%3Ccircle cx='72' cy='14' r='2.8'/%3E%3Ccircle cx='83' cy='31' r='1.2'/%3E%3Ccircle cx='95' cy='20' r='3.9'/%3E%3Ccircle cx='104' cy='44' r='1.7'/%3E%3Ccircle cx='115' cy='11' r='2.4'/%3E%3Ccircle cx='124' cy='30' r='5.2'/%3E%3Ccircle cx='136' cy='19' r='1.5'/%3E%3Ccircle cx='143' cy='38' r='2.6'/%3E%3C/g%3E%3C/svg%3E"); } /* ========================================================================== BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{min-height:100vh;color:var(--text);font-family:var(--font-body); font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased;background:#120A16} .bg{position:fixed;inset:0;z-index:-2; background:linear-gradient(180deg,#141216 0%,#1d1220 42%,#3f1032 78%,#4d0f38 100%)} .bg::after{content:"";position:absolute;inset:0; background:url("assets/bg.png") center top/cover no-repeat} .bg::before{content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(5,3,7,.6) 100%)} h1,h2,h3,h4{margin:0;font-family:var(--font-tag);font-weight:400; text-transform:uppercase;letter-spacing:.005em;line-height:1.08} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} svg{display:block} img{max-width:100%} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--red-hot);outline-offset:3px;border-radius:2px} :focus:not(:focus-visible){outline:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:rgba(0,0,0,.35)} *::-webkit-scrollbar-thumb{background:#2c2033;border-radius:99px; border:2px solid transparent;background-clip:content-box} /* ========================================================================== COMPONENTS ========================================================================== */ .eyebrow{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600; text-transform:uppercase;letter-spacing:.16em;color:var(--text-mute)} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .dim{color:var(--text-dim)} .mute{color:var(--text-mute)} .faint{color:var(--text-faint)} /* Handgezogener Trenner statt sauberer 1px-Linie */ .hr{height:1px;border:0;margin:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 7px,rgba(255,255,255,.03) 7px 11px, rgba(255,255,255,.09) 11px 19px,rgba(255,255,255,.02) 19px 23px)} /* Klebeband-Etikett — leicht schief, wie aufgeklebt */ .tape{display:inline-block;padding:2px 9px 3px;transform:rotate(-1.6deg); background:var(--red);color:#fff;font-family:var(--font-ui);font-size:var(--text-xs); font-weight:700;text-transform:uppercase;letter-spacing:.11em; box-shadow:0 1px 0 rgba(0,0,0,.55);clip-path:polygon(0 8%,100% 0,99% 92%,1% 100%)} .tape--silver{background:var(--silver);color:#14101a} .chip{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px; border:1px solid var(--line-2);border-radius:99px;font-size:var(--text-2xs);font-weight:700; text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);white-space:nowrap} .chip--red{border-color:var(--line-red);color:var(--red-hot);background:rgba(224,30,36,.1)} .chip--ok{border-color:rgba(74,222,128,.32);color:var(--ok)} .chip--solid{background:rgba(255,255,255,.06);border-color:transparent;color:var(--text-dim)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px; padding:0 16px;font-size:var(--text-sm);font-weight:700;border:1px solid transparent; text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-ui); border-radius:2px 7px 3px 6px; /* unregelmäßig, nicht wie ausgestanzt */ transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)} .btn--red{background:var(--red);color:#fff} .btn--red:hover{background:var(--red-hot)} .btn--red:active{transform:translateY(1px);background:var(--red-deep)} .btn--ghost{border-color:var(--line-2);color:var(--text-dim)} .btn--ghost:hover{border-color:var(--line-red);color:#fff;background:rgba(224,30,36,.09)} .btn--ghost:active{transform:translateY(1px)} .btn--block{width:100%} .btn--sm{height:30px;padding:0 11px;font-size:var(--text-2xs)} .bar{position:relative;height:6px;background:rgba(255,255,255,.08);overflow:hidden; clip-path:polygon(0 0,100% 1px,100% 100%,0 calc(100% - 1px))} .bar__fill{position:absolute;inset:0 auto 0 0;background:var(--red)} .bar__fill--silver{background:var(--silver-dim)} .bar__fill--gold{background:var(--gold)} .bar__fill--ok{background:var(--ok)} .dot{width:7px;height:7px;border-radius:99px;flex:none} .dot--red{background:var(--red)} .dot--gold{background:var(--gold)} .dot--ok{background:var(--ok)} .dot--mute{background:var(--text-faint)} .ava{width:30px;height:30px;border-radius:99px;flex:none;display:grid;place-items:center; background:#241830;border:1px solid var(--line-2); font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .ava--stack{margin-left:-9px;box-shadow:0 0 0 2px #150E1B} .ava--on{box-shadow:0 0 0 2px #150E1B,0 0 0 3.5px var(--ok)} .ava--op{box-shadow:0 0 0 2px #150E1B,0 0 0 3.5px var(--red)} .ava--off{opacity:.4} /* --- Panel: Papier statt Glaskarte --- */ .panel{position:relative;background:var(--panel);border:1px solid var(--line); border-radius:3px 11px 4px 9px; /* asymmetrisch = geschnitten, nicht gestanzt */ display:flex;flex-direction:column;min-width:0;box-shadow:var(--shadow-md);isolation:isolate} .panel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--noise);opacity:.05;mix-blend-mode:overlay; border-radius:inherit} /* Untere Abrisskante — die Karte endet gerissen statt geschnitten */ .panel::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9px;z-index:3; background:var(--tear-b) repeat-x;background-size:80px 9px;pointer-events:none} .panel > *{position:relative;z-index:1} .panel__head{position:relative;display:flex;align-items:center;gap:11px;overflow:hidden; padding:11px var(--sp-5) 12px; background:linear-gradient(180deg,#241633 0%,var(--panel-head) 100%)} /* Spraydosen-Spritzer rechts im Kopf — Deko, bleibt hinter dem Text */ .panel__head::before{content:"";position:absolute;right:-10px;top:-8px;width:150px;height:54px; background:var(--splat) no-repeat right center;opacity:.16;pointer-events:none} .panel__head::after{content:"";position:absolute;left:0;right:0;top:100%;height:9px; background:var(--tear) repeat-x;background-size:80px 9px;z-index:2} .panel__head h2{position:relative;font-family:var(--font-tag);font-size:17px; font-weight:400;letter-spacing:.01em;padding-top:3px; text-shadow:0 2px 0 rgba(0,0,0,.5)} .panel__head .spacer{flex:1} .panel__ico{position:relative;width:34px;height:34px;flex:none;object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))} .panel__body{padding:var(--sp-5);flex:1;min-height:0} .panel--alert{border-color:var(--line-red)} .panel--alert .panel__head{background:#25121A} .panel--alert .panel__head::after{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='9'%3E%3Cpath d='M0 0 H80 V3 L70 6 L63 2 L56 5 L49 2 L42 6 L35 3 L28 6 L21 2 L14 5 L7 2 L0 3 Z' fill='%2325121A'/%3E%3C/svg%3E") repeat-x; background-size:80px 9px} .panel--alert .panel__head h2{color:var(--red-hot)} /* Roter Spray-Strich unter Überschriften */ .swoosh{display:block;width:64px;height:7px;margin-top:2px;color:var(--red);opacity:.9} .empty{color:var(--text-mute);font-size:var(--text-sm);padding:var(--sp-6) 0} /* ========================================================================== NAVBAR · schwarzes Band mit gerissenen Kanten ========================================================================== */ .navwrap{position:sticky;top:0;z-index:60;padding:16px var(--sp-6) 30px; display:flex;justify-content:center} .navwrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,#0E0A12 0%,rgba(14,10,18,.93) 52%,rgba(14,10,18,0) 100%)} .nav{position:relative;width:100%;max-width:1240px;height:var(--nav-h); display:flex;align-items:center;gap:var(--sp-4);padding-right:var(--sp-5)} /* Die Platte ist gerissen, nicht ausgestanzt: grobe Turbulenz reißt die Kante auf. */ .nav__plate{position:absolute;inset:0;background:var(--bar); border-radius:34px;filter:url(#ripEdge)} .nav__plate::after{content:"";position:absolute;inset:0;border-radius:34px; background-image:var(--noise);opacity:.07;mix-blend-mode:overlay} .brand,.nav__sep,.nav__menu,.nav__right{position:relative;z-index:2} .brand{display:flex;align-items:center;height:100%;padding-left:14px;flex:none} .brand img{height:82px;width:auto;display:block;margin:-9px 0; filter:drop-shadow(0 3px 6px rgba(0,0,0,.85))} .nav__sep{width:1px;height:26px;background:rgba(255,255,255,.17);flex:none} .nav__menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0} .nav__item{position:relative} .nav__link{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px; padding:0 12px;font-family:var(--font-ui);font-size:var(--text-md);font-weight:600; text-transform:uppercase;letter-spacing:.07em;color:#CFC9D6;white-space:nowrap; transition:color var(--t-fast) var(--ease-out)} .nav__link:hover{color:#fff} /* Icon vor dem Label */ .nav__link img{width:23px;height:23px;flex:none;object-fit:contain;opacity:.82; filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)); transition:opacity var(--t-fast) var(--ease-out)} .nav__link:hover img,.nav__link[aria-current="page"] img{opacity:1} .nav__link svg{width:11px;height:11px;opacity:.7;transition:transform var(--t-fast) var(--ease-out)} .nav__item[data-open="1"] .nav__link svg{transform:rotate(180deg)} .nav__link[aria-current="page"]{color:#fff} /* Aktiv-Markierung: gebogener Pinselstrich, an dem etwas herunterläuft. Bogen wird in der Breite gedehnt, der Tropfen behält seine Form. */ .nav__mark{position:absolute;left:7px;right:7px;bottom:1px;height:11px; color:var(--red);pointer-events:none} /* Doppelte Klasse nötig: .nav__link svg (Chevron-Regel) wäre sonst spezifischer */ .nav__mark .nav__mark-brush{width:100%;height:11px;opacity:1;fill:currentColor; filter:drop-shadow(0 1px 7px rgba(224,30,36,.55))} .nav__mark .nav__mark-drip{position:absolute;right:24%;top:6px;width:8px;height:16px; opacity:1;fill:currentColor} .nav__drop{position:absolute;top:calc(100% + 14px);left:0;min-width:238px;padding:6px; background:#120C17;border:1px solid var(--line-2);border-radius:3px 10px 4px 9px; box-shadow:var(--shadow-lg);display:none} .nav__item[data-open="1"] .nav__drop{display:block} .nav__drop a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px; border-radius:3px;font-size:var(--text-sm);color:var(--text-dim)} .nav__drop a:hover{background:rgba(224,30,36,.13);color:#fff} .nav__drop img{width:24px;height:24px;object-fit:contain;flex:none} .nav__drop .k{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-faint)} .nav__right{display:flex;align-items:center;gap:var(--sp-3);flex:none} .iconbtn{position:relative;width:38px;height:38px;border-radius:99px;display:grid; place-items:center;color:#CFC9D6;border:1px solid transparent; transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)} .iconbtn:hover{background:rgba(255,255,255,.08);color:#fff} .iconbtn svg{width:19px;height:19px} .iconbtn .badge{position:absolute;top:6px;right:7px;width:8px;height:8px;background:var(--red); border-radius:99px;border:2px solid var(--bar)} .nav__hole{position:absolute;z-index:3;pointer-events:none;color:var(--silver)} .nav__drips{position:absolute;left:0;top:100%;width:100%;height:36px;z-index:1; pointer-events:none;color:var(--red)} /* ========================================================================== LAYOUT · Canvas + Bento-Raster (seitenübergreifend) ========================================================================== */ .canvas{max-width:1240px;margin:0 auto;padding:22px var(--sp-6) 64px} .canvas__head{display:flex;align-items:flex-end;gap:var(--sp-4);margin-bottom:18px} .canvas__head h1{font-size:var(--text-2xl);line-height:1} .canvas__head .meta{font-family:var(--font-mono);font-size:var(--text-2xs); color:var(--text-faint);letter-spacing:.06em;padding-bottom:3px} .canvas__actions{margin-left:auto;display:flex;gap:var(--sp-2)} .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} .c4{grid-column:span 4} .c5{grid-column:span 5} .c7{grid-column:span 7} .c8{grid-column:span 8} .c12{grid-column:span 12} .bento > .panel{opacity:0;transform:translateY(10px); animation:enter var(--t-slow) var(--ease-out) forwards} @keyframes enter{to{opacity:1;transform:none}} @media (max-width:1179px){ .c8,.c7,.c5,.c4{grid-column:span 6} .c12{grid-column:span 12} /* Schmal: nur noch Icons in der Navigation — der Text bleibt für Screenreader erhalten, statt die Leiste horizontal scrollen zu lassen. */ .nav__txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .nav__link{padding:0 11px;gap:4px} .nav__link img{width:27px;height:27px} .nav__menu{overflow-x:auto;scrollbar-width:none} .nav__menu::-webkit-scrollbar{display:none} } @media (max-width:899px){ .c8,.c7,.c5,.c4{grid-column:span 12} .canvas{padding:18px var(--sp-4) 48px} .navwrap{padding:12px var(--sp-4) 26px} .brand img{height:62px} } /* ========================================================================== TABLET · body.is-tablet (später public/css/tablet-performance.css) ========================================================================== */ body.is-tablet{ --font-display:'Bahnschrift Condensed',system-ui,sans-serif; --font-body:system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:Consolas,ui-monospace,monospace; --t-fast:55ms; --t-base:85ms; --t-slow:130ms; } body.is-tablet .nav__plate{filter:none} /* SVG-Filter zu teuer im NUI */ body.is-tablet .panel::after, body.is-tablet .nav__plate::after{display:none} body.is-tablet .nav__drips,body.is-tablet .nav__hole{display:none} body.is-tablet .bento > .panel{animation:none;opacity:1;transform:none} body.is-tablet .btn{height:44px;padding:0 20px} body.is-tablet .btn--sm{height:44px;padding:0 14px} body.is-tablet .iconbtn,body.is-tablet .nav__link{min-height:44px} body.is-tablet .nav__drop a{min-height:44px} body.is-tablet *{scroll-behavior:auto !important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} .bento > .panel{opacity:1;transform:none} }