Elternbeirat/Elternbeirat.Web/wwwroot/app.css

/* Design tokens: one place for colours, spacing, radius, shadow and type. Every
   component pulls from these variables (var(--...)), so the whole site shares one
   look and a change here ripples everywhere. Warm-friendly palette: the brand blue
   plus a warm accent. No external anything -- just CSS custom properties. */
:root {
    /* Brand blue and two derived shades (darker for hover, lighter for tints). */
    --color-brand: #1f3a5f;
    --color-brand-dark: #16293f;
    --color-brand-tint: #eef2f7;

    /* The header bar's background. Its own token (not --color-brand) so it stays a
       deep blue in dark mode, where --color-brand is lightened for text/links. */
    --color-header: #1f3a5f;

    /* Warm accent for highlights (active nav, event dates, call-outs). */
    --color-accent: #e8a13a;
    --color-accent-dark: #c9821c;

    /* Headings. Its own token (not --color-brand) so headings and links can differ:
       in dark mode headings become a soft white while links keep the brand blue. */
    --color-heading: #1f3a5f;

    /* Text and surfaces. */
    --color-text: #222;
    --color-text-soft: #555;
    --color-bg: #fff;              /* cards / content surface */
    --color-page: #f4f1ea;         /* soft warm page background behind the content */
    --color-surface: #fafafa;
    --color-border: #e0e0e0;

    /* Spacing scale -- use these instead of ad-hoc rem values so gaps stay even. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    /* Rounded corners and a soft shadow for cards, matching the friendly tone. */
    --radius: 12px;
    --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(31, 58, 95, 0.08), 0 4px 12px rgba(31, 58, 95, 0.06);
    --shadow-hover: 0 2px 6px rgba(31, 58, 95, 0.12), 0 8px 20px rgba(31, 58, 95, 0.1);

    /* One transition speed for hovers/focus across the site. */
    --transition: 0.15s ease;

    /* Reading width, so long text lines never get uncomfortably wide. */
    --content-width: 60rem;
}

/* Dark mode: follows the visitor's OS setting automatically (prefers-color-scheme).
   No toggle and no JavaScript -- the browser applies this when the operating system
   is set to dark. Only the colour tokens change; layout, spacing, radius and type
   stay put, so the whole site adapts from this one block. Choices: a deep blue-grey
   rather than pure black; cards a touch lighter than the page so they still lift off
   it; the accent nudged brighter so it doesn't glare; shadows darkened since soft
   light shadows are invisible on a dark background. The header keeps its deep blue. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-brand: #7fb0e6;        /* headings/links need to stay bright enough
                                          to read on the dark page background, not
                                          just on the lighter card surface */
        --color-brand-dark: #a3c8f0;   /* hover goes lighter, not darker, on dark */
        --color-brand-tint: #232a35;

        --color-header: #1a2a3f;       /* a hair deeper, to sit calmly on dark */

        --color-accent: #f0b45c;
        --color-accent-dark: #f0b45c;  /* no darkening needed on a dark surface */

        --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
                                          body text so headings still lead the page */

        --color-text: #a2a8b2;         /* eased right down to the soft tone -- full
                                          near-white reads as glare on the dark page */
        --color-text-soft: #a2a8b2;
        --color-bg: #222834;           /* cards / content surface */
        --color-page: #171b22;         /* page background, darker than the cards */
        --color-surface: #1c212a;
        --color-border: #333b47;

        --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.4);
    }
}

/* Base styles. Self-hosted system font stack — no external fonts, for privacy. */
html {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.65;
    color: var(--color-text);
    /* Tell the browser we support both schemes, so form controls, scrollbars and
       the native <details> marker follow the OS setting instead of staying light. */
    color-scheme: light dark;
    /* Smooth-scroll for in-page anchors, with room so headings clear the sticky
       header instead of hiding under it. */
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    /* A soft tinted page background so white cards/content lift off it. */
    background: var(--color-page);
    color: var(--color-text);
}

