/* * Getränke Degenhart – Web-App Theme * Version 1.0.0 * * Einbindung: * * ... * * Alle Komponentenklassen sind mit "gd-" präfixiert, damit das Theme * neben bestehenden Frameworks und anwendungsspezifischen Styles einsetzbar ist. */ :root { color-scheme: light; /* Markenfarben */ --gd-color-blue: #0f4194; --gd-color-blue-dark: #173b75; --gd-color-yellow: #ffed01; --gd-color-yellow-dark: #f4d900; --gd-color-red: #bd2731; --gd-color-green: #5c9d32; /* Neutrale Farben */ --gd-color-text: #1d1b1c; --gd-color-text-soft: #34443f; --gd-color-muted: #565655; --gd-color-line: #d8d8d8; --gd-color-line-soft: #e4e9e6; --gd-color-page: #f3f3f3; --gd-color-surface: #ffffff; --gd-color-surface-soft: #fafafa; /* Statusfarben */ --gd-color-error-text: #782c27; --gd-color-error-bg: #fff0ee; --gd-color-error-line: #efc2bd; --gd-color-success-bg: #e9f4df; /* Typografie */ --gd-font-family: "Open Sans", Arial, "Segoe UI", sans-serif; --gd-font-size-xs: 0.6875rem; --gd-font-size-sm: 0.75rem; --gd-font-size-md: 0.875rem; --gd-font-size-base: 1rem; --gd-font-size-lg: 1.25rem; --gd-font-size-xl: clamp(2.125rem, 4vw, 3.25rem); --gd-line-height: 1.55; /* Abstände */ --gd-space-1: 0.375rem; --gd-space-2: 0.625rem; --gd-space-3: 0.875rem; --gd-space-4: 1.125rem; --gd-space-5: 1.5rem; --gd-space-6: 2rem; /* Form und Effekte */ --gd-radius-sm: 0.375rem; --gd-radius-md: 0.5rem; --gd-shadow-header: 0 3px 12px rgba(15, 65, 148, 0.1); --gd-shadow-panel: 0 6px 20px rgba(0, 0, 0, 0.05); --gd-shadow-hero: 0 14px 32px rgba(15, 65, 148, 0.14); --gd-shadow-stat: 0 8px 20px rgba(0, 0, 0, 0.12); --gd-content-width: 1380px; } /* Grundlayout */ .gd-body { margin: 0; min-width: 320px; color: var(--gd-color-text); background: var(--gd-color-page); border-top: 7px solid var(--gd-color-blue); font-family: var(--gd-font-family); font-synthesis: none; } .gd-body *, .gd-body *::before, .gd-body *::after { box-sizing: border-box; } .gd-body button, .gd-body input, .gd-body select, .gd-body textarea { font: inherit; } .gd-body a { color: inherit; } .gd-page { width: min(var(--gd-content-width), calc(100% - 2rem)); margin: 1.75rem auto 0; } /* Kopfzeile und Navigation */ .gd-topbar { min-height: 78px; padding: 0.625rem clamp(1rem, 3vw, 2.625rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: sticky; top: 0; z-index: 10; background: var(--gd-color-surface); border-bottom: 4px solid var(--gd-color-yellow); box-shadow: var(--gd-shadow-header); } .gd-brand { display: flex; align-items: center; gap: 0.8125rem; text-decoration: none; } .gd-brand-logo { width: clamp(132px, 13vw, 174px); height: 54px; display: block; object-fit: contain; } .gd-brand-copy { display: grid; gap: 0.125rem; } .gd-brand-kicker { color: var(--gd-color-blue); font-size: var(--gd-font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .gd-brand-title { color: var(--gd-color-text); font-size: 1.0625rem; font-weight: 800; } .gd-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } .gd-nav-link { padding: 0.6875rem 0.875rem; color: var(--gd-color-blue); background: var(--gd-color-surface); border: 1px solid var(--gd-color-blue); font-size: 0.8125rem; font-weight: 700; text-decoration: none; } .gd-nav-link[aria-current="page"], .gd-nav-link.is-active { color: var(--gd-color-blue); background: var(--gd-color-yellow); border-bottom: 4px solid var(--gd-color-blue); } .gd-nav-link:hover, .gd-nav-link:focus-visible { color: #fff; background: var(--gd-color-blue); } /* Hero-Bereich */ .gd-hero { position: relative; overflow: hidden; min-height: 132px; padding: clamp(1.375rem, 2.8vw, 2.25rem); display: flex; align-items: center; justify-content: space-between; gap: 2.25rem; color: var(--gd-color-blue); background: linear-gradient(120deg, var(--gd-color-yellow), var(--gd-color-yellow-dark)); border-bottom: 7px solid var(--gd-color-blue); box-shadow: var(--gd-shadow-hero); } .gd-hero::after { content: ""; position: absolute; right: -70px; top: -105px; width: 290px; height: 290px; border: 42px solid rgba(15, 65, 148, 0.16); border-radius: 50%; pointer-events: none; } .gd-hero > * { position: relative; z-index: 1; } .gd-eyebrow { margin: 0 0 0.4375rem; color: var(--gd-color-blue); font-size: var(--gd-font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .gd-hero-title { margin: 0; color: var(--gd-color-blue); font-size: var(--gd-font-size-xl); line-height: 1.03; letter-spacing: -0.035em; } .gd-hero-copy { max-width: 760px; margin: 0.625rem 0 0; color: #253b68; font-size: 0.9375rem; line-height: var(--gd-line-height); } /* Kennzahlen */ .gd-stats { display: grid; grid-template-columns: repeat(3, minmax(108px, 124px)); gap: 0.5625rem; flex: 0 0 auto; } .gd-stat { min-height: 78px; padding: 0.8125rem 0.9375rem; display: grid; align-content: center; gap: 0.375rem; color: var(--gd-color-text); background: var(--gd-color-surface); border-top: 6px solid var(--gd-color-blue); box-shadow: var(--gd-shadow-stat); } .gd-stat-value { color: var(--gd-color-blue); font-size: 1.75rem; font-weight: 800; line-height: 1; } .gd-stat-label { color: var(--gd-color-muted); font-size: 0.8125rem; } /* Formulare und Filter */ .gd-toolbar { margin: 1.25rem 0 1.125rem; display: flex; align-items: end; gap: 0.875rem; } .gd-field { display: grid; gap: 0.3125rem; } .gd-field-label { color: var(--gd-color-blue); font-size: var(--gd-font-size-sm); font-weight: 800; } .gd-input, .gd-select, .gd-textarea { width: 100%; padding: 0.6875rem 0.8125rem; color: var(--gd-color-text); background: var(--gd-color-surface); border: 1px solid var(--gd-color-line); border-radius: var(--gd-radius-md); outline: none; } .gd-input:focus, .gd-select:focus, .gd-textarea:focus { border-color: var(--gd-color-blue); box-shadow: 0 0 0 3px rgba(15, 65, 148, 0.14); } .gd-segmented { display: flex; flex-wrap: wrap; } .gd-segment { min-height: 43px; padding: 0 0.875rem; color: #424242; background: var(--gd-color-surface); border: 1px solid var(--gd-color-line); border-left: 0; font-weight: 700; cursor: pointer; } .gd-segment:first-child { border-left: 1px solid var(--gd-color-line); border-radius: var(--gd-radius-md) 0 0 var(--gd-radius-md); } .gd-segment:last-child { border-radius: 0 var(--gd-radius-md) var(--gd-radius-md) 0; } .gd-segment[aria-pressed="true"], .gd-segment.is-active { color: var(--gd-color-blue); background: var(--gd-color-yellow); border-color: var(--gd-color-blue); box-shadow: inset 0 -4px 0 var(--gd-color-blue); } /* Buttons */ .gd-button { min-height: 40px; padding: 0.625rem 0.875rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; color: var(--gd-color-blue); background: var(--gd-color-surface); border: 1px solid var(--gd-color-blue); font-size: 0.8125rem; font-weight: 800; text-decoration: none; cursor: pointer; } .gd-button--primary { color: #fff; background: var(--gd-color-blue); border-bottom: 4px solid var(--gd-color-yellow); } .gd-button--accent { color: var(--gd-color-blue); background: var(--gd-color-yellow); border-bottom: 4px solid var(--gd-color-blue); } .gd-button:hover, .gd-button:focus-visible { color: #fff; background: var(--gd-color-blue-dark); } .gd-button:disabled { opacity: 0.5; cursor: not-allowed; } .gd-icon-button { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; color: var(--gd-color-blue); background: var(--gd-color-surface); border: 1px solid var(--gd-color-line); border-radius: var(--gd-radius-sm); font-size: 1.25rem; cursor: pointer; } /* Panels und Inhaltsraster */ .gd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 1.125rem; } .gd-panel { min-width: 0; overflow: hidden; background: var(--gd-color-surface); border: 1px solid var(--gd-color-line); border-top: 5px solid var(--gd-color-yellow); box-shadow: var(--gd-shadow-panel); } .gd-panel--blue { border-top-color: var(--gd-color-blue); } .gd-panel-header { padding: 1.125rem; display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; border-bottom: 1px solid var(--gd-color-line); } .gd-panel-title { margin: 0; color: var(--gd-color-text); font-size: var(--gd-font-size-lg); } .gd-panel-body { padding: 1.125rem; } .gd-panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.75rem; } /* Listen und Datensatzkarten */ .gd-list { margin: 0; padding: 0; list-style: none; } .gd-record { padding: 1.25rem 0.625rem; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.625rem; border-bottom: 1px solid var(--gd-color-line-soft); } .gd-record:last-child { border-bottom: 0; } .gd-record-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5625rem; } .gd-record-title { margin: 0; font-size: var(--gd-font-size-base); } .gd-record-copy { margin: 0.5625rem 0; color: var(--gd-color-text-soft); line-height: var(--gd-line-height); } .gd-meta { margin: 0; padding-left: 1rem; display: grid; align-content: start; gap: 0.75rem; border-left: 3px solid var(--gd-color-blue); } .gd-meta dt { color: var(--gd-color-muted); font-size: 0.625rem; font-weight: 800; text-transform: uppercase; } .gd-meta dd { margin: 0.375rem 0 0; font-size: 0.8125rem; } /* Status und Hinweise */ .gd-badge { padding: 0.25rem 0.5625rem; color: var(--gd-color-blue); background: #e8eef8; border-radius: 999px; font-size: var(--gd-font-size-xs); font-weight: 800; } .gd-badge--danger { color: #fff; background: var(--gd-color-red); } .gd-badge--info { color: #fff; background: var(--gd-color-blue); } .gd-badge--success { color: var(--gd-color-text); background: #92c15e; } .gd-status { display: inline-flex; align-items: center; gap: 0.4375rem; color: var(--gd-color-blue); font-size: var(--gd-font-size-sm); font-weight: 800; } .gd-status::before { content: ""; width: 9px; height: 9px; background: var(--gd-color-green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(92, 157, 50, 0.15); } .gd-alert { margin-bottom: 1.125rem; padding: 0.875rem 1rem; display: flex; align-items: center; gap: 0.75rem; border-radius: var(--gd-radius-md); } .gd-alert--error { color: var(--gd-color-error-text); background: var(--gd-color-error-bg); border: 1px solid var(--gd-color-error-line); } .gd-alert--success { color: #31561e; background: var(--gd-color-success-bg); border: 1px solid #bfd8a9; } .gd-empty { min-height: 180px; padding: 1.875rem; display: grid; place-items: center; color: var(--gd-color-muted); text-align: center; } /* Eingebettete Berichte */ .gd-embed { height: clamp(560px, calc(100vh - 330px), 850px); min-height: 560px; background: #f5f5f5; border-top: 1px solid var(--gd-color-line); border-bottom: 1px solid var(--gd-color-line); } .gd-embed iframe { width: 100%; height: 100%; display: block; background: var(--gd-color-surface); border: 0; } /* Fußzeile und Hilfsklassen */ .gd-footer { margin-top: 1.375rem; padding: 1.125rem 0 1.5rem; display: flex; justify-content: space-between; gap: 1.25rem; color: var(--gd-color-muted); border-top: 4px solid var(--gd-color-yellow); font-size: var(--gd-font-size-sm); } .gd-muted { color: var(--gd-color-muted); } .gd-sr-only { width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 980px) { .gd-hero { align-items: stretch; flex-direction: column; } .gd-stats { width: 100%; grid-template-columns: repeat(3, 1fr); } .gd-layout { grid-template-columns: 1fr; } } @media (max-width: 720px) { .gd-topbar { position: static; align-items: flex-start; flex-wrap: wrap; } .gd-page { width: min(100% - 1.25rem, var(--gd-content-width)); margin-top: 0.625rem; } .gd-hero { min-height: 0; padding: 1.125rem; } .gd-hero-title { font-size: 2.125rem; } .gd-toolbar { align-items: stretch; flex-direction: column; } .gd-record { grid-template-columns: 1fr; gap: 1rem; padding-inline: 0; } .gd-meta { padding: 0.75rem 0.75rem 0.75rem 1rem; background: #f5f5f5; } .gd-panel-header, .gd-alert { align-items: flex-start; flex-direction: column; } .gd-embed { height: 70vh; min-height: 480px; } } @media (max-width: 430px) { .gd-brand-copy { display: none; } .gd-stats { grid-template-columns: 1fr; } .gd-stat { min-height: 68px; grid-template-columns: auto 1fr; align-items: center; } .gd-footer { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .gd-body *, .gd-body *::before, .gd-body *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }