/* Materialseite Reichenberg-Schule
   Schulfarben und Buecher-Grafik bleiben erhalten, Layout und Typografie
   sind neu. Keine externen Schriften oder Skripte - alles laeuft lokal. */

/* ------------------------------------------------------------------
   Farben
   ------------------------------------------------------------------ */

:root {
    --brand:        #0073ff;
    --brand-tief:   #0a5bd0;
    --brand-hauch:  rgba(0, 115, 255, .09);
    --gelb:         #ffb94c;

    --grund:        #f4f7fb;
    --flaeche:      #ffffff;
    --tinte:        #16202b;
    --tinte-leise:  #5d6e80;
    --kante:        #e2e9f2;

    --schatten-s:   0 1px 2px rgba(17, 34, 51, .05),
                    0 2px 8px rgba(17, 34, 51, .05);
    --schatten-l:   0 8px 16px rgba(17, 34, 51, .09),
                    0 18px 40px rgba(17, 34, 51, .11);

    --radius:       18px;
    --breite:       1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand:        #4d9bff;
        --brand-tief:   #7ab4ff;
        --brand-hauch:  rgba(77, 155, 255, .14);

        --grund:        #0d1219;
        --flaeche:      #161e28;
        --tinte:        #e9eff6;
        --tinte-leise:  #97a8ba;
        --kante:        #26313f;

        --schatten-s:   0 1px 2px rgba(0, 0, 0, .4);
        --schatten-l:   0 10px 20px rgba(0, 0, 0, .45),
                        0 20px 44px rgba(0, 0, 0, .35);
    }
}

/* ------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte);
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui,
                 -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Sprungmarke fuer Tastatur und Screenreader */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 12px 18px;
    background: var(--flaeche);
    border-radius: 0 0 12px 0;
    box-shadow: var(--schatten-l);
    font-weight: 600;
    text-decoration: none;
}

.skip:focus { left: 0; }

/* ------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------ */

/* Der Kopfbereich zeigt das Gebaeudefoto aus der Nextcloud. Darueber
   liegt ein Farbverlauf, damit Titel und Strichzeichnung in jedem
   Bildausschnitt sicher lesbar bleiben. Die Grundfarbe greift, falls
   das Foto einmal nicht geladen wird. */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0a2036;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Das Foto ist bereits weich gezeichnet gespeichert. Als scharfe
   Aufnahme wuerde es mit der Strichzeichnung konkurrieren; unscharf
   traegt es als Kulisse und spart nebenbei Ladezeit. */
.hero::before {
    background: url("hero.jpg") center 55% / cover no-repeat;
}

.hero::after {
    background: linear-gradient(
        176deg,
        rgba(7, 26, 48, .42) 0%,
        rgba(7, 26, 48, .56) 45%,
        rgba(7, 26, 48, .84) 100%
    );
}

.hero-inner {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 52px 24px 44px;
    text-align: center;
}

/* Die Strichzeichnung ist schwarz auf transparentem Grund. Fuer das
   dunkle Foto wird sie invertiert, wodurch weisse Linien entstehen;
   die durchsichtigen Flaechen bleiben durchsichtig. */
.hero-art {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto 26px;
    filter: invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, .55));
}

.hero-title {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.hero-sub {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(15px, 1.7vw, 18px);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------
   Abschnitte
   ------------------------------------------------------------------ */

.content {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 12px 24px 72px;
}

/* Die Kacheln stehen immer zu zweit nebeneinander. Damit die Karten auf
   breiten Bildschirmen nicht ins Riesige wachsen, ist der Abschnitt in
   der Breite begrenzt und zentriert - so bleibt die Ueberschrift bündig
   ueber der linken Spalte. */
.section {
    max-width: 680px;
    margin: 48px auto 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    font-size: clamp(19px, 2.4vw, 25px);
    font-weight: 650;
    letter-spacing: -.015em;
}

/* Kleiner gelber Akzent statt durchgehender Trennlinie */
.section-mark {
    flex: 0 0 auto;
    width: 6px;
    height: 1.15em;
    border-radius: 999px;
    background: var(--gelb);
}

/* ------------------------------------------------------------------
   Kacheln
   ------------------------------------------------------------------ */

.tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 16px 22px;
    background: var(--flaeche);
    border: 1px solid var(--kante);
    border-radius: var(--radius);
    box-shadow: var(--schatten-s);
    color: inherit;
    text-decoration: none;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1),
                box-shadow .22s ease,
                border-color .22s ease;
}

/* Buecher-Grafik */
/* Hoehe und Schriftgroesse haengen an der Kachelbreite, damit die
   Karten in jeder Bildschirmbreite gleich proportioniert wirken. */
.tile-art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: clamp(78px, 36cqw, 130px);
}

.tile-art img {
    width: auto;
    height: 100%;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

/* Kurzer Balken in Schulblau */
.tile-bar {
    width: 34px;
    height: 4px;
    margin: 18px 0 14px;
    border-radius: 999px;
    background: var(--brand);
    transition: width .22s cubic-bezier(.2, .7, .3, 1);
}

.tile-label {
    color: var(--brand);
    font-size: clamp(26px, 17cqw, 50px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Schriftgroesse an der Kachelbreite ausrichten, damit auch laengere
   Beschriftungen wie "Vorklasse" sauber sitzen. */
@supports (container-type: inline-size) {
    .tile { container-type: inline-size; }
}

@supports not (container-type: inline-size) {
    .tile-label { font-size: clamp(26px, 5.4vw, 42px); }
}

/* Zustaende */
a.tile:hover,
a.tile:focus-visible {
    transform: translateY(-5px);
    border-color: var(--brand);
    box-shadow: var(--schatten-l);
}

a.tile:hover .tile-art img { transform: scale(1.05) rotate(-1.5deg); }

a.tile:hover .tile-bar { width: 56px; }

a.tile:active { transform: translateY(-2px); }

.tile--plain { cursor: default; }

.empty {
    margin: 64px 0;
    text-align: center;
    color: var(--tinte-leise);
}

/* ------------------------------------------------------------------
   Fussbereich
   ------------------------------------------------------------------ */

.site-footer {
    background: var(--flaeche);
    border-top: 1px solid var(--kante);
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px 36px;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 44px 24px 52px;
    color: var(--tinte-leise);
    font-size: 15px;
}

.footer-col p { margin: 0 0 5px; }

/* Erste Zeile jeder Spalte ist die Ueberschrift */
.footer-head {
    margin-bottom: 10px !important;
    color: var(--tinte);
    font-weight: 650;
    letter-spacing: -.01em;
}

.footer-col a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible { border-bottom-color: currentColor; }

/* ------------------------------------------------------------------
   Kleine Bildschirme und Bewegungsempfindlichkeit
   ------------------------------------------------------------------ */

@media (max-width: 560px) {
    body { font-size: 16px; }

    .hero-inner { padding: 26px 18px 24px; }
    .content { padding: 8px 18px 56px; }

    .section { margin-top: 36px; }

    /* Auch auf dem Handy bleiben es zwei Kacheln nebeneinander. */
    .tiles { gap: 12px; }

    .tile { padding: 18px 10px 16px; }
    .footer-inner { padding: 32px 18px 38px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    a.tile:hover { transform: none; }
    a.tile:hover .tile-art img { transform: none; }
}