a {
    color: var(--color-brand);
    text-underline-offset: 2px;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-brand-dark);
}

/* Headings: clear hierarchy and a touch more air above them than below, so
   sections read as groups. */
h1, h2, h3, h4 {
    line-height: 1.25;
    color: var(--color-heading);
    margin: var(--space-5) 0 var(--space-3);
}

h1 {
    font-size: 2rem;
    margin-top: 0;   /* the first heading on a page needs no gap above */
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

/* Comfortable paragraph rhythm and a capped line length for readability. */
p {
    margin: 0 0 var(--space-3);
    max-width: 42rem;
}

h1:focus {
    outline: none;
}

/* Header navigation links. These live here (global), not in MainLayout.razor.css:
   NavLink renders plain <a> elements without a scoped-CSS attribute, so a scoped
   ".main-nav a" rule would not match them -- the links would fall back to the
   global link colour (dark blue) and become unreadable on the blue header bar. */
.main-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: var(--space-1) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.main-nav a:hover {
    color: #fff;
}

/* NavLink adds .active to the current route's link; a warm accent underline marks
   where the visitor is on the blue bar. */
.main-nav a.active {
    color: #fff;
    border-bottom-color: var(--color-accent);
}

/* Mobile: stacked links inside the collapsed menu get row separators. Same global
   placement, same NavLink reason as above. Scoped to the narrow layout via the
   media query so it does not affect the desktop row. */
@media (max-width: 40rem) {
    .main-nav a {
        padding: 0.6rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .main-nav a.active {
        border-bottom-color: rgba(255, 255, 255, 0.15);
    }
}

/* --- Shared card styles for content lists --------------------------------------
   Posts, events and FAQs appear both on their own page (PostList/EventList/
   FaqList) AND embedded on the home page (the *Embed components), with the same
   class names. These rules live here (global) so both places share one look
   instead of duplicating the CSS per component. The card look: a white surface
   lifted off the tinted page background with a soft shadow and a gentle hover. */

.post-list,
.event-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.post-list li,
.event-list li {
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-3) var(--space-4);
    transition: box-shadow var(--transition), transform var(--transition);
}

.post-list li:hover,
.event-list li:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Posts */
.post-list a {
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
}

.post-list time {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-soft);
    font-size: 0.85rem;
}

/* Events: the date leads in the warm accent colour. */
.event-list time {
    display: block;
    color: var(--color-accent-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

.event-title {
    display: block;
    margin-top: var(--space-1);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-brand);
}

.event-location::before {
    content: " · ";
    color: var(--color-text-soft);
}

.event-location {
    color: var(--color-text-soft);
}

.event-note {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
}

/* Past events (only on the full events page): same cards, quieter and flat. */
.event-list-past li {
    box-shadow: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.event-list-past li:hover {
    transform: none;
    box-shadow: none;
}

.event-list-past time {
    color: var(--color-text-soft);
    font-weight: 400;
}

.event-list-past .event-title {
    font-weight: 400;
    color: var(--color-text-soft);
}

/* FAQ: each question is an expandable card with an accent +/– marker. */
.faq-item {
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    transition: box-shadow var(--transition);
}

.faq-item:hover {
    box-shadow: var(--shadow-hover);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-brand);
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: "+";
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}

.faq-item[open] summary::before {
    content: "–";
}

.faq-answer {
    padding-top: var(--space-2);
    color: var(--color-text);
}

/* "Alle Beiträge/Termine/Fragen →" links below an embedded list on the home page.
   Set apart from the cards with extra space above, and styled as a distinct call
   to action in the accent colour rather than looking like body text. The arrow
   nudges right on hover for a subtle bit of life. */
.embed-more {
    margin-top: var(--space-4);
    max-width: none;   /* override the global paragraph reading cap */
}

.embed-more a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-accent-dark);
    text-decoration: none;
}

.embed-more a:hover {
    color: var(--color-brand);
}

.embed-more a span {
    transition: transform var(--transition);
}

.embed-more a:hover span {
    transform: translateX(3px);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}