/* ---------------------------------------------------------------------------
   Modernes Grundgeruest - zweiter Entwurf (index2.php, exp_neu2.php)

   Laeuft parallel zum bestehenden Design. Der Seitenkopf (Bildbanner,
   Markenzeile, Reiterleiste) stammt weiterhin von Bootstrap 3 + user.css und
   bleibt unveraendert; alles darunter wird hier neu aufgebaut.

   WICHTIG - Einheiten: Bootstrap 3 setzt html{font-size:10px}. Ein "rem" ist
   auf diesen Seiten also 10px, nicht 16px. Damit hier nichts stillschweigend
   um ein Drittel schrumpft, sind saemtliche Groessen in px bzw. clamp(px)
   angegeben. Bitte beim Erweitern beibehalten.

   Alle eigenen Klassen tragen das Praefix "um-", damit sie sich mit den
   Bootstrap-Klassen des Kopfbereichs nicht ins Gehege kommen.
   --------------------------------------------------------------------------- */

:root {
    /* Farbwelt: das vertraute Chemie-Blau, etwas tiefer und kontrastreicher,
       dazu ein gruenes Sekundaersignal fuer Zahlen und Zustaende. */
    --um-akzent:        #0b6bcb;
    --um-akzent-dunkel: #0a55a0;
    --um-akzent-hell:   #2f8fe0;
    --um-akzent-blass:  #eaf3fd;
    --um-gruen:         #0f8a63;
    --um-gruen-blass:   #e8f6f1;

    --um-text:       #16202b;
    --um-text-leise: #5b6774;
    --um-linie:      #e4e9ef;
    --um-linie-kraeftig: #ccd6e0;
    --um-flaeche:    #f6f8fb;
    --um-weiss:      #ffffff;

    --um-r-s: 8px;
    --um-r:   14px;
    --um-r-l: 22px;

    --um-schatten:      0 1px 2px rgba(16, 32, 48, 0.04), 0 6px 20px rgba(16, 32, 48, 0.06);
    --um-schatten-hoch: 0 2px 4px rgba(16, 32, 48, 0.06), 0 14px 34px rgba(16, 32, 48, 0.12);

    --um-breite: 1180px;
}

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

.um-page {
    color: var(--um-text);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.um-page h1,
.um-page h2,
.um-page h3 {
    color: var(--um-text);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
}

.um-page p {
    margin: 0 0 16px;
}

/* Linkfarbe fuer Fliesstext. Bewusst mit :where(), damit die Regel die
   Spezifitaet eines blossen "a" behaelt: sonst schlaegt ".um-page a" jede
   Ein-Klassen-Regel weiter unten - der weisse Text auf dem blauen Knopf
   waere dann wieder blau. */
:where(.um-page) a {
    color: var(--um-akzent);
}

.um-wrap {
    max-width: var(--um-breite);
    margin: 0 auto;
    padding: 0 20px;
}

.um-page :focus-visible {
    outline: 3px solid var(--um-akzent-hell);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Sprungmarke fuer Tastatur- und Screenreader-Bedienung */
.um-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--um-akzent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--um-r-s) 0;
    text-decoration: none;
}

.um-skip:focus {
    left: 0;
    color: #fff;
}

/* --- Seitenkopf: Foto bleibt, Wortmarke neu -----------------------------
   Das Bildbanner (350 px, assets/img/bild2.jpg) kommt weiterhin aus
   user.css. Neu sind: ein Verlauf von unten, damit Text auf jedem Foto
   lesbar bleibt, und eine zweizeilige Wortmarke, die am unteren Bildrand
   sitzt statt oben in der Ecke.
   ------------------------------------------------------------------------- */

body > header {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

body > header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(8, 16, 26, 0.88) 0%,
        rgba(8, 16, 26, 0.62) 26%,
        rgba(8, 16, 26, 0.22) 52%,
        rgba(8, 16, 26, 0) 82%);
    pointer-events: none;
}

body > header .navbar {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    min-height: 0;
    border: 0;
}

body > header .navbar-header {
    float: none;
}

body > header .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    float: none;
    height: auto;
    padding: 0 15px 32px;
    line-height: 1.2;
    text-shadow: none;
    white-space: normal;
}

body > header .navbar-brand:hover,
body > header .navbar-brand:focus {
    text-decoration: none;
}

/* Kolben in einem sanften Glasfeld statt frei im Bild */
.um-brand-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

/* user.css setzt fuer diesen Kolben font-size: xx-large - hier gewinnt
   die laengere Auswahl. */
