/** * BULL | SIG — Gestaltungsgrundlage v2.0 * Ablage: portal/css/bullsig.css · und im www-Repo unter css/bullsig.css * * Eine Quelle für Schriften, Farben und Bausteine. Alle Seiten binden * diese Datei ein, damit nichts auseinanderläuft. * * DUNKEL ist Standard. Hell wird über data-theme="light" am * aktiviert — die Variablen kippen, das Markup bleibt gleich. * * Einbinden: * * * * Schriften liegen lokal unter /fonts — bewusst NICHT von Google-Servern * (sonst wandert die IP jedes Besuchers in die USA). */ /* ═════════════════════════════════════════════════════════════ SCHRIFTEN ═════════════════════════════════════════════════════════════ */ @font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/inter-latin-300-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/playfair-display-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/playfair-display-latin-400-italic.woff2') format('woff2'); } @font-face { font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/jetbrains-mono-latin-300-normal.woff2') format('woff2'); } /* ═════════════════════════════════════════════════════════════ FARBEN — dunkel ist Standard ═════════════════════════════════════════════════════════════ */ :root { /* Marke — in beiden Modi gleich */ --gold: #c5a358; --gold-dark: #8e733c; --gold-dim: #8a7440; /* Flächen */ --bg: #050505; --surface: #0e0e0e; --panel: #111113; --raised: #16161a; /* Linien */ --line: #1e1e22; --border: rgba(197, 163, 88, 0.2); /* Text */ --ink: #f3f3f4; --soft: #cfcfd4; --mute: #8a8a91; --dim: #5c5c63; --faint:#4a4a51; /* Eingaben */ --input-bg: #0a0a0b; --input-border: #1e1e22; --placeholder: #4a4a51; /* Zustände */ --ok: #4ade80; --ok-bg: rgba(45, 139, 92, 0.15); --ok-line: rgba(45, 139, 92, 0.35); --warn: #e8c068; --warn-bg: rgba(197, 163, 88, 0.12); --warn-line:rgba(197, 163, 88, 0.35); --err: #f28b8b; --err-bg: rgba(192, 64, 64, 0.15); --err-line: rgba(192, 64, 64, 0.35); /* Schriftstapel */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Maße */ --radius: 4px; --radius-sm: 3px; --wrap: 1200px; --gutter: 40px; color-scheme: dark; } [data-theme="light"] { --gold: #9d7d3a; --gold-dark: #7a5f2a; --gold-dim: #9d7d3a; --bg: #fafafa; --surface: #ffffff; --panel: #ffffff; --raised: #f5f5f5; --line: #e5e5e5; --border: rgba(157, 125, 58, 0.28); --ink: #1a1a1a; --soft: #3a3a3a; --mute: #666666; --dim: #888888; --faint:#aaaaaa; --input-bg: #ffffff; --input-border: #dddddd; --placeholder: #bbbbbb; --ok: #1f7a4d; --ok-bg: #e8f5ee; --ok-line: #bfd6c8; --warn: #8a6a1a; --warn-bg: #fdf6e3; --warn-line:#e8d9a8; --err: #a03030; --err-bg: #fdeded; --err-line: #e5bbbb; color-scheme: light; } /* Nutzer hat noch nichts gewählt und bevorzugt Hell */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --gold:#9d7d3a; --gold-dark:#7a5f2a; --gold-dim:#9d7d3a; --bg:#fafafa; --surface:#ffffff; --panel:#ffffff; --raised:#f5f5f5; --line:#e5e5e5; --border:rgba(157,125,58,0.28); --ink:#1a1a1a; --soft:#3a3a3a; --mute:#666666; --dim:#888888; --faint:#aaaaaa; --input-bg:#ffffff; --input-border:#dddddd; --placeholder:#bbbbbb; --ok:#1f7a4d; --ok-bg:#e8f5ee; --ok-line:#bfd6c8; --warn:#8a6a1a; --warn-bg:#fdf6e3; --warn-line:#e8d9a8; --err:#a03030; --err-bg:#fdeded; --err-line:#e5bbbb; color-scheme: light; } } /* ═════════════════════════════════════════════════════════════ GRUNDLAGEN ═════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } a { color: var(--gold); } .bs-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } @media (max-width: 900px) { .bs-wrap { padding: 0 24px; } } /* ═════════════════════════════════════════════════════════════ TYPOGRAFIE ═════════════════════════════════════════════════════════════ */ .bs-eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-dim); margin-bottom: 15px; } .bs-logo { font-family: var(--font-serif); font-size: 15px; font-weight: 400; letter-spacing: 0.26em; color: var(--ink); text-decoration: none; } .bs-logo i { color: var(--gold); font-style: normal; } .bs-h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 8vw, 72px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 20px; } .bs-h1 em { font-style: italic; color: var(--gold); } .bs-h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 5vw, 40px); line-height: 1.15; margin: 0 0 20px; } .bs-h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; margin: 0 0 12px; } /* Abschnittsüberschrift mit Goldbalken */ .bs-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 5vw, 40px); border-left: 3px solid var(--gold); padding-left: 26px; margin: 0 0 40px; } /* Kleine Überschrift über einem Block */ .bs-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 12px; } .bs-sub { color: var(--mute); font-size: 16px; margin: 0 0 30px; } .bs-note { color: var(--dim); font-size: 13px; line-height: 1.6; } .bs-risk { color: var(--faint); font-size: 11px; line-height: 1.7; } .bs-figure { font-family: var(--font-serif); font-weight: 400; font-size: 44px; color: var(--gold); line-height: 1.05; } .bs-figure-label { font-family: var(--font-mono); font-size: 10px; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } /* ═════════════════════════════════════════════════════════════ SCHALTFLÄCHEN ═════════════════════════════════════════════════════════════ */ .bs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 30px; background: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius-sm); color: #14120c; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: 0.3s; } .bs-btn:hover { background: transparent; color: var(--gold); box-shadow: 0 0 34px rgba(197,163,88,0.22); transform: translateY(-2px); } .bs-btn[disabled], .bs-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .bs-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .bs-btn-ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 26px rgba(197,163,88,0.1); } .bs-btn-sm { padding: 9px 16px; font-size: 11px; letter-spacing: 0.08em; } .bs-btn:focus-visible, .bs-input:focus-visible, .bs-select:focus-visible, .bs-textarea:focus-visible, .bs-theme:focus-visible, .bs-lang:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } /* ═════════════════════════════════════════════════════════════ KOPFZEILE ═════════════════════════════════════════════════════════════ */ .bs-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); } .bs-top-right { display: flex; align-items: center; gap: 8px; } .bs-lang, .bs-theme { background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--mute); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 6px 9px; cursor: pointer; transition: 0.2s; } .bs-lang:hover, .bs-theme:hover { color: var(--gold); border-color: var(--gold-dim); } .bs-theme { min-width: 34px; } .bs-navlink { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 14px; margin-left: 6px; transition: 0.2s; } .bs-navlink:hover { color: var(--gold); border-color: var(--gold); } /* ═════════════════════════════════════════════════════════════ FORMULARE ═════════════════════════════════════════════════════════════ */ .bs-field { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 0 0 9px; } .bs-input, .bs-select, .bs-textarea { width: 100%; padding: 14px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-sans); font-size: 15px; outline: none; transition: border-color 0.15s; } .bs-input:focus, .bs-select:focus, .bs-textarea:focus { border-color: var(--gold-dim); } .bs-input::placeholder, .bs-textarea::placeholder { color: var(--placeholder); } .bs-textarea { resize: vertical; min-height: 90px; } /* Auswahl aus zwei bis vier Optionen */ .bs-seg { display: flex; gap: 7px; } .bs-seg button { flex: 1; padding: 12px 0; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--mute); font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: 0.15s; } .bs-seg button[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); } .bs-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0 0 16px; } .bs-check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--gold); } .bs-check span { font-size: 14px; line-height: 1.55; color: var(--soft); } /* ═════════════════════════════════════════════════════════════ FLÄCHEN UND HINWEISE ═════════════════════════════════════════════════════════════ */ .bs-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; } .bs-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; } .bs-box.gold { border-color: var(--border); background: var(--warn-bg); } .bs-msg { padding: 13px 15px; border-radius: var(--radius-sm); font-size: 14px; } .bs-msg.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); } .bs-msg.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); } .bs-msg.err { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err); } .bs-badge { display: inline-block; padding: 3px 9px; border-radius: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; border: 1px solid var(--line); color: var(--mute); } .bs-badge.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .bs-badge.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); } .bs-badge.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err); } /* ═════════════════════════════════════════════════════════════ TABELLEN UND LISTEN ═════════════════════════════════════════════════════════════ */ .bs-table { width: 100%; border-collapse: collapse; font-size: 14px; } .bs-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); } .bs-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); color: var(--soft); } .bs-table td:first-child { color: var(--ink); font-weight: 600; } /* Liste mit Gedankenstrich statt Punkt */ .bs-list { list-style: none; padding: 0; margin: 0; } .bs-list li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line); color: var(--soft); font-size: 15px; position: relative; } .bs-list li:first-child { border-top: 1px solid var(--line); } .bs-list li::before { content: "—"; color: var(--gold); position: absolute; left: 0; top: 14px; } /* ═════════════════════════════════════════════════════════════ EINBLENDEN BEIM SCROLLEN ═════════════════════════════════════════════════════════════ */ .bs-reveal { opacity: 0; transform: translateY(30px); transition: 1.2s all cubic-bezier(0.16, 1, 0.3, 1); } .bs-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bs-reveal { opacity: 1; transform: none; transition: none; } body { transition: none; } }