/* ========================================================================== Gaussian Hoops — gemeinsames Stylesheet Wird von JEDER Seite geladen. Enthaelt Farben, Typo, Header, Footer, Basis. Tool-spezifisches CSS bleibt in der jeweiligen Seite. ========================================================================== */ :root{ --navy:#04446c; --navy-dk:#03334f; --navy-lt:#e8f2f8; --navy-md:#c2dcea; --gold:#eba044; --gold-lt:#fdf3e7; --white:#fff; --bg:#f9fafb; --text:#1a2b38; --muted:#6b8a9a; --border:#dce8ef; --sh:0 2px 12px rgba(4,68,108,.08); --max:1120px; /* Textseiten */ --max-wide:1400px; /* Board-Seiten mit breiten Tabellen */ --pad:24px; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:var(--navy)} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} /* Board-Seiten: breiterer Container. Wird per aktiviert — dann liegen Seitenkopf UND uebernommene Tabelle auf derselben linken Kante. */ body.gh-wide .wrap, body.gh-wide .gh-footer-inner, body.gh-wide .gh-footer-bottom{max-width:var(--max-wide)} /* Die uebernommenen Tool-Seiten bringen ihren eigenen .page-wrap mit (1000–1500px, wechselnde Paddings). Auf den Layout-Container normieren, sonst fluchtet die H1 nicht mit der Tabelle darunter. */ .gh-main .page-wrap{ max-width:none !important; margin:0 !important; padding:0 !important; } /* erstes Element im Inhalt buendig zum Seitenkopf beginnen lassen */ .gh-main .page-wrap > :first-child{margin-top:0} /* ---------- Header / Navigation ---------------------------------------- PHONE FIRST — Basis gilt schmal, Erweiterungen per @media(min-width:…). Ebene 1 (navy): Marke · Home/Bereiche · Tools mit Icons Ebene 2 (weiss): Unterseiten des Bereichs, aktiver Punkt gold unterstrichen ---------------------------------------------------------------------- */ .gh-header{position:sticky;top:0;z-index:100} /* ── Ebene 1 ─────────────────────────────────────────────────────────── */ .gh-bar1{background:var(--navy)} .gh-bar1-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding-top:8px;padding-bottom:0} .gh-logo{font-size:17px;font-weight:800;color:#fff;text-decoration:none; letter-spacing:.3px;white-space:nowrap;flex:none;margin-right:auto} .gh-logo span{color:var(--gold)} /* Bereiche + Tools: mobil je eine wischbare Zeile ueber die volle Breite */ .gh-areas,.gh-tools{ display:flex;align-items:center;gap:2px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1); padding:0 var(--pad); } .gh-areas::-webkit-scrollbar,.gh-tools::-webkit-scrollbar{display:none} .gh-areas{order:2;width:100%;padding-top:2px} .gh-tools{order:3;width:100%;padding-bottom:6px; border-top:1px solid rgba(255,255,255,.13);padding-top:5px;margin-top:4px} .gh-areas a,.gh-tools a{ color:#cdddea;text-decoration:none;font-weight:600;white-space:nowrap; border-radius:6px;transition:background .15s,color .15s; display:inline-flex;align-items:center; } .gh-areas a{font-size:14px;padding:8px 11px} .gh-tools a{font-size:12.5px;padding:6px 9px;gap:6px} .gh-areas a:hover,.gh-tools a:hover{background:rgba(255,255,255,.09);color:#fff} .gh-areas a.active,.gh-tools a.active{color:#fff;background:rgba(235,160,68,.2)} /* Tool-Icons */ .gh-tools svg{width:15px;height:15px;flex:none;fill:var(--gold)} .gh-tools svg.ic-stroke{fill:none;stroke:var(--gold);stroke-width:1.8} /* "soon"-Marker am NBA-Bereich */ .gh-soon{font-size:8.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; background:var(--gold);color:var(--navy);border-radius:3px; padding:1px 4px;margin-left:5px;vertical-align:2px} /* ── Ebene 2 ─────────────────────────────────────────────────────────── */ .gh-bar2{background:var(--white);border-bottom:1px solid var(--border)} .gh-bar2-inner{display:flex;align-items:center;gap:2px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .gh-bar2-inner::-webkit-scrollbar{display:none} .gh-bar2 a{ color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:600; white-space:nowrap;padding:11px 10px;border-bottom:3px solid transparent; transition:color .15s,border-color .15s; } .gh-bar2 a:hover{color:var(--navy)} .gh-bar2 a.active{color:var(--navy);border-bottom-color:var(--gold)} /* ── ab Tablet: alles in eine Zeile ──────────────────────────────────── */ @media(min-width:900px){ .gh-bar1-inner{flex-wrap:nowrap;gap:16px;min-height:60px;padding:0} .gh-logo{margin-right:8px} .gh-areas,.gh-tools{order:0;width:auto;margin:0;padding:0;overflow:visible; border-top:none;padding-top:0;margin-top:0;padding-bottom:0} .gh-areas{flex:1} .gh-tools{gap:2px;padding-left:16px;border-left:1px solid rgba(255,255,255,.16)} .gh-bar2 a{padding:13px 13px;font-size:14px} } /* Zwischen 900 und 1180px wird es eng — Tools nur als Icons */ @media(min-width:900px) and (max-width:1180px){ .gh-tools a span{display:none} .gh-tools a{padding:8px} .gh-tools svg{width:17px;height:17px} } @media(min-width:1000px){ .gh-logo{font-size:20px} } /* ---------- Seitenkopf (unter der Navigation) -------------------------- */ .gh-pagehead{background:var(--white);border-bottom:1px solid var(--border);padding:34px 0 30px} .gh-eyebrow{ font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase; color:var(--gold);margin-bottom:9px; } .gh-pagehead h1{ font-size:32px;font-weight:800;color:var(--navy); letter-spacing:-.5px;line-height:1.2;margin-bottom:10px; } .gh-pagehead p{font-size:15px;color:var(--muted);max-width:720px} @media(max-width:600px){ .gh-pagehead h1{font-size:25px} } /* ---------- Inhalt ------------------------------------------------------ */ .gh-main{padding:28px 0 56px} .gh-card{ background:var(--white);border:1px solid var(--border); box-shadow:var(--sh);padding:22px;margin-bottom:16px; } .gh-prose h2{font-size:22px;font-weight:700;color:var(--navy);margin:30px 0 12px;letter-spacing:-.3px} .gh-prose h3{font-size:16px;font-weight:700;color:var(--navy);margin:22px 0 8px} .gh-prose p{margin-bottom:14px;color:var(--text)} .gh-prose ul{margin:0 0 16px 20px} .gh-prose li{margin-bottom:7px} .gh-prose a{color:var(--navy);text-decoration:underline;text-underline-offset:2px} /* Buttons */ .gh-btn{ display:inline-block;padding:12px 22px;background:var(--gold);color:var(--navy); font-weight:700;font-size:14px;text-decoration:none;border-radius:6px; transition:transform .12s, box-shadow .12s; } .gh-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(235,160,68,.35)} .gh-btn-ghost{ display:inline-block;padding:12px 22px;border:1.5px solid var(--navy);color:var(--navy); font-weight:600;font-size:14px;text-decoration:none;border-radius:6px; } .gh-btn-ghost:hover{background:var(--navy);color:#fff} /* ---------- Footer ------------------------------------------------------ */ .gh-footer{background:var(--navy);border-top:3px solid var(--gold);color:#cdddea} .gh-footer-inner{ max-width:var(--max);margin:0 auto;padding:40px 24px 30px; display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:36px; } .gh-footer-brand{flex:1 1 240px;min-width:200px} .gh-footer-brand .gh-fb-name{font-size:22px;font-weight:800;color:#fff;letter-spacing:.4px} .gh-footer-brand .gh-fb-name span{color:var(--gold)} .gh-footer-brand p{font-size:13px;color:#9db8cc;line-height:1.6;margin-top:10px;max-width:250px} .gh-footer-links{flex:1 1 340px;min-width:280px} .gh-fl-title{ font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase; color:var(--gold);margin-bottom:14px; } .gh-fl-cols{display:flex;gap:48px;flex-wrap:wrap} .gh-fl-col{display:flex;flex-direction:column;gap:9px} .gh-fl-sub{ font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase; color:#6f93ad;margin-bottom:2px; } .gh-fl-col a{color:#cdddea;text-decoration:none;font-size:14px} .gh-fl-col a:hover{color:#fff} .gh-footer-social{flex:0 1 auto;min-width:150px} .gh-social-row{display:flex;gap:12px} .gh-social-row a{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border:1.5px solid var(--gold);border-radius:11px;text-decoration:none; transition:background .15s; } .gh-social-row a:hover{background:rgba(235,160,68,.15)} .gh-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); max-width:var(--max);margin:0 auto;padding:18px 24px 26px; display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between; } .gh-footer-bottom a{color:#9db8cc;text-decoration:none;font-size:12.5px} .gh-footer-bottom a:hover{color:#fff;text-decoration:underline} .gh-copy{font-size:12.5px;color:#6f93ad} .gh-legal{display:flex;gap:20px;flex-wrap:wrap}