.um-brand-icon i.icon.ion-erlenmeyer-flask {
    font-size: 34px;
    color: #fff;
    line-height: 1;
}

.um-brand-kicker {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

body > header .navbar-brand span.text-title {
    display: block;
    font-size: clamp(27px, 3.6vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-transform: none;      /* war: Versalien */
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}

/* Feine Linie unter der Wortmarke, als Abschluss zum Bild hin */
.um-brand-text::after {
    content: "";
    display: block;
    width: 74px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--um-akzent-hell), rgba(47, 143, 224, 0));
}

@media (max-width: 767px) {
    body > header .navbar-brand {
        gap: 14px;
        padding-bottom: 24px;
    }

    .um-brand-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .um-brand-icon i.icon.ion-erlenmeyer-flask {
        font-size: 26px;
    }

    .um-brand-kicker {
        font-size: 11px;
        letter-spacing: 0.14em;
        margin-bottom: 4px;
    }

    /* user.css blendet den Schriftzug auf dem Telefon aus - hier bleibt er
       stehen, nur kleiner. */
    body > header .navbar-brand span.text-title {
        display: block;
        font-size: 23px;
    }

    .um-brand-text::after {
        width: 54px;
        height: 2px;
        margin-top: 10px;
    }
}

/* Unter etwa 620 px braeche die Vorzeile auf zwei Zeilen um und die
   Wortmarke wuerde vierzeilig - dann lieber nur der Name. */
@media (max-width: 620px) {
    .um-brand-kicker {
        display: none;
    }
}

/* Damit "Unterrichtsmaterialien Chemie" auf dem Telefon einzeilig bleibt */
@media (max-width: 480px) {
    body > header .navbar-brand span.text-title {
        font-size: 21px;
    }
}

/* --- Reiterleiste unter dem Banner --------------------------------------- */

.categories.um-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 0;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--um-linie);
}

.categories.um-nav > li > a {
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 17px;
    font-weight: 500;
    color: var(--um-text-leise);
    transition: background-color .15s ease, color .15s ease;
}

.categories.um-nav > li > a:hover,
.categories.um-nav > li > a:focus {
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
}

.categories.um-nav > li.active > a,
.categories.um-nav > li.active > a:hover,
.categories.um-nav > li.active > a:focus {
    background: var(--um-akzent);
    color: #fff;
}

/* --- Schaltflaechen ------------------------------------------------------ */

.um-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.um-btn:hover,
.um-btn:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

.um-btn-prim {
    background: var(--um-akzent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(11, 107, 203, 0.28);
}

.um-btn-prim:hover,
.um-btn-prim:focus {
    background: var(--um-akzent-dunkel);
    color: #fff;
    box-shadow: 0 6px 18px rgba(11, 107, 203, 0.34);
}

.um-btn-still {
    background: var(--um-weiss);
    border-color: var(--um-linie-kraeftig);
    color: var(--um-text);
}

.um-btn-still:hover,
.um-btn-still:focus {
    border-color: var(--um-akzent-hell);
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
}

.um-btn-klein {
    padding: 8px 16px;
    font-size: 14px;
}

/* --- Marken / Chips ------------------------------------------------------ */

.um-chip {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--um-linie-kraeftig);
    border-radius: 999px;
    background: var(--um-weiss);
    color: var(--um-text);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

a.um-chip:hover,
a.um-chip:focus {
    border-color: var(--um-akzent-hell);
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
    text-decoration: none;
}

.um-marke {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--um-gruen-blass);
    color: var(--um-gruen);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.um-section {
    padding: 64px 0;
}

.um-section + .um-section {
    padding-top: 0;
}

/* Das farbige Band braucht seine Innenabstaende auch dann, wenn ein
   Abschnitt davorsteht - deshalb die laengere Auswahl. */
.um-section.um-section-sanft {
    padding: 64px 0;
    background: var(--um-flaeche);
    border-top: 1px solid var(--um-linie);
    border-bottom: 1px solid var(--um-linie);
    margin-top: 64px;
}

.um-section-sanft + .um-section {
    padding-top: 64px;
}

.um-section-kopf {
    max-width: 720px;
    margin-bottom: 32px;
}

.um-section-kopf .um-augbraue {
    display: block;
    margin-bottom: 10px;
    color: var(--um-akzent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.um-section-kopf h2 {
    font-size: clamp(26px, 3vw, 34px);
    margin-bottom: 12px;
}

.um-section-kopf p {
    color: var(--um-text-leise);
    font-size: 18px;
    margin: 0;
}

/* --- Einstieg ------------------------------------------------------------ */

.um-intro {
    position: relative;
    overflow: hidden;
    padding: 64px 0 56px;
    background:
        radial-gradient(900px 420px at 12% -12%, #e7f1fd 0%, rgba(231, 241, 253, 0) 70%),
        radial-gradient(720px 380px at 92% 0%, #e6f6f1 0%, rgba(230, 246, 241, 0) 70%);
}

.um-intro-raster {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .um-intro-raster {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 56px;
    }
}

.um-intro h1 {
    font-size: clamp(32px, 4.6vw, 50px);
    margin: 16px 0 18px;
}

.um-intro .um-lead {
    font-size: 19px;
    color: var(--um-text-leise);
    max-width: 60ch;
    margin-bottom: 26px;
}

/* Suchfeld */

.um-suche {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: 999px;
    box-shadow: var(--um-schatten);
    max-width: 620px;
}

.um-suche input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 10px 8px 10px 20px;
    font-size: 16px;
    color: var(--um-text);
}

.um-suche input[type="search"]:focus {
    outline: none;
}

.um-suche:focus-within {
    border-color: var(--um-akzent-hell);
    box-shadow: 0 0 0 4px var(--um-akzent-blass);
}

.um-suche .um-btn {
    flex: none;
}

.um-schnellsuche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14px;
    color: var(--um-text-leise);
}

/* Kennzahlen-Karte neben dem Einstiegstext */

.um-panel {
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r-l);
    box-shadow: var(--um-schatten);
    padding: 28px;
}

.um-panel-zahl {
    font-size: clamp(44px, 6vw, 62px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--um-akzent);
}

.um-panel-zahl + p {
    color: var(--um-text-leise);
    margin: 8px 0 20px;
}

.um-panel-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--um-linie);
}

