@import url("fonts.css");

/* ==========================================================================
   Sigrun Richter, Lautenistin — Gestaltung 2026
   Kind-Template von Cassiopeia.

   Schriften: EB Garamond (Renaissance-Antiqua, passt zur Alten Musik) fuer
   Ueberschriften und Namenszug, Inter fuer Fliesstext und Navigation.
   Beide liegen LOKAL unter fonts/ - es wird zur Laufzeit nichts von Google
   geladen.

   Farbwelt aus dem Vorgaenger (templates/sigrunrichter/css) uebernommen:
     #8b5e27 Goldbraun · #7a5110 dunkler · #cbb880/#d9cba1 hell · #3c3916 Text

   ⚠️ Pfadhinweis: diese Datei liegt unter
      /media/templates/site/sr2026/css/user.css
   Bis zur Wurzel sind es FUENF Ebenen: css → sr2026 → site → templates → media
   ========================================================================== */

:root {
    --sr-gold:          #8b5e27;
    --sr-gold-dunkel:   #6e4715;
    --sr-gold-hell:     #c3ad7c;
    --sr-gold-blass:    #ddd0b0;
    --sr-grund:         #f2e9d8;   /* kraeftigeres Creme statt fast-weiss */
    --sr-grund-warm:    #e8dcc4;
    --sr-flaeche:       #fbf6ec;   /* Karten heben sich hell vom Grund ab */
    --sr-text:          #2e2b16;
    --sr-text-leise:    #6a6350;
    --sr-linie:         #d6c7a4;
    --sr-schatten:      0 1px 3px rgba(51, 48, 26, .07), 0 6px 18px rgba(51, 48, 26, .05);

    --sr-breite:        72rem;
    --sr-abstand:       clamp(1.1rem, 3vw, 2.25rem);

    --sr-serif:         "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sr-sans:          "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Dunkler Modus: bewusst gestaltet, nicht von Cassiopeia umgedreht.
   Warmes Dunkelbraun als Grund, die Goldtoene tragen. */
@media (prefers-color-scheme: dark) {
    :root {
        --sr-gold:        #c9a063;
        --sr-gold-dunkel: #dbb87e;
        --sr-gold-hell:   #8a6a34;
        --sr-gold-blass:  #3a3323;
        --sr-grund:       #211e14;
        --sr-grund-warm:  #2a2618;
        --sr-flaeche:     #2e2a1c;
        --sr-text:        #ece4d2;
        --sr-text-leise:  #b3a98f;
        --sr-linie:       #423a26;
        --sr-schatten:    0 1px 3px rgba(0, 0, 0, .35);
    }
}

/* ==========================================================================
   Grundlagen — Cassiopeia-Vorgaben ueberschreiben
   ========================================================================== */

/* Raster-Kinder schrumpfen ohne min-width:0 nicht unter ihre Inhaltsbreite.
   Genau daran lief der Text auf dem Handy rechts aus dem Bild. */
.site-grid > *,
.blog-items > *,
.blog-item > *,
.item-content > * {
    min-width: 0;
}

/* Lange Namen und Titel duerfen umbrechen, statt zu ueberstehen */
body.site,
.item-content,
.item-content p,
.page-header h2,
.aufnahme-titel {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

body.site {
    background: var(--sr-grund);
    color: var(--sr-text);
    font-family: var(--sr-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

.wrapper,
.site-grid,
.container-component,
.container-banner,
.container-top-a,
.container-bottom-a {
    background: transparent;
}

h1, h2, h3, h4, h5,
.page-header h1,
.page-header h2 {
    font-family: var(--sr-serif);
    color: var(--sr-gold-dunkel);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 .7em; }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); margin: 2em 0 .55em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); margin: 1.6em 0 .4em; }

p { margin: 0 0 1.1em; }

.container-component p,
.com-content-article__body p,
.com-content-category-blog__item p {
    max-width: 66ch;
}

a {
    color: var(--sr-gold-dunkel);
    text-decoration: none;
    border-bottom: 1px solid var(--sr-gold-hell);
    transition: color .15s, border-color .15s;
}

a:hover,
a:focus-visible {
    color: var(--sr-text);
    border-bottom-color: currentColor;
}

/* Ueberschriften, Namenszug, Bilder und Navigation NIE unterstreichen.
   Cassiopeia setzt text-decoration teils spezifischer - daher !important. */
h1 a, h2 a, h3 a, h4 a,
.page-header a,
a:has(img),
a:has(span),
.item-image a,
.sr-namenszug a,
.sr-namenszug a:hover,
.mod-languages a,
nav a,
.mod-menu a,
ul.mod-menu a,
.container-sidebar-left a,
.container-sidebar-right a,
.readmore a,
.btn,
.back-to-top-link {
    border-bottom: 0 !important;
    text-decoration: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--sr-gold);
    outline-offset: 3px;
}

img { max-width: 100%; height: auto; }

/* ==========================================================================
   Aussenmasse
   ========================================================================== */

.site-grid {
    max-width: var(--sr-breite);
    margin-inline: auto;
    padding-inline: var(--sr-abstand);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    row-gap: 0;
}

/* Spaltenaufteilung: schmales Menue, breiter Inhalt.
   Cassiopeias Vorgabe engt den Inhaltsbereich unnoetig ein. */
@media (min-width: 62rem) {
    .site-grid {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    .site-grid > .container-sidebar-left { grid-column: 1; }
    .site-grid > .container-component    { grid-column: 2; }
    .site-grid > .full-width             { grid-column: 1 / -1; }
}

/* Schmale Schirme: EINE Spalte, die schrumpfen darf.
   Cassiopeias Vorgabe hat dort eine Mindestbreite, an der der Inhalt
   rechts aus dem Bild lief. */
@media (max-width: 61.999rem) {
    .site-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-grid > * {
        grid-column: 1 !important;
        max-width: 100%;
    }
}

/* Sicherheitsnetz: waagerechtes Scrollen gibt es auf dieser Seite nicht */
html, body.site {
    max-width: 100%;
    overflow-x: clip;
}

/* Der Kopfbereich laeuft ueber die volle Fensterbreite.
   Er sitzt in .site-grid, das auf --sr-breite begrenzt und zentriert ist -
   deshalb endete das Bild vorher mitten auf der Seite mit harter Kante.
   50% ist die halbe Rasterbreite, 50vw die halbe Fensterbreite: die
   Differenz zieht das Element genau bis an den Fensterrand.
   Gefahrlos, weil html/body.site schon overflow-x: clip tragen. */
.site-grid > .container-banner {
    grid-column: 1 / -1;
    width: 100vw;
    /* Prozentwerte helfen hier nicht: leere Rasterspalten verfaelschen die
       Bezugsbreite, der Kopf sass dadurch 26 px (Schirm) bzw. 60 px (Telefon)
       zu weit links und schnitt den Namenszug ab. Stattdessen der echte
       Abstand der Rasterkante zum Fensterrand: aussen die Zentrierung,
       innen der Innenabstand des Rasters. */
    margin-inline: calc(-1 * (max((100vw - var(--sr-breite)) / 2, 0px) + var(--sr-abstand))) 0;
    margin-block: 0 clamp(1.5rem, 4vw, 3rem);
    padding: 0;
}

.container-banner .mod-custom,
.container-banner .moduletable,
.container-banner .card {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Cassiopeia laesst fuer jede leere Modulposition Platz stehen.
   Das erzeugte eine tote Flaeche von ueber 200 Pixeln unter dem Kopf. */
.container-below-top:empty,
.container-top-a:empty,
.container-top-b:empty,
.container-bottom-a:empty,
.container-bottom-b:empty,
.container-search:empty,
.container-banner:empty,
.container-breadcrumbs:empty,
.container-sidebar-right:empty,
.grid-child:empty {
    display: none;
}

.container-below-top,
.container-top-a,
.container-top-b {
    padding-block: 0;
}

/* ==========================================================================
   Kopfbereich: Namenszug ueber der Lautenrosette
   ========================================================================== */

.container-header {
    background: var(--sr-grund);
    border-bottom: 1px solid var(--sr-linie);
}

.container-header .grid-child {
    max-width: none;
    padding: 0;
}

.sr-kopfbild {
    --sr-kopf-verlauf: linear-gradient(105deg,
        var(--sr-grund) 0%,
        rgba(253, 250, 244, .93) 30%,
        rgba(253, 250, 244, .55) 58%,
        rgba(253, 250, 244, .05) 100%);
    --sr-kopf-bild: url("../../../../../images/sr2026/kopf/rosette-1600.jpg");
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(160px, 24vw, 300px);
    background-color: var(--sr-grund-warm);
    background-size: cover, cover;
    background-position: center, center 45%;
    background-repeat: no-repeat;
    background-image: var(--sr-kopf-verlauf), var(--sr-kopf-bild);
}

/* Nur die Farben des Verlaufs, nicht das Bild */
@media (prefers-color-scheme: dark) {
    .sr-kopfbild {
        --sr-kopf-verlauf: linear-gradient(105deg,
            var(--sr-grund) 0%,
            rgba(33, 30, 20, .93) 30%,
            rgba(33, 30, 20, .6) 58%,
            rgba(33, 30, 20, .15) 100%);
    }
}

/* Nur das Bild, nicht die Farben - sonst faellt der Dunkelmodus
   auf Schirmen mit hoher Pixeldichte wieder auf Hell zurueck. */
@media (min-resolution: 1.5dppx) {
    .sr-kopfbild {
        --sr-kopf-bild: url("../../../../../images/sr2026/kopf/rosette-2400.jpg");
    }
}

/* Unten weich in die Seitenfarbe auslaufen, statt hart abzubrechen */
.sr-kopfbild::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: clamp(40px, 7vw, 90px);
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        var(--sr-grund) 100%);
    pointer-events: none;
}

.sr-namenszug {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--sr-breite);
    margin-inline: auto;
    padding: clamp(1.6rem, 4vw, 3.2rem) var(--sr-abstand);
}

.sr-namenszug .sr-rolle {
    display: block;
    font-family: var(--sr-sans);
    font-size: clamp(.72rem, 1.2vw, .85rem);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--sr-gold);
    margin-bottom: .35em;
}

.sr-namenszug .sr-name {
    display: block;
    font-family: var(--sr-serif);
    font-size: clamp(2.1rem, 6vw, 3.9rem);
    font-weight: 400;
    color: var(--sr-gold-dunkel);
    line-height: 1;
}

/* ==========================================================================
   Seitenmenue
   ========================================================================== */

.container-sidebar-left .card,
.container-sidebar-left .moduletable,
.container-sidebar-right .card {
    background: transparent;
    border: 0;
    padding: 0;
}

.container-sidebar-left .nav ul,
.container-sidebar-right .nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container-sidebar-left .nav > ul > li,
.container-sidebar-right .nav > ul > li {
    border-bottom: 1px solid var(--sr-linie);
}

.container-sidebar-left .nav > ul > li:last-child,
.container-sidebar-right .nav > ul > li:last-child {
    border-bottom: 0;
}

.container-sidebar-left .nav a,
.container-sidebar-right .nav a {
    display: block;
    padding: .7rem 0;
    font-family: var(--sr-serif);
    font-size: 1.1rem;
    color: var(--sr-text);
    border: 0;
    border-left: 2px solid transparent;
    padding-left: .85rem;
    transition: color .15s, border-color .15s, background-color .15s;
}

.container-sidebar-left .nav a:hover,
.container-sidebar-right .nav a:hover,
.container-sidebar-left .nav a:focus-visible {
    color: var(--sr-gold-dunkel);
    border-left-color: var(--sr-gold-hell);
    background: var(--sr-grund-warm);
}

.container-sidebar-left .nav .current > a,
.container-sidebar-right .nav .current > a {
    color: var(--sr-gold-dunkel);
    border-left-color: var(--sr-gold);
    background: var(--sr-grund-warm);
}

.container-sidebar-left .nav ul ul a {
    font-family: var(--sr-sans);
    font-size: .98rem;
    padding-left: 1.6rem;
    color: var(--sr-text-leise);
}

/* ==========================================================================
   Navigationsleiste oben: Namenszug klein + Hamburger + Sprachwahl
   ========================================================================== */

.container-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--sr-grund-warm) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sr-linie);
    padding-inline: max(var(--sr-abstand),
        calc((100% - var(--sr-breite)) / 2 + var(--sr-abstand)));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
}

.sr-topbar {
    display: flex;
    align-items: center;
    gap: .9rem;
}

/* Der kleine Namenszug erscheint erst, wenn der grosse weggescrollt ist */
.sr-topbar-name {
    font-family: var(--sr-serif);
    font-size: 1.12rem;
    color: var(--sr-gold-dunkel);
    white-space: nowrap;
}

@media (min-width: 62rem) {
    .sr-topbar-name { display: none; }
}

/* --- Hamburger --- */
.sr-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.6rem;
    height: 2.6rem;
    padding: .55rem;
    background: transparent;
    border: 1px solid var(--sr-linie);
    border-radius: 3px;
    cursor: pointer;
}

.sr-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--sr-gold-dunkel);
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
    transform-origin: center;
}

/* Im geoeffneten Zustand wird daraus ein Kreuz */
.sr-navi-offen .sr-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sr-navi-offen .sr-hamburger span:nth-child(2) { opacity: 0; }
.sr-navi-offen .sr-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sr-hamburger:hover { background: var(--sr-grund); }

@media (min-width: 62rem) {
    .sr-hamburger { display: none; }
}

/* --- Das Menue als aufklappbare Flaeche auf schmalen Schirmen --- */
@media (max-width: 61.999rem) {
    .container-sidebar-left {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows .28s ease;
        background: var(--sr-grund-warm);
        border-bottom: 1px solid var(--sr-linie);
        margin-inline: calc(var(--sr-abstand) * -1);
        padding-inline: var(--sr-abstand);
    }

    .container-sidebar-left > * {
        min-height: 0;
    }

    .sr-navi-offen .container-sidebar-left {
        grid-template-rows: 1fr;
        padding-block: .5rem;
    }

    /* Menuepunkte etwas groesser - Finger statt Mauszeiger */
    .container-sidebar-left .nav a {
        padding-block: .9rem;
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   Sprachumschalter
   ========================================================================== */

.mod-languages ul {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: .45rem 0;
}

.mod-languages img {
    width: 21px;
    height: auto;
    opacity: .6;
    transition: opacity .15s, transform .15s;
}

.mod-languages a:hover img,
.mod-languages .lang-active img {
    opacity: 1;
    transform: translateY(-1px);
}

/* ==========================================================================
   Inhalt
   ========================================================================== */

.container-component {
    padding-block: clamp(1.8rem, 4.5vw, 3.5rem);
}

/* Technische Angaben, falls sie doch einmal auftauchen */
.article-info,
.com-content-article__info,
.icons,
.article-can-edit {
    display: none;
}

/* Anriss der Neuerscheinung */
.aufnahme-kopf {
    font-family: var(--sr-sans);
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sr-gold);
    margin-bottom: .5rem;
}

.aufnahme-titel {
    font-family: var(--sr-serif);
    font-size: clamp(1.2rem, 2.3vw, 1.55rem);
    color: var(--sr-gold-dunkel);
    line-height: 1.3;
    margin-bottom: .25rem;
}

.aufnahme-interpret {
    color: var(--sr-text-leise);
    font-style: italic;
    margin-bottom: 1.3rem;
}

/* ==========================================================================
   Beitragslisten — Raster
   Der oberste Beitrag ueber die volle Breite, darunter zweispaltig.
   Joomla kennzeichnet die grossen Beitraege mit .blog-item.leading-N
   ========================================================================== */

/* Joomla setzt die Klasse auf den CONTAINER:
     .blog-items.items-leading  = die grossen Beitraege oben
     .blog-items.columns-2      = das Raster darunter                      */

.blog-items {
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    align-items: start;
    margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
    padding: 0;
    list-style: none;
}

.blog-items.items-leading {
    grid-template-columns: 1fr;
}

.blog-items.columns-2,
.blog-items.columns-3,
.blog-items.columns-4,
.blog-items[class*="masonry-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Joomla vergibt masonry-N, wenn "Mehrspaltige Reihenfolge" auf quer
       steht. Das ist echtes CSS-Multicolumn und zerreisst Karten ueber
       Spaltengrenzen - hier wird daraus dasselbe Raster. */
    columns: auto;
}

.blog-item {
    margin: 0;
    padding: clamp(1.1rem, 2.2vw, 1.75rem);
    background: var(--sr-flaeche);
    border: 1px solid var(--sr-linie);
    border-radius: 3px;
    box-shadow: var(--sr-schatten);
}

/* Der hervorgehobene Beitrag: Bild links, Text rechts.
   Aufbau laut Joomla:  .blog-item > figure.item-image + .item-content
   Das Bild ist GESCHWISTER des Textblocks, nicht darin enthalten. */
.items-leading > .blog-item {
    display: grid;
    grid-template-columns: minmax(180px, 290px) minmax(0, 1fr);
    gap: clamp(1.4rem, 3.5vw, 2.8rem);
    align-items: start;
    background: linear-gradient(135deg, var(--sr-grund-warm), var(--sr-flaeche) 65%);
    border-color: var(--sr-gold-blass);
    padding: clamp(1.4rem, 3vw, 2.5rem);
}

.items-leading > .blog-item > .item-image,
.items-leading > .blog-item > figure {
    grid-column: 1;
    margin: 0;
    float: none;
}

.items-leading > .blog-item > .item-content {
    grid-column: 2;
}

/* Ohne Titelbild keine leere Bildspalte stehen lassen */
.items-leading > .blog-item:not(:has(> .item-image)):not(:has(> figure)) {
    grid-template-columns: 1fr;
}

.items-leading > .blog-item:not(:has(> .item-image)):not(:has(> figure)) > .item-content {
    grid-column: 1;
}

/* --- Bilder auf Textseiten: klein, im Fliesstext, links umflossen --- */
.blog-item > .item-image,
.blog-item > figure.item-image,
.com-content-article .item-image,
.com-content-article figure {
    float: left;
    max-width: min(300px, 42%);
    margin: .3rem 1.6rem .9rem 0;
    shape-margin: 1rem;
}

.blog-item::after,
.com-content-article::after,
.item-content::after {
    content: "";
    display: block;
    clear: both;
}

/* --- Im Kartenraster steht das Bild oben und fuellt die Karte --- */
.columns-2 > .blog-item > .item-image,
.columns-3 > .blog-item > .item-image,
.columns-4 > .blog-item > .item-image {
    float: none;
    max-width: none;
    margin: 0 0 1rem;
}

/* --- Im hervorgehobenen Beitrag ist das Bild eine Rasterspalte --- */
.items-leading > .blog-item > .item-image,
.items-leading > .blog-item > figure {
    float: none;
    max-width: none;
    margin: 0;
}

/* Im Raster darunter steht das Bild ueber dem Text */
.columns-2 > .blog-item > .item-image img,
.columns-3 > .blog-item > .item-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.blog-item img {
    display: block;
    width: 100%;
    border-radius: 2px;
}

.blog-item .page-header {
    margin: 0 0 .6rem;
}

.blog-item .page-header h2 {
    margin: 0;
    font-size: clamp(1.1rem, 1.9vw, 1.28rem);
}

.items-leading > .blog-item .page-header h2 {
    font-size: clamp(1.35rem, 2.7vw, 1.8rem);
}

.blog-item p {
    max-width: none;
}

.readmore .btn,
.readmore a {
    display: inline-block;
    margin-top: .6rem;
    padding: .42rem 1rem;
    font-family: var(--sr-sans);
    font-size: .92rem;
    color: var(--sr-gold-dunkel);
    background: transparent;
    border: 1px solid var(--sr-gold-hell);
    border-radius: 2px;
}

.readmore .btn:hover,
.readmore a:hover {
    color: var(--sr-flaeche);
    background: var(--sr-gold);
    border-color: var(--sr-gold);
}

/* ==========================================================================
   Aufklappen statt Unterseite  (Rezensionen)

   Ohne JavaScript ist der Block OFFEN - der Text ist dann lesbar und fuer
   Suchmaschinen sichtbar. Erst navi.js setzt .sr-klapp-bereit, schliesst
   den Block und schaltet die Animation ein.
   Animiert wird grid-template-rows von 0fr auf 1fr; das braucht kein
   Messen der Hoehe. overflow: hidden am Innencontainer ist Pflicht, sonst
   schrumpft ein Rasterkind nicht unter seine Inhaltsgroesse.
   ========================================================================== */

.sr-klapp {
    margin-top: .9rem;
}

.sr-klapp-knopf {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .42rem 1rem;
    font-family: var(--sr-sans);
    font-size: .92rem;
    line-height: 1.4;
    color: var(--sr-gold-dunkel);
    background: transparent;
    border: 1px solid var(--sr-gold-hell);
    border-radius: 2px;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.sr-klapp-knopf:hover {
    color: var(--sr-flaeche);
    background: var(--sr-gold);
    border-color: var(--sr-gold);
}

/* Pfeil aus zwei Rahmenkanten - dreht sich beim Aufklappen */
.sr-klapp-pfeil {
    width: .44rem;
    height: .44rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-.1em);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.sr-klapp-knopf[aria-expanded="true"] .sr-klapp-pfeil {
    transform: rotate(-135deg) translateY(.05em);
}

/* Je Zustand die passende Beschriftung */
.sr-klapp-knopf[aria-expanded="false"] .sr-klapp-zu,
.sr-klapp-knopf[aria-expanded="true"] .sr-klapp-auf {
    display: none;
}

.sr-klapp-inhalt {
    display: grid;
    grid-template-rows: 1fr;
}

.sr-klapp-innen {
    overflow: hidden;
}

.sr-klapp-bereit .sr-klapp-inhalt {
    transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}

.sr-klapp-bereit .sr-klapp-innen {
    transition: opacity .3s ease .08s;
}

.sr-klapp-aktiv .sr-klapp-knopf[aria-expanded="false"] + .sr-klapp-inhalt {
    grid-template-rows: 0fr;
}

.sr-klapp-aktiv .sr-klapp-knopf[aria-expanded="false"] + .sr-klapp-inhalt .sr-klapp-innen {
    opacity: 0;
}

.sr-klapp-innen > *:first-child {
    margin-top: .95rem;
}

.sr-klapp-innen > *:last-child {
    margin-bottom: 0;
}

/* Rezensionen haben kein Bild - der Titel darf etwas ruhiger stehen */
.sr-klapp-innen p {
    margin-block: 0 .8em;
}

/* Die importierten Rezensionstexte tragen teils eigene Ueberschriften.
   Unformatiert waren die groesser als der Kartentitel selbst. */
.blog-item .item-content h2:not(.item-title):not(.page-header h2),
.blog-item .item-content h3,
.blog-item .item-content h4,
.sr-klapp-innen h2,
.sr-klapp-innen h3,
.sr-klapp-innen h4 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin-block: 1.1em .35em;
    color: var(--sr-gold-dunkel);
}

@media (prefers-reduced-motion: reduce) {
    .sr-klapp-bereit .sr-klapp-inhalt,
    .sr-klapp-bereit .sr-klapp-innen,
    .sr-klapp-pfeil {
        transition: none;
    }
}

@media (max-width: 48rem) {
    .blog-items.columns-2,
    .blog-items.columns-3,
    .blog-items.columns-4,
    .blog-items[class*="masonry-"] {
        grid-template-columns: 1fr;
    }

    /* Auf schmalen Schirmen kein Textumfluss - das Bild steht ueber dem Text */
    .blog-item > .item-image,
    .blog-item > figure.item-image,
    .com-content-article .item-image,
    .com-content-article figure {
        float: none;
        max-width: 100%;
        margin: 0 0 1rem;
    }

    .items-leading > .blog-item {
        grid-template-columns: 1fr;
    }

    .items-leading > .blog-item > .item-image,
    .items-leading > .blog-item > figure {
        grid-column: 1;
        max-width: 320px;
    }

    .items-leading > .blog-item > .item-content {
        grid-column: 1;
    }
}

/* ==========================================================================
   Fussbereich
   ========================================================================== */

.container-footer {
    background: var(--sr-grund-warm);
    border-top: 1px solid var(--sr-linie);
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

.container-footer .grid-child {
    max-width: var(--sr-breite);
    margin-inline: auto;
    padding: 2rem var(--sr-abstand);
}

.container-footer,
.container-footer a {
    color: var(--sr-text-leise);
    font-size: .92rem;
}

.back-to-top-link {
    border: 0;
}

/* ==========================================================================
   Bewegung — dezent, nie aufdringlich
   ========================================================================== */

/* Karten heben sich beim Zeigen leicht an */
.blog-item {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.columns-2 > .blog-item:hover,
.columns-3 > .blog-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(46, 43, 22, .09), 0 12px 28px rgba(46, 43, 22, .08);
    border-color: var(--sr-gold-blass);
}

/* Bilder in Karten ziehen beim Zeigen sanft an */
.blog-item .item-image {
    overflow: hidden;
    border-radius: 2px;
}

.blog-item .item-image img {
    transition: transform .4s ease;
}

.columns-2 > .blog-item:hover .item-image img,
.columns-3 > .blog-item:hover .item-image img {
    transform: scale(1.03);
}

/* Der Pfeil im Weiterlesen-Knopf wandert nach rechts */
.readmore .btn .icon-chevron-right,
.readmore a::after {
    transition: transform .18s ease;
}

.readmore .btn:hover .icon-chevron-right {
    transform: translateX(3px);
}

/* Menuepunkte: Marke links waechst ein */
.container-sidebar-left .nav > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--sr-gold);
    transition: width .2s ease;
}

