body {
    font-family: Arial, sans-serif; /* Arial für den gesamten Body */
}


/* ===== Fächerauftritt – Stil nahe gymnasium-sottrum.de ===== */
/* Wrapper: <section class="faecher">…</section> */

.faecher {
    /* Corporate-Farben (blau/weiß + Orange-Akzent) */
    --sotr-blue: #3a5f9b;
    --sotr-blue-700: #2b4f88;
    --sotr-blue-50: #eef3fb;
    --sotr-orange: #f6a34b;

    --bg: #fff;
    --surface: #fff;
    --fg: #1f2d3d;
    --muted: #5c708a;
    --border: #d9e2ef;

    --radius: 8px;
    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    padding-inline: 0.5rem;
}

/* ===== Basis ===== */
.faecher,
.faecher * {
    box-sizing: border-box;
}

.faecher {
    color: var(--fg);
    background: var(--bg);
    line-height: 1.6;
    font-family: Arial, sans-serif;
    /* Schrift der Hauptseite übernehmen */
}

/* Besseres Keyboard-Focus */
.faecher :focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sotr-blue) 70%, white);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Weniger Bewegung, wenn Nutzer es so wünscht */
@media (prefers-reduced-motion: reduce) {
    .faecher * {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Layout ===== */
.faecher .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0.5rem;
}

.faecher h2 {
    color: var(--sotr-blue-700);
    font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem);
    margin: var(--space-6) 0 var(--space-3);
}

.faecher h3 {
    color: var(--sotr-blue-700);
    font-size: clamp(1.1rem, .95rem + .6vw, 1.3rem);
    margin: var(--space-4) 0 var(--space-2);
}

.faecher h4 {
    margin: var(--space-3) 0 var(--space-1);
}

.faecher .muted {
    color: var(--muted);
}

/* Links ohne harte Unterstreichung, aber gut sichtbar */
.faecher a {
    color: var(--sotr-blue);
    text-decoration: none;
}

.faecher a:hover {
    color: var(--sotr-blue-700);
    text-decoration: underline;
}

.faecher a:active {
    color: var(--sotr-blue-700);
}

/* Keine eigene Header/Footer-Gestaltung überschreiben */
.faecher .site-header,
.faecher .site-footer {
    display: none;
}

/* ===== Grid & Karten ===== */
.faecher .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-block: var(--space-6);
}

.faecher .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    /* flach wie Hauptseite */
    transition: background .15s ease, border-color .15s ease;
}

.faecher .card:hover {
    background: var(--sotr-blue-50);
    border-color: #c9d6ea;
}

/* klickbare Karte optional */
.faecher .card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Bild: feste Höhe, sauberes Cropping */
.faecher .card-media {
    display: block;
    background: #f1f4f9;
    border-bottom: 1px solid var(--border);
}

.faecher .card-media img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

@media (max-width:520px) {
    .faecher .card-media img {
        height: 140px;
    }
}

.faecher .card-body {
    padding: var(--space-6);
}

.faecher .card-body h3 {
    margin: 0 0 .4rem;
}

/* ===== Buttons (schlicht, blau) ===== */
.faecher .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1rem;
    min-height: 2.5rem;
    /* bessere Touch-Ziele */
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    color: #fff;
    background: var(--sotr-blue);
    border: 1px solid var(--sotr-blue-700);
    border-radius: 6px;
    transition: background .15s ease, border-color .15s ease;
}

.faecher .button:hover {
    background: var(--sotr-blue-700);
}

.faecher .button:active {
    filter: brightness(.95);
}

.faecher .button--alt {
    background: var(--sotr-orange);
    border-color: #e28f36;
}

.faecher .button--alt:hover {
    filter: brightness(.96);
}

/* ===== Backlink (Pille) ===== */
.faecher .backlink {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--sotr-blue);
    background: #fff;
}

.faecher .backlink:hover {
    background: var(--sotr-blue-50);
    color: var(--sotr-blue-700);
}

/* ===== Hero ===== */
.faecher .hero {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.faecher .hero img {
    width: 100%;
    height: clamp(200px, 26vw, 320px);
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* ===== Akzent-Box (Orange) ===== */
.faecher .section-accent {
    border-left: 4px solid var(--sotr-orange);
    background: #fff6ec;
    padding: var(--space-4) var(--space-6);
    border-radius: 6px;
}

/* ===== Tabellen ===== */
.faecher .table,
.faecher .content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-3) 0 var(--space-6);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.faecher .table thead th,
.faecher .content table thead th {
    background: #f2f6fc;
    color: var(--fg);
    text-align: left;
    font-weight: 700;
}

.faecher .table th,
.faecher .table td,
.faecher .content table th,
.faecher .content table td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.faecher .table tbody tr:hover,
.faecher .content table tbody tr:hover {
    background: var(--sotr-blue-50);
}

.faecher .table tbody tr:last-child td,
.faecher .content table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width:780px) {

    .faecher .table,
    .faecher .content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .faecher .table th,
    .faecher .table td,
    .faecher .content table th,
    .faecher .content table td {
        white-space: nowrap;
        padding: .7rem .8rem;
    }
}

/* ===== Badges / Chips ===== */
.faecher .badge {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid #c9d6ea;
    background: #f2f6fc;
    color: var(--sotr-blue);
    font-weight: 600;
    margin: .25rem .35rem .25rem 0;
}

.faecher .chips {
    margin: .5rem 0 1rem;
}

/* ===== Team-Liste ===== */
.faecher .team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}

.faecher .person {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.faecher .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f2f6fc;
    border: 1px solid var(--border);
}

.faecher .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== TOC-Karte ===== */
.faecher .subject-layout {
    display: block;
}

.faecher .toc {
    position: static;
    width: 100%;
    margin: var(--space-6) 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.faecher .toc h4 {
    margin: 0 0 .4rem;
}

.faecher .toc a {
    display: block;
    padding: .35rem .5rem;
    margin: .1rem 0;
    border-radius: 6px;
    color: var(--sotr-blue);
    text-decoration: none;
}

.faecher .toc a:hover {
    background: var(--sotr-blue-50);
    color: var(--sotr-blue-700);
}

/* ===== Print ===== */
@media print {

    .faecher .card-media,
    .faecher .button {
        display: none !important;
    }

    .faecher a {
        color: inherit;
        text-decoration: none;
    }
}