.um-panel-liste li {
    border-bottom: 1px solid var(--um-linie);
}

.um-panel-liste a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 4px;
    color: var(--um-text);
    font-size: 16px;
    text-decoration: none;
    border-radius: var(--um-r-s);
    transition: background-color .15s ease, padding-left .15s ease;
}

.um-panel-liste a:hover,
.um-panel-liste a:focus {
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
    padding-left: 10px;
    text-decoration: none;
}

.um-panel-liste .um-wert {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--um-akzent);
}

/* --- Kartenraster -------------------------------------------------------- */

.um-raster {
    display: grid;
    gap: 22px;
}

.um-raster-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.um-raster-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.um-raster-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Die vier Experimente auf der Startseite stehen in EINER Zeile mit vier
   Spalten - feste Spaltenzahl statt auto-fit, damit nie umbrochen wird.
   Nur auf dem Telefon werden die Karten untereinander gestellt. */
.um-raster-experimente { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 620px) {
    .um-raster-experimente { grid-template-columns: 1fr; }
}

.um-karte {
    display: flex;
    flex-direction: column;
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.um-karte:hover {
    border-color: var(--um-linie-kraeftig);
    box-shadow: var(--um-schatten-hoch);
    transform: translateY(-3px);
}

.um-karte-bild {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: var(--um-flaeche);
    border-bottom: 1px solid var(--um-linie);
}

.um-karte-inhalt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px;
}

.um-karte-inhalt h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.um-karte-inhalt p {
    color: var(--um-text-leise);
    font-size: 16px;
    margin-bottom: 20px;
}

.um-karte-inhalt .um-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Zahlenkarte (Materialarten) */

.um-zahlkarte {
    display: block;
    padding: 24px;
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    color: var(--um-text);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.um-zahlkarte:hover,
.um-zahlkarte:focus {
    border-color: var(--um-akzent-hell);
    box-shadow: var(--um-schatten-hoch);
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--um-text);
}

.um-zahlkarte .um-zahl {
    display: block;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--um-akzent);
    font-variant-numeric: tabular-nums;
}

.um-zahlkarte .um-bezeichnung {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 600;
}

.um-zahlkarte .um-zusatz {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--um-text-leise);
}

/* Aufrufdiagramm (inc/aufrufe_diagramm.php) ------------------------------- */

.um-diagramm {
    margin: 0;
    padding: 26px 26px 20px;
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    box-shadow: var(--um-schatten);
}

.um-diagramm svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.um-diagramm-balken {
    fill: var(--um-akzent);
    transition: fill .15s ease;
}

.um-diagramm-balken:hover {
    fill: var(--um-akzent-dunkel);
}

.um-diagramm-linie {
    stroke: var(--um-linie);
    stroke-width: 1;
}

.um-diagramm-achse {
    stroke: var(--um-linie-kraeftig);
    stroke-width: 1;
}

.um-diagramm-wert,
.um-diagramm-monat,
.um-diagramm-jahr {
    fill: var(--um-text-leise);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.um-diagramm-monat {
    fill: var(--um-text);
    font-weight: 600;
}

.um-diagramm-jahr {
    font-size: 13px;
}

.um-diagramm-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--um-linie);
    color: var(--um-text-leise);
    font-size: 15px;
}

.um-diagramm-fuss strong {
    color: var(--um-text);
    font-variant-numeric: tabular-nums;
}

.um-diagramm-leer {
    color: var(--um-text-leise);
}

@media (max-width: 620px) {
    .um-diagramm { padding: 18px 14px 14px; }

    /* Auf dem Telefon wird das SVG stark verkleinert - die Beschriftung
       wuerde sonst unlesbar. */
    .um-diagramm-wert,
    .um-diagramm-monat { font-size: 22px; }
    .um-diagramm-jahr  { font-size: 19px; }
}

/* Klassenstufen-Kachel */

.um-stufe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    color: var(--um-text);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.um-stufe:hover,
.um-stufe:focus {
    border-color: var(--um-akzent-hell);
    box-shadow: var(--um-schatten-hoch);
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--um-text);
}

.um-stufe .um-stufe-name {
    font-size: 18px;
    font-weight: 700;
}

.um-stufe .um-stufe-zusatz {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--um-text-leise);
}

.um-stufe .um-stufe-pfeil {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--um-akzent-blass);
    color: var(--um-akzent);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
}

/* --- Fliesstext / Ueber uns ---------------------------------------------- */

.um-text-raster {
    display: grid;
    gap: 36px;
}

@media (min-width: 900px) {
    .um-text-raster {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 56px;
    }
}

.um-fliess p {
    font-size: 17px;
}

.um-fliess p:last-child {
    margin-bottom: 0;
}

.um-notiz {
    background: var(--um-akzent-blass);
    border: 1px solid #cfe4fa;
    border-left: 4px solid var(--um-akzent);
    border-radius: 0 var(--um-r) var(--um-r) 0;
    padding: 20px 24px;
}

.um-notiz h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.um-notiz p {
    font-size: 15px;
    color: var(--um-text-leise);
    margin-bottom: 0;
}

.um-merkmale {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.um-merkmale li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
}

.um-merkmale .um-haken {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--um-gruen-blass);
    color: var(--um-gruen);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.um-merkmale strong {
    display: block;
}

.um-merkmale span.um-erlaeuterung {
    color: var(--um-text-leise);
    font-size: 15px;
}

.um-merkmale + .um-notiz {
    margin-top: 26px;
}

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

body > footer.um-footer {
    background: #16202b;
    color: #c9d3de;
    text-align: left;
    padding: 0;
    font-size: 17px;
}

.um-footer a {
    color: #e6ecf3;
    text-decoration: none;
}

.um-footer a:hover,
.um-footer a:focus {
    color: #fff;
    text-decoration: underline;
}

.um-footer-oben {
    display: grid;
    gap: 36px;
    padding: 52px 0 40px;
}

@media (min-width: 760px) {
    .um-footer-oben {
        grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
        gap: 48px;
    }
}

.um-footer h2 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 16px;
}

body > footer.um-footer h5 {
    color: inherit;
    font-size: inherit;
}

.um-footer-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.um-footer-marke .icon {
    font-size: 26px;
}

.um-footer-text {
    max-width: 46ch;
    margin-bottom: 22px;
    color: #aab8c6;
    line-height: 1.6;
}

.um-footer-logos {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

/* Die beiden Logos sind unterschiedlich gebaut (eines mit weisser Flaeche,
   eines transparent). Auf einem gemeinsamen hellen Feld sehen sie auf dem
   dunklen Fuss gewollt aus statt zufaellig. */
.um-footer-logos img {
    height: 56px;
    width: auto;
    background: #fff;
    padding: 10px 16px;
    border-radius: 10px;
}

.um-footer-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.um-footer-unten {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 0 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #a3b0bf;
}

/* ==========================================================================
   Altbestand
   ==========================================================================
   Die uebrigen Seiten (suche, experimente, klassenstufe, kontakt, impressum,
   holz, video, 404 ...) benutzen weiterhin das Bootstrap-3-Markup:
   .container.post, .post-title, .post-body, .btn, .table, .badge. Statt in
   jeder dieser Dateien das Markup umzubauen, werden hier die betreffenden
   Bootstrap-Klassen an die neue Optik angeglichen. Vorteil: kein Eingriff in
   Seiten, die inhaltlich richtig sind; Nachteil: die Auswahl muss Bootstrap
   und user.css ueberbieten, daher gelegentlich laengere Selektoren.

   Wird eine dieser Seiten spaeter auf .um-page umgestellt, kann der
   zugehoerige Block hier ersatzlos entfallen.
   ========================================================================== */

.container.post {
    max-width: var(--um-breite);
    margin-bottom: 72px;
    color: var(--um-text);
    font-size: 17px;
    line-height: 1.7;
}

.container.post h1,
.container.post h2,
.container.post h3,
.container.post h4 {
    color: var(--um-text);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.container.post h1 {
    font-size: clamp(28px, 3.6vw, 40px);
}

.container.post h2 { font-size: 26px; }
.container.post h3 { font-size: 21px; }
.container.post h4 { font-size: 19px; }

/* user.css setzt die Ueberschriftenspalte ab 992 px rechtsbuendig - das
   war die alte Blog-Optik und passt nicht mehr zum uebrigen Satz. */
@media (min-width: 992px) {
    .container.post .post-title {
        text-align: left;
        padding-right: 0;
    }
}

.container.post .post-title h1 {
    margin-top: 44px;
    margin-bottom: 8px;
}

.container.post .post-body {
    margin-top: 18px;
    font-size: 17px;
}

.container.post .lead {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--um-text-leise);
}

.container.post a {
    color: var(--um-akzent);
}

.container.post hr {
    border-top: 1px solid var(--um-linie);
    margin: 32px 0;
}

/* --- Schaltflaechen des Altbestands --------------------------------------- */

.container.post .btn,
.suchbox .btn,
.blaettern .btn {
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    /* Das Bootstrap-Thema setzt Beschriftungen in Versalien - der uebrige
       Satz der Seite ist gemischt. */
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}

.container.post .btn-primary,
.suchbox .btn-primary,
.blaettern .btn-primary {
    background: var(--um-akzent);
    border-color: var(--um-akzent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(11, 107, 203, 0.28);
}

.container.post .btn-primary:hover,
.container.post .btn-primary:focus,
.suchbox .btn-primary:hover,
.suchbox .btn-primary:focus,
.blaettern .btn-primary:hover,
.blaettern .btn-primary:focus {
    background: var(--um-akzent-dunkel);
    border-color: var(--um-akzent-dunkel);
    color: #fff;
    box-shadow: 0 6px 18px rgba(11, 107, 203, 0.34);
}

.container.post .btn-default,
.suchbox .btn-default,
.blaettern .btn-default {
    background: var(--um-weiss);
    border-color: var(--um-linie-kraeftig);
    color: var(--um-text);
}

.container.post .btn-default:hover,
.container.post .btn-default:focus,
.suchbox .btn-default:hover,
.blaettern .btn-default:hover {
    background: var(--um-akzent-blass);
    border-color: var(--um-akzent-hell);
    color: var(--um-akzent-dunkel);
}

.container.post .btn-sm,
.container.post .btn-xs {
    padding: 7px 16px;
    font-size: 14px;
}

/* --- Marken, Tabellen, Formulare ------------------------------------------ */

.container.post .badge {
    background: var(--um-akzent);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 14px;
    font-weight: 700;
}

.container.post .table {
    font-size: 16px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    overflow: hidden;
    background: var(--um-weiss);
}

.container.post .table > thead > tr > th {
    border-bottom: 1px solid var(--um-linie);
    background: var(--um-flaeche);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--um-text-leise);
    padding: 12px 14px;
}

.container.post .table > tbody > tr > td,
.container.post .table > tbody > tr > th {
    border-top: 1px solid var(--um-linie);
    padding: 13px 14px;
    vertical-align: middle;
}

.container.post .table-hover > tbody > tr:hover {
    background: var(--um-akzent-blass);
}

/* user.css vergroessert einzelne Zellen ueber .Tabelle - das ist hier
   bereits durch die Grundgroesse abgedeckt. */
.container.post .table td.Tabelle,
.container.post .table thead.Tabelle {
    font-size: 16px;
}

.container.post .form-control {
    height: auto;
    padding: 11px 15px;
    font-size: 16px;
    border: 1px solid var(--um-linie-kraeftig);
    border-radius: var(--um-r-s);
    box-shadow: none;
}

.container.post .form-control:focus {
    border-color: var(--um-akzent-hell);
    box-shadow: 0 0 0 4px var(--um-akzent-blass);
}

.container.post label {
    font-weight: 600;
}

/* Auswahlfelder sehen im Bootstrap-Thema aus wie unterstrichener Text */
.container.post select,
.suchbox select {
    height: auto;
    padding: 7px 12px;
    font-size: 15px;
    color: var(--um-text);
    background: var(--um-weiss);
    border: 1px solid var(--um-linie-kraeftig);
    border-radius: var(--um-r-s);
    box-shadow: none;
}

.container.post select:focus,
.suchbox select:focus {
    border-color: var(--um-akzent-hell);
    box-shadow: 0 0 0 4px var(--um-akzent-blass);
    outline: none;
}

/* Aufklappbare Themenbloecke in klassenstufe.php */

.container.post .panel {
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    box-shadow: none;
    overflow: hidden;
}

.container.post .panel-heading {
    background: var(--um-flaeche);
    border-bottom: 1px solid var(--um-linie);
    padding: 14px 18px;
}

.container.post .panel-title {
    font-size: 18px;
    font-weight: 700;
}

.container.post .panel-title a {
    text-decoration: none;
}

.container.post .alert {
    border-radius: var(--um-r);
    border: 1px solid var(--um-linie);
    padding: 16px 20px;
    font-size: 16px;
}

/* --- Suchseite ------------------------------------------------------------
   suche.css bringt eigene Klassen mit; hier werden nur Rundungen, Groessen
   und die Akzentfarbe nachgezogen.
   ------------------------------------------------------------------------- */

.suchbox {
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r-l);
    box-shadow: var(--um-schatten);
    padding: 24px;
}

.suchbox input[type="search"] {
    height: 52px;
    border: 1px solid var(--um-linie-kraeftig);
    border-radius: 999px;
    padding: 6px 20px;
}

.suchbox input[type="search"]:focus {
    border-color: var(--um-akzent-hell);
    box-shadow: 0 0 0 4px var(--um-akzent-blass);
}

.suchbox .btn-suche {
    height: 52px;
}

.filtergruppe > .titel {
    font-size: 13px;
    letter-spacing: 0.07em;
    color: var(--um-text-leise);
}

.schalter span {
    padding: 7px 16px;
    border-color: var(--um-linie-kraeftig);
    border-radius: 999px;
    font-size: 15px;
    color: var(--um-text);
}

.schalter span:hover {
    border-color: var(--um-akzent-hell);
    color: var(--um-akzent-dunkel);
}

.schalter input:checked + span {
    background: var(--um-akzent);
    border-color: var(--um-akzent);
}

.suchbox .fusszeile {
    border-top-color: var(--um-linie);
    font-size: 15px;
}

.trefferkopf .anzahl {
    font-size: 26px;
    letter-spacing: -0.02em;
}

.treffer > li {
    border-bottom-color: var(--um-linie);
    padding: 20px 0;
}

.treffer > li:first-child {
    border-top-color: var(--um-linie);
}

.treffer .titel {
    font-size: 21px;
    letter-spacing: -0.01em;
}

.treffer .titel a {
    color: var(--um-akzent);
}

.treffer .beschreibung {
    color: var(--um-text-leise);
    font-size: 16px;
}

.treffer .meta {
    font-size: 14px;
}

.art-marke {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
}

.marke-ungeprueft {
    border-radius: 999px;
    padding: 3px 10px;
}

.aktive-filter {
    font-size: 15px;
}

.aktive-filter a {
    border-radius: 999px;
    border-color: var(--um-linie-kraeftig);
    padding: 4px 13px;
}

.suchhinweis {
    background: var(--um-akzent-blass);
    border: 1px solid #cfe4fa;
    border-radius: var(--um-r);
    padding: 14px 18px;
    font-size: 16px;
}

/* --- Bewegung sparsam ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .um-page *,
    .um-footer * {
        transition: none !important;
        animation: none !important;
    }

    .um-btn:hover,
    .um-karte:hover,
    .um-zahlkarte:hover,
    .um-stufe:hover {
        transform: none;
    }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
    body > header,
    body > footer,
    .categories,
    .um-suche,
    .um-schnellsuche {
        display: none !important;
    }

    .um-intro,
    .um-section-sanft {
        background: none;
        border: 0;
    }

    .um-karte,
    .um-zahlkarte,
    .um-stufe,
    .um-panel {
        box-shadow: none;
    }
}