/* Schrift einbinden */ @font-face { font-family: "ContentNotoSans"; src: url("/fonts/NotoSans-Regular.ttf") format("truetype"); font-display: swap; } /* ===================== */ /* Theme-Variablen Light */ /* ===================== */ :root { color-scheme: light; --content-font: "ContentNotoSans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; /* Flächen */ --content-bg: #f7fafc; /* sehr hell, fast weißgrau */ --content-surface: #ffffff; /* Flächen/Karten */ --content-tint: #e9f2fb; /* zarte, graublaue Fläche */ --content-border: #e0e2e7; /* Rahmen hellgrau */ /* Text */ --content-text: #1f2937; /* Haupttext (dunkelgrau) */ --content-muted: #6b7280; /* sekundärer Text (mittelgrau) */ /* Akzente */ --content-primary: #2b6cb0; /* seriöses, gedämpftes Blau */ --content-primary-600: #245a92; /* dunkleres Blau für Hover/Fokus */ --content-primary-50: #f0f6fd; /* sehr helles Blau für Flächen */ --content-focus: #90cdf4; /* Fokus-Ring/Akzent */ /* Navbar/Dropdown */ --content-menu-bar-bg: #f8f9fae6; /* leicht transparentes Grau */ --content-menu-bar-border-col: #d9dbd6dd; /* dezente Kante */ --content-menu-bar-ddmenu-bg: #7593d97c; /* halbtransparentes graublau */ /* Schatten */ --content-shadow: 0 4px 14px rgba(0,0,0,0.08); /* Neu: Menüs & Inputs/Buttons für Theme-Toggle */ --content-nav-fg: #1f2937; --content-nav-hover-bg: rgba(0,0,0,0.06); --content-dd-fg: #1f2937; --content-input-bg: #ffffff; --content-input-fg: #1f2937; --content-input-border: #e0e2e7; --content-input-placeholder: #94a3b8; --content-button-primary-fg: #ffffff; --content-button-secondary-bg: #ffffff; --content-button-secondary-fg: #2b6cb0; --content-button-secondary-border: #cfe2f6; } /* ===================== */ /* Theme-Variablen Dark */ /* (per aktiviert) */ /* ===================== */ .content-dark { color-scheme: dark; --content-font: "ContentNotoSans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; /* Flächen */ --content-bg: #0f141a; --content-surface: #141a21; --content-tint: #0b1220; --content-border: #2a3340; /* Text */ --content-text: #e6edf5; --content-muted: #9aa9bd; /* Akzente */ --content-primary: #6fb0ff; --content-primary-600: #4d94e8; --content-primary-50: #0f213a; --content-focus: #2b6cb0; /* Navbar/Dropdown */ --content-menu-bar-bg: rgba(26,34,46,0.88); --content-menu-bar-border-col: #3a63a3; --content-menu-bar-ddmenu-bg: rgba(26,34,46,0.94); /* Schatten kräftiger */ --content-shadow: 0 6px 20px rgba(0,0,0,0.45); /* Neue Theme-abhängige Zusätze */ --content-nav-fg: #e6edf5; --content-nav-hover-bg: rgba(255,255,255,0.12); --content-dd-fg: #e6edf5; --content-input-bg: #1a222c; --content-input-fg: #e6edf5; --content-input-border: #334155; --content-input-placeholder: #8aa0b8; --content-button-primary-fg: #ffffff; --content-button-secondary-bg: #1e2733; --content-button-secondary-fg: #e6edf5; --content-button-secondary-border: #3b4f6b; } .content-body { min-height: 100%; background-color: var(--content-bg); background-image: linear-gradient(180deg, var(--content-bg), var(--content-tint) 1200px); color: var(--content-text); transition: background-color .2s ease, color .2s ease, background-image .2s ease; } /* ===================== */ /* Seiten-/Grundlayout */ /* ===================== */ .content-page { font-family: var(--content-font); color: var(--content-text); background: linear-gradient(180deg, var(--content-bg), var(--content-tint) 1200px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Überschriften */ .content-h1, .content-h2, .content-h3 { margin: 0 0 0.5rem 0; line-height: 1.25; font-weight: 600; color: var(--content-text); } .content-h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: 0.1px; } .content-h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); color: #243446; } .content-h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); color: #2c3e50; } /* Zusammenfassung */ .content-summary { background: var(--content-primary-50); border: 1px solid var(--content-border); color: #1f3550; border-radius: 12px; padding: 1rem 1.25rem; margin: 0.5rem 0 1.25rem 0; } /* Lauftext */ .content-body { font-size: 1rem; line-height: 1.65; color: var(--content-text); } .content-body p { margin: 0 0 0.9rem 0; } .content-body small, .content-muted { color: var(--content-muted); } /* Karten/Boxen */ .content-card { background: var(--content-surface); border: 1px solid var(--content-border); border-radius: 14px; box-shadow: var(--content-shadow); overflow: hidden; font-family: var(--content-font); margin-left: min(1rem,3%); /* resposive ;-) */ margin-right: min(1rem,3%); /* resposive ;-) */ } .content-card-title { padding: min(2rem,1%); background: linear-gradient(180deg, #e6e9fe, #eef4fb); border-bottom: 1px solid var(--content-border); font-weight: 600; font-size: clamp(1rem, 1.5vw,1.26rem); color: #213c59; white-space: nowrap; /* kein Zeilenumbruch */ overflow: hidden; /* Überlauf abschneiden */ text-overflow: ellipsis; /* "..." anzeigen */ } .content-card-title:hover { background: linear-gradient(180deg, #f6f9fe, #eef4fb); } /* Basis: IMMER vorhanden (auch im offenen Zustand) */ .content-card-body { /* WICHTIG: numerischer Startwert, nicht auto/none */ max-height: 1000px; /* nimm etwas, das sicher groß genug ist */ overflow: hidden; /* verhindert “Überquellen” während der Animation */ transition: max-height 0.33s ease; } /* ZU-Zustand: Zusatzklasse – wird zu .content-card-body hinzugefügt */ .content-card-body.content-card-body-eingeklappt { max-height: 100px; } .content-card-body { padding: min(3rem,3%); /* resposive Padding ;-) */ font-size: clamp(0.93rem, 0.94vw,0.94rem); text-align: justify; line-height: 1.1rem; } .content-card-body-titel { font-size: clamp(1rem, 1.1vw,1.1rem); font-weight:600; } .content-card-body-vorspann { font-style: italic; font-size: clamp(0.94rem, 1vw,1rem); text-align: left; line-height: 1.33rem; } /* Schleier über eingeklappter Karte -------------------------------------------------*/ .content-card-body-eingeklappt { max-height: 100px; overflow: hidden; position: relative; /* Fade-Bereich: hier anpassen */ --fade-start: 0px; /* ab hier beginnt das Ausblenden */ --fade-end: 140px; /* bis hier vollständig verschwunden */ cursor: pointer; } /* Sauber: echtes Ausblenden per Masking (unterstützte Browser) */ @supports (-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000)) { .content-card-body-eingeklappt::after { background: none; } .content-card-body-eingeklappt { -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) var(--fade-start), rgba(0,0,0,0) var(--fade-end), rgba(0,0,0,0) 100% ); mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,1) var(--fade-start), rgba(0,0,0,0) var(--fade-end), rgba(0,0,0,0) 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } /* Fallback ohne Masking: Overlay in Kartenfarbe (weich von start -> end, danach voll) */ .content-card-body-eingeklappt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( to bottom, transparent 0, transparent var(--fade-start), rgb(from var(--content-surface) r g b / 0) var(--fade-start), rgb(from var(--content-surface) r g b / 1) var(--fade-end), rgb(from var(--content-surface) r g b / 1) 100% ); } /* Bild in TextBox --------------------------------------------*/ .content-card-image-container { display: flex; flex-direction: row; justify-content: space-around; overflow: clip; background: linear-gradient(180deg, var(--content-bg), var(--content-tint) 300px); } .content-card-image-image { max-width: 300px; height: auto; max-height: 300px; aspect-ratio: 1 / 1; object-fit: cover; } .content-card-image-credit { max-width: 100%; text-align: center; font-size: 0.5rem; } /* ===================== */ /* Buttons (Theme-fähig) */ /* ===================== */ /* Buttons, auch native