.container-sidebar-left .nav > ul > li > a {
    position: relative;
}

.container-sidebar-left .nav > ul > li > a:hover::before {
    width: .5rem;
}

/* Inhalt blendet beim Seitenwechsel leise ein */
@keyframes sr-einblenden {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.container-component {
    animation: sr-einblenden .35s ease-out both;
}

/* ==========================================================================
   Ruecksicht auf Nutzereinstellungen
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .columns-2 > .blog-item:hover,
    .columns-3 > .blog-item:hover {
        transform: none;
    }
}

/* ==========================================================================
   Karte - wird erst auf Anforderung geladen
   ========================================================================== */

.sr-karte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    max-width: 100%;
    margin-block: 1.5rem;
    padding: clamp(1rem, 3vw, 1.75rem);
    background: var(--sr-flaeche);
    border: 1px solid var(--sr-linie);
    border-radius: 2px;
}

.sr-karte-hinweis {
    margin: 0;
    font-family: var(--sr-sans);
    font-size: .92rem;
    color: var(--sr-text-leise);
}

.sr-karte-knopf {
    display: inline-flex;
    align-items: center;
    padding: .42rem 1rem;
    font-family: var(--sr-sans);
    font-size: .92rem;
    color: var(--sr-gold-dunkel);
    background: transparent;
    border: 1px solid var(--sr-gold-hell);
    border-radius: 2px;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.sr-karte-knopf:hover,
.sr-karte-knopf:focus-visible {
    color: var(--sr-flaeche);
    background: var(--sr-gold);
    border-color: var(--sr-gold);
}

.sr-karte.sr-karte-geladen {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.sr-karte-rahmen {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    border: 0;
}

/* Sicherheitsnetz fuer eingebettete Inhalte in Beitraegen */
.com-content-article iframe,
.blog-item iframe {
    max-width: 100%;
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */

/* Joomla legt einen Behaelter fuer Anschrift und Telefon an, auch wenn dort
   nichts angezeigt wird - das hinterliess eine Luecke unter der Ueberschrift. */
.com-contact__container:empty,
.com-contact__container:not(:has(dt, dd, p, span, a)) {
    display: none;
}

.sr-formular {
    max-width: 46rem;
}

.sr-formular-einleitung {
    margin-block: 0 1.6rem;
    font-family: var(--sr-sans);
    color: var(--sr-text-leise);
}

.sr-formular-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.4rem;
}

@media (max-width: 40rem) {
    .sr-formular-reihe {
        grid-template-columns: 1fr;
    }
}

.sr-formular .control-group {
    margin-bottom: 1.15rem;
}

.sr-formular .control-label label,
.sr-formular label {
    display: inline-block;
    margin-bottom: .3rem;
    font-family: var(--sr-sans);
    font-size: .88rem;
    letter-spacing: .04em;
    color: var(--sr-text-leise);
}

.sr-formular input[type="text"],
.sr-formular input[type="email"],
.sr-formular textarea {
    width: 100%;
    padding: .7rem .9rem;
    font-family: var(--sr-sans);
    font-size: 1rem;
    color: var(--sr-text);
    background: var(--sr-flaeche);
    border: 1px solid var(--sr-linie);
    border-radius: 2px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sr-formular textarea {
    min-height: 11rem;
    resize: vertical;
}

.sr-formular input:focus-visible,
.sr-formular textarea:focus-visible {
    outline: none;
    border-color: var(--sr-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-gold) 22%, transparent);
}

.sr-formular .form-check,
.sr-formular .controls > input[type="checkbox"] {
    accent-color: var(--sr-gold);
}

/* Das Koederfeld darf fuer Menschen weder sichtbar noch erreichbar sein -
   display:none wuerde von Maschinen erkannt, deshalb aus dem Bild geschoben. */
.sr-koeder {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sr-formular-fuss {
    margin-top: 1.6rem;
}

.sr-formular-knopf {
    display: inline-flex;
    align-items: center;
    padding: .65rem 1.7rem;
    font-family: var(--sr-sans);
    font-size: 1rem;
    color: var(--sr-flaeche);
    background: var(--sr-gold);
    border: 1px solid var(--sr-gold);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.sr-formular-knopf:hover,
.sr-formular-knopf:focus-visible {
    background: var(--sr-gold-dunkel);
    border-color: var(--sr-gold-dunkel);
}


/* ==========================================================================
   Bildraster (Monterone)
   ========================================================================== */

.sr-galerie {
    display: grid;
    /* Die Kursseite hat eine schmale Inhaltsspalte - mit 15rem fiele das
       Raster dort auf eine Spalte zurueck und die Bilder staenden untereinander. */
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .8rem;
    margin-block: 2rem;
}

.sr-galerie-bild {
    margin: 0;
    overflow: hidden;
    border-radius: 2px;
    background: var(--sr-grund-warm);
}

.sr-galerie-bild img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease;
}

.sr-galerie-bild:hover img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .sr-galerie-bild img,
    .sr-galerie-bild:hover img {
        transition: none;
        transform: none;
    }
}

/* --- Cover der aelteren Aufnahmen (06.10.2026) ---
   Die Vorlagen von der alten Website sind nur 200 x 200 Pixel gross.
   Das Raster der Beitragsliste wuerde sie auf bis zu 290 Pixel strecken,
   dabei werden sie sichtbar unscharf. Deshalb hier auf die native Groesse
   gedeckelt. Sobald bessere Vorlagen vorliegen, kann diese Regel weg. */
.item-image img[src*="/images/cd/cdacc"],
.item-image img[src*="/images/cd/cdcant"],
.item-image img[src*="/images/cd/cdciel"],
figure img[src*="/images/cd/cdacc"],
figure img[src*="/images/cd/cdcant"],
figure img[src*="/images/cd/cdciel"] {
    max-width: 200px;
    width: 100%;
    height: auto;
    image-rendering: auto;
}

/* --- Alle Beitraege der Liste gleich aufbauen (06.10.2026) ---
   Bisher bekam nur der hervorgehobene Beitrag das Zweispalten-Raster,
   alle weiteren verliessen sich auf Textumfluss - dadurch stand bei ihnen
   das Bild UEBER dem Text, beim ersten daneben. Das sah uneinheitlich aus.
   Jetzt gilt fuer jeden Beitrag mit Titelbild dasselbe: Bild links,
   Text rechts. */
.blog-items > .blog-item:has(> .item-image),
.blog-items > .blog-item:has(> figure) {
    display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: start;
}

.blog-items > .blog-item > .item-image,
.blog-items > .blog-item > figure.item-image,
.blog-items > .blog-item > figure {
    grid-column: 1;
    float: none;
    margin: 0;
    max-width: 100%;
}

.blog-items > .blog-item > .item-content {
    grid-column: 2;
}

/* Der hervorgehobene Beitrag bleibt etwas grosszuegiger */
.items-leading > .blog-item:has(> .item-image),
.items-leading > .blog-item:has(> figure) {
    grid-template-columns: minmax(180px, 290px) minmax(0, 1fr);
}

@media (max-width: 48rem) {
    .blog-items > .blog-item:has(> .item-image),
    .blog-items > .blog-item:has(> figure) {
        grid-template-columns: 1fr;
    }
    .blog-items > .blog-item > .item-image,
    .blog-items > .blog-item > figure,
    .blog-items > .blog-item > .item-content {
        grid-column: 1;
    }
}