/* --------------------------------------------------------- Werkbank — Stylesheet v2 Design-Richtung: ruhig, hell, viel Weißraum, Systemschrift — angelehnt an Apples Produktseiten. Ordner sind das zentrale Navigationselement, jede Kategorie hat eine eigene Akzentfarbe als Wiedererkennungsmerkmal (Struktur, keine Dekoration). --------------------------------------------------------- */ :root { --bg: #F5F5F7; --surface: #FFFFFF; --ink: #1D1D1F; --ink-soft: #6E6E73; --divider: #E3E3E6; --c-neueste: #AF52DE; --c-schule: #0071E3; --c-handball: #E0483D; --c-freizeit: #34C759; /* Aurora-Akzente für den lebendigen Hintergrund & den Titel */ --aurora-1: #6D5DFB; --aurora-2: #FF4FA3; --aurora-3: #22D3EE; --aurora-4: #FFB454; --max-width: 980px; --radius-lg: 26px; --radius-sm: 18px; --radius-icon: 18px; /* Tönung der "Liquid Glass"-Flächen (Karten, Nav, Suchfeld) — im Hellmodus weiß, im Dunkelmodus unten auf ein dunkles Grau gedreht. Jede rgba(var(--glass-tint), a)-Stelle folgt dieser einen Variable. */ --glass-tint: 255, 255, 255; --glass-shadow: 0, 0, 0; --aurora-opacity: 0.55; color-scheme: light; } /* ---------- Dunkelmodus ---------- */ /* Standardmäßig folgt es der Systemeinstellung (erster Block). Das Umschalt-Symbol oben rechts (siehe app.js, toggleTheme()) setzt zusätzlich data-theme="dark"/"light" auf für eine bewusste, gespeicherte Wahl — die zweiten beiden Blöcke setzen dieselben Werte unabhängig von der Systemeinstellung durch bzw. schalten sie ab. Die Aurora bleibt in beiden Fällen als Wiedererkennungsmerkmal erhalten, nur die Flächen drehen von hellem auf dunkles Glas. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B0B10; --surface: #1C1C22; --ink: #F2F2F5; --ink-soft: #9A9AA3; --divider: #303038; --glass-tint: 32, 32, 40; --aurora-opacity: 0.4; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0B0B10; --surface: #1C1C22; --ink: #F2F2F5; --ink-soft: #9A9AA3; --divider: #303038; --glass-tint: 32, 32, 40; --aurora-opacity: 0.4; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { position: relative; margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---------- Lebendiger Aurora-Hintergrund ---------- */ /* Ein weich verlaufender, langsam wandernder Farbteppich hinter der ganzen Seite. Läuft rein über CSS (keine zusätzlichen Elemente im HTML nötig) und bleibt hinter allen Karten/Flächen sichtbar, die selbst eine deckende Fläche haben. */ body::before { content: ''; position: fixed; inset: -15%; z-index: -1; background-image: radial-gradient(32% 32% at 18% 22%, color-mix(in srgb, var(--aurora-1) 65%, transparent), transparent 70%), radial-gradient(30% 30% at 82% 12%, color-mix(in srgb, var(--aurora-2) 60%, transparent), transparent 70%), radial-gradient(34% 34% at 14% 85%, color-mix(in srgb, var(--aurora-3) 55%, transparent), transparent 70%), radial-gradient(30% 30% at 88% 88%, color-mix(in srgb, var(--aurora-4) 55%, transparent), transparent 70%); filter: blur(60px) saturate(150%); opacity: var(--aurora-opacity); transition: opacity 0.3s ease; animation: auroraDrift 30s ease-in-out infinite alternate; pointer-events: none; } @keyframes auroraDrift { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(2.5%, -3%, 0) rotate(6deg) scale(1.08); } 100% { transform: translate3d(-3%, 2.5%, 0) rotate(-5deg) scale(1); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } a { color: inherit; } /* ---------- Kopfzeile ---------- */ .site-nav { position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, rgba(var(--glass-tint),0.7), rgba(var(--glass-tint),0.42)); backdrop-filter: saturate(190%) blur(22px); -webkit-backdrop-filter: saturate(190%) blur(22px); border-bottom: 1px solid rgba(var(--glass-tint),0.5); box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.75), 0 1px 24px rgba(31,31,45,0.06); } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-top: 8px; padding-bottom: 8px; } .site-logo { font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: -0.01em; transition: color 0.18s ease; } .site-logo:hover { color: var(--aurora-1); } /* ---------- Marken-Banner in der Navigation (oben links) ---------- */ .nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity 0.18s ease; } .nav-brand:hover { opacity: 0.82; } .nav-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--glass-tint),0.85); box-shadow: 0 2px 8px rgba(20,20,30,0.18); flex-shrink: 0; } .nav-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; } .nav-brand-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); } .nav-brand-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ink-soft); } .nav-school-logo { height: 13px; width: auto; object-fit: contain; } @media (max-width: 560px) { .nav-brand-sub { display: none; } } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); } .breadcrumb a { text-decoration: none; color: var(--ink-soft); } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .current { color: var(--ink); font-weight: 600; } .breadcrumb .sep { color: var(--divider); } /* ---------- Umschalter oben rechts (Theme + Sprache) ---------- */ .nav-right { display: flex; align-items: center; gap: 10px; } .nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--glass-tint), 0.6); background: linear-gradient(178deg, rgba(var(--glass-tint), 0.74), rgba(var(--glass-tint), 0.44)); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(var(--glass-tint), 0.7), 0 1px 2px rgba(0,0,0,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; } .nav-icon-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(var(--glass-tint), 0.8), 0 4px 10px rgba(0,0,0,0.08); } .nav-icon-btn:active { transform: translateY(0) scale(0.94); } .nav-icon-btn svg { width: 17px; height: 17px; } .nav-lang-btn { width: auto; min-width: 34px; padding: 0 11px; } @media (max-width: 560px) { .nav-right { gap: 6px; } .nav-icon-btn { width: 30px; height: 30px; } .nav-lang-btn { padding: 0 8px; font-size: 11px; } } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 88px 24px 56px; } .hero h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 16px; background: linear-gradient(100deg, var(--aurora-1), var(--aurora-2) 35%, var(--aurora-3) 68%, var(--aurora-4)); background-size: 260% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: heroShine 10s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .hero h1 { animation: none; } } @keyframes heroShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .hero h1::after { content: ''; display: block; width: 64px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); background-size: 260% auto; animation: heroShine 10s ease-in-out infinite alternate; } /* Tageszeit-Begrüßung über dem Titel und erklärender Untertitel darunter — geben Erstbesuchenden sofort Kontext, wer Marc ist und was hier zu finden ist. */ .hero-eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.85; } .hero-sub { max-width: 560px; margin: 0 auto; color: var(--ink-soft); font-size: 17px; line-height: 1.5; } /* Kennzahlen, die beim ersten Laden von 0 hochzählen (siehe initHero() in app.js) — machen die Startseite auf den ersten Blick lebendiger. */ .hero-stats { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 34px; flex-wrap: wrap; } .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: heroStatIn 0.6s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 90ms); } @keyframes heroStatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hero-stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(100deg, var(--aurora-1), var(--aurora-3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero-stat-label { font-size: 13px; color: var(--ink-soft); } @media (prefers-reduced-motion: reduce) { .hero-stat { animation: none; } } /* ---------- Startseiten-Suche ---------- */ .home-search { position: relative; max-width: 520px; margin: 0 auto 40px; } .home-search-icon { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; } /* Tastatur-Hinweis ("/" springt ins Suchfeld) — blendet sich aus, sobald fokussiert oder etwas eingetippt wurde, damit er nicht im Weg steht. */ .home-search-hint { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--divider); background: var(--surface); color: var(--ink-soft); font-size: 12px; font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, monospace; pointer-events: none; transition: opacity 0.15s ease; } .home-search-hint[hidden] { display: none; } @media (max-width: 560px) { .home-search-hint { display: none; } } .home-search-input { width: 100%; font: inherit; font-size: 16px; padding: 14px 18px 14px 46px; border-radius: 999px; border: 1px solid rgba(var(--glass-tint),0.6); background: linear-gradient(178deg, rgba(var(--glass-tint),0.74), rgba(var(--glass-tint),0.44)); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.7), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); color: var(--ink); transition: box-shadow 0.2s ease, transform 0.2s ease; } .home-search-input::placeholder { color: var(--ink-soft); } .home-search-input:focus { outline: none; box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.8), 0 0 0 3px color-mix(in srgb, var(--c-schule) 35%, transparent), 0 12px 28px rgba(0,0,0,0.09); } /* Sucheingabe entfernt bei manchen Browsern das native "x"-Icon nicht */ .home-search-input::-webkit-search-cancel-button { cursor: pointer; } .search-results { min-height: 40vh; } /* Treffer-Hervorhebung in Titel/Beschreibung der Suchergebnisse */ .search-results mark, .post-excerpt mark, h3 mark { background: color-mix(in srgb, var(--aurora-4) 55%, transparent); color: inherit; padding: 0 2px; border-radius: 4px; } /* ---------- Ordner-Raster ---------- */ main { padding-bottom: 96px; } .folder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 0 0 8px; } .folder-card, .post-card { position: relative; isolation: isolate; display: block; background: linear-gradient(178deg, rgba(var(--glass-tint),0.74), rgba(var(--glass-tint),0.44)); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(var(--glass-tint),0.6); text-decoration: none; color: var(--ink); box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.7), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); } /* Gestaffeltes Einblenden — jede Karte bekommt inline eine eigene --i-Reihenfolge (siehe app.js) und blendet leicht versetzt zur vorherigen ein, statt dass die ganze Liste auf einmal aufpoppt. */ .folder-card, .post-list-item { animation: cardIn 0.5s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .folder-card, .post-list-item { animation: none; } } /* Zeigerverfolgendes Glanzlicht — die "Liquid Glass"-Textur reagiert auf die Maus-/Fingerposition (--mx/--my werden per JS gesetzt). */ .folder-card::before, .post-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--glass-tint),0.65), transparent 62%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .folder-card:hover::before, .post-card:hover::before, .folder-card:focus-visible::before, .post-card:focus-visible::before, .post-card:focus-within::before { opacity: 1; } .folder-card { border-radius: var(--radius-lg); padding: 28px 24px; } @media (prefers-reduced-motion: no-preference) { .folder-card, .post-card { transition: transform 0.18s ease, box-shadow 0.18s ease; } } .folder-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.8), 0 4px 8px rgba(0,0,0,0.05), 0 16px 32px rgba(0,0,0,0.1); } .folder-icon { width: 56px; height: 56px; border-radius: var(--radius-icon); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #fff; position: relative; background: linear-gradient(155deg, color-mix(in srgb, var(--tile-accent, var(--ink-soft)) 82%, white 8%), color-mix(in srgb, var(--tile-accent, var(--ink-soft)) 62%, black 14%)); box-shadow: inset 0 1px 1px rgba(var(--glass-tint),0.55), inset 0 -6px 10px rgba(0,0,0,0.14), 0 6px 16px -4px color-mix(in srgb, var(--tile-accent, var(--ink-soft)) 55%, transparent); } @media (prefers-reduced-motion: no-preference) { .folder-icon { transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; } } .folder-card:hover .folder-icon { transform: scale(1.08) rotate(-4deg); } .folder-card:active .folder-icon { transform: scale(0.94) rotate(0deg); } .folder-card:active, .post-card:active { transform: scale(0.985); } .folder-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(var(--glass-tint),0.55) 0%, rgba(var(--glass-tint),0) 48%); mix-blend-mode: overlay; } .folder-icon svg { width: 26px; height: 26px; position: relative; z-index: 1; } .folder-icon.icon-neueste { --tile-accent: var(--c-neueste); } .folder-icon.icon-schule { --tile-accent: var(--c-schule); } .folder-icon.icon-freizeit { --tile-accent: var(--c-freizeit); } .folder-icon.icon-handball { background: linear-gradient(155deg, rgba(var(--glass-tint),0.94), rgba(var(--glass-tint),0.64)); box-shadow: inset 0 1px 1px rgba(var(--glass-tint),0.85), inset 0 -6px 10px rgba(0,0,0,0.06), 0 6px 16px -4px rgba(224,72,61,0.35); } .folder-icon-img { width: 76%; height: 76%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12)); } .icon-duo { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; z-index: 1; } .icon-duo-badge { position: absolute; right: -10px; bottom: -10px; width: 17px; height: 17px; background: color-mix(in srgb, var(--c-freizeit) 65%, black 12%); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(var(--glass-tint),0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .icon-duo-badge svg { width: 9px; height: 9px; } .folder-card h2 { font-size: 19px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; } .folder-card .folder-count { font-size: 14px; color: var(--ink-soft); } .section-label { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 48px 0 20px; } .section-label:first-child { margin-top: 0; } .section-label--featured, .section-label--recent, .section-label--favorites { display: flex; align-items: center; gap: 10px; } .sparkle { display: inline-block; animation: sparkleSpin 3.5s ease-in-out infinite; } @keyframes sparkleSpin { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(14deg) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .sparkle { animation: none; } } /* "Zuletzt geöffnet" — persönlicher Verlauf (lokal im Browser, siehe getRecentPosts()/recordRecent() in app.js), inkl. Lösch-Button, weil das Gerät oft im Unterricht mit wechselnden Klassen genutzt wird. */ .section-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 48px 0 20px; } .section-label-row .section-label { margin: 0; } .section-label-row:first-child { margin-top: 0; } .clear-recent-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: none; border: none; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .clear-recent-btn:hover { color: var(--ink); } /* ---------- Beitragsliste ---------- */ .post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .post-card { border-radius: var(--radius-sm); padding: 20px 24px; display: flex; align-items: flex-start; gap: 16px; } .post-card:hover { box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.8), 0 4px 8px rgba(0,0,0,0.05), 0 12px 28px rgba(0,0,0,0.09); } /* Das jeweils eigene Emoji jedes Spiels/Tools (identisch zum Titel-Icon im Beitrag selbst) — macht Karten auf einen Blick unterscheidbar, statt dass alles unter demselben Kategorie-Symbol verschwimmt. */ .post-emoji { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; border-radius: var(--radius-icon); background: linear-gradient(155deg, rgba(var(--glass-tint),0.85), rgba(var(--glass-tint),0.5)); box-shadow: inset 0 1px 1px rgba(var(--glass-tint),0.7), inset 0 -4px 8px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06); } /* Fallback, wenn ein Beitrag (noch) kein eigenes Emoji hat: dieselbe farbige Kategorie-Verlaufsfläche wie beim kleinen icon-badge, nur groß. */ .post-emoji--plain { color: #fff; font-size: 22px; box-shadow: inset 0 1px 1px rgba(var(--glass-tint),0.5), inset 0 -4px 8px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08); } .post-card-body { flex: 1; min-width: 0; } /* Empfohlene Beiträge heben sich mit einem dezenten Aurora-Rand und -Schimmer von der übrigen Liste ab. */ .post-card--featured { border: 1px solid color-mix(in srgb, var(--aurora-1) 35%, rgba(var(--glass-tint),0.6)); box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.7), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px color-mix(in srgb, var(--aurora-1) 16%, rgba(0,0,0,0.06)); } .post-card--featured:hover { box-shadow: inset 0 1px 0 rgba(var(--glass-tint),0.8), 0 4px 8px rgba(0,0,0,0.05), 0 14px 30px color-mix(in srgb, var(--aurora-1) 22%, rgba(0,0,0,0.09)); } .post-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; } /* "Neu" bekommt automatisch, was auf das aktuellste Datum im Bestand fällt (siehe latestPostDate() in app.js) — bleibt dadurch immer knapp. */ .badge-new { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: linear-gradient(120deg, var(--aurora-2), var(--aurora-1)); box-shadow: 0 2px 6px color-mix(in srgb, var(--aurora-2) 45%, transparent); } .icon-badge { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; position: relative; box-shadow: inset 0 1px 1px rgba(var(--glass-tint),0.5), inset 0 -3px 5px rgba(0,0,0,0.12); } .icon-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(var(--glass-tint),0.55) 0%, rgba(var(--glass-tint),0) 55%); mix-blend-mode: overlay; } .icon-badge svg { width: 13px; height: 13px; position: relative; z-index: 1; } .icon-badge--neueste { background: linear-gradient(155deg, color-mix(in srgb, var(--c-neueste) 85%, white 5%), color-mix(in srgb, var(--c-neueste) 62%, black 12%)); } .icon-badge--schule { background: linear-gradient(155deg, color-mix(in srgb, var(--c-schule) 85%, white 5%), color-mix(in srgb, var(--c-schule) 62%, black 12%)); } .icon-badge--handball { background: linear-gradient(155deg, color-mix(in srgb, var(--c-handball) 85%, white 5%), color-mix(in srgb, var(--c-handball) 62%, black 12%)); } .icon-badge--freizeit { background: linear-gradient(155deg, color-mix(in srgb, var(--c-freizeit) 85%, white 5%), color-mix(in srgb, var(--c-freizeit) 62%, black 12%)); } .post-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; } .post-external-icon { margin-left: 6px; vertical-align: middle; position: relative; top: -2px; color: var(--ink-soft); opacity: 0.6; } /* Der eigentliche Klick-/Navigationsbereich der Karte: liegt als Vollflächen- Overlay UNTER dem Favoriten-Stern (aber über dem Kartenhintergrund), statt die Karte selbst ein zu sein — so kann der Stern-Button daneben statt verschachtelt sitzen, ganz ohne Klick-Propagation-Klimmzüge. */ .post-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* ---------- Favoriten-Stern auf jeder Beitragskarte ---------- */ .post-fav-btn { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(var(--glass-tint), 0.6); background: linear-gradient(178deg, rgba(var(--glass-tint),0.74), rgba(var(--glass-tint),0.44)); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); color: var(--ink-soft); cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; } .post-fav-btn svg { width: 15px; height: 15px; } .post-fav-btn:hover { transform: scale(1.08); color: var(--ink); } .post-fav-btn:active { transform: scale(0.9); } .post-fav-btn.is-active { color: var(--aurora-4); } .post-fav-btn:focus-visible { outline: 2px solid var(--c-schule); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .post-fav-btn { transition: none; } } /* ---------- Tag-Filter (quer zu den Ordnern) ---------- */ .tag-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 560px; margin: -12px auto 40px; } .tag-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(var(--glass-tint), 0.6); background: linear-gradient(178deg, rgba(var(--glass-tint),0.6), rgba(var(--glass-tint),0.32)); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); color: var(--ink-soft); cursor: pointer; transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .tag-chip:hover { transform: translateY(-1px); color: var(--ink); } .tag-chip.is-active { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--aurora-2), var(--aurora-1)); box-shadow: 0 2px 8px color-mix(in srgb, var(--aurora-2) 45%, transparent); } .tag-chip:focus-visible { outline: 2px solid var(--c-schule); outline-offset: 2px; } .tag-filter-clear { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: none; border: none; padding: 6px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .tag-filter-clear:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .tag-chip { transition: none; } } @media (max-width: 560px) { .tag-filter-row { max-width: 100%; } } .post-excerpt { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; } .post-meta { font-size: 13px; color: var(--ink-soft); } .empty-state { color: var(--ink-soft); padding: 32px 0; font-size: 15px; } /* ---------- Einzelner Beitrag ---------- */ .post-header { padding: 48px 0 8px; } .post-header h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 14px 0 10px; } article.post-body { padding-bottom: 96px; font-size: 17px; } article.post-body h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-top: 40px; } article.post-body p { margin: 16px 0; } article.post-body code { background: var(--divider); padding: 0.15rem 0.4rem; border-radius: 5px; font-size: 0.92em; } article.post-body blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--c-schule); color: var(--ink-soft); font-style: italic; } /* ---------- Fusszeile ---------- */ .site-footer { border-top: 1px solid var(--divider); padding: 24px 0 48px; font-size: 13px; color: var(--ink-soft); } a:focus-visible, .folder-card:focus-visible, .post-card:focus-visible { outline: 2px solid var(--c-schule); outline-offset: 3px; } @media (max-width: 480px) { .hero { padding: 56px 20px 40px; } .hero-stats { gap: 24px; } .post-emoji { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; } .post-card { gap: 12px; padding: 18px 18px; } }