/* ==========================================================================
   Musikschule Klangzone Lohmar – Stylesheet

   Inhalt
     1. Schriften
     2. Farben und Maße (Variablen)
     3. Grundlagen
     4. Hilfsklassen
     5. Knöpfe
     6. Kopfzeile und Navigation
     7. Bühne (Einstieg der Startseite)
     8. Abschnitte, Überschriften, Raster
     9. Karten, Kacheln, Personen, Beiträge
    10. Kurse und Steckbriefe (Unterseiten)
    11. Next Event
    12. Einbettungen (Video, Karte) und Großansicht
    13. Tabellen und Listen (Preise, Termine)
    14. Galerie
    15. Formular und Kontaktdaten
    16. Fließtext und Rechtstexte
    17. Seitenfuß
    18. Deko und Animationen
    19. Weniger Bewegung, Druck

   Schreibweise: Klassennamen sind deutsch und beschreiben den Inhalt
   (.karte, .kachel, .steckbrief). Gestaltet wird zuerst für das Handy,
   größere Bildschirme kommen über @media (min-width: …) dazu.
   ========================================================================== */


/* 1. Schriften ============================================================ */
/* Beide Schriften liegen auf dem eigenen Server (kein Abruf bei Google). */

@font-face {
    font-family: "Fraunces";
    src: url("/fonts/fraunces.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("/fonts/nunito-sans.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}


/* 2. Farben und Maße ====================================================== */

:root {
    /* Farben: warmes Papier, das Blau des Logos, ein sonniger Akzent */
    --papier: #fbf6ee;
    --papier-dunkel: #f4ead9;
    --weiss: #fffdf9;
    --tinte: #232838;
    --tinte-hell: #5b6172;
    --blau: #4470b8;
    --blau-dunkel: #2b4a85;
    --blau-nacht: #1d2f55;
    --blau-hell: #e3ebf8;
    --akzent: #e9843a;
    --akzent-dunkel: #b9571a;
    --akzent-hell: #fde6cf;
    --linie: #e6dccb;
    --fehler: #b3261e;
    --erfolg: #1f7a4d;

    /* Schriften */
    --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
    --schrift-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Maße */
    --breite: 72rem;
    --rand: clamp(1.1rem, 4vw, 2.5rem);
    --abstand-abschnitt: clamp(3.5rem, 8vw, 6.5rem);
    --rundung: 1.25rem;
    --rundung-klein: 0.75rem;
    --schatten: 0 1px 2px rgba(35, 40, 56, 0.05), 0 10px 30px -12px rgba(35, 40, 56, 0.18);
    --schatten-stark: 0 2px 4px rgba(35, 40, 56, 0.06), 0 22px 44px -16px rgba(35, 40, 56, 0.28);
    --kopf-hoehe: 4.5rem;
}


/* 3. Grundlagen =========================================================== */

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

html {
    scroll-behavior: smooth;
    /* Sprungziele (#anker) nicht unter der festen Kopfzeile verstecken */
    scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--tinte);
    background: var(--papier);
    overflow-wrap: break-word;
}

h1,
h2,
h3 {
    font-family: var(--schrift-titel);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p,
ul,
ol,
dl,
address {
    margin: 0 0 1em;
}

address {
    font-style: normal;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--blau-dunkel);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--akzent-dunkel);
}

/* Gut sichtbarer Fokusrahmen für die Bedienung mit der Tastatur */
:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 3px;
    border-radius: 4px;
}

[hidden] {
    display: none !important;
}


/* 4. Hilfsklassen ========================================================= */

/* Begrenzt die Inhaltsbreite und hält Abstand zum Bildschirmrand */
.breite {
    width: 100%;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
}

.breite-mittel { max-width: calc(58rem + 2 * var(--rand)); }
.breite-schmal { max-width: calc(46rem + 2 * var(--rand)); }

.mittig {
    text-align: center;
}

/* Nur für Vorleseprogramme sichtbar */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Erscheint nur bei Tastaturbedienung: springt am Menü vorbei zum Inhalt */
.sprunglink {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--tinte);
    color: var(--weiss);
    border-radius: var(--rundung-klein);
}

.sprunglink:focus {
    top: 1rem;
    color: var(--weiss);
}

/* Symbole aus bilder/icons.svg: so groß wie die Schrift, in Textfarbe */
.symbol {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}


/* 5. Knöpfe =============================================================== */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.85em 1.6em;
    border: 2px solid var(--akzent);
    border-radius: 999px;
    background: var(--akzent);
    color: #2a1608;
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(185, 87, 26, 0.7);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.knopf:hover {
    color: #2a1608;
    background: #f29550;
    transform: translateY(-2px);
    box-shadow: 0 14px 24px -12px rgba(185, 87, 26, 0.8);
}

.knopf:active {
    transform: translateY(0);
}

.knopf:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.knopf-hell {
    background: transparent;
    border-color: var(--blau);
    color: var(--blau-dunkel);
    box-shadow: none;
}

.knopf-hell:hover {
    background: var(--blau-hell);
    color: var(--blau-dunkel);
    box-shadow: none;
}

.knopf-klein {
    padding: 0.55em 1.2em;
}

.knopf-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}


/* 6. Kopfzeile und Navigation ============================================= */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 246, 238, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linie);
}

.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--kopf-hoehe);
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
}

/* Logo mit Schriftzug */
.marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--tinte);
    text-decoration: none;
}

.marke img {
    width: 3rem;
    height: 3rem;
    transition: transform 0.4s ease;
}

.marke:hover img {
    transform: rotate(-12deg) scale(1.05);
}

.marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Schriftzug „klangZONE“: „klang“ schlicht, „ZONE“ weiß im blauen Kästchen */
.marke-name {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.marke-zone {
    padding: 0.12em 0.32em;
    border-radius: 0.3em;
    background: var(--blau);
    color: var(--weiss);
    font-size: 0.86em;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.marke-unten {
    margin-top: 0.3rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--tinte-hell);
}

/* Menüknopf (nur auf kleinen Bildschirmen sichtbar) */
.menue-knopf {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: 50%;
    background: var(--weiss);
    color: var(--tinte);
    cursor: pointer;
}

/* Die drei Striche: der mittlere ist das Element selbst, oben und unten
   kommen als ::before und ::after dazu. Offen wird daraus ein Kreuz. */
.menue-knopf-striche,
.menue-knopf-striche::before,
.menue-knopf-striche::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.menue-knopf-striche {
    position: relative;
}

.menue-knopf-striche::before,
.menue-knopf-striche::after {
    content: "";
    position: absolute;
    left: 0;
}

.menue-knopf-striche::before { transform: translateY(-6px); }
.menue-knopf-striche::after { transform: translateY(6px); }

.menue-knopf[aria-expanded="true"] .menue-knopf-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::after { transform: rotate(-45deg); }

/* Menü auf dem Handy: klappt unter der Kopfzeile auf */
.hauptmenue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--kopf-hoehe));
    max-height: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto;
    padding: 0.5rem var(--rand) 1.5rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
}

.hauptmenue.offen {
    display: block;
}

/* Ohne JavaScript gibt es keinen Menüknopf: Menü dann einfach immer zeigen */
html:not(.js) .hauptmenue {
    display: block;
    position: static;
    box-shadow: none;
}

html:not(.js) .menue-knopf {
    display: none;
}

html:not(.js) .kopf-innen {
    flex-wrap: wrap;
}

.hauptmenue ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hauptmenue a {
    display: block;
    padding: 0.7rem 0.25rem;
    color: var(--tinte);
    font-weight: 700;
    text-decoration: none;
}

.hauptmenue a:hover,
.hauptmenue a[aria-current="page"] {
    color: var(--blau-dunkel);
}

.hauptmenue > ul > li {
    border-bottom: 1px solid var(--linie);
}

.hauptmenue > ul > li:last-child {
    border-bottom: 0;
    padding-top: 1rem;
}

.untermenue {
    padding: 0 0 0.6rem 1rem !important;
}

.untermenue a {
    padding: 0.4rem 0.25rem;
    font-weight: 500;
    color: var(--tinte-hell);
}

.hauptmenue a.knopf {
    display: inline-flex;
    padding: 0.7em 1.6em;
    color: #2a1608;
}

/* Ab Tablet quer: Menü als Leiste, Untermenüs klappen beim Überfahren auf */
@media (min-width: 62rem) {
    .menue-knopf {
        display: none;
    }

    .hauptmenue,
    html:not(.js) .hauptmenue {
        display: block;
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .hauptmenue > ul {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .hauptmenue > ul > li {
        position: relative;
        border: 0;
    }

    .hauptmenue > ul > li:last-child {
        padding: 0 0 0 0.75rem;
    }

    .hauptmenue > ul > li > a:not(.knopf) {
        padding: 0.6rem 0.8rem;
        border-radius: 999px;
    }

    .hauptmenue > ul > li > a:not(.knopf):hover,
    .hauptmenue > ul > li > a[aria-current="page"]:not(.knopf) {
        background: var(--blau-hell);
    }

    /* Kleiner Pfeil hinter Menüpunkten mit Untermenü */
    .hat-untermenue > a::after {
        content: "";
        display: inline-block;
        width: 0.4em;
        height: 0.4em;
        margin-left: 0.5em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-0.2em) rotate(45deg);
    }

    .untermenue {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 15rem;
        padding: 0.5rem !important;
        background: var(--weiss);
        border: 1px solid var(--linie);
        border-radius: var(--rundung-klein);
        box-shadow: var(--schatten-stark);
        /* Versteckt, bleibt aber für Tastatur und Vorleser erreichbar */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.4rem);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    }

    .hat-untermenue:hover > .untermenue,
    .hat-untermenue:focus-within > .untermenue {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .untermenue a {
        padding: 0.55rem 0.8rem;
        border-radius: 0.5rem;
        color: var(--tinte);
    }

    .untermenue a:hover {
        background: var(--blau-hell);
    }
}


/* 7. Bühne (Einstieg der Startseite) ====================================== */

.buehne {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 7vw, 5.5rem);
    /* Zwei weiche Farbflecken als Hintergrund */
    background:
        radial-gradient(40rem 26rem at 105% -10%, var(--akzent-hell), transparent 65%),
        radial-gradient(34rem 24rem at -10% 110%, var(--blau-hell), transparent 65%),
        var(--papier);
}

.buehne-innen {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
}

.dachzeile {
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blau-dunkel);
}

.betont {
    color: var(--blau);
    font-style: italic;
}

.buehne-zitat {
    font-family: var(--schrift-titel);
    font-size: clamp(1.4rem, 3.4vw, 1.9rem);
    font-style: italic;
    color: var(--akzent-dunkel);
    margin-bottom: 0.6em;
}

.buehne-hinweis {
    max-width: 32rem;
    font-size: 1.15rem;
    color: var(--tinte-hell);
    margin-bottom: 1.8rem;
}

.buehne-bild {
    position: relative;
    width: min(100%, 30rem);
    margin-inline: auto;
}

/* Das Foto in einer weichen, unregelmäßigen Form */
.buehne-bild img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 58% 42% 45% 55% / 48% 55% 45% 52%;
    box-shadow: var(--schatten-stark);
    border: 0.5rem solid var(--weiss);
}

@media (min-width: 56rem) {
    .buehne-innen {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

/* Handy und Tablet hochkant: Der Text bekommt die ganze Breite und viel
   Luft. Das Foto liegt blass als großer Kreis im Hintergrund und braucht
   so keinen eigenen Platz; Klangbalken und Noten bleiben kräftig sichtbar. */
@media (max-width: 55.99rem) {
    .buehne {
        display: grid;
        align-items: center;
        /* Füllt den ersten Bildschirm (abzüglich Kopfzeile), aber nicht mehr */
        min-height: min(calc(100svh - var(--kopf-hoehe)), 46rem);
        padding-block: 2rem 2.5rem;
    }

    .buehne-innen {
        display: block;
        width: 100%;
    }

    .buehne-text {
        position: relative;
        z-index: 1;
    }

    .dachzeile {
        margin-bottom: 1.4rem;
    }

    .buehne h1 {
        margin-bottom: 0.5em;
        font-size: clamp(2.3rem, 10vw, 4rem);
    }

    .buehne-zitat {
        margin-bottom: 1em;
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    .buehne-hinweis {
        margin-bottom: 1.8rem;
    }

    /* Knöpfe untereinander: rechts daneben bleibt Platz für die Klangbalken */
    .buehne .knopf-reihe {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Der Bildbereich wird zur Hintergrundebene über die ganze Bühne */
    .buehne-bild {
        position: absolute;
        inset: 0;
        width: auto;
        margin: 0;
        pointer-events: none;
    }

    /* Das Foto: großer, blasser Kreis rechts oben, vollständig sichtbar
       (nichts ragt aus dem Bild). Es ist gespiegelt (scaleX(-1)), damit das
       Gesicht rechts neben der Schrift steht und nicht dahinter. */
    .buehne-bild img {
        position: absolute;
        top: 0.5rem;
        right: 2%;
        width: min(80vw, 28rem);
        transform: scaleX(-1);
        border: 0;
        border-radius: 50%;
        box-shadow: none;
        opacity: 0.15;
    }

    /* Klangbalken rechts neben den Knöpfen, auf Höhe des unteren Knopfs */
    .buehne-bild .klangbalken {
        left: auto;
        right: var(--rand);
        bottom: 2.5rem;
        height: 3.3rem;
        padding: 0.6rem 0.7rem;
    }

    /* Alle drei Noten rechts am Kreisfoto, unterhalb des Gesichts.
       Die Abstände von oben hängen an der Bildbreite (80vw, höchstens
       28rem), damit die Noten bei jeder Breite am Foto bleiben. */
    .buehne-bild .schwebenote-1 { top: min(56vw, 19.6rem); right: 4%; width: 2rem; height: 2rem; }
    .buehne-bild .schwebenote-2 { top: min(68vw, 23.8rem); right: 22%; bottom: auto; width: 1.7rem; height: 1.7rem; }
    .buehne-bild .schwebenote-3 { top: min(74vw, 25.9rem); right: 5%; left: auto; width: 1.5rem; height: 1.5rem; }
}
}
}


/* 8. Abschnitte, Überschriften, Raster ==================================== */

.abschnitt {
    padding-block: var(--abstand-abschnitt);
}

.abschnitt-getoent {
    background: var(--papier-dunkel);
}

.abschnitt-titel {
    text-align: center;
    margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

/* Deko unter der Überschrift: fünf kleine Klangbalken */
.abschnitt-titel::after {
    content: "";
    display: block;
    width: 3.1rem;
    height: 1.4rem;
    margin: 0.9rem auto 0;
    background:
        linear-gradient(var(--akzent), var(--akzent)) 0 100% / 0.35rem 45% no-repeat,
        linear-gradient(var(--blau), var(--blau)) 0.6875rem 100% / 0.35rem 80% no-repeat,
        linear-gradient(var(--akzent), var(--akzent)) 1.375rem 100% / 0.35rem 100% no-repeat,
        linear-gradient(var(--blau), var(--blau)) 2.0625rem 100% / 0.35rem 60% no-repeat,
        linear-gradient(var(--akzent), var(--akzent)) 2.75rem 100% / 0.35rem 30% no-repeat;
}

.abschnitt-titel.links {
    text-align: left;
}

.abschnitt-titel.links::after {
    margin-left: 0;
}

.abschnitt-untertitel {
    max-width: 40rem;
    margin: calc(-1 * clamp(1rem, 3vw, 2rem)) auto clamp(1.8rem, 4vw, 3rem);
    text-align: center;
    color: var(--tinte-hell);
}

.zwischentitel {
    margin-top: 3rem;
    text-align: center;
}

/* Kopf der Unterseiten */
.seitenkopf {
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
    text-align: center;
    background:
        radial-gradient(30rem 16rem at 100% 0%, var(--akzent-hell), transparent 70%),
        radial-gradient(30rem 16rem at 0% 100%, var(--blau-hell), transparent 70%),
        var(--papier);
    border-bottom: 1px solid var(--linie);
}

.seitenkopf h1 {
    margin: 0;
}

/* Langes Einzelwort als Überschrift (Unterrichtsangebot): auf dem Handy
   kleiner setzen, damit es in eine Zeile passt und nicht mitten im Wort bricht. */
.seitenkopf-langes-wort h1 {
    font-size: clamp(1.4rem, 7.6vw, 3.6rem);
}

/* Seitenkopf, der nur auf großen Bildschirmen erscheint (Kontaktseite).
   Auf dem Handy bleibt die Überschrift für Vorleseprogramme erhalten. */
@media (max-width: 51.99rem) {
    .seitenkopf-nur-gross {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

/* Raster: auf dem Handy eine Spalte, dann schrittweise mehr */
.raster {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Kleine Karten (Instrumente, Team) stehen schon auf dem Handy zu zweit */
.raster-eng {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 34rem) {
    .raster-3,
    .raster-4,
    .raster-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 48rem) {
    .raster-2 { grid-template-columns: repeat(2, 1fr); }
    .raster-3,
    .raster-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
    .raster-4 { grid-template-columns: repeat(4, 1fr); }
    .raster-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Zwei Spalten nebeneinander (Text + Bild) */
.zweispaltig {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 52rem) {
    .zweispaltig { grid-template-columns: 1fr 1fr; }
    .zweispaltig-oben { align-items: start; }
}


/* 9. Karten, Kacheln, Personen, Beiträge ================================== */

/* Gemeinsames Aussehen aller „Karten“ */
.karte,
.kachel,
.person,
.beitrag {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    color: var(--tinte);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.karte:hover,
a.kachel:hover,
a.person:hover {
    color: var(--tinte);
    transform: translateY(-5px);
    border-color: var(--blau);
    box-shadow: var(--schatten-stark);
}

/* Karte: Bild oben, darunter Überschrift und Text (Musikangebote) */
.karte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.karte img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.karte h3 {
    margin: 1.2rem 1.3rem 0.4rem;
}

.karte p {
    margin: 0 1.3rem 1.4rem;
    color: var(--tinte-hell);
    font-size: 0.98rem;
}

/* Kachel: Symbol, Überschrift, kurzer Text (Instrumente) */
.kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.1rem;
    text-align: center;
}

.kachel .symbol {
    width: 4.25rem;
    height: 4.25rem;
    padding: 0.9rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--blau-hell);
    color: var(--blau-dunkel);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.35s ease;
}

a.kachel:hover .symbol {
    background: var(--akzent);
    color: #2a1608;
    transform: rotate(-8deg) scale(1.06);
}

.kachel h3 {
    margin-bottom: 0.3rem;
    font-size: 1.15rem;
}

.kachel p {
    margin: 0;
    color: var(--tinte-hell);
    font-size: 0.95rem;
}

.kachel-gross {
    padding: 2rem 1.5rem;
}

.kachel-gross h3 {
    margin-bottom: 0.6rem;
    font-size: 1.3rem;
}

.kachel-gross p + p {
    margin-top: 0.25rem;
}

/* Sprungziel hervorheben, wenn man von der Startseite kommt (…#piano) */
.kachel:target,
.kurs:target,
.steckbrief:target {
    border-color: var(--akzent);
    box-shadow: 0 0 0 4px var(--akzent-hell), var(--schatten);
}

/* Person: rundes Foto, Name, Aufgabe (Team auf der Startseite) */
.person {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.1rem;
    text-align: center;
}

.person img {
    width: 8.5rem;
    height: 8.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    border: 0.3rem solid var(--papier-dunkel);
}

/* Personen ohne eigenes Foto: das Platzhalterbild ganz zeigen statt beschneiden */
.person img.platzhalter,
.steckbrief img.platzhalter {
    object-fit: contain;
    padding: 0.9rem;
    background: #b3b3b3;
}

@media (max-width: 30rem) {
    .person {
        padding: 1.2rem 0.7rem;
    }

    .person img {
        width: 6.5rem;
        height: 6.5rem;
    }

    .kachel {
        padding: 1.3rem 0.7rem;
    }
}

.person h3 {
    margin-bottom: 0.3rem;
    font-size: 1.15rem;
}

.person p {
    margin: 0;
    color: var(--tinte-hell);
    font-size: 0.95rem;
}

/* Beitrag: Bild oben, Text darunter (Aktuelles) */
.beitrag {
    overflow: hidden;
}

.beitrag img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 30%;
}

.beitrag-text {
    padding: 1.5rem 1.6rem 1.6rem;
}

.schlagworte {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.2rem 0 0;
}

.schlagworte span {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: var(--blau-hell);
    color: var(--blau-dunkel);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Plakat: hochformatiges Bild zum Vergrößern (Workshops, Preisliste) */
.plakat {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--rundung-klein);
    overflow: hidden;
    box-shadow: var(--schatten-stark);
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.plakat:hover {
    transform: rotate(-1deg) scale(1.02);
}

.plakat img {
    max-height: 34rem;
    width: auto;
}

.plakat-mittig img {
    max-height: none;
}

.ankuendigung {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: var(--rundung-klein);
    background: var(--akzent-hell);
    color: var(--akzent-dunkel);
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    font-weight: 600;
}


/* 10. Kurse und Steckbriefe (Unterseiten) ================================= */

/* Liste mit Strichen statt Punkten (wie auf der bisherigen Website) */
.strichliste {
    list-style: none;
    padding: 0;
}

.strichliste li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.35em;
}

.strichliste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 0.8em;
    height: 2px;
    border-radius: 2px;
    background: var(--akzent);
}

.kurs,
.steckbrief {
    display: grid;
    gap: 1.5rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding: 1.25rem;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}

.kurs img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--rundung-klein);
}

.kurs-text,
.steckbrief-text {
    padding: 0.25rem 0.5rem 0.5rem;
}

.steckbrief img {
    width: 100%;
    max-width: 16rem;
    margin-inline: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 15%;
    border-radius: var(--rundung-klein);
}

.steckbrief h2 {
    font-size: 1.7rem;
}

@media (min-width: 46rem) {
    .kurs {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 1.5rem;
        gap: 2.5rem;
    }

    /* Jeder zweite Kurs: Bild rechts, Text links */
    .kurs:nth-of-type(even) img {
        order: 2;
    }

    .steckbrief {
        grid-template-columns: 15rem 1fr;
        align-items: start;
        padding: 1.75rem;
        gap: 2.25rem;
    }
}


/* 11. Next Event ========================================================== */

.termin {
    position: relative;
    overflow: hidden;
    background: var(--blau-nacht);
    color: var(--weiss);
    text-align: center;
}

/* Deko: Schallwellen, die sich aus der Mitte ausbreiten */
.termin::before,
.termin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28rem;
    height: 28rem;
    margin: -14rem 0 0 -14rem;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    animation: schallwelle 5s linear infinite;
}

.termin::after {
    animation-delay: 2.5s;
}

.termin-innen {
    position: relative;
    z-index: 1;
}

.termin-note {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: var(--akzent);
}

.termin h2 {
    font-size: 1rem;
    font-family: var(--schrift-text);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b9cdf0;
}

.termin-status {
    font-family: var(--schrift-titel);
    font-size: clamp(2.4rem, 8vw, 4.2rem);
    font-style: italic;
    line-height: 1.1;
    margin-bottom: 0.3em;
}

.termin-name {
    display: inline-block;
    margin: 0;
    padding: 0.45rem 1.4rem;
    border-radius: 999px;
    background: var(--akzent);
    color: #2a1608;
    font-size: 1.15rem;
    font-weight: 800;
}


/* 12. Einbettungen (Video, Karte) und Großansicht ========================= */

/* Platzhalter, der erst nach einem Klick YouTube bzw. Google Maps lädt */
.einbettung {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--rundung);
    background: var(--blau-nacht);
    box-shadow: var(--schatten-stark);
}

/* Das Vorschaubild füllt den Rahmen, der Knopf sitzt mittig darüber */
.einbettung > img,
.einbettung-platzhalter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

.einbettung-platzhalter {
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 3rem 3rem,
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 3rem 3rem,
        var(--blau-dunkel);
    filter: none;
}

.einbettung-platzhalter .symbol {
    width: 10rem;
    height: 10rem;
    color: rgba(255, 255, 255, 0.1);
}

.einbettung-knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 3rem;
    padding: 0.9rem 1.7rem;
    border: 0;
    border-radius: 999px;
    background: var(--akzent);
    color: #2a1608;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(233, 132, 58, 0.6);
    animation: puls 2.4s ease-out infinite;
    transition: transform 0.2s ease;
}

.einbettung-knopf:hover {
    transform: scale(1.06);
}

.einbettung-hinweis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.7rem 1rem;
    background: rgba(20, 28, 48, 0.82);
    color: #e9edf6;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
}

.einbettung-hinweis a {
    color: #ffd2ad;
}

.einbettung iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.einbettung-karte {
    aspect-ratio: 4 / 3;
}

@media (min-width: 48rem) {
    .einbettung-karte {
        aspect-ratio: 21 / 9;
    }
}

/* Großansicht eines Bildes (wird von js/main.js als <dialog> erzeugt) */
.grossansicht {
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    border-radius: var(--rundung-klein);
    background: transparent;
    overflow: visible;
}

.grossansicht::backdrop {
    background: rgba(20, 24, 36, 0.88);
}

.grossansicht img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    border-radius: var(--rundung-klein);
}

.grossansicht-schliessen {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: var(--weiss);
    color: var(--tinte);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}


/* 13. Tabellen und Listen (Preise, Termine) =============================== */

/* Rahmen um jede Preistabelle; lässt breite Tabellen auf dem Handy seitlich scrollen */
.tabelle-rahmen {
    margin-bottom: 1.5rem;
    overflow-x: auto;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}

.preistabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}

.preistabelle th,
.preistabelle td {
    padding: 0.75rem 1.1rem;
    text-align: left;
    vertical-align: top;
}

.preistabelle thead th {
    background: var(--blau-hell);
    color: var(--blau-nacht);
    font-size: 0.88rem;
}

/* Erste Kopfzelle = Name der Preisgruppe, deshalb größer */
.preistabelle thead th:first-child {
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
    font-weight: 600;
}

.preistabelle tbody tr {
    border-top: 1px solid var(--linie);
}

/* Untergruppen (z. B. Einzel, 2er, 3er) durch eine kräftigere Linie trennen */
.preistabelle tbody + tbody tr:first-child {
    border-top: 3px solid var(--papier-dunkel);
}

/* Spaltenbreiten und rechtsbündige Preise */
.preistabelle th:nth-child(2),
.preistabelle td:nth-child(2) {
    width: 26%;
    color: var(--tinte-hell);
}

.preistabelle th:last-child,
.preistabelle td:last-child {
    width: 24%;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.preistabelle thead th:nth-child(2),
.preistabelle thead th:last-child {
    color: var(--blau-nacht);
    white-space: normal;
}

.hinweiskasten {
    margin-top: 2rem;
    padding: 1.4rem 1.6rem;
    border-left: 5px solid var(--akzent);
    border-radius: var(--rundung-klein);
    background: var(--akzent-hell);
}

.hinweiskasten p {
    margin: 0;
}

/* Terminliste: Datum links, Anlass rechts (unterrichtsfreie Tage) */
.terminliste {
    margin: 0;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.terminliste > div {
    display: grid;
    gap: 0.1rem 1.5rem;
    padding: 0.95rem 1.4rem;
    border-top: 1px solid var(--linie);
}

.terminliste > div:first-child {
    border-top: 0;
}

.terminliste dt {
    font-weight: 800;
    color: var(--blau-dunkel);
    font-variant-numeric: tabular-nums;
}

.terminliste dd {
    margin: 0;
}

@media (min-width: 36rem) {
    .terminliste > div {
        grid-template-columns: 13rem 1fr;
    }
}


/* 14. Galerie ============================================================= */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: clamp(0.8rem, 2vw, 1.4rem);
}

.galerie a {
    display: block;
    overflow: hidden;
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    cursor: zoom-in;
}

.galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.galerie a:hover img {
    transform: scale(1.06);
}


/* 15. Formular und Kontaktdaten =========================================== */

.formular-karte {
    padding: clamp(1.4rem, 4vw, 2.4rem);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}

.feld {
    margin-bottom: 1.1rem;
}

.feld label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1.5px solid var(--linie);
    border-radius: var(--rundung-klein);
    background: var(--papier);
    color: var(--tinte);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feld textarea {
    resize: vertical;
    min-height: 8rem;
}

.feld input:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--blau);
    box-shadow: 0 0 0 4px var(--blau-hell);
}

/* Zeile mit Häkchen: Kästchen links, Text rechts */
.feld-haken {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

.feld-haken input {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0.2rem 0 0;
    accent-color: var(--blau);
}

.feld-haken label {
    margin: 0;
    font-weight: 400;
    font-size: 0.95rem;
}

/* Falle für Spam-Programme: außerhalb des sichtbaren Bereichs */
.feld-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.meldung {
    margin-bottom: 1.2rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rundung-klein);
    font-weight: 700;
}

.meldung p {
    margin: 0;
}

.meldung-fehler {
    background: #fdecea;
    color: var(--fehler);
}

.meldung-erfolg {
    background: #e6f4ec;
    color: var(--erfolg);
}

.kontaktzeile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    margin-bottom: 1.6rem;
}

.kontaktzeile .symbol {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0.75rem;
    border-radius: 50%;
    background: var(--blau-hell);
    color: var(--blau-dunkel);
}

.kontaktzeile h2 {
    margin-bottom: 0.2rem;
    font-size: 1.25rem;
}

.kontaktzeile p,
.kontaktzeile address {
    margin: 0;
}


/* 16. Fließtext und Rechtstexte =========================================== */

.fliesstext p {
    margin-bottom: 1.15em;
}

.leitsatz {
    font-family: var(--schrift-titel);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-style: italic;
    line-height: 1.2;
    color: var(--akzent-dunkel);
    text-align: center;
    margin-bottom: 1.2em;
}

.rechtstext h2 {
    margin-top: 2.2em;
    font-size: 1.5rem;
}

.rechtstext h2:first-child {
    margin-top: 0;
}

.rechtstext h3 {
    margin-top: 1.8em;
    padding-bottom: 0.4em;
    border-bottom: 1px dashed var(--tinte-hell);
    font-size: 1.15rem;
}

.quelle {
    margin-top: 2.5em;
    font-size: 0.9rem;
    color: var(--tinte-hell);
}

.fehlerseite {
    min-height: 55vh;
    display: grid;
    align-items: center;
}

.fehlerseite-note {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    color: var(--akzent);
    animation: schweben 5s ease-in-out infinite;
}


/* 17. Seitenfuß =========================================================== */

.fuss {
    position: relative;
    margin-top: 3.25rem;
    background: var(--blau-nacht);
    color: #d6deee;
}

/* Deko: geschwungene Notenlinien als oberer Rand des Seitenfußes */
.fuss-notenlinien {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 3.25rem;
    fill: none;
    stroke: var(--blau-nacht);
    stroke-width: 1.5;
    opacity: 0.35;
}

.fuss a {
    color: var(--weiss);
}

.fuss a:hover {
    color: #ffd2ad;
}

.fuss-innen {
    display: grid;
    gap: 2rem;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--rand) 2rem;
}

.fuss-logo {
    width: 5rem;
}

.fuss-spalte h2 {
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
    color: var(--weiss);
}

.fuss-spalte p:last-child {
    margin-bottom: 0;
}

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.instagram-link .symbol {
    width: 1.6rem;
    height: 1.6rem;
}

.fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem 2rem;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding: 1.3rem var(--rand) 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.92rem;
}

.fuss-unten p {
    margin: 0;
}

.fuss-unten nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

@media (min-width: 48rem) {
    .fuss-innen {
        grid-template-columns: auto repeat(3, 1fr);
        gap: 3rem;
    }
}


/* 18. Deko und Animationen ================================================ */

/* Klangbalken am Foto der Bühne: sieben Balken, die im Takt wippen.
   Jeder Balken bekommt eine eigene Dauer und Verzögerung, damit es lebendig wirkt. */
.klangbalken {
    position: absolute;
    left: -0.5rem;
    bottom: 6%;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    height: 4.2rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--rundung-klein);
    background: var(--weiss);
    box-shadow: var(--schatten-stark);
}

.klangbalken span {
    width: 0.4rem;
    height: 100%;
    border-radius: 0.2rem;
    background: var(--blau);
    transform-origin: bottom;
    animation: wippen 1.2s ease-in-out infinite alternate;
}

.klangbalken span:nth-child(even) { background: var(--akzent); }
.klangbalken span:nth-child(1) { animation-duration: 0.9s; animation-delay: -0.2s; }
.klangbalken span:nth-child(2) { animation-duration: 1.3s; animation-delay: -0.7s; }
.klangbalken span:nth-child(3) { animation-duration: 0.8s; animation-delay: -0.4s; }
.klangbalken span:nth-child(4) { animation-duration: 1.1s; animation-delay: -0.9s; }
.klangbalken span:nth-child(5) { animation-duration: 1.4s; animation-delay: -0.1s; }
.klangbalken span:nth-child(6) { animation-duration: 0.95s; animation-delay: -0.6s; }
.klangbalken span:nth-child(7) { animation-duration: 1.25s; animation-delay: -0.3s; }

/* Schwebende Noten rund um das Foto der Bühne */
.schwebenote {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--akzent);
    animation: schweben 6s ease-in-out infinite;
}

.schwebenote-1 { top: -4%; right: 6%; }
.schwebenote-2 { top: 34%; right: -5%; width: 2rem; height: 2rem; color: var(--blau); animation-duration: 7.5s; animation-delay: -2s; }
.schwebenote-3 { top: 4%; left: -3%; width: 1.8rem; height: 1.8rem; color: var(--blau-dunkel); animation-duration: 8s; animation-delay: -4s; }

/* Einblenden beim Scrollen. Gilt nur mit JavaScript (html.js), damit ohne
   JavaScript nichts unsichtbar bleibt. js/main.js setzt die Klasse .sichtbar. */
.js .einblenden {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .einblenden.sichtbar {
    opacity: 1;
    transform: none;
}

/* Karten nebeneinander nacheinander einblenden */
.js .raster > .einblenden:nth-child(2) { transition-delay: 0.08s; }
.js .raster > .einblenden:nth-child(3) { transition-delay: 0.16s; }
.js .raster > .einblenden:nth-child(4) { transition-delay: 0.24s; }
.js .raster > .einblenden:nth-child(5) { transition-delay: 0.32s; }

/* Nach dem Einblenden wieder die normale, schnelle Hover-Animation nutzen */
.js .karte.sichtbar,
.js .kachel.sichtbar,
.js .person.sichtbar {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.7s ease;
    transition-delay: 0s;
}

@keyframes wippen {
    from { transform: scaleY(0.25); }
    to { transform: scaleY(1); }
}

@keyframes schweben {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-0.9rem) rotate(8deg); }
}

@keyframes schallwelle {
    from { transform: scale(0.2); opacity: 1; }
    to { transform: scale(2.6); opacity: 0; }
}

@keyframes puls {
    0% { box-shadow: 0 0 0 0 rgba(233, 132, 58, 0.6); }
    70%, 100% { box-shadow: 0 0 0 1.4rem rgba(233, 132, 58, 0); }
}


/* 19. Weniger Bewegung, Druck ============================================= */

/* Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, bekommt
   eine ruhige Seite ohne Animationen. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .einblenden {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .kopf,
    .fuss,
    .klangbalken,
    .schwebenote,
    .einbettung,
    .knopf {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .js .einblenden {
        opacity: 1;
        transform: none;
    }
}