/* Hintergruende, Abhaengigkeiten und Herleitungen: docs/CSS_homepage.md */

/* Futura PT Book
        font-family: "futura-pt", sans-serif;
        font-weight: 400;
        font-style: normal;

    Futura PT Book Oblique
        font-family: "futura-pt", sans-serif;
        font-weight: 400;
        font-style: italic;

    Futura PT Heavy
        font-family: "futura-pt", sans-serif;
        font-weight: 700;
        font-style: normal;


Root-Fontsize in body/html:     font-size:16px; 
Container-Font-Size:            font-size: clamp(0.9rem, 1cqw, 1.6rem);
Element-Font-Size p:            1.0em
*/

/*Redaktionssystem*/
#Bereich2 {height:100%!important;}                      /* Für Startseite der Header */
#Bereich2 .block  {height:100%!important; margin:0;}    /* Für Startseite der Header */
.Bereich {border:0px solid #f00;min-height:100px; z-index:1;}
/*Redaktionssystem*/

.clearfix {clear:both!important;}


html {
    hyphens: auto;
    -webkit-hyphens: auto; /* Safari */
    -ms-hyphens: auto;     /* alte IE */
    overflow-wrap: break-word; /* falls nötig zusätzlich */
    word-wrap: break-word;     /* legacy Fallback */
    hyphenate-limit-chars: 6 3 3; /* experimentell */
    /*Alternativ: 
    http://github.com/mnater/Hyphenopoly
    hyphenate-limit-chars: 5 3 2;
    */
    /*Ligaturen entfernen*/
    font-feature-settings: "liga" 0, "clig" 0;
    -webkit-font-feature-settings: "liga" 0, "clig" 0;
    -moz-font-feature-settings: "liga" 0, "clig" 0;
}

    body {
        margin-top: 0;
        transition: margin-top 0.6s ease-out; /*für den Meldungsbutton oben*/
    }
     a {color:#303030; text-decoration:underline;}
     a:hover {color:#A81D25;}
    /* Tastaturfokus site-weit schwarz statt Browser-Blau. Weisse und rote Varianten ueberschreiben spaeter. */
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
    [tabindex]:focus-visible { outline:2px solid #303030; outline-offset:3px; }
    /* Sticky-Logo ist ein Link; umschliesst das Bild als Block, damit dessen Breite und Position gelten. */
    #header_sticky #logo_sticky a { display:block; }

    body.meldung-offen { margin-top: 10cqw; }
    body.meldung-kompakt {margin-top: 0; }
    #meldungsbalken {
        line-height:170%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        overflow: hidden;
        background-color: #303030;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: clamp(18px, 2cqw ,26px);
        z-index: 9999;
        padding: 0 20px;
        box-sizing: border-box;
        transition: height 0.6s ease-out;
    }
    #meldungsbalken #meldungsbalkenText {padding: 6cqw  10cqw 6cqw 10cqw;}
    /* Link im Balken: unterstrichen (nicht nur am Pfeil-Icon erkennbar) + sichtbarer Tastaturfokus */
    #meldungsbalken a {color:#fff; text-decoration:underline; text-underline-offset:0.15em; text-decoration-thickness:1px;}
    #meldungsbalken a:hover {text-decoration-thickness:2px;}
    #meldungsbalken a:focus-visible,
    #meldungsbalkenSchliessen:focus-visible { outline:2px solid #fff; outline-offset:3px; }
   #meldungsbalken a::before {
    content: "";
    display: inline-block;
  width: 2.0cqw;
  height: 2.0cqw;
margin-top: -0.3cqw;
  margin-right: 0.35cqw;
  margin-left: -2px;
    background-color: currentColor;
    mask-image: url(../icons/arrow-right.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url(../icons/arrow-right.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    vertical-align: middle;
}
    #meldungsbalken.offen { height: 10cqw; }
    #meldungsbalken.kompakt { height: 0; }
  /* Schliessen-Button: UA-Optik weg, Zielgroesse 24px. Icon im ::before - sonst invertiert dessen Filter den Fokusrahmen mit. */
  #meldungsbalkenSchliessen {
    position: absolute;
    right: 2.1cqw;
    top: 50%;
    transform: translateY(-50%);
    width: 4cqw;
    height: 4cqw;
    min-width: 24px;
    min-height: 24px;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
#meldungsbalkenSchliessen::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: url('../icons/close.svg'); filter:invert(1) brightness(2.5) contrast(2.5);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 4cqw 4cqw;
}
#meldungsbalkenSchliessen:hover,
#meldungsbalkenSchliessen:focus-visible {
    opacity: 1;
}



/* Alle Blöcke bzw. Container haben eine border unten, außer Zeitstrahl! */
.block.standard,
.block.verteiler_2spaltig,
.block.verteiler_3spaltig {border-bottom: 1px solid #303030!important;}

.add_border_bottom {border-bottom: 1px solid #303030!important;}
.addLinieOben {border-top:1px solid #303030!important;}

body,html {margin:0; padding:0;font-family: "futura-pt", sans-serif;font-weight: 400;font-style: normal; color:#303030; font-size:16px; /*Root-Fontsize*/}
h1,h2,h3,h4,h5,p {margin:0;padding:0;}
h2 { font-size: clamp(26px, 3cqw ,38px);  font-weight: normal;  margin-bottom: 0.7cqw;}
.abs_text  h2 { margin-bottom: 2.2cqw;}

.abs_mitButtoninclude {padding-top:2cqw; padding-bottom: 2.5cqw!important;}
 /* abs_mitButtoninclude  linieoben linieunten  */


em {font-style:italic; }

a[href^="https"] {
    color: #000;
    text-decoration: none;
}

/* Link-Pfeile extern (diagonal) + intern (gerade), Groesse (18.09.2026): ab ca. 1300px Containerbreite 1.8cqw wie
   bisher. Darunter schrumpft der Pfeil flacher weiter bis 21px am Handy (375px) - die Schrift bleibt dort bei 18px
   stehen. Vorher lief 1.8cqw ungebremst weiter (6.5px am Handy). Handygroesse nachstellen: nur die 20px aendern.
   Die Abstaende haengen an der Icon-Groesse, im Verhaeltnis wie vorher (0.6/1.8 = 1/3, 0.4/1.8 = 0.222,
   0.35/1.8 = 0.194) - wo 1.8cqw gilt, also unveraendert. */
a[href^="https"], a.extlink, a.intlink { --link-icon: max(1.8cqw, calc(20px + 0.27cqw)); }

a[href^="https"]::before,
a.extlink::before {
    content: "";
    display: inline-block;

  width: var(--link-icon);
  height: var(--link-icon);
margin-top: calc(var(--link-icon) / -3);
  margin-right: calc(var(--link-icon) * 0.194);
  margin-left: -2px;

    background-color: currentColor;
    mask-image: url(../icons/arrow-right-top.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url(../icons/arrow-right-top.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    vertical-align: middle;
}
a[href^="https"]:hover,
a.extlink:hover {
    color: #A81D25!important;
}

/* Interner Link mit Pfeil (gerade statt diagonal) */
a.intlink {
    color: #303030;
    text-decoration: none;
}
a.intlink::before {
    content: "";
    display: inline-block;

  width: var(--link-icon);
  height: var(--link-icon);
margin-top: calc(var(--link-icon) * -0.222);
  margin-right: calc(var(--link-icon) * 0.194);
  margin-left: 0;

    background-color: currentColor;
    mask-image: url(../icons/arrow-right.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url(../icons/arrow-right.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    vertical-align: middle;
}
a.intlink:hover {
    color: #A81D25!important;
}




/*em::before { content: "«"; }
em::after { content: "»"; }
*/
em {/*font-style: oblique 11deg;*/ font-style:italic;}
/* Fließtext: p und klassenlose Editor-Listen in einer Regel, damit die Größen nicht auseinanderlaufen. */
p,
.abs ul:not([class]), .abs ol:not([class]) {font-size: clamp(18px, 2cqw ,26px);font-weight:400;line-height:130%; margin-bottom:2cqw;}

/* Groesse aller Bedienelemente - Buttons, Dropdowns, Eingabefelder, Kopfzeile.
   Schrift = Fliesstext, Hoehe = 2.2 x Schrift, dazu die senkrechten Innenabstaende fuer die
   Buttons, die ihre Hoehe aus 1.4em + Padding + Rand bilden (Summe ergibt --ui-hoehe).
   Die clamp deckelt sich bei 26px selbst, deshalb steht dazu nichts im 1440er-Block.
   Icons haengen bewusst nicht daran. Herleitung: docs/CSS_homepage.md, Abschnitt 2. */
:root {
    --ui-schrift: clamp(18px, 2cqw, 26px);
    --ui-hoehe:   calc(var(--ui-schrift) * 2.2);
    --ui-pad-o:   calc((var(--ui-hoehe) - 1.4 * var(--ui-schrift) - 2px) * 0.6);
    --ui-pad-u:   calc((var(--ui-hoehe) - 1.4 * var(--ui-schrift) - 2px) * 0.4);
}

/* Editor-Listen (TinyMCE): ul mit Geviertstrich, ol normal. Navigation und Sitemap liegen außerhalb
   von .abs, die Fehlerliste der Kasse wird weiter unten zurückgesetzt. */
.abs ul:not([class]), .abs ol:not([class]) {margin-top:0; padding:0;}
.abs ul:not([class]) {list-style:none;}
.abs ul:not([class]) > li {position:relative; padding-left:1.4em; margin-bottom:0.35em;}
.abs ul:not([class]) > li::before {content:"\2014"; position:absolute; left:0; top:0;}
.abs ol:not([class]) {list-style:decimal; padding-left:1.4em;}
.abs ol:not([class]) > li {padding-left:0.3em; margin-bottom:0.35em;}
.abs ul:not([class]) ul, .abs ul:not([class]) ol,
.abs ol:not([class]) ul, .abs ol:not([class]) ol {margin:0.35em 0 0 0;}   /* verschachtelte Listen */
/* Kasse (Fehlerliste .kfehler ul) behält ihre eigene Optik */
.abs .kasse ul:not([class]) {list-style:disc;}
.abs .kasse ul:not([class]) > li {position:static; padding-left:0;}
.abs .kasse ul:not([class]) > li::before {content:none;}
.istKlappInhalt {opacity:0.5;}
.istKlappInhalt.klapp-offen {opacity:1;}   /* nach dem Ausklappen volle Deckkraft */
.istKlappStart {opacity:1;}
.mitOptKlapp   .istKlappInhaltOpt {opacity:1;}

#header {z-index:999; position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 900px;height: auto;overflow: hidden; }
#header.pur { position: relative; width: 100%;  aspect-ratio: inherit; height:0px; background-color:transparent; overflow: inherit;    }
#footer_rot { background-color:#A81D25; color:#fff;font-size:16px; margin-top:4cqw; }
/* width:100%, nicht 100vw - 100vw schliesst die Scrollleiste mit ein, der Header misst ohne sie.
   Das Overlay laege sonst um die Scrollleistenbreite versetzt. */
#mainmenue { position:fixed; top:0;left:0;z-index:999999999; width:100%; height:100vh; background-color:#A81D25;color:#fff; display:none;  }
#mainmenue #mainmenu_content .mzeile a.aktiv {    border-bottom: 0.3cqw solid #fff;}

#header_wrapper     {/*>>>>*/ container-type: inline-size; /*font-size: clamp(0.05rem, 1cqw, 1.2rem);*/ /*<<<< orientierungsgröße*/  }
#content_wrapper    {/*>>>>*/ container-type: inline-size; /*font-size: clamp(0.05rem, 1cqw, 1.2rem);*/ /*<<<< orientierungsgröße*/ position:relative; top:0;z-index:2;
                     max-width: 1920px;margin: 0 auto; }
#footer_inner     {/*>>>>*/ container-type: inline-size; /*font-size: clamp(0.05rem, 1cqw, 1.2rem);*/ /*<<<< orientierungsgröße*/   position:relative; top:0;z-index:2;max-width: 1920px;margin: 0 auto; min-height:100px; padding-top: 1cqw;}


#header .header_bg { height: 100%; width: 100%;  background-size: cover;background-position: top center;}
#header #header_pur { height: inherit; width: 100%; background-image: none; }

#header #header_wrapper #quicklinks { position:absolute; bottom:10cqw; left:60%;  }
#header #header_wrapper #quicklinks  {margin-bottom:0;margin-top:0; padding:0;line-height: 5.15cqw; font-size: clamp(30px,4cqw,4cqw );font-weight:700; }

#header #header_wrapper #quicklinks a {position:relative; display: inline-flex; background: #A81D25; color:#fff;  
                                       width:100%;box-decoration-break: clone; -webkit-box-decoration-break: clone;padding: 0.1em 0.2em; display: inline; text-decoration:none; z-index:1; }

#header #header_wrapper #quicklinks a:first-child  {z-index:3;}
#header #header_wrapper #quicklinks a:nth-of-type(2n)  { margin-left:1em;}

#header #header_wrapper #quicklinks a .pfeil {  width: 0;overflow: hidden;display: inline-block;vertical-align: top;margin-top:-0.1em;
                                                transition: width 0.2s cubic-bezier(.42,0,.58,1);}
#header #header_wrapper #quicklinks a:hover .pfeil { width: 1.2em; }
#header #header_wrapper #quicklinks a i { filter: invert(1) brightness(2.5) contrast(2.5);height: 1.2em;width: 1.2em;display: inline-block;}


#header #header_wrapper #header_top {display: flex;align-items: center;justify-content: space-between;padding: 1.8em 0vw;transition: background 0.3s, box-shadow 0.3s;}
/* Kopfzeile oben rechts: eine Geometrie fuer Hauptheader, Sticky-Header und Menue-Overlay.
   Wer hier etwas aendert, muss die Sticky-Regel darunter, "#mainmenue #header_top_right"
   und den 1440er-Block mitziehen. */
#header #header_wrapper #header_top_right {font-size: var(--ui-schrift);position:absolute;display: flex; align-items: center; gap: 2.0cqw; right:3.5cqw; top:2cqw; }
#header #header_wrapper #header_top_right .icon {font-size: clamp(24px, 2.5cqw, 2.5cqw);}

#header_sticky #header_sticky_wrapper #header_top {display: flex;align-items: center;justify-content: space-between;padding: 1.8em 0vw;transition: background 0.3s, box-shadow 0.3s;}
#header_sticky #header_sticky_wrapper #header_top_right {font-size: var(--ui-schrift);position:absolute;display: flex; align-items: center; gap: 2.0cqw; right:3.5cqw; top:2cqw; }
#header_sticky #header_sticky_wrapper #header_top_right .icon {font-size: clamp(24px, 2.5cqw, 2.5cqw);}
/* Kein Sonderwert fuer die Lupe - sie folgt der .icon-Regel wie Burger und Tasche. */

/* Warenkorb-Pille: Umriss-Rahmen + Tasche + Text + rote Anzahl (siehe Entwurf) */
#header_top_right .warenkorb { display: inline-flex; align-items: center;  }
/* Pille bei leerem Warenkorb ausblenden: per [hidden] vom JS (display:inline-flex wuerde es sonst
   ueberstimmen), fuer aeltere Exporte per :has() ueber den ausgeblendeten Zaehler. */
#header_top_right .warenkorb[hidden],
#header_top_right .warenkorb:has(.warenkorb-count[hidden]) { display: none !important; }
/* Hand-Cursor auf der ganzen Pille (auch ueber Tasche, Text und Zaehler) */
#header_top_right .warenkorb,
#header_top_right .warenkorb a,
#header_top_right .warenkorb a * { cursor: pointer !important; }
#header_top_right .warenkorb a {
    display: inline-flex; align-items: center; gap: 0.45em;
    border: 1px solid currentColor; border-radius: 999px;
    padding: 0 0.45em 0 0.8em;   /* senkrecht 0, die Hoehe kommt aus --ui-hoehe */
    text-decoration: none; line-height: 1;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
/* Hover: rote Pille, weisser Text/Tasche, Zaehler invertiert. color !important schlaegt das Inline-style am <a>. */
#header_top_right .warenkorb a:hover { background-color: #A81D25; border-color: #A81D25; color: #fff !important; }
#header_top_right .warenkorb a:hover .icon-shop::before { filter: invert(1) brightness(2.5) contrast(2.5); }
#header_top_right .warenkorb a:hover .warenkorb-count { background: #fff; color: #A81D25; }
/* Tastaturfokus: Pillenrand wird rot und dick (1px Border + 4px Innenschatten = 5px wie Buttons/Filter), kein Aussenrahmen, kein Layoutsprung */
#header_top_right .warenkorb a:focus-visible { outline: none; border-color: #A81D25; box-shadow: inset 0 0 0 4px #A81D25; }
/* Lupe, EN/DE, Burger und Schliessen-Kreuz: gemeinsame Fokus-Box gleicher Hoehe. Der Innenabstand
   macht Platz fuer den Ring, die negativen Aussenabstaende gleichen ihn wieder aus.
   #mainmenue muss beim Kreuz davorstehen, sonst gewinnt der spaetere UA-Reset (gleiche Spezifitaet)
   und das Kreuz rutscht gegenueber dem Burger nach links. */
#header_top_right > div:not(.warenkorb) > a,
#header_top_right .menueicon,
#mainmenue #header_top_right .menue-schliessen { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
        min-height: var(--ui-hoehe); min-width: var(--ui-hoehe); padding: 0 0.5em; margin: 0 -0.5em; text-decoration: none; }
/* Warenkorb-Pille auf die gemeinsame Bedienelement-Hoehe; vorher ergab sie sich aus der Tasche. */
#header_top_right .warenkorb a { height: var(--ui-hoehe); min-height: var(--ui-hoehe); box-sizing: border-box; }
/* abgerundeter roter Ring um diese Box (outline folgt border-radius) */
#header_top_right a:focus-visible,
#header_top_right .menueicon:focus-visible { outline: 3px solid #A81D25; outline-offset: 2px; border-radius: 999px; }
/* im geoeffneten Hauptmenue (roter Grund) derselbe Ring in Weiss */
#mainmenue #header_top_right a:focus-visible,
#mainmenue #header_top_right .menue-schliessen:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 999px; }


#header_top_right .warenkorb .icon-shop { width: 1.4em; height: 1.4em; font-size: inherit; }
.warenkorb-text { font-size: var(--ui-schrift); font-weight: 500; line-height: 1; }
.warenkorb-count {
    min-width: 2.0cqw; height: 2.0cqw; padding: 0 0.2cqw; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #A81D25; color: #fff;
    font-size: 0.7em; line-height: 1; font-weight: 700;
}
.warenkorb-count[hidden] { display: none; }
/* Warenkorb-Grafik direkt einbetten (unabhaengig von _icons.css / shop.svg auf dem Server) */
.warenkorb .icon-shop::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M32.3333 12V32H7.33325V12H32.3333ZM9.33325 30H30.3333V14H9.33325V30Z' fill='%23303030'/%3E%3Cpath d='M25.6663 11.667C25.6663 8.53749 23.1297 6.00018 20.0002 6C16.8706 6 14.3333 8.53738 14.3333 11.667C14.3331 12.2191 13.8854 12.667 13.3333 12.667C12.7811 12.667 12.3334 12.2191 12.3333 11.667C12.3333 7.43281 15.7661 4 20.0002 4C24.2343 4.00018 27.6663 7.43292 27.6663 11.667C27.6661 12.2191 27.2184 12.667 26.6663 12.667C26.1142 12.6668 25.6664 12.219 25.6663 11.667Z' fill='%23303030'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}


/*#header_top_right {position:absolute;display: flex; align-items: center; gap: 3.8em;font-size: clamp(14px, 1.4em, 1.4em); right:2cqw; top:2.5cqw; }
#header_top_right .icon {font-size: clamp(14px, 2.0em, 2.0em);}
*//*#header_top_right  .info { }*/



/* Sticky Variante */
/*#header.sticky  { position: fixed; top: 0px; left: 0; width: 100vw; height:10cqw; max-height:200px; min-height:100px;*//**/ /*padding:0 0 0 0;   
                  background: #fff;box-shadow: 0 4px 24px #0002;z-index: 30;
                  transition: background 0.3s, box-shadow 0.3s;}*/
/*#header_sticky_wrapper #header_top_right {  top:0; right:2cqw;  height:100%;  display: flex;align-items: center; }
#header_sticky_wrapper #quicklinks{ display:none!important;}
#header_sticky_wrapper .header_bg {background-image:none!important;}*/

/* Logo normal und sticky */
#logo {position: absolute;top: 2cqw;left: 4cqw;height: auto; width: 6cqw; height: auto; width: 6cqw;max-width:115px;min-width: 60px;}
#logo img { width: 100%;display: block;}

/* Logo sticky (kleiner, anderes Bild) */
#header.sticky #logo  { height:100%;   top:0;   display: flex;align-items: center; justify-content:left;   /* vertikal mittig */    }
#header.sticky #logo img {   height: 50%; left:0; width:auto;   content: url('../img/KMK_Bildmarke.png'); /* mini-Logo */}

#header_sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Hoehe folgt dem Logo (Rand + Logo + Rand) statt einem festen clamp, damit es an den Min-/Max-Breiten
       des Logos nicht unten heraussteht. min-height als Sicherheitsnetz ohne Logo im Markup. */
    height: auto;
    min-height: 60px;
    background: #fff;
    box-shadow: 0 4px 24px #0002;
    z-index: 9999;
    display: none; /* standardmäßig versteckt */
    transition: opacity 0.3s ease;
}
/* Sticky-Logo: gleiche Breite und Position wie #logo in der Seite, damit beide beim Umschalten
   uebereinander liegen. Alle Grafiken sind auf dieselbe Breite angelegt, die Bildmarke ist nur
   niedriger - deshalb ueber die Breite ausrichten und die Hoehe sich ergeben lassen. */
#header_sticky #logo_sticky {
    display: block;
    height: auto;
    padding: 2cqw 0 2cqw 4cqw;
}

#header_sticky #logo_sticky img {
    width: 6cqw;
    max-width: 115px;
    min-width: 60px;
    height: auto;
    max-height: none;
    display: block;
}
#mainmenue #mainmenue_wrapper { margin:2em; display:flex; flex-direction: column; height:90vh; border:0px solid yellow; }
/* --meldung-hoehe kommt aus js/reddank.js: der Header rutscht mit body{margin-top} nach unten,
   #mainmenue ist fixed und bleibt oben - ohne den Zuschlag saesse das Menue zu hoch. Fallback 0px. */
/* max-width wie beim Logo im Hauptheader - sonst wird es auf sehr breiten Fenstern doppelt so gross. */
#mainmenue #logo { position:absolute; top:calc(2cqw + var(--meldung-hoehe, 0px)); left:4cqw; height:auto; width:6cqw; max-width:115px; min-width: 60px;}
#mainmenue #logo img { filter:invert(1) brightness(2.5) contrast(2.5); width:100%; display:block; }
/* Kopfzeile im geoeffneten Menue: dieselbe Geometrie wie Haupt- und Sticky-Header, damit das
   Schliessen-Kreuz genau auf dem Burger liegt und die Leiste nicht springt. Icons skalieren wie
   dort ueber die Schriftgroesse; das <i> traegt nur die Weiss-Invertierung fuer den roten Grund. */
#mainmenue #header_top_right { position:absolute; display:flex; align-items:center; gap:2.0cqw; font-size:var(--ui-schrift); right:3.5cqw; top:calc(2cqw + var(--meldung-hoehe, 0px)); }
#mainmenue #header_top_right .icon { font-size:clamp(24px, 2.5cqw, 2.5cqw); }
#mainmenue #header_top_right i { filter:invert(1) brightness(2.5) contrast(2.5); }

/* Menue aus dem Sticky-Header geoeffnet (.aus-sticky setzt js/reddank.js). Der Sticky-Header ist
   selbst fixed und macht den Meldungsbalken-Versatz nicht mit - das Overlay darf ihn dann auch nicht
   rechnen. Die Variable hier auf 0 zu setzen wirkt in allen calc()-Regeln des Overlays auf einmal. */
#mainmenue.aus-sticky { --meldung-hoehe: 0px; }

#mainmenue #mainmenu_mitte { width:fit-content; }
#mainmenue #mainmenu_mobile { display:none; }

#mainmenue #mainmenu_content { font-size:clamp(60px, 3.8cqw, 90px); display:flex; justify-content:center; flex-direction:column; align-items:center; padding:0; font-weight:700; height:100vh; }
#mainmenue #mainmenu_content .mzeile { display:flex; gap:3cqw; width:100%; margin-bottom:1.2cqw; white-space:nowrap; }
#mainmenue #mainmenu_content .mzeile a { color:#fff; text-decoration:none; border-bottom:0.35cqw solid #A81D25; white-space:nowrap; }
#mainmenue #mainmenu_content .mzeile a:hover { border-bottom:0.35cqw solid #fff; }
#mainmenue #mainmenu_content .mzeile a.aktiv { border-bottom:0.35cqw solid #fff; }

/* zugeklappt zusaetzlich visibility:hidden (nach Ablauf der Zuklapp-Animation), sonst blieben die unsichtbaren Links per Tab erreichbar */
#mainmenue #mainmenu_content .msub { font-size:clamp(24px, 2.0cqw, 50px); text-align:left; white-space:nowrap; overflow:hidden; 
    max-height:0; display:flex; gap:3cqw; width:100%; margin-bottom:10px; 
    /*transition: max-height 0.25s ease-in;*/transition: max-height 0.2s ease-in, visibility 0s linear 0.5s; 
    visibility:hidden; border:none; }
#mainmenue #mainmenu_content .msub.open { max-height:300px; border:1px solid #A81D25;  
    transition: max-height 2s ease-out, visibility 0s; visibility:visible; /*transition: max-height 6.4s ease-out; langsamer auf */
        padding:6px 0; margin-bottom: 2.2cqw;} /* Platz fuer den Fokusrahmen der Links (2px + 2px Offset) - overflow:hidden schnitt ihn oben/unten ab */
#mainmenue #mainmenu_content .msub a:focus-visible { outline-offset:2px; }
/* Burger + Schliessen-Kreuz als <button>: UA-Styles neutralisieren (Farbe/Groesse wie zuvor das div/i), sichtbarer Tastaturfokus */
.menueicon, #mainmenue .menue-schliessen { background:none; border:0; padding:0; margin:0; color:inherit; font:inherit; line-height:inherit;
        cursor:pointer; display:inline-flex; align-items:center; -webkit-appearance:none; appearance:none; }
.menueicon:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
#mainmenue .menue-schliessen:focus-visible, #mainmenue a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#mainmenue #mainmenu_content .msub a { color:#fff; text-decoration:none; font-weight:400; border-bottom:0.1cqw solid #A81D25; white-space:nowrap; }
#mainmenue #mainmenu_content .msub a:hover { border-bottom:0.1cqw solid #fff; }

#mainmenu_footer {  display: flex;flex-direction: row;justify-content: space-between;align-items: center;
                    max-width: 1920px;width: 100%;margin: 0 auto;border-top: 1px solid #fff;padding: 1em 0;}
#mainmenu_footer .links {display: flex;flex-direction: row; gap: 2.2cqw; width: 50%;align-items: center;}
#mainmenu_footer .rechts {display: flex;flex-direction: row;justify-content: flex-end;width: 50%;align-items: center;text-align: right;}
#mainmenu_footer a {display: inline-flex;align-items: center;text-decoration: none;color: #fff; font-size: clamp(16px, 1.0cqw, 1.0cqw);}
#mainmenu_footer a:hover { }
#mainmenu_footer .pfeil {margin-right: 0.5em;display: inline-flex;filter: invert(1) brightness(2.5) contrast(2.5);}







.text-right {  text-align:right!important; }
.abstandunten {margin-bottom:3em;}



#footer_inner .abs50p {width:50%; float:left;}
#footer_inner .abs100p {width:100%; clear:both; }
#footer_inner h2 {margin-bottom:2cqw;  margin-top: 2cqw;color:#fff;font-size:clamp(13px,2cqw ,20px); font-weight:600!important;  letter-spacing: 3px; text-transform: uppercase;}
#footer_inner p {font-size:clamp(18px,2cqw ,26px); margin-bottom:1.4em;line-height:1.3em; }
#footer_inner h4 {font-size: clamp(22px, 2em, 2em); margin-bottom:1.4em;line-height:1.3em; }
#footer_inner hr {border:none; border-bottom:1px solid #fff; margin-bottom:1.0em;}
#footer_inner  a  {color: #fff;  text-decoration: none;}
#footer_inner a:hover {  text-decoration: underline; color: #fff !important;}
#footer_inner a[href^="tel"] {color: #303030; text-decoration: none;}
#footer_inner .infolinks  a { display:inline-block;margin-right:20px;    }

#footer_inner .zwischentitel {margin-top:1cqw;}
#footer_inner .abs_textbig p  {font-size: clamp(22px, 3.5cqw,42px); font-style:italic;line-height:120%;}
#footer_inner .block  {border-color:#fff!important;}
#footer_inner .text_rechts    {text-align:right;}
#footer_inner .links_horizontal a { margin-right:2cqw; line-height: 200%;}

/* Verteiler 3-spaltig im Footer, 21.09.2026: Die Redaktion hat den Kontakt-Block von 2 auf 3 Spalten
   umgestellt. Der 3-Spalter ist fuer .kasten-Kinder gebaut - sein .inner steht per width:calc(100% + 4cqw)
   und margin:0 -2cqw um genau das Kasten-Padding nach aussen ueber, und .verteiler_3spaltig schneidet den
   Ueberstand mit overflow:hidden wieder ab. Die Footer-Absaetze sind aber blanke .abs ohne Padding, also
   rutschte der Text um 2cqw nach links bzw. rechts aus dem Block heraus und wurde dort abgeschnitten
   ("Kontakt" und "Entdecken" fehlten die ersten bzw. letzten Zeichen). Dieselbe Kompensation wie bei
   .verteiler_1zu2 .inner .abs, damit die drei Spalten mit der Copyright-Zeile darunter im selben Raster
   stehen (bei 1555px Footerbreite: Textkanten 62,2 / 559,8 / 1057,4 bis 1492,8). --kasten-pad zieht mobil
   auf 3.6cqw mit. Nur links/rechts - oben/unten bestimmen weiter die h2-/p-Abstaende des Footers.
   Die Ausnahmen sind Absatzarten, die ihr Padding schon selbst mitbringen; sonst wuerde es sich verdoppeln.
   Das padding-bottom am .inner ersetzt das padding-bottom:2cqw, das .verteiler_2spaltig .inner im selben
   Footer-Slot auf allen anderen Seiten mitbringt - ohne diese Zeile stuende der Claim darunter auf der
   Startseite 36px statt 67px unter der letzten Zeile, also als einzige Seite zu eng. */
#footer_inner .verteiler_3spaltig > .inner { padding-bottom: var(--kasten-pad, 2cqw); }
#footer_inner .verteiler_3spaltig > .inner > .abs:not(.kasten):not(.abs_bild_gross):not(.abs_verteiler_zu_seite):not(.mitOptKlapp) {
    padding-left: var(--kasten-pad, 2cqw);
    padding-right: var(--kasten-pad, 2cqw);
}

/* Piktogramm vor den Footer-Links "Leichte Sprache" (Seite 7242) und "Gebaerdensprache" (Seite 7337), 21.09.2026.
   Erkannt wird der Link an der Seiten-ID am Ende des href - kein Eingriff in den Footer-Absatz der Redaktion,
   kein Neuexport der Seiten. Bewusst auf #footer_inner begrenzt: Links auf dieselben Seiten im Inhalt oder im
   Hauptmenue bleiben ohne Icon. Als Maske statt background-image, damit das Icon die Linkfarbe (weiss) traegt.
   Zieht eine der Seiten auf eine neue ID um, hier die Nummer anpassen. */
#footer_inner a[href$="s=7242"]::before,
#footer_inner a[href$="s=7337"]::before,
#footer_inner a[href$="s=1065"]::before,
#footer_inner a[href*="facebook"]::before,
#footer_inner a[href*="instagram"]::before,
#footer_inner a[href*="youtube"]::before { content:""; display:inline-block; width:1.35em; height:1.35em; margin-right:0.35em; vertical-align:-0.32em; background-color:currentColor;
                                         -webkit-mask:url(../icons/leichte_sprache.svg) center / contain no-repeat; mask:url(../icons/leichte_sprache.svg) center / contain no-repeat; }
#footer_inner a[href$="s=7337"]::before { -webkit-mask-image:url(../icons/gebaerdensprache.svg); mask-image:url(../icons/gebaerdensprache.svg); }
#footer_inner a[href$="s=1065"]::before { -webkit-mask-image:url(../icons/barrierefreiheit_outline.svg); mask-image:url(../icons/barrierefreiheit_outline.svg); }
#footer_inner a[href*="facebook"]::before { -webkit-mask-image:url(../icons/social_facebook_filled.svg); mask-image:url(../icons/social_facebook_filled.svg); }
#footer_inner a[href*="instagram"]::before { -webkit-mask-image:url(../icons/social_instagram_filled.svg); mask-image:url(../icons/social_instagram_filled.svg); }
#footer_inner a[href*="youtube"]::before { -webkit-mask-image:url(../icons/social_youtube_filled.svg); mask-image:url(../icons/social_youtube_filled.svg); }

/*--------------------------------------------
    Absätze und Module
--------------------------------------------*/
.spalte {padding:0; display: flex;flex-direction: column;box-sizing: border-box;}
.unten { /* optional, für padding oder hg */ }
.block {margin:0 4%; /*overflow-x:hidden;*/ min-height:20px;}
.block.zeitstrahl  {min-height:200px;}
/* Block-CSS: Spalte nutzt die volle Breite, wird aber bei 1000px gedeckelt (z.B. Seite "Suche") */
.block.breite100max70 > .inner,
.block.breite100max70 > .spalte {width:100%; max-width:1000px; box-sizing:border-box;}
.rot {color:#A81D25;}
.zentriert {text-align:center;}
hr {border:none; height:1px; border-bottom:1px solid #333; margin: 27px 0 31px 0;}
.abs_text {margin-top: 2cqw; max-width: 1700px;}
.abs_text.header_ausst .buttons {margin:3cqw 0 3cqw 0;}
/*------------------------------------ h1-Modul -------------------*/
.abs.abs_h1 { margin-top:10cqw; font-size:clamp(14px, 2cqw, 76px);  /*border-bottom:1px solid #303030;*/}
.abs.abs_h1 h1 {line-height:100%;margin-bottom:2cqw; margin-left:10cqw; }

/* h2 Modul*/
.abs.abs_h2  {  margin-bottom: 1cqw;}
.abs.abs_h2  h2 { font-size: clamp(20px, 2.0cqw ,38px); font-weight: 400;line-height: 120%; }

/* h3 Modul*/
.abs.abs_h3  {  margin-bottom: 1cqw;}
.abs.abs_h3  h3 { font-size: clamp(16px, 2.0cqw ,2.0em); font-weight: 700;line-height: 120%; }
/* ------------------------------------------------------------------------------------  Zwischentitel */
.abs.abs_teaser p,
.abs.abs_teaser ul:not([class]), .abs.abs_teaser ol:not([class]) { font-size: clamp(22px, 2.5cqw ,38px);font-weight:400;line-height:120%;margin-bottom:3cqw;margin-top:2cqw;}
/* ------------------------------------------------------------------------------------  Zwischentitel */
/* --zwischentitel-schrift ist die Groesse der Ueberschrift. Link und Abstand darunter rechnen damit und bleiben so bei jeder
   Breite im Verhaeltnis - vorher blieb der Link fest bei 1.3em und der Abstand schrumpfte mit 1cqw bis auf 3px.
   flow-root: der Absatz behaelt den Abstand unter der Ueberschrift und den rechts gefloateten Link in sich - wie es der Rand
   beim Standard-Zwischentitel schon immer tat. Ohne Rand (removeLinieUnten, z.B. Startseite ueber dem Kalender) fiel der
   Abstand aus Absatz und .inner heraus, und .block {min-height:20px} verschluckte ihn, sobald die Ueberschrift unter 20px
   hoch war (unter ca. 1360px): die Kalender-Linie klebte an der Ueberschrift, der Link ragte darueber. */
.abs.abs_zwischentitel {margin-bottom:0;  margin-top: 5cqw; border-bottom:1px solid #303030!important;padding-bottom:0cqw;
                        --zwischentitel-schrift:clamp(14px, 1.2cqw ,2.0cqw); display:flow-root;}
/* margin-bottom 0.8333em = 1cqw, solange die Ueberschrift mit 1.2cqw waechst; unter ihrem 14px-Boden schrumpft der Abstand nicht weiter. */
.abs.abs_zwischentitel h2 {font-size: clamp(12px, 1.0em ,1.0em);font-size:var(--zwischentitel-schrift); margin-bottom:0.8333em; 
                           letter-spacing: 0.15em; text-transform: uppercase;font-weight:600!important; }
/* Link = 1,2 x Ueberschrift (ihr Verhaeltnis bei 1440px), auch mobil; ab ca. 1440px bleibt er wie bisher bei 1.3em stehen. */
.abs.abs_zwischentitel .link { font-size: min(1.2 * var(--zwischentitel-schrift), 1.3em); color:#000; text-decoration:none; }
/* margin-bottom: auch ein umbrechender Link behaelt Luft zur Linie (flow-root misst bis unter den Aussenrand des Floats). */
.abs.abs_zwischentitel .link.rechts {float:right;margin-top:0em;margin-bottom:0.25em;}
.abs.abs_zwischentitel .icon {margin-top:-0.25em; }
.abs.abs_zwischentitel.removeLinieUnten {border:none!important;}

/* ------------------------------------------------------------------------------------  Zeitstrahl */
.block.zeitstrahl { display: flex; flex-direction: row;  box-sizing: border-box;  }
.block.zeitstrahl .spalte { width:50%;  display: flex; flex-direction: column; box-sizing: border-box; }
.block.zeitstrahl.inhlinks .spalte .inner {margin-right:2cqw}
.block.zeitstrahl.inhrechts .spalte .inner {margin-left:2cqw}

.block.zeitstrahl.inhlinks .spalte.sort1 {border-right:3px solid #A81D25; order:1; }
.block.zeitstrahl.inhlinks .spalte.sort2 {  order:2; }
.block.zeitstrahl.inhrechts .spalte.sort1 {border-right:3px solid #A81D25; order:1; }
.block.zeitstrahl.inhrechts .spalte.sort2 {  order:2; }

.block.zeitstrahl .spalte .abs_bild_text {  width:100%; margin-bottom:2cqw; }
.block.zeitstrahl .spalte .abs_bild_text .abb {  margin-bottom:2cqw; }
.block.zeitstrahl .spalte .abs_bild_text .bu {margin-top:1cqw;}
.block.zeitstrahl .spalte .abs_bild_text img{max-width:100%;  max-height:40cqw;}
.block.zeitstrahl .spalte .abs_bild_text h3 {font-size: clamp(16px, 2.0cqw ,2.0em); font-weight: 700;line-height: 120%; margin-bottom: 1cqw;
                                                    padding-top:2cqw; border-top:1px solid #303030;}
.block.zeitstrahl .spalte .abs_bild_text:first-child h3 {border:none;}

.block.zeitstrahl .abs_bild_text.linieoben { padding-top:2.5cqw;}


.block.zeitstrahl .spalte .abs_bild_text h4 {font-size: clamp(14px, 1.4cqw ,1.4em);font-weight:700;line-height:130%;}
.block.zeitstrahl .spalte .abs_text { font-size: clamp(14px, 1.4cqw ,1.4em);font-weight:400;line-height:130%;margin-bottom:2.5cqw;}
.block.zeitstrahl .spalte .abs_text { font-size: clamp(14px, 1.4cqw ,1.4em);font-weight:400;line-height:130%;margin-bottom:2.5cqw;}
.block.zeitstrahl .spalte .jahr { font-size: clamp(14px, 4.0cqw, 4.0cqw);font-weight:700;line-height:130%;color:#A81D25;}
.block.zeitstrahl.inhlinks .spalte .jahr  {position: relative;  display: inline-flex;align-items: center;top:5cqw;}
.block.zeitstrahl.inhrechts .spalte .jahr {position: relative;  display: inline-flex;align-items: center;top:5cqw;    
                                           margin-left: auto;/* <-- schiebt die Jahreszahl komplett nach rechts */}

.block.zeitstrahl.inhlinks .spalte .jahr::before { content: ""; display: inline-block; 
                                          width: 10cqw;   /* Länge */ height: 3px;    /* Dicke */  background: #A81D25;
                                          margin-right: 0.5em; /* Abstand zur Zahl */ }
.block.zeitstrahl.inhrechts .spalte .jahr::after { content: ""; display: inline-block; 
                                          width: 10cqw;   /* Länge */ height: 3px;    /* Dicke */  background: #A81D25;
                                          margin-left: 0.5em; /* Abstand zur Zahl */ }
  .zeistrahljahre {}
  .zeistrahljahre {  display: flex;}
  /* js/reddank.js ergaenzt fuer das Handy-Dropdown (Block "Zeitstrahl" im 600er-Block) ein Label und einen Button und
     fasst die Link-Kaesten in .zj-liste zusammen. Hier oben bleibt beides unsichtbar, .zj-liste reicht ihre Kinder per
     display:contents durch - die Linkzeile steht wie ohne JS. Deshalb gilt die Kasten-Regel fuer beide Verschachtelungen. */
  .zeistrahljahre .zj-label, .zeistrahljahre .zj-toggle { display: none; }
  .zeistrahljahre .zj-liste { display: contents; }
  .zeistrahljahre > div:not(.zj-liste),
  .zeistrahljahre > .zj-liste > div {font-size: clamp(14px, 1.4cqw ,1.4em);font-weight:400;padding-top: 1.0cqw;padding-bottom: 1.0cqw;margin-bottom:1.4cqw;
                          flex: 1;/* Alle gleich breit */text-align: center;    /* Text mittig */
                          border-bottom: 1px solid #303030;}
  .zeistrahljahre div a {color:#000; text-decoration:none;}
  .zeistrahljahre div a.aktiv {color:#A81D25; text-decoration:underline;}
 

/* ------------------------------------------------------------------------------------  mehr-button */
.mehr,  .weniger {font-size: clamp(18px, 1.5cqw ,26px);font-weight:400; color:#303030;text-decoration:none;display: flex;text-decoration: none;margin-bottom:1cqw;margin-top:3cqw;
                    align-items: center;/* vertikal mittig */ gap: 0.15cqw;/* Abstand zwischen Icon und Text */}
.mehr:hover,.weniger:hover {color:#A81D25;}
.mehr .wenigertext {display:none;}/*Alternativtext, wenn mehr ausgeklappt wurde... weniger lesen*/
.weniger .mehrtext {display:none;}/*Alternativtext, wenn mehr ausgeklappt wurde... weniger lesen*/
/* Plus-/Minus-Icon der Klapptexte; das Kalender-Plus hat eigene Regeln */
/* Icon-Groesse (18.09.2026): ab 1200px Containerbreite 2.64cqw (= 1.76 x Schrift, wie bisher). Darunter bleibt die
   Schrift bei 18px stehen - das Icon schrumpft flacher weiter bis 24px bei 375px. Vorher lief 2.64cqw ungebremst
   weiter (Hoehe 10px am Handy, nur die Breite hatte mit min-width einen Boden). */
.mehr,  .weniger { --klapp-icon: max(2.64cqw, calc(20.5px + 0.93cqw)); }
.mehr::before { content: "";display: inline-block; flex-shrink: 0;background-image: url('../icons/plus.svg'); background-size: contain; background-repeat: no-repeat;
                              background-position: left center; width: var(--klapp-icon); height: var(--klapp-icon); min-width: 1.2em;   }
.weniger::before { content: "";display: inline-block; flex-shrink: 0;background-image: url('../icons/minus.svg'); background-size: contain; background-repeat: no-repeat;
                              background-position: left center; width: var(--klapp-icon); height: var(--klapp-icon); min-width: 1.2em;   }
/* Klapptexte (Typ 10 Zeitstrahl .istKlappStart / Typ 11 .mitOptKlapp): Icon als Maske in Textfarbe, damit es bei
   Hover mit dem Text rot wird (die SVGs haben eine feste Fuellfarbe). Kalender-Plus bleibt beim Hintergrundbild. */
.istKlappStart .mehr::before, .istKlappStart .weniger::before,
.mitOptKlapp .mehr::before, .mitOptKlapp .weniger::before { background-image: none; background-color: currentColor;
                              -webkit-mask-image: url(../icons/plus.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: left center; -webkit-mask-size: contain;
                              mask-image: url(../icons/plus.svg); mask-repeat: no-repeat; mask-position: left center; mask-size: contain; }
.istKlappStart .weniger::before, .mitOptKlapp .weniger::before { -webkit-mask-image: url(../icons/minus.svg); mask-image: url(../icons/minus.svg); }
/* Klapptexte (Absatztyp 10/11) sind <button> statt <a href="#">: Button-Optik zuruecksetzen,
   Schrift/Farbe/Flex kommen aus .mehr/.weniger oben. */
button.mehr, button.weniger { background:none; border:0; padding:0; font-family:inherit; line-height:inherit; cursor:pointer; text-align:left; }


/* ------------------------------------------------------------------------------------  Ausstellungsmodul, Bild rechts / links */
.abs.abs_ausstellung {
    /*min-height: 650px;*/ 
    max-width: 100%; 
    margin: 0 auto;
    margin-top: -1px;
    display: flex; 
    flex-direction: row;
    box-sizing: border-box;
    border-bottom: 1px solid #333;
/*    align-items: stretch;*/
    align-items: flex-end; /* stretch → flex-end */
}
.abs.abs_ausstellung a { color:#303030; text-decoration:none;}
.abs.abs_ausstellung .abb a {
    display: block;
    width: 100%;
    height: 100%;
}

.abs.abs_ausstellung .spalte { 
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box; 
}

.abs.abs_ausstellung .spalte.spaltetext { 
    width: 32%; 
    padding: 1.2em 0.5em 1.2em 0;
    justify-content: flex-end; 
    border-right: 1px solid #333;
}

.abs.abs_ausstellung .spalte.spaltetext .unten {
    flex-shrink: 0;
}

.abs.abs_ausstellung .spalte.spaltebild { 
    width: 68%;  
    padding: 1.5em 0em 1.5em 1.5em;
    display: flex; 
    align-items: center; 
    justify-content: center;  
}
.abs.abs_ausstellung .spalte.spaltebild.sort1 {     
    padding: 1.5em 1.5em 1.5em 0;
    border-right: 1px solid #333;
}
.abs.abs_ausstellung .spalte.spaltebild.sort2 {
    border-left: 1px solid #333;
    padding: 1.5em 0 1.5em 1.5em;
}
.abs.abs_ausstellung .spalte.sort1 {
    order: 1;
    border-right: none;
}

.abs.abs_ausstellung .spalte.sort2 {
    order: 2;
    border-right: 0px solid #333;
}

.abs.abs_ausstellung .spalte.spaltetext.sort2 {
    padding: 1.2em 0 1.2em 0.5em;
}

.abs.abs_ausstellung .spalte.spaltetext.sort2 .unten { 
    margin-left: 1.5em; 
}

.abs.abs_ausstellung .abb {
    width: 100%; 
    max-height: 650px; /* WICHTIG: Bild maximal so hoch wie min-height */
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-bottom:0!important;
}

.abs.abs_ausstellung .abb img {
    width: 100%; 
    height: auto; /* Geändert von 100% zu auto */
    max-height: 650px; /* Begrenzt Bildhöhe */
    object-fit: contain;
    margin-bottom:0!important;
}
/* Bild links → linksbündig ausrichten */
.abs.abs_ausstellung .spalte.spaltebild.sort1 .abb {
    justify-content: flex-start;
}

/* Bild rechts → rechtsbündig ausrichten */
.abs.abs_ausstellung .spalte.spaltebild.sort2 .abb {
    justify-content: flex-end;
}
/* Proportionale Schriftgröße */
.abs.abs_ausstellung .overline {
     font-size: clamp(14px, 1.4cqw, 26px);
   margin-top: 1em; 
    letter-spacing: inherit;
}

.abs.abs_ausstellung h3 {
       font-size: clamp(18px, 2.8cqw, 52px);
 margin-top: 1cqw; 
    letter-spacing: inherit; 
    line-height: 1.13em;
}

.abs.abs_ausstellung h4 {
       font-size: clamp(14px, 1.4cqw, 26px);
 margin-top: 1cqw; 
    font-weight: normal;
}


/* Verlinkter Ausstellungs-Trailer: Includes ausstellungstrailer*.aspx und manuell angelegte Absaetze der Vorlagen "Modul 1 zu 2" /
   "Modul 2 zu 1" mit ausgefuelltem URL-Feld (beide: Link .unten > a um die Texte, .abb > a um das Bild). Ganze Flaeche ist Link,
   beim Hover/Tastaturfokus Text in Kollwitz-Rot und weisser Pfeil-Balken wie im Verteiler (abs_verteiler_zu_seite), der ueber dem Motiv hochfaehrt.
   - Klickflaeche: ::after des Textlinks ueber dem ganzen Absatz. Bildlink und Links im optionalen Text liegen darueber
     (title-Tooltip des Bildes bleibt, z. B. ein mailto im Text bleibt anklickbar).
   - Den Balken .pfeil setzt reddank.js ein und legt ihn beim Hover genau auf das sichtbare Motiv (object-fit:contain,
     Plakat mittig in der Spalte). Hoehe 4.5em = .icon.icon-xl (3em x 1.5em) = 72px wie im Verteiler.
   - Einfahren wie slideToggle im Verteiler: 400 ms mit jQuery-"swing" (0.5 - cos(pi*t)/2 = cubic-bezier(0.37, 0, 0.63, 1)),
     bewusst auch bei prefers-reduced-motion (Windows-Animationseffekte aus), weil der Verteiler dort ebenfalls faehrt.
   - position:relative bewusst ohne :has(), sonst spannte sich die Klickflaeche in alten Browsern ueber #content_wrapper.
   - Hover-Zustand ist die Klasse .hover-an, die reddank.js nur bei echter Maus setzt (pointerType mouse). Bewusst kein :hover
     und keine Medienabfrage any-hover: die meldet auf manchen Rechnern trotz Maus "none" (Effekt blieb aus), und ein per
     :hover eingeblendeter Balken kostet auf iPhone/iPad einen zweiten Tipp. Tastatur ueber :focus-visible.
   Absaetze ohne URL bleiben unveraendert; ein Link nur im Fliesstext (z. B. mailto) loest den Effekt nicht aus. */
.abs.abs_ausstellung { position: relative; }
.abs.abs_ausstellung .unten > a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.abs.abs_ausstellung .abb { position: relative; }
.abs.abs_ausstellung .abb a,
.abs.abs_ausstellung .unten * a { position: relative; z-index: 2; }
.abs.abs_ausstellung .abb .pfeil { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; overflow: hidden; z-index: 3;
                                   background-color: #fff; pointer-events: none; transition: height 400ms cubic-bezier(0.37, 0, 0.63, 1); }
.abs.abs_ausstellung .abb .pfeil .icon { margin-left: -10px; }
.abs.abs_ausstellung.hover-an .unten > a { color: #A81D25; }
.abs.abs_ausstellung.hover-an .abb .pfeil { height: 4.5em; }
.abs.abs_ausstellung:has(a:focus-visible) .unten > a { color: #A81D25; }
.abs.abs_ausstellung:has(a:focus-visible) .abb .pfeil { height: 4.5em; }

/*.abs.abs_ausstellung{}
.abs_ausstellung.alterierend:nth-child(even) .sort1 { order: 2; }
.abs_ausstellung.alterierend:nth-child(even) .sort2 { order: 1; }
*/
/* ------------------------------------------------------------------------------------  Teasertitel */
.abs.abs_teasertitel { display: flex; width: 100%; align-items: flex-end/* Text unten */;    }
.abs.abs_teasertitel .abb { position:relative; z-index:1;width:100%; }
.abs.abs_teasertitel .abb img { width:100%;}
.abs.abs_teasertitel .text { position:absolute; z-index:2; margin: 0 0 4% 3.5% ;  flex: 1; display: flex; align-items: flex-end; width:calc(100% - 20%);  }
.abs.abs_teasertitel .text h2  { padding:3px 3px 3px 3px;  box-decoration-break: clone; display: inline;width:100%;
                                 font-size: 3em /*ok*/; line-height: 1.2em;font-weight: 700;letter-spacing: -0.02em;}
.abs.abs_teasertitel .text h2 .marker { background: #A81D25;color:#fff; width:100%;box-decoration-break: clone; -webkit-box-decoration-break: clone;padding: 0.1em 0.2em; display: inline; }

/*-------------------------------------------------------------------------------------  abs_zweispaltig, z.B. Bio */
.abs.abs_zweispaltig {border-bottom:1px solid #303030; display: flex; flex-direction: row;align-items: start; box-sizing: border-box; padding-top:2cqw; margin-bottom:2cqw;}
.abs.abs_zweispaltig .spalte { width:50%;    display: flex; flex-direction: column; box-sizing: border-box; padding-bottom:2.5cqw; }
.abs.abs_zweispaltig .spalte.sort1 {order: 1; padding-right:2.8cqw; }
.abs.abs_zweispaltig .spalte.sort2 {order: 2; }
.abs.abs_zweispaltig .abb { width:100%; margin-bottom:1.5cqw; }
.abs.abs_zweispaltig .abb img { width:100%; margin-bottom:1.5cqw; }
.abs.abs_zweispaltig .abb p.bu {  font-size: clamp(12px, 1.0cqw ,1.0em); line-height:130%; }

.abs.abs_zweispaltig h2 {font-size: clamp(26px, 3cqw ,38px);font-weight:400;line-height:120%;margin-bottom:3cqw;}
.abs.abs_zweispaltig p,
.abs.abs_zweispaltig ul:not([class]), .abs.abs_zweispaltig ol:not([class]) {font-size: clamp(18px, 2cqw ,26px);font-weight:400;line-height:130%;margin-bottom:2.5cqw;}

.abs.abs_zweispaltig.removeLinieUnten {border-bottom:none!important}

.abs.abs_zweispaltig { position: relative; } /* wichtig für absolute-Stop */
.abs.abs_zweispaltig .spalte { position: relative; }

.abs.abs_zweispaltig .abb {
  width: 100%;
}
/* Mitscrollendes Bild: js/reddank.js setzt .sticky-an (+ top) am Bild und .sticky-spalte an dessen Spalte,
   wenn das Bild ins Fenster passt und der Text deutlich laenger ist. Natives sticky statt fixed/absolute -
   die Spalte ist position:relative, die alte Parkposition lag beim rechten Bild eine Spaltenbreite zu weit
   rechts und ragte unten ueber die Linie. Die gestreckte Spalte begrenzt den Weg: das Bild parkt am Ende
   der Zeile oberhalb der Linie. top wird animiert, wenn der Sticky-Header ein-/ausblendet. */
.abs.abs_zweispaltig .spalte.sticky-spalte { align-self: stretch; }
.abs.abs_zweispaltig .abb.sticky-an { position: sticky; transition: top 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .abs.abs_zweispaltig .abb.sticky-an { transition: none; } }
/* ------------------------------------------------------------------------------------  zoom */
.abb.zoom .imgwrapper {
    position: relative;
    display: inline-block;   /* Wrapper ist exakt bildgroß */
    line-height: 0;           /* kein Whitespace-Spalt unter dem Bild */
    width:100%;
}
.abb.zoom .imgwrapper img {
    display: block;
    max-width: 100%;
    height: auto;cursor: pointer;
}

.abb.zoom .imgwrapper::after {
    content: '';
    position: absolute;
    bottom: 2.3cqw;
    right: 1.3cqw;
    width: 4.0cqw;
    height: 4.0cqw;
    min-width: 50px;          /* Kreis-Mindestgroesse (greift unter ~1110 px Inhaltsbreite) */
    min-height: 50px;
    background-color: #fff;
    /* 2. Ebene = rote Hover-Variante, unsichtbar (Groesse 0): nur damit der Browser sie gleich mitlaedt
       und die Lupe beim ersten Ueberfahren nicht kurz leer ist. */
    background-image: url('../icons/zoom-in.svg'), url('../icons/zoom-in-red.svg');
    /* Prozent statt cqw: bezieht sich auf den Kreis, das Icon bleibt immer derselbe Anteil davon -
       waechst also mit und erbt die Mindestgroesse (50 px Kreis -> 28,5 px Icon). */
    background-size: 57% 57%, 0 0;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;cursor: pointer;
}
/* Maus ueber dem Zoom-Bild: Lupe rot. Klasse .hover-an setzt js/reddank.js nur bei echter Maus (pointerType mouse) -
   mit reinem :hover bliebe die Lupe auf Handy/Tablet nach dem Schliessen der Lightbox rot stehen. */
.abb.zoom.hover-an .imgwrapper::after {
    background-image: url('../icons/zoom-in-red.svg');    cursor: pointer;
}
/* Entferne das ::after Pseudo-Element */
/* .abb.zoom .imgwrapper::after { ... } */

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;
  inset: 0;
}

 
.lightbox-figure{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /* darf groß sein – echte Breite kommt per JS */
  max-height: calc(100vh - 120px);
}

.lightbox-content{
  display:block;
  width:100%;
  height:auto;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox-caption{
  width:100%;
  box-sizing:border-box;
  /*color:#ccc;*/
  font-size:clamp(14px, 1.5cqw, 20px);
  line-height:1.4;
  padding-top:12px;
  text-align:center;
}



.close {
  position: absolute;
  top: 30px;
  right: 45px;
  cursor: pointer;
  z-index: 10000;
  width: 5.5cqw;
  height: 5.5cqw;
  max-width:75px; max-height:75px;
  min-width:40px;min-height:40px;
}

/* DAS ist entscheidend */
.close::after {
  content: "";                 /* ❗ Pflicht */
  display: block;              /* ❗ Pflicht */
  width: 100%;
  height: 100%;

  background-image: url('../icons/close.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /*filter: invert(1);*/           /* schwarz → weiß */
}

.close:hover,
.close:focus {
    color: #bbb;
}
/* Schliessen ist ein <button>: Browser-Optik entfernen, Fokus sichtbar lassen */
button.close { -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; }
.close:focus-visible { outline: 3px solid #A81D25; outline-offset: 3px; }
/* Zoom-Ausloeser ist per JS ein role=button (tabindex=0): Tastaturfokus sichtbar, Mausfokus nicht */
.abb.zoom:focus { outline: none; }
.abb.zoom:focus-visible { outline: 3px solid #A81D25; outline-offset: 3px; }

/* --------pdf----------------------------------------------------------------------------   */
.download {  display: flex;  align-items: center;  gap: 16px; line-height:110%; margin:3cqw 0;}
.download__icon {  width: 4.5cqw;  height: 4.5cqw;  background: url('../icons/pdf.png') no-repeat center / contain;  flex-shrink: 0;padding-top:0.5cqw;}
.download__content {  display: flex;  flex-direction: column;  gap: 2px;}
.download__title {  font-size: clamp(18px, 2cqw ,26px);  font-weight: 700;  color: #1a1a1a;  margin: 0;}
.download__link {  font-size: clamp(18px, 2cqw ,26px);  color: #303030;  text-decoration: none;}
.download__link:hover {  color: #A81D25; text-decoration:underline;}

/* ------------------------------------------------------------------------------------  Alternative zu Zweispaltigem Abschnitt, Abschnitt 50% */
/*.block.spalte50p { display: inline-block; vertical-align: top; width: 44%;box-sizing: border-box; margin: 2cqw  4% 0 4%;}
 .block.spalte50p + .block.spalte50p   { margin:2cqw 2% 0 0;  }
*/
.block.spalte50p {
  display: inline-block;
  vertical-align: top;
  width: 40% /*calc(47% - 4%)*/; /* beide zusammen = 96% mit Abstand */
  box-sizing: border-box;margin:4%;
}

/* linke Spalte im Paar */
/*.block.spalte50p:nth-of-type(odd) {*/
  /*margin-right: 2%;*/  /* Abstand nach rechts *//*border:1px solid #f00;
}*/

/* rechte Spalte im Paar */
/*.block.spalte50p:nth-of-type(even) {*/
  /*margin-right: 0;*/   /* bündig rechts */

/*}*/

/* ------------------------------------------------------------------------------------  Kalender */
/* --kal-wtag / --kal-tag: Schriftgroessen von Wochentag und Tagesziffer, damit der Ziffernkasten (.tagmonat) seinen
   Abstand daraus rechnen kann (siehe .kalender .datum .tagmonat). Handy- und Tablet-Block setzen eigene Werte direkt. */
.kalender {border-top:1px solid #303030; width:100%; box-sizing: border-box;
           --kal-wtag: clamp(20.8px, 1.4cqw ,1.4cqw); --kal-tag: clamp(35px, 7cqw ,7cqw); }

.kalender .zeile { position: relative; width: 100%; border-bottom: 1px solid #303030; }
.kalender .zeile .wrapper_kurzinfo {    position: relative; min-height:9.3em; width: 100%;  height:100%; display: flex; flex-wrap: nowrap; align-items: stretch; }
.kalender .wrapper_langinfo {display: flex;align-items: stretch;   width: 100%;}
.kalender .wrapper_langinfo .datum { flex: 0 0 24%;  border-right: 1px solid #303030; display: flex; align-items: center; justify-content: center; }
.kalender .wrapper_langinfo .info { position:relative;display:inline-block; align-items: flex-start; flex: 1 1 0; margin:0 0 0 0;  }
.kalender .wrapper_langinfo .info p {font-size: clamp(16px, 1.3em ,1.3em); margin: 0 0 0.5em 0; }
.kalender .wrapper_langinfo .info .bildrechts { display:inherit; float:right; max-width: 30%;  max-height: 30cqw; 
    height: auto;margin: 0.5cqw 0 1.5cqw 2cqw;}
/* Referenzbild ist ein <figure class="bildrechts">: Float und Breite bleiben aussen, die
   Hoehenbegrenzung liegt am Bild, damit die figcaption nicht ueberlaeuft. */
.kalender .wrapper_langinfo .info figure.bildrechts { max-height:none; }
.kalender .wrapper_langinfo .info figure.bildrechts img { display:block; max-width:100%; max-height:30cqw; width:auto; height:auto; }
.kalender .info figure.bildrechts figcaption.bu { font-size: clamp(12px, 1.0cqw, 1.0em); line-height:130%; margin:0.5cqw 0 0 0; color:#303030; }
.kalender .wrapper_langinfo .detail-meta {/*clear:both!important;*/}
.kalender .wrapper_langinfo .info .btn {margin-right:1cqw;}
.kalender .wrapper_langinfo .info .abstand_unten {height:2.5cqw;}

/*kurze Zeitinfo links*/
.kalender .datum { position: relative; border-right:1px solid #303030;  min-height:11cqw; flex: 0 0 24%; color: #222;
                    padding:   0; display: flex; align-items: center; justify-content: center;  height:100%;}
/* Wochentag nicht kleiner als der Fliesstext (20.8px): in Handy- und Tablet-Vorlage sind Wochentag, Overline und Text gleich gross */
.kalender .datum .wtag {font-size: var(--kal-wtag); position: absolute;  left: 0;  top: 0.5cqw; font-weight:normal;}
/* Ziffernkasten haengt am Wochentag (16.09.2026): oben = Wochentag-Oberkante 0.5cqw + Grundlinie (0.915em) + Abstand.
   Der Abstand Grundlinie -> Ziffern-Oberkante ist wie in den Vorlagen ein Viertel der Ziffernschrift (Tablet 3.8/15.5cqw,
   Handy 5.6/20cqw); die Ziffer beginnt 0.04em unter ihrem Kasten, deshalb 0.21 statt 0.25. Vorher stand der Kasten bei
   festen 3cqw und der Abstand war 3cqw - 20px: 3px bei 769px, 22px bei 1440px. Kastenhoehe = Zeilenhoehe der Ziffer (70%). */
.kalender .datum .tagmonat {top: calc(0.5cqw + 0.915 * var(--kal-wtag) + 0.21 * var(--kal-tag));  position: absolute;     left: 0;
                            height: calc(0.7 * var(--kal-tag));  bottom: inherit;  width: 100%;}
.kalender .datum .tagmonat .tag { font-size: var(--kal-tag); position: absolute;  left: 0;  bottom: 0;  font-weight: 700;  color: #A81D25;  line-height: 70%;}
.kalender .datum .tagmonat .monat {font-size: clamp(14px, 1.0cqw ,1.0cqw);  position: absolute;  left: 10cqw;  bottom: 0;  text-transform: uppercase;  font-weight: 700;  letter-spacing: 0.2em;  line-height: 70%;}

/*lange Info rechts*/
.kalender .info { position: relative; display: flex; flex: 1 1 0; flex-direction: column; padding-left:1.5em;  
                  justify-content: space-between/* Overline oben, Titel unten */;  min-width: 0; }
/* Overline hat in allen Ansichten die Groesse des Fliesstexts (15.09.2026, Grafiker-Vorlage): Desktop 1.3em wie
   .wrapper_langinfo .info p; margin-top in rem, damit der Abstand beim groesseren em nicht mitwaechst.
   Titel nicht unter 30px: die Tablet-Ansicht endet bei 768px mit 30.3px, sonst wuerde er beim Verbreitern kleiner. */
.kalender .info .overline { margin: 1rem 0 0 0; font-size: clamp(16px, 1.3em ,1.3em); }
.kalender .info .titel { margin: 0 0 1cqw 0  ;
                         font-size:clamp(30px, 2.7cqw ,2.7cqw);font-weight:600; line-height: 110%; width:calc(100% - 2.2em); }
/*Button*/
.kalender .info .mehr {position: absolute; font-size: clamp(12px, 1.6cqw ,1.6cqw);  right: 0;bottom: 0; padding:0.7cqw 0.7cqw 0.7cqw 0.7cqw ; border-color:#303030;}
.kalender .info .weniger {position: absolute; font-size: clamp(12px, 1.6cqw ,1.6cqw);  right: 0;bottom: 0; padding:0.7cqw; border-color:#A81D25;  
                          filter: brightness(0) invert(16%) sepia(82%) saturate(4500%) hue-rotate(348deg) brightness(82%);}

.kalender .info .mehr,
.kalender .info .weniger { 
    justify-content: center;
    gap: 0;
    font-size: clamp(16px, 1.6cqw, 1.6cqw);   /* 12px → 16px Floor */
    padding: clamp(6px, 0.7cqw, 0.7cqw);      /* Padding mit Floor */
}
/* Plus-/Minus-Icon im Kalender: Mindestgröße auf Mobil */
.kalender .info .mehr::before,
.kalender .info .weniger::before { 
    width:  clamp(20px, 2.2cqw, 2.2cqw); 
    height: clamp(20px, 2.2cqw, 2.2cqw); 
    min-width: 0;   /* deaktiviert den 1em-Floor aus der Basis-Regel */
    background-position: center center;   /* statt "left center" aus der Basis */
}

/* Button im Kalender: Größe + Padding proportional zum Container */
.kalender .btn {
    text-decoration: none;
    font-size: var(--ui-schrift);
    padding:
        var(--ui-pad-o)
        clamp(16px, 1.5cqw, 1.5cqw)
        var(--ui-pad-u)
        clamp(16px, 1.5cqw, 1.5cqw);
    margin-right: 0;
}
.kalender .btn.icon {
    padding:
        var(--ui-pad-o)
        clamp(16px, 1.5cqw, 1.5cqw)
        var(--ui-pad-u)
        clamp(32px, 4cqw, 4cqw);
}
.kalender .btn.icon::before { 
    left:  clamp(10px, 1.4cqw, 1.4cqw); 
    width: clamp(16px, 2cqw, 2cqw); 
}

/* Hover: Rand 1 -> 5px, jedes Padding -4px, damit das Aussenmass bleibt. Nur das absolut
   positionierte Icon braucht -5px (Bezug ist die Padding-Box), sonst wandert es. */
.kalender .btn.btn-light:hover, .kalender .btn.btn-light:focus-visible {
    padding:
        calc(var(--ui-pad-o) - 4px)
        calc(clamp(16px, 1.5cqw, 1.5cqw) - 4px)
        calc(var(--ui-pad-u) - 4px)
        calc(clamp(16px, 1.5cqw, 1.5cqw) - 4px);
}
.kalender .btn.icon.btn-light:hover, .kalender .btn.icon.btn-light:focus-visible {
    padding-left: calc(clamp(32px, 4cqw, 4cqw) - 4px);
}
.kalender .btn.btn-light.icon:hover::before, .kalender .btn.btn-light.icon:focus-visible::before {
    left: calc(clamp(10px, 1.4cqw, 1.4cqw) - 5px);
}
/* Plus-/Minus-Kreis: Tastaturfokus = vorhandener Rand wird rot (+ innen 2px verstaerkt), kein Outline; Plus-Icon rot wie beim Minus */
.kalender .info .mehr:focus-visible, .kalender .info .weniger:focus-visible { outline: none; border-color: #A81D25; box-shadow: inset 0 0 0 2px #A81D25; }
.kalender .info .mehr:focus-visible { filter: brightness(0) invert(16%) sepia(82%) saturate(4500%) hue-rotate(348deg) brightness(82%); }

.kalender .zeile.filter-hidden { display: none !important; }
.kalender .monats-header.filter-hidden { display: none !important; }
.kalender-filter { padding: 1.5em 0; border-top: 0px solid #303030; }
.kalender-filter .filter-row { display: flex; gap: 1.5cqw; align-items: flex-end; flex-wrap: nowrap; padding-right: 0; }
.kalender-filter .filter-item {display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
/* Reset-Kreis: gleiche Formel wie der Teilen-Button - Durchmesser = Buttonhoehe, Icon zentriert. */
.kalender-filter .filter-row .filter-reset-all {
    flex: 0 0 auto; align-self: flex-end; margin-left: 0.5cqw; margin-bottom: 0;
    box-sizing: border-box; padding: 0;
    font-size: var(--ui-schrift);
    width:  var(--ui-hoehe);
    height: var(--ui-hoehe);
}
.kalender-filter .filter-row .filter-reset-all::before {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: clamp(16px, 2cqw, 2cqw); height: clamp(16px, 2cqw, 2cqw);
    background-position: center center; background-size: contain;
}
/* Reset-Kreis (Filter zuruecksetzen): Tastaturfokus = Rand rot + dick (1px Border + 4px Innenschatten), kein Aussenrahmen */
.kalender-filter .filter-row .filter-reset-all:focus-visible { outline: none; border-color: #A81D25; box-shadow: inset 0 0 0 4px #A81D25; }
/* Filter-Labels: klein ueber dem Dropdown, Schriftgroesse und Skalierung wie die Bildunterschriften (figcaption.bu / p.bu) */
.kalender-filter .filter-item label { font-size: clamp(14px, 1.5cqw, 20px); line-height: 130%; font-weight: 400; letter-spacing: 0.02em; }
/* Dropdowns: Schrift und Aussenhoehe wie die Textbuttons daneben. Hoehe fest per border-box,
   der Browser zentriert den Select-Text selbst - senkrechte Paddings sind unnoetig. */
.kalender-filter .filter-select {font-family: "futura-pt", sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1.5px solid #303030;
    border-radius: 50px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 1.2em center;
    padding: 0 1.5em 0 2.8em;
    font-size: var(--ui-schrift);
    height: var(--ui-hoehe);
    line-height: normal;
    color: #333;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s;
}
.kalender-filter .filter-select:hover { border-color: #333; }
/* Fokus auf den Selects: vorhandener Rand wird rot und dick (Border + Innenschatten = 5px wie bei den
   Buttons), kein Layoutsprung, kein Aussenrahmen; bei aktivem Filter weiss wie beim Hover. */
.kalender-filter .filter-select:focus { outline: none; border-color: #A81D25; box-shadow: inset 0 0 0 3.5px #A81D25; }
.kalender-filter .filter-select.filter-aktiv:focus { border-color: #fff; box-shadow: inset 0 0 0 3.5px #fff; }
.kalender-filter .filter-select.filter-aktiv {
    background-color: #A81D25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border-color: #A81D25;
    color: #fff;
}
.kalender-filter .filter-select.filter-aktiv:hover { border-color: #fff; }

.btn-filter-reset {
    border: none;
    background: none;
    color: #A81D25;
    font-size: clamp(13px, 1.1cqw, 1.1cqw);
    cursor: pointer;
    padding: 0.7em 0;
    text-decoration: underline;
}

.kalender .monats-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5cqw 0 0.5em 0;
    border-bottom: 1px solid #303030;
}
.kalender .monats-header .monats-titel { 
    font-size: clamp(16px, 1.4cqw, 1.4cqw);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #303030;
}


/*.kalender .detail-meta .meta-item::after {  content: " | ";}.kalender .detail-meta .meta-item:last-child::after { content: "";}*//*einblenden, wenn in einer Zeile gewünscht*/

.kalender .logo-row { display: flex; gap: 0; margin: 2em 0 0 -1.5em; }
.kalender .logo-cell { flex: 1 1 33.333%; display: flex;align-items: center; justify-content: center; 
                       border: 1px solid #303030;border-left:none;border-bottom:none;
                       min-height: 10cqw; padding: 10px;background: #fff; }
.kalender .logo-cell:last-child{border-left:none;border-bottom:none;border-right:none; }
.kalender .logo-cell img { max-width: 10cqw;max-height:10cqw; object-fit: contain;}
/* verlinktes Logo: kein Extern-Link-Pfeil (a[href^="https"]::before), keine Link-Optik */
.kalender .logo-cell a.logo-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.kalender .logo-cell a.logo-link::before { content: none !important; display: none !important; }

/* Teilen-Button (rund, nur Symbol) + Feedback "Link kopiert" (Desktop ohne Web Share API) */
.kalender .teilen-btn { position: relative; }
/* Exakter Kreis: festes width/height statt Padding plus Inhaltsbreite, sonst wird er oval.
   Durchmesser = Buttonhoehe, gleiche Schrift und Paddings -> gleiche Grundlinie wie die Textbuttons
   (Inhalt ist ein geschuetztes Leerzeichen im ::after). width braucht !important gegen .btn.
   Die Spezifitaet des zentrierten Icons schlaegt .kalender .btn.icon::before samt 1440er-Kopie. */
.kalender .btn.icon.icon-set-kreis.teilen-btn {
    box-sizing: border-box;
    font-size: var(--ui-schrift);
    line-height: inherit;
    min-width: 0; min-height: 0;
    width:  var(--ui-hoehe) !important;
    height: var(--ui-hoehe);
    padding: var(--ui-pad-o) 0 var(--ui-pad-u) 0;
    text-align: center;
}
.kalender .btn.icon.icon-set-kreis.teilen-btn::after { content: "\00a0"; }
.kalender .btn.icon.icon-set-kreis.teilen-btn::before {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width:  clamp(16px, 2cqw, 2cqw);
    height: clamp(16px, 2cqw, 2cqw);
    background-position: center center; background-size: contain;
}
/* Hover/Fokus: Rand 1 -> 5px, border-box haelt das Aussenmass, Paddings -4px wie nebenan. */
.kalender .btn.icon.icon-set-kreis.teilen-btn:hover, .kalender .btn.icon.icon-set-kreis.teilen-btn:focus-visible {
    padding: calc(var(--ui-pad-o) - 4px) 0 calc(var(--ui-pad-u) - 4px) 0;
}
.kalender .btn.icon.icon-set-kreis.teilen-btn:hover::before, .kalender .btn.icon.icon-set-kreis.teilen-btn:focus-visible::before { left: 50%; }
.kalender .teilen-btn .teilen-feedback {
    position: absolute; left: 50%; bottom: calc(100% + 0.4em); transform: translateX(-50%);
    white-space: nowrap; font-size: clamp(12px, 1.2cqw, 16px); line-height: 1;
    padding: 0.4em 0.8em; background: #303030; color: #fff; border-radius: 3px; pointer-events: none;
}

/* Einzelseite: Langtext (nur dort) + Block "Weitere Termine" */
.kalender-einzel .langtext { clear: both; }
.kalender-einzel .weitere-termine { margin-top: 6cqw; }
.kalender-einzel .weitere-termine .abs.abs_h2 { margin-bottom: 0; }
/* Die Zeilen unter "Weitere Termine" sind normale Kalenderzeilen und erben deren Regeln - die
   Einzelseiten-Overrides weiter unten gelten deshalb nur fuer .zeile-haupt. */
.kalender-einzel .weitere-termine .abs.abs_h2 + .monats-header { padding-top: 2cqw; }
.kalender .logo-label { font-size: clamp(18px, 2cqw ,26px);  margin: 0 0 0px 0;}

.kalender .zeile-offen .titel {
    color: #A81D25;
}
.kalender .mehr {
    transition: transform 0.3s;
}
.kalender .mehr.offen {
    transform: rotate(45deg);
}


/* Einzelseite, Hauptzeile: langer Inhalt im wrapper_kurzinfo, also normaler Textfluss statt
   Flex-Spalte. Bewusst nur .zeile-haupt - die weiteren Termine behalten das Listen-Layout. */
.kalender-einzel .zeile-haupt .wrapper_kurzinfo .info { display: block; }
.kalender-einzel .zeile-haupt .wrapper_kurzinfo .info .btn { margin-right: 1cqw; }
/* Bild rechtsbuendig wie im Hauptkalender (20.09.2026): gleiche Werte wie
   .kalender .wrapper_langinfo .info .bildrechts, Innenabstand gespiegelt. */
.kalender-einzel .zeile-haupt .wrapper_kurzinfo .info .bildrechts {
    float: right; max-width: 30%; max-height: 30cqw; height: auto; margin: 0.5cqw 0 1.5cqw 2cqw;
}
/* figure-Variante (siehe .kalender .wrapper_langinfo … figure.bildrechts) */
.kalender-einzel .zeile-haupt .wrapper_kurzinfo .info figure.bildrechts { max-height:none; }
.kalender-einzel .zeile-haupt .wrapper_kurzinfo .info figure.bildrechts img { display:block; max-width:100%; max-height:30cqw; width:auto; height:auto; }
.kalender-einzel .zeile-haupt .wrapper_kurzinfo .info .abstand_unten { height: 2.5cqw; }
/* Teilen ist ein <button> -> native Chrome (grauer Hintergrund/Systemfont) entfernen,
   damit er wie die <a>-Buttons aussieht. */
.kalender .teilen-btn {
    -webkit-appearance: none; appearance: none; background: transparent; font-family: inherit; color: inherit;
}
.kalender-einzel .zeile-haupt .info .titel { margin: 0 0 2cqw 0  ;
                         font-size:clamp(18px, 4.0cqw ,5cqw);  }

/*---------------------------------- Formulare: Fehler + Hilfsklassen (global) -----------------------------*/
/* .vh = nur fuer Screenreader (visually hidden), z. B. Label des Suchfelds / Legende der Variantenwahl */
.vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Skip-Link: unsichtbar bis zum Tastaturfokus, dann oben links ueber Sticky-Header und Cookie-Banner. */
.skip-link { position:absolute; left:-9999px; top:0; z-index:100001; background:#A81D25; color:#fff; font-size:clamp(16px, 1.3cqw, 21.6px);
             padding:0.6em 1.2em; text-decoration:none; border-radius:150px; }
.skip-link:focus { left:1em; top:1em; outline:3px solid #303030; outline-offset:2px; }
#content_wrapper:focus { outline:none; }   /* Sprungziel (tabindex=-1): kein Rahmen um den ganzen Inhalt */
/* Fehler nicht nur ueber Farbe: "!"-Icon per CSS vor Box und Feldtext (kein Bild, skaliert mit der Schrift) */
.fehlerbox::before, .fehlertext::before { content:"!"; display:inline-flex; align-items:center; justify-content:center;
        width:1.25em; height:1.25em; margin-right:0.45em; border-radius:50%; background:#A81D25; color:#fff;
        font-weight:700; font-size:0.85em; line-height:1; vertical-align:-0.15em; }
.fehlertext { display:block; color:#A81D25; font-weight:600; font-size:clamp(13px, 1.8cqw, 20px); margin-top:5px; }
.fehlertext[hidden] { display:none; }
/* Eingabe-Wrapper (Suche/Presselogin, deren <input> outline:none hat): Fokus + Fehler am Wrapper zeigen */
#suche .suche-eingabe:focus-within, #presselogin .login-eingabe:focus-within { box-shadow:0 0 0 2px #303030; }
#suche .suche-eingabe.eingabe-fehler, #presselogin .login-eingabe.eingabe-fehler { box-shadow:0 0 0 2px #A81D25; }

/*----------------------------------------Suchseite-------------------------------------------*/
/* Das Eingabefeld ist die einzige Ausnahme von --ui-hoehe: 30% hoeher, weil es kein Button ist,
   sondern das Hauptelement der Seite. Der Faktor rechnet auf der Variable, das Skalierverhalten
   bleibt also gleich. Der Such-Pager darunter behaelt die Normalhoehe. */
#suche .suche-wrapper { width: 100%; max-width: 880px;        margin: 2cqw 0;    }
#suche .suche-eingabe { display: flex; align-items: center; background: #f0ece6; border-radius: 50px;
        height: calc(var(--ui-hoehe) * 1.3); box-sizing: border-box;
        padding: 0 2cqw 0 3cqw; gap: 10px; }
/* padding:0 - die Hoehe macht der Wrapper. Senkrechtes Padding am <input> bliebe fuer die Feldhoehe
   wirkungslos und laesst das Feld auf schmalen Breiten ueberlaufen. */
#suche .suche-eingabe input[type="text"] { flex: 1;border: none; background: transparent;
        font-family: inherit;                                  /* Website-Schrift (futura-pt) statt Browser-Systemfont */
        font-size: var(--ui-schrift);                          /* = Fliesstext, wie alle Bedienelemente */
        color: #303030; outline: none;
        padding: 0; line-height: 1.2;
        font-style: italic;
    }
#suche .suche-eingabe input[type="text"]::placeholder { color: #999; font-family: inherit; }
#suche .suche-eingabe .suche-btn { background: none; border: none; cursor: pointer; padding: 0px;
        display: flex; align-items: center; justify-content: center;
    }
/* Lupe so gross wie die Tasche in der Warenkorb-Pille, deren Deckel hier ausgerechnet mitsteht -
   ohne ihn waere die Lupe auf breiten Fenstern hoeher als das Feld. */
#suche .suche-eingabe .suche-btn img { width: clamp(33.6px, 3.5cqw, 50.4px); height: clamp(33.6px, 3.5cqw, 50.4px);

    }
#suche .suche-eingabe .suche-btn:hover img { stroke: #000; }
#suche .such-header {     padding: 5cqw 0 0.5em 0; margin-bottom:2cqw; border-bottom: 1px solid #303030;}
#suche .such-header .such-titel {  font-size: clamp(16px, 1.4cqw, 1.4cqw); font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: #303030;
}
#suche .zeile .wrapper_kurzinfo {max-width: 900px;}
#suche .zeile {border-bottom:1px solid #303030;padding:1cqw 0;}
#suche .zeile h2,#suche .zeile p,#suche .zeile h3 { padding:0; margin:0; line-height:130%;}
/* Treffertitel so gross wie der Auszug darunter - sonst greift die Browservorgabe fuer h3. */
#suche .zeile h3 { font-size: clamp(18px, 2cqw, 26px); }
#suche .zeile a {color:#303030;text-decoration:none;}
#suche .zeile a:hover {color:#A81D25;}
/* Treffer im Auszug rot und fett statt gelb hinterlegt; die Hover-Regel verhindert, dass der
   rote Link-Hover die Hervorhebung schluckt. */
#suche mark { background: transparent; color: #A81D25; font-weight: 700; }
#suche .zeile a:hover mark { color: #A81D25; }

/* Blaetterung (Pager) - rundes Pillen-Format analog .btn */
#suche .such-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 40px 0 10px; }
#suche .such-pager .pager-btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ui-hoehe);
  min-height:0;
  height: var(--ui-hoehe);
padding: 0 1.4cqw 0 1.4cqw;
box-sizing: border-box;
  border: 1px solid #303030;
  border-radius: 999px;
  color: #303030;
  text-decoration: none;
  line-height: 1;
  font-size: var(--ui-schrift);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
#suche .such-pager a.pager-btn:hover { border-color: #A81D25; color: #A81D25; }
/* Pfeil-Icon mitfaerben (31.08.2026): schwarzer Rand -> roter Rand, dazu Text UND Icon rot.
   Der Pager ist kein .btn.btn-light, deshalb hier dieselbe Filter-Formel noch einmal. */
#suche .such-pager a.pager-btn:hover .icon::before { filter: brightness(0) invert(16%) sepia(82%) saturate(4500%) hue-rotate(348deg) brightness(82%); }
#suche .such-pager .pager-btn.aktiv { background: #A81D25; border-color: #A81D25; color: #fff; cursor: default; }
#suche .such-pager .pager-btn .icon { width: 1.1em; height: 1.1em; }
#suche .such-pager .pager-ellipsis { padding: 0 4px; color: #303030; }

/*----------------------------------------Presselogin-------------------------------------------*/
/* Eingabefeld analog zur Suchseite (#suche .suche-eingabe) */
#presselogin .login-wrapper { width: 100%; max-width: 800px; margin: 2cqw 0; }
#presselogin .feld { margin-bottom: 1.5cqw; }
#presselogin .feld label { display: block; font-size: clamp(11px, 0.85cqw, 13px); font-weight: 700;
        letter-spacing: 0.15em; text-transform: uppercase; color: #303030; margin-bottom: 0.8cqw; }
/* haengt wie das Suchfeld an --ui-hoehe / --ui-schrift */
#presselogin .login-eingabe { display: flex; align-items: center; background: #f0ece6; border-radius: 50px;
        height: var(--ui-hoehe); box-sizing: border-box;
        padding: 0 2cqw 0 3cqw; gap: 10px; }
#presselogin .login-eingabe input[type="password"],
#presselogin .login-eingabe input[type="text"] { flex: 1; border: none; background: transparent;
        font-family: inherit;
        font-size: var(--ui-schrift); color: #303030; outline: none; padding: 0; line-height: 1.2; -webkit-appearance: none; }
#presselogin .login-eingabe input::placeholder { color: #999; }
#presselogin .login-eingabe .login-btn { background: none; border: none; cursor: pointer; padding: 0;
        display: flex; align-items: center; justify-content: center; }
#presselogin .login-eingabe .login-btn svg { width: clamp(22px, 2.5cqw, 36px); height: clamp(22px, 2.5cqw, 36px);
        opacity: 0.4; transition: opacity 0.2s; }
#presselogin .login-eingabe .login-btn:hover svg { opacity: 1; }
#presselogin .fehler { font-size: clamp(13px, 1cqw, 15px); color: #A81D25; margin-top: 1cqw;
        min-height: 1.4em; letter-spacing: 0.02em; }
/* ------------------------------------------------------------------------------------  Buttons */
/* Schrift und senkrechte Innenabstaende aus den UI-Variablen, waagerechte je Variante.
   Aussenhoehe = 1.4em + Padding + Rand = --ui-hoehe. */
.btn {  padding: var(--ui-pad-o) 2em var(--ui-pad-u) 2em; margin-right:20px;
        border-radius:150px; color: #303030;  display: inline-block;
        font-size: var(--ui-schrift); height: 1.4em; width:auto!important; cursor: pointer; }
.btn.icon {padding: var(--ui-pad-o) 2cqw var(--ui-pad-u) 6.0cqw;} /*abweichendes padding, wenn mit icon*/
a.btn {text-decoration:none;}

.btn.icon::before { content: ""; height: 100%;background-repeat: no-repeat; background-position: left;
                    left:1.2cqw; /* transition: left 200ms cubic-bezier(0,0,0.2,1),background-position 200ms cubic-bezier(0,0,0.2,1);*/
                    width:   5cqw; position: absolute; top: 0; }

.btn.btn-light      {    border: 1px solid #303030; 
                         /*transition:border-width 200ms cubic-bezier(0,0,0.2,1),
                                    border-color 200ms cubic-bezier(0,0,0.2,1),
                                    padding-left 200ms cubic-bezier(0,0,0.2,1),
                                    padding-right 200ms cubic-bezier(0,0,0.2,1);*/ }

/* Tastaturfokus (:focus-visible) sieht bei Buttons mit schwarzem Rand aus wie Hover: Rand wird rot/dick, kein zusaetzlicher Outline-Rahmen */
.btn.btn-light:focus-visible { outline: none; }
.btn.btn-light:hover, .btn.btn-light:focus-visible { border-width: 5px;border-color: #A81D25;
                       padding-top:     calc(var(--ui-pad-o) - 4px);
                       padding-right:   calc(2cqw - 4px);
                       padding-bottom:  calc(var(--ui-pad-u) - 4px);
                       padding-left :   calc(6.0cqw - 4px);   /* < einziger unterschied, wenn Kreis */
}.btn.icon.btn-light:hover, .btn.icon.btn-light:focus-visible { border-width: 5px;border-color: #A81D25; padding-left : calc(6cqw - 4px);}  /* -4px wie die anderen Seiten (war -5px = 1px schmaler); Icon-Versatz -5px steht unten am ::before */


.btn.btn-light.icon:hover::before, .btn.btn-light.icon:focus-visible::before { left: calc(1.2cqw - 5px);}

/* Hover/Fokus faerbt zusaetzlich Text und Icon rot (31.08.2026) - vorher wurde nur der Rand rot.
   Gilt fuer jeden hellen Button mit schwarzem Rand, also auch fuer Kalender, Sammlung (runde
   Blaettern-Buttons) und den Dropdown-Toggle, weil die alle .btn.btn-light sind.
   Ausgenommen: die weisse Variante (.weiss, steht auf rotem Grund) und die gefuellten .btn-rot.
   Die Filter-Formel faerbt ein schwarzes SVG nach #A81D25 - dieselbe wie beim Kalender-Plus
   (.kalender .info .mehr:focus-visible) und den Kassen-Buttons. */
.btn.btn-light:not(.weiss):hover, .btn.btn-light:not(.weiss):focus-visible { color: #A81D25; }
.btn.btn-light:not(.weiss):hover::before,
.btn.btn-light:not(.weiss):focus-visible::before,
.btn.btn-light:not(.weiss):hover .icon::before,
.btn.btn-light:not(.weiss):focus-visible .icon::before {
    filter: brightness(0) invert(16%) sepia(82%) saturate(4500%) hue-rotate(348deg) brightness(82%);
}

.btn.btn-rot:before {filter: invert(1) brightness(2.5) contrast(2.5);}
/* durchsichtiger 1px-Rand statt border:none, sonst sind die roten Buttons 2px niedriger als die
   hellen. Der Hintergrund laeuft unter dem Rand durch, die Optik bleibt. */
.btn.btn-rot { text-decoration:none; background-color: #A81D25; color: #fff;border:1px solid transparent;
                /*transition: background-color 200ms cubic-bezier(0,0,0.2,1), color 200ms cubic-bezier(0,0,0.2,1);*/}
/*a.btn.btn-rot  { text-decoration:none;}*/
.btn.btn-rot:hover, .btn.btn-rot:focus-visible {  background-color: #303030; outline: none; }   /* rot gefuellt: Hover/Fokus = dunkler Grund, kein Rahmen */

 /* weiße Variante für roten Untergrund */
.btn.btn-light.weiss {border: 1px solid #fff;color:#fff;  }
.btn.btn-light.weiss:hover, .btn.btn-light.weiss:focus-visible {border-color: #fff;}
.btn.btn-light.weiss:before {filter: invert(1) brightness(2.5) contrast(2.5);}
.btn.icon.btn-light.weiss:hover, .btn.icon.btn-light.weiss:focus-visible {border-color: #fff;}

/*Sammlung*/
/* Buttons in H1-Absaetzen (Zurueck / Zur Uebersicht): dieselben Formeln wie .kalender .btn. */
.abs.abs_h1 .btn {font-size: var(--ui-schrift); height: 1.4em;
                  padding: var(--ui-pad-o) clamp(16px, 1.5cqw, 1.5cqw) var(--ui-pad-u) clamp(32px, 4cqw, 4cqw);
                  float:right;margin-right:0; margin-left:.5em; text-decoration:none;}
.abs.abs_h1 .btn.icon::before { left: clamp(10px, 1.4cqw, 1.4cqw); width: clamp(16px, 2cqw, 2cqw); }
/* Hover/Fokus: Rand 1px -> 5px, jedes Padding -4px (Aussenmass bleibt), nur die Icon-Position -5px (Bezug Padding-Box) */
.abs.abs_h1 .btn:hover, .abs.abs_h1 .btn:focus-visible { border-width: 5px;border-color: #A81D25;
                       padding-top:     calc(var(--ui-pad-o) - 4px);
                       padding-right:   calc(clamp(16px, 1.5cqw, 1.5cqw) - 4px);
                       padding-bottom:  calc(var(--ui-pad-u) - 4px);
                       padding-left :   calc(clamp(32px, 4cqw,   4cqw)   - 4px);    }
.abs.abs_h1 .btn.icon:hover::before, .abs.abs_h1 .btn.icon:focus-visible::before { left: calc(clamp(10px, 1.4cqw, 1.4cqw) - 5px); }


/*Button ist rund, hat demnach keinen Text:*/
.btn.icon.icon-set-kreis {padding: 0.7em 1.5em 0.6em 1.0em;
  font-size: clamp(10px, 2.2cqw, 2.2cqw);
  min-width: 10px;
  min-height: 20px;}
/* Icon skaliert wie der Plus-Button im Kalender: quadratisch, zentriert, contain. */
.btn.icon.icon-set-kreis:before {top:50%; left:50%; transform:translate(-50%,-50%); width:clamp(27px, 3cqw, 3cqw); height:clamp(27px, 3cqw, 3cqw); background-position:center center; background-size:contain;}
/*Animation des Randes ist dann auch anders: */
.btn.icon-set-kreis.btn-light:hover, .btn.icon-set-kreis.btn-light:focus-visible { /* padding-abweichungen bei Kreisform */
                       padding-top:     calc(1.0em - 4px);
                       padding-right:   calc(2em - 4px);
                       padding-bottom:  calc(0.6em - 4px);
                       padding-left :   calc(1.0em - 4px);   /* < einziger unterschied, wenn Kreis */}
.btn.icon-set-kreis.btn-light.icon:hover::before, .btn.icon-set-kreis.btn-light.icon:focus-visible::before { left: 50%; }

/* Pfeil-Buttons (.icon-arrow-left / .icon-arrow-right, ohne Kreisform) - 14.09.2026
   - Pfeil 30% groesser als das Icon der Kalender-Buttons: Breite 2cqw -> 2.6cqw (Boden 16px -> 20.8px).
     Der Platz auf der Pfeilseite waechst um dieselben 0.6cqw (4cqw -> 4.6cqw, Boden 32px -> 36.8px), damit
     der Abstand zwischen Pfeil und Text gleich bleibt. Textseite und Abstand Pfeil-Rand wie bei .kalender .btn.
   - Gilt ueberall, also auch fuer "Tickets"/"Besuch" (abs_text header_ausst) und "Zur Ausstellung". Die
     allgemeine .btn.icon-Formel (Box 5cqw, Padding 6cqw) machte den Pfeil unter 1440px zu gross (bis ~49px),
     liess ihn beim Hover schrumpfen und auf Mobil fast an den Text stossen.
   - Pfeil als Maske in currentColor statt Hintergrundbild mit Farbfilter: normal #303030 wie die SVG,
     Hover/Fokus exakt das Rot des Randes (#A81D25), auf .btn-rot und .weiss weiss. Die Filter-Formel traf das Rot
     nur ungefaehr (gemessen #D11220).
   - Spezifitaet 0,4,0 / Hover 0,6,0 schlaegt .kalender .btn.icon und .btn.btn-light:not(.weiss):hover::before.
     Der gespiegelte "Weiter" im Kalender-Pager steht weiter unten und gewinnt bei Gleichstand.
     Werte ab 1440px im 1440er-Block. */
.btn.icon.icon-arrow-left:not(.icon-set-kreis),
.btn.icon.icon-arrow-right:not(.icon-set-kreis) {
    padding-right: clamp(16px, 1.5cqw, 1.5cqw);
    padding-left:  clamp(36.8px, 4.6cqw, 4.6cqw);
}
.btn.icon.icon-arrow-left:not(.icon-set-kreis)::before,
.btn.icon.icon-arrow-right:not(.icon-set-kreis)::before {
    left:  clamp(10px, 1.4cqw, 1.4cqw);
    width: clamp(20.8px, 2.6cqw, 2.6cqw);
    background-image: none;
    background-color: currentColor;
    filter: none;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: left center;
    mask-position: left center;
}
.btn.icon.icon-arrow-left:not(.icon-set-kreis)::before  { -webkit-mask-image: url(../icons/arrow-left.svg);  mask-image: url(../icons/arrow-left.svg); }
.btn.icon.icon-arrow-right:not(.icon-set-kreis)::before { -webkit-mask-image: url(../icons/arrow-right.svg); mask-image: url(../icons/arrow-right.svg); }
.btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover,  .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible,
.btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover, .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible {
    padding-right: calc(clamp(16px, 1.5cqw, 1.5cqw) - 4px);
    padding-left:  calc(clamp(36.8px, 4.6cqw, 4.6cqw) - 4px);
}
.btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover::before,  .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible::before,
.btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover::before, .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible::before {
    left: calc(clamp(10px, 1.4cqw, 1.4cqw) - 5px);
    filter: none;
}

/*Sammlung*/
/*.abs.abs_h1 .btn.icon-set-kreis {font-size: clamp(1px, 1.0cqw, 1.0cqw);  
                       padding-top:     calc(1.5cqw - 4px);
                       padding-right:   calc(2cqw - 4px);
                       padding-bottom:  calc(1.5cqw - 4px);
                       padding-left :   calc(2.5cqw - 4px);
} */
.nav-geschwister .disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* ------------------------------------------------------------------------------------  Zitat */
/* .zitat-wrapper ist ein <figure>, .zitatinhalt ein <blockquote>, .zitierende ein <figcaption>.
   Hier nur die Browser-Standardabstaende zuruecksetzen, die Optik bleibt.
   Das Zitatzeichen ist ein background-image im ::before und wird deshalb nicht vorgelesen. */
figure.zitat-wrapper { margin:0; }
blockquote.zitatinhalt { margin:0; padding:0; }
.zitat  { padding: 0;  }
.zitat .zitat-wrapper { margin:0em; padding: 0.5cqw 0% 2cqw 4cqw; margin-top:2cqw!important;}
.zitat .zitat-wrapper::before {    content: ""; display: block;flex-shrink: 0; width: 2.8cqw; height: 2.8cqw; min-width: 0em; 
                            background-image: url('../icons/zitat_rot.svg'); background-size: contain; background-repeat: no-repeat; background-position: left  top;  
                            margin-bottom: -3.4cqw; margin-left: -4.0cqw/* Abstand zum Rand links */;  }
.zitat .zitat-wrapper .zitatinhalt , .zitat .zitat-wrapper .zitatinhalt p { font-style: normal; font-size:clamp(22px, 3cqw ,38px); font-style: italic; }
.zitat .zitat-wrapper .zitierende { font-style: normal; font-size: clamp(18px, 2cqw ,26px); margin-top: 1.5em; }


/* ------------------------------------------------------------------------------------  Zitat mit rotem Hintergrund */
.zitat_rot {/*border-top:1px solid #303030; border-bottom:1px solid #303030;*/ padding: 1.5em 0;}
.zitat_rot.linieoben {border-top:1px solid #303030; }
.zitat_rot.linieunten {  border-bottom:1px solid #303030;  }

.zitat_rot .zitatflaeche {  background-color: #A81D25; color: #fff; display: flex; padding: 12em 0 10em 0;  align-items: center/* Zentriert Icon und Text vertikal */;}
.zitat_rot .zitat-wrapper { margin:0em; padding: 0% 20% 0% 25%; }
.zitat_rot .zitat-wrapper::before {    content: ""; display: block;flex-shrink: 0;
                            width: 5.8em; height: 5.8em; min-width: 5.8em; 
                            background-image: url('../icons/zitat_weiss.svg'); background-size: contain; background-repeat: no-repeat; background-position: left center;  
                            margin-bottom: -5.9em; margin-left: -6.8em/* Abstand zum Rand links */; }
.zitat_rot .zitat-wrapper .zitatinhalt { font-style: normal; font-size: clamp(14px, 2.0em,2.0em ); font-style: italic; }
.zitat_rot .zitat-wrapper .zitierende { font-style: normal; font-size: clamp(12px, 1.4em,1.4em ); margin-top: 1.5em; }


/* ------------------------------------------------------------------------------------  Angebote 3-spaltig */
.verteiler_3spaltig { width:auto; overflow:hidden; /*border-top:  1px solid #303030;*/  }
.verteiler_3spaltig .inner { display: grid; grid-template-columns: repeat(3, 1fr); width:calc(100% + 4cqw);
                        margin: 0 -2cqw; /* Negatives margin gleicht das erste/letzte Padding aus, Überlappung nach Außen durch overflow-x:hidden in .block  */  }
.verteiler_3spaltig .kasten { border-right: 1px solid #303030;border-bottom: 1px solid #303030; margin-bottom:-1px;
            display: flex;flex-direction: column; align-items: stretch; padding: 2cqw 2cqw 2cqw 2cqw/* auf allen Seiten gleich */;}
.verteiler_3spaltig .kasten .abb {  width: 100%;  margin-bottom: 1.2em;   overflow: hidden; /*display: flex;*/ align-items: center; justify-content: center;}
.verteiler_3spaltig .kasten .abb img { width: 100%; display: block;margin-bottom:1.5cqw;}

.verteiler_3spaltig .kasten:nth-child(3n) {  border-right: none;} /* Letzte Spalte: Keine Border rechts */

.verteiler_3spaltig .kasten .overline   { font-size: clamp(18px, 2cqw ,24px); margin-bottom: 0.5em;     }
.verteiler_3spaltig .kasten p   { font-size: clamp(18px, 2cqw ,24px);    }
.verteiler_3spaltig .kasten .titel ,.verteiler_3spaltig .kasten h2     { font-size: clamp(22px, 3.5cqw, 38px ); margin-bottom: 0.45em;  line-height: 110%; font-weight: 600;}
.verteiler_3spaltig .kasten a    { color:#303030;text-decoration:none;}
.verteiler_3spaltig .kasten .untertitel { font-size: clamp(14px, 1.3em ,1.3em); margin-bottom: 0.0em;   line-height:1.0em;   font-weight: 400;}
.verteiler_3spaltig .abs_bild_gross { justify-content:inherit!important;     }

/* Pfeil-Balken beim Hover. Skaliert mit dem Kasten: .icon-xl (3em = 48px, Icon 72px) gilt als Groesse bei 1920px
   Containerbreite = --pfeil-schrift 2.5cqw, Versatz -10px entsprechend in em. Icon display:block, damit der Balken genau
   Icon-Hoehe (1.5em) hat. Hochfahren per Transition auf die Klasse .pfeil-an (setzt reddank.js bei mouseenter/-leave) statt
   slideToggle: kehrt beim schnellen Ueberfahren aus der aktuellen Hoehe um, nichts reiht sich auf. Tempo wie slideToggle
   (400 ms, jQuery-"swing"), bewusst auch bei prefers-reduced-motion, siehe Ausstellungs-Trailer oben. */
.verteiler_3spaltig .kasten .abb.verteiler  {position:relative; --pfeil-schrift:3.5cqw;}
.verteiler_3spaltig .kasten .abb.verteiler .pfeil {position:absolute;bottom:0;left:0;width:100%; background-color:#fff; height:0; overflow:hidden;
                                                   transition: height 400ms cubic-bezier(0.37, 0, 0.63, 1); }
.verteiler_3spaltig .kasten .abb.verteiler.pfeil-an .pfeil { height: calc(var(--pfeil-schrift) * 1.5); }
.verteiler_3spaltig .kasten .abb.verteiler.pfeil-an ~ h2 { color: #A81D25; } /* Titel (in allen Verteiler-Includes das h2 nach .abb) rot, solange der Pfeil oben ist */
.verteiler_3spaltig .kasten .abb.verteiler .icon {display:block; font-size:var(--pfeil-schrift); margin-left:-0.21em;}

.verteiler_3spaltig .abs_verteiler_zu_seite {
  display: flex;margin-bottom:-1px;
}
.verteiler_3spaltig .abs_text.mitOptKlapp { border-right: 1px solid #303030;
  border-bottom: 1px solid #303030;
  margin-bottom: -1px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2cqw 2cqw 2cqw 2cqw;}
  .verteiler_3spaltig .abs_text  {margin-top:0; padding-top:0;}


/*-------------*/
.verteiler_1zu2,.verteiler_2zu1{ width:auto; overflow:hidden;}
.verteiler_1zu2 .inner,
    .verteiler_2zu1 .inner { display: grid;   width:calc(100% + 0); margin: 0 -2cqw;}
.verteiler_1zu2 .inner .abs,
    .verteiler_2zu1 .inner .abs {  padding: 0cqw 2cqw 2cqw 2cqw;  display: flex;flex-direction: column; align-items: stretch;}
.verteiler_1zu2 .kasten,
    .verteiler_2zu1 .kasten { border-right: 1px solid #303030;border-bottom: 1px solid #303030;  padding: 2cqw 2cqw 2cqw 2cqw/* auf allen Seiten gleich */;  
            display: flex;flex-direction: column; align-items: stretch;margin-bottom:-1px;}
.verteiler_1zu2 .kasten a,
    .verteiler_2zu1 .kasten a    { color:#303030;text-decoration:none;}
/*-------------*/
.verteiler_1zu2 .inner {grid-template-columns:  1fr 2fr;  }
.verteiler_1zu2 .kasten:nth-child(2n) {  border-right: none;} 
/*-------------*/
.verteiler_2zu1 .inner {grid-template-columns:   2fr 1fr;  }
.verteiler_1zu2 .kasten:nth-child(2n) {  border-right: none;} 

/* ------------------------------------------------------------------------------------  Angebote 2-spaltig */
.verteiler_2spaltig {    }
.verteiler_2spaltig .inner {  display: grid; grid-template-columns: repeat(2, 1fr);gap: 2cqw;/*margin-top:2cqw;*/ padding-bottom:2cqw;}
.verteiler_2spaltig .abs {   /*display: flex;flex-direction: column; align-items: stretch;*/ }
/* ------------------------------------------------------------------------------------ Bild groß z.B. Sammlung */
.abs_bild_gross { justify-content:center; display: flex;  margin-top:2cqw; padding-bottom:5cqw;  border:none;    }
.abs_bild_gross .abb { width:50%; max-width:600px; }
 
/*.abs_bild_gross .abb.landscape { justify-content:center; display: flex;  margin-top:2cqw; padding-bottom:5cqw; border-bottom:1px solid #303030;    }*/
.abs_bild_gross .abb.landscape  { width:100%; max-width:1200px; text-align:center; }


.abs_bild_gross .abb img { width:100%; margin-bottom:1cqw; }
.abs_bild_gross .abb .bu {font-size: clamp(14px, 1.5cqw, 20px); text-align:left;}




/* ------------------------------------------------------------------------------------ Bild groß z.B. Sammlung */
 .abs_bild_gross100p {margin-top:2cqw;}
  .abb {margin-bottom:3cqw;}
  .abb img {margin-bottom:1cqw;}

/* ------------------------------------------------------------------------------------ Video (Absatztyp 31 "Video upload mp4")
   Aufbau je Video wie bei "Bild 100%": .abb > .imgwrapper > video, darunter .bu - Bildunterschrift und Abstaende
   kommen damit aus denselben Regeln wie bei den Bildern (.abb / .bu oben), das Video bekommt nur, was dort am img haengt.
   Das Video bleibt wie das img ein Inline-Element: der Abstand zur Bildunterschrift (Zeilenrest + 1cqw) ist so
   derselbe. aspect-ratio haelt den Platz im Format 16:9 frei, bis die Kopfdaten geladen sind (preload=metadata),
   danach gilt das echte Seitenverhaeltnis des Videos (Schluesselwort auto) - ohne spraenge die Seite von 2:1 um. */
.abs.absvideo { margin-top:2cqw; }
/* Das innere .inner des Absatzes: die .inner-Regeln der Verteiler-Bloecke (Grid, Ueberbreite, negative Raender) sind
   Nachfahren-Selektoren und traefen es sonst mit - das Video stuende dann in einer von drei Spalten. */
.abs.absvideo > .inner { display:block; width:auto; margin:0; padding:0; }
.absvideo video { width:100%; height:auto; aspect-ratio:auto 16 / 9; margin-bottom:1cqw; background-color:#000; }

/* ------------------------------------------------------------------------------------ Bild 100% mit Titel auf dem Bild
   Weisse Schrift auf roter Flaeche, links unten auf dem Bild (Grafiker-Vorlage 20.09.2026, Startseite "Museum").
   .bildtitel_flaeche ist ein eigener Container: darin ist 1cqw = 1% der Bildbreite. Alle Masse des Titels haengen
   daran - bewusst ohne clamp und ohne den 1440er-Deckel am Dateiende -, damit Schrift und Flaeche bei jeder Breite
   gleich auf dem Bild sitzen (gleicher Umbruch, gleiche Stelle im Motiv).
   Werte aus der Vorlage (Bild 1337px breit): Schrift 58px = 4.35cqw, Zeile 75px = 5.61cqw = 1.29em,
   Rand links 59px = 4.4cqw, Rand unten 61px = 4.6cqw (padding-bottom 4.7cqw, weil die rote Flaeche 0.1cqw unter
   die Zeilenbox reicht).
   Raster statt position:absolute: Bild und Titel liegen in derselben Rasterzelle, die Bildunterschrift in der
   Zeile darunter - der Titel haengt so an der Bildunterkante und nicht an der Unterkante der Bildunterschrift. */
.abs.abs_bild_titel { margin-top:2cqw; margin-bottom:2cqw; }
.abs_bild_titel .bildtitel_link { display:block; color:inherit; text-decoration:none; }
.abs_bild_titel a.bildtitel_link::before { content:none; } /* kein Link-Pfeil bei externem Ziel (a href^=https) */
.abs_bild_titel .bildtitel_flaeche { container-type:inline-size; display:grid; grid-template-columns:100%; }
.abs_bild_titel .abb { display:contents; }
.abs_bild_titel .imgwrapper { grid-area:1 / 1; }
.abs_bild_titel .imgwrapper img { display:block; width:100%; height:auto; margin:0; }
.abs_bild_titel .bu { grid-area:2 / 1; margin-top:1cqw; font-size: clamp(12px, 1.0cqw ,1.0em); line-height:130%; }
.abs_bild_titel .bildtitel { grid-area:1 / 1; align-self:end; justify-self:start; z-index:1; box-sizing:border-box;
                             max-width:100%; margin:0; padding:0 4.4cqw 4.7cqw 4.4cqw;
                             font-size:4.35cqw; line-height:1.29; font-weight:700; color:#fff; }
.abs_bild_titel .bildtitel:empty { display:none; }
/* Rote Flaeche je Zeile so breit wie ihr Text (clone: jede umbrochene Zeile bekommt ihren eigenen Innenabstand).
   Die Flaeche einer Inline-Zeile ist nur 1.22em hoch (Futura PT); der Innenabstand oben/unten (zusammen 0.09em)
   fuellt sie auf die Zeilenhoehe auf und laesst die Zeilen knapp ueberlappen - sonst scheint zwischen den Zeilen
   das Bild durch. Unten mehr als oben: die Schrift sitzt in der Vorlage etwas ueber der Mitte. */
.abs_bild_titel .bildtitel span { background-color:#A81D25; padding:0.025em 0.22em 0.065em 0.23em;
                                  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.abs_bild_titel a.bildtitel_link:focus-visible { outline:3px solid #A81D25; outline-offset:3px; }
/* Option "mitPfeil" (Klasse am Absatz, steht in der Vorlage layout_absaetze - Klasse dort entfernen = Pfeil aus):
   beim Hover faehrt vor der ersten Titelzeile ein weisser Pfeil von links ein, wie bei den Quicklinks im Startseiten-
   Header (#quicklinks a .pfeil: Breite 0 -> 1.2em, 0.2s, gleiche Kurve, Pfeil 1.2em, 0.1em nach oben versetzt).
   Hier ohne Zusatz-Markup als ::before der ersten Zeile; der Pfeil ist eine Maske in fester Groesse und wird durch die
   wachsende Breite freigegeben, nicht skaliert. Nur mit Link (a.bildtitel_link) - ohne URL gibt es keinen Pfeil.
   Hover-Zustand = Klasse .hover-an, die reddank.js nur bei echter Maus setzt (kein :hover, siehe Ausstellungs-Trailer:
   ein per :hover eingeblendetes Element kostet auf iPhone/iPad einen zweiten Tipp); Tastatur ueber :focus-visible.
   padding-right haelt 1.2em fuer den Pfeil frei und gibt sie beim Hover im selben Takt ab: die erste Zeile behaelt
   ihre Woerter, ein von selbst umbrechender Titel bleibt bis zwei Zeilen stabil. Ab drei selbst umbrochenen Zeilen
   kann beim Hover ein Wort eine Zeile hochrutschen (die unteren Zeilen bekommen die 1.2em mit) - solche Titel ueber
   die beiden Felder (Zeile 1 / Zeile 2) setzen. */
.abs_bild_titel.mitPfeil a.bildtitel_link .bildtitel { padding-right:calc(4.4cqw + 1.2em); transition:padding-right 0.2s cubic-bezier(.42,0,.58,1); }
.abs_bild_titel.mitPfeil a.bildtitel_link .bildtitel span:first-child::before {
    content:""; display:inline-block; width:0; height:1.2em; vertical-align:middle; margin-top:-0.3em; margin-bottom:-0.1em;
    background-color:currentColor;
    -webkit-mask:url(../icons/arrow-right.svg) left center / 1.2em 1.2em no-repeat; mask:url(../icons/arrow-right.svg) left center / 1.2em 1.2em no-repeat;
    transition:width 0.2s cubic-bezier(.42,0,.58,1); }
.abs_bild_titel.mitPfeil a.bildtitel_link.hover-an .bildtitel,
.abs_bild_titel.mitPfeil a.bildtitel_link:focus-visible .bildtitel { padding-right:4.4cqw; }
.abs_bild_titel.mitPfeil a.bildtitel_link.hover-an .bildtitel span:first-child::before,
.abs_bild_titel.mitPfeil a.bildtitel_link:focus-visible .bildtitel span:first-child::before { width:1.2em; }


.verteiler_3spaltig .abs_bild_gross { border-right: 1px solid #303030;border-bottom: 1px solid #303030;  padding: 2cqw 2cqw 2cqw 2cqw/* auf allen Seiten gleich */;  
            display: flex;flex-direction: column; align-items: stretch; margin-top:0;}
.verteiler_3spaltig .abs_bild_gross .abb {  width: 100%;  margin-bottom: 1.2em;   overflow: hidden; /*display: flex;*/ align-items: center; justify-content: center;}
.verteiler_3spaltig .abs_bild_gross .abb img { width: 100%; display: block;}

.verteiler_3spaltig .abs_bild_gross:nth-child(3n) {  border-right: none;} /* Letzte Spalte: Keine Border rechts */

.linieunten {border-bottom:1px solid #303030!important;padding-bottom:1cqw;margin-bottom:1cqw;}
.linieoben {border-top:1px solid #303030!important;}

/*--------------------------------------------
    Abweichungen
--------------------------------------------*/
/* bis 1920px */
@media (max-width: 1919.98px) {

}

 

@media (max-width: 1439.98px) {
    /* ------------------------------------------ Ausstellungsmodul, Bild rechts */
}


 @media (max-width: 999px) {
     .abs.abs_h1 {margin-top: 103px;}

 }


 @media (max-width: 768px) {
    /* ------------------------------------------ Header: feste Bildhöhe 420px + Bildausrichtung per Zusatz-CSS */
    /* Headerbild bleibt 420px hoch (statt 16/9). Pur-Seiten (ohne Bild) und der Sticky-Header bleiben unberührt. */
    #header:not(.pur):not(.sticky) { aspect-ratio: auto; height: 420px; max-height: 420px; }
    /* .header_bg ist height:100% -> wird 420px; cover beschneidet bei schmaler Breite horizontal. */
    #header:not(.sticky) .header_bg.header_bild_links  { background-position: top left;   } /* linksbündig, rechts abgeschnitten */
    #header:not(.sticky) .header_bg.header_bild_mitte  { background-position: top center; } /* mittig, links+rechts abgeschnitten */
    #header:not(.sticky) .header_bg.header_bild_rechts { background-position: top right;  } /* rechtsbündig, links abgeschnitten */

    /* ------------------------------------------ Kalender, Tablet (601-768px) nach der Grafiker-Vorlage (15.09.2026)
       768-px-Entwurf, Bild 1147 px breit -> cqw = Vorlage-px / 11,47. Fliesstext = Overline = Wochentag = Buttonschrift
       2.73cqw (21px), Titel 3.95cqw, Tagesziffer 15.5cqw, Kreise und Buttons 7.3cqw. Datumsspalte ein Drittel wie in der
       Vorlage - in die 24% des Desktops passen die grossen Ziffern plus Monat nicht. UI-Variablen nur im Kalender
       (auch Filter und Blaettern); --ui-pad-o/-u muessen mit, weil var() in :root schon aufgeloest ist. */
    .kalender { --ui-schrift: clamp(18px, 2.73cqw, 26px);
                --ui-hoehe:   clamp(43px, 7.24cqw, 7.24cqw);
                --ui-pad-o:   calc((var(--ui-hoehe) - 1.4 * var(--ui-schrift) - 2px) * 0.6);
                --ui-pad-u:   calc((var(--ui-hoehe) - 1.4 * var(--ui-schrift) - 2px) * 0.4); }
    .kalender .kalender-filter .filter-row {gap: 0.5em; flex-wrap: wrap; padding-right: 0;}
    .kalender .kalender-filter .filter-row .filter-item {flex: 1 1 100%; width:100%;}
    /* Zeile 22.5cqw hoch (Vorlage 172px): Wochentag ab 2.2cqw, Ziffernkasten (70% Zeilenhoehe) endet bei 19cqw, darunter 3.5cqw.
       Monat ab 21cqw: Vorlage 19.4cqw, unsere Bold-Ziffern ("20"/"30" bis ~18cqw) sind breiter als die der Vorlage. */
    .kalender .zeile .wrapper_kurzinfo { min-height: 22.5cqw; }
    .kalender .datum, .kalender .wrapper_langinfo .datum { flex: 0 0 33.3%; min-height: 22.5cqw; }
    .kalender .datum .wtag { top: 2.2cqw; font-size: clamp(16px, 2.73cqw, 2.73cqw); }
    .kalender .datum .tagmonat { top: 8.1cqw; height: 10.9cqw; }
    .kalender .datum .tagmonat .tag { font-size: clamp(35px, 15.5cqw, 15.5cqw); }
    .kalender .datum .tagmonat .monat { left: 21cqw; font-size: clamp(14px, 1.9cqw, 1.9cqw); }
    /* Overline-Oberkante 2.6cqw unter der Linie, Titel-Grundlinie 3.1cqw ueber der Linie, rechts Platz fuer den Kreis (7.3 + 2.7cqw) */
    .kalender .info .overline { margin: 2cqw 0 0 0; font-size: clamp(16px, 2.73cqw, 2.73cqw); }
    .kalender .info .titel { margin: 0 0 2.4cqw 0; font-size: clamp(18px, 3.95cqw, 3.95cqw); width: calc(100% - 10cqw); }
    /* Plus-/Minus-Kreis 7.3cqw wie die Buttons, Symbol 2.96cqw; Unterkante 1.2cqw unter der Titel-Grundlinie (Vorlage):
       bottom 1cqw + margin-bottom 1cqw aus der .mehr-Basisregel = 2cqw ueber der Zeilenunterkante */
    .kalender .info .mehr, .kalender .info .weniger { width: clamp(20px, 2.96cqw, 2.96cqw); height: clamp(20px, 2.96cqw, 2.96cqw);
                                                      padding: max(6px, calc(2.17cqw - 1px)); bottom: 1cqw; }
    .kalender .info .mehr::before, .kalender .info .weniger::before { width: 100%; height: 100%; }
    /* offener Eintrag: Titel-Grundlinie -> Bild 4.9cqw, Bild -> Text 4.9cqw, Text 127% mit einer Leerzeile zwischen
       Absaetzen, Text -> Buttons 6cqw, Buttons 1.5cqw nebeneinander / 2.8cqw untereinander (margin-top + margin-bottom;
       der Abstandhalter nimmt das margin-bottom der letzten Reihe zurueck) */
    .kalender .wrapper_langinfo .info .bildrechts { display:inherit; float:none!important; max-width:inherit; width: 100%!important; height:auto!important;
                                                    max-height:inherit!important;   margin: 1.8cqw 0 4.4cqw 0!important;}
    .kalender .wrapper_langinfo .info figure.bildrechts img { width:100%; max-height:none; }
    .kalender .wrapper_langinfo .info p { font-size: clamp(16px, 2.73cqw, 2.73cqw); line-height: 1.27; margin: 0 0 1.27em 0; }
    .kalender .wrapper_langinfo .info .btn { margin: 1.6cqw 1.5cqw 1.2cqw 0; }
    .kalender .wrapper_langinfo .info .abstand_unten { height: 4.3cqw; margin-top: -1.2cqw; }
    .kalender .btn.icon.icon-set-kreis.teilen-btn::before { width: clamp(16px, 2.96cqw, 2.96cqw); height: clamp(16px, 2.96cqw, 2.96cqw); }
    /* Pfeil-Buttons: Pfeil 3.3cqw breit (Vorlage 25px), 3.6cqw vom linken Rand, 1cqw zum Text, rechts 2.8cqw */
    .kalender .btn.icon.icon-arrow-left:not(.icon-set-kreis),
    .kalender .btn.icon.icon-arrow-right:not(.icon-set-kreis) { padding-right: clamp(16px, 2.8cqw, 2.8cqw); padding-left: clamp(36.8px, 7.9cqw, 7.9cqw); }
    .kalender .btn.icon.icon-arrow-left:not(.icon-set-kreis)::before,
    .kalender .btn.icon.icon-arrow-right:not(.icon-set-kreis)::before { left: clamp(10px, 3.6cqw, 3.6cqw); width: clamp(20.8px, 3.3cqw, 3.3cqw); }
    .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover,  .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible,
    .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover, .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible {
        padding-right: calc(clamp(16px, 2.8cqw, 2.8cqw) - 4px); padding-left: calc(clamp(36.8px, 7.9cqw, 7.9cqw) - 4px); }
    .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover::before,  .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible::before,
    .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover::before, .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible::before {
        left: calc(clamp(10px, 3.6cqw, 3.6cqw) - 5px); }

    .verteiler_1zu2 .inner {grid-template-columns: inherit;  }
    /* Footer-Schlusszeile mobil: Servicelinks oben, Copyright darunter. Das Grid ist hier schon auf
       eine Spalte gefallen, deshalb genuegt order auf dem ersten Absatz (Default der anderen ist 0).
       Die DOM-Reihenfolge bleibt Copyright-zuerst, damit ab 769px weiter links das Copyright und
       rechts die Links stehen. Bewusst auf #footer_inner begrenzt: verteiler_1zu2 wird auch im
       Inhalt verwendet (Seiten 2292 und 4088), dort darf nichts umsortiert werden. */
    #footer_inner .verteiler_1zu2 .inner > .abs:first-child { order: 2; }
    #footer_inner p  { }
    #footer_inner p a { white-space:nowrap; }
     #footer_inner .links_horizontal a {margin-left:0; margin-right:2cqw;}
    #footer_inner .text_rechts { text-align:left;line-height:250%!important;}
    #footer_inner .text_rechts p { line-height:200%!important;}
    #footer_inner h2 {  margin-bottom: 4cqw;}

    p, .abs ul:not([class]), .abs ol:not([class]) {  margin-bottom:4cqw;}

    /* Mobil groessere Zielflaeche fuer alle Bedienelemente. Der Wert stammt aus den alten
       Shop-/Kassen-Mobilregeln und gilt jetzt einheitlich - Buttons, Kreise, Dropdowns und
       Eingabefelder ziehen ueber die Variable mit. */
    :root { --ui-hoehe: 43px; }

   }

    /* Runde Blaettern-Buttons im H1-Absatz (Vor / Zurueck / Uebersicht, ohne Text).
       Festes Kreismass wie bei den Shop-Kreisen statt Padding plus Schriftgroesse; Kreis und Icon
       erreichen ihre Untergrenzen bei derselben Breite und schrumpfen deshalb im gleichen Verhaeltnis.
       width braucht !important gegen das width:auto!important von .btn.
       Hover/Fokus nur ueber den Rand, border-box haelt das Aussenmass. Die Spezifitaet ist hoeher als
       bei den allgemeinen Button-Regeln samt ihren Kopien im 1440er-Block. */
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis {
        box-sizing: border-box; padding: 0; margin: 0 0 0 0.7cqw; min-width: 0; min-height: 0;
        width: var(--ui-hoehe) !important; height: var(--ui-hoehe);
    }
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis::before {
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: clamp(28px, 3cqw, 3cqw); height: clamp(28px, 3cqw, 3cqw);
        background-position: center center; background-size: contain;
    }
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis:hover,
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis:focus-visible { padding: 0; border-width: 5px; border-color: #A81D25; }
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis:hover::before,
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis:focus-visible::before { left: 50%; }

@media (max-width: 600px) {
    #mainmenue #logo {width: 26cqw;}
    /* Mobil zeigen alle drei Stellen dasselbe Quer-Logo, gleich gross und an derselben Stelle.
       min-width zuruecksetzen, sonst greift der Boden der Desktop-Regel. */
    #logo img,
    #header_sticky #logo_sticky img { width: 30cqw; max-width:108px; min-width:0; margin:0.8cqw 0 0 0;  content: url('../img/KMK_Logo_quer.svg'); /* mini-Logo */}

    #header_top_right .info {display:none;}

    #header_top_right { gap: 4cqw!important; padding:2.2cqw!important;  }
    /* Icon-Leiste mobil naeher an den oberen Rand - alle drei Leisten, damit das Schliessen-Kreuz
       auch hier auf dem Burger liegt. Das Overlay braucht wieder den Meldungsbalken-Zuschlag. */
    #header #header_wrapper #header_top_right,
    #header_sticky #header_sticky_wrapper #header_top_right { top: 1cqw; }
    #mainmenue #header_top_right { top: calc(1cqw + var(--meldung-hoehe, 0px)); }
    #header_top_right .language{  font-size: clamp(12px, 4.5cqw, 4.5cqw)!important;   }
    #header_top_right .icon {  font-size: clamp(20px, 6.0cqw, 6.0cqw)!important; 
                             width: 3cqw;
  height: 3cqw;
  min-width: 35px;
  min-height: 35px;
   }

    /* Warenkorb mobil (Entwurf): nur die Tasche, rote Anzahl als Kreis unten rechts ueberlappend - ohne Pille und ohne Text */
    #header_top_right .warenkorb a { position: relative; border: 0; padding: 0; gap: 0; background: none; height: auto; min-height: 0; overflow: visible; }
    #header_top_right .warenkorb a:hover { background: none; color: inherit !important; }
    #header_top_right .warenkorb a:hover .icon-shop::before { filter: none; }
    #header_top_right .warenkorb a:hover .warenkorb-count { background: #A81D25; color: #fff; }
    #header_top_right .warenkorb .warenkorb-text { display: none; }
    #header_top_right .warenkorb .icon-shop { width: 3cqw; height: 3cqw; min-width: 35px; min-height: 35px; }
    #header_top_right .warenkorb .warenkorb-count { position: absolute; right: -32%; bottom: -22%;
        min-width: clamp(20px, 5.5cqw, 24px); height: clamp(20px, 5.5cqw, 24px); padding: 0 0.25em;
        font-size: clamp(12px, 3.2cqw, 14px); box-shadow: 0 0 0 2px #fff; }
    #header_top_right .warenkorb a:focus-visible { box-shadow: none; outline: 3px solid #A81D25; outline-offset: 4px; border-radius: 999px; }

    .abs.abs_zwischentitel { margin-top: 7cqw;}
.abs.abs_zwischentitel h2 {}


    #meldungsbalken {  text-align:left;}
    #meldungsbalken #meldungsbalkenText {padding-right: 20cqw;}
    #meldungsbalken.offen { /*height: 40cqw;*/ line-height:150%;  }
    #meldungsbalken #meldungsbalkenSchliessen {top: 9cqw;    right: 7cqw;  }
    #meldungsbalken #meldungsbalkenSchliessen::before {background-size: 9cqw 9cqw;}

   .abs_h1_mitbutton .nav-geschwister {float:left;margin-bottom:3cqw;margin-top:4cqw;} /*sammlung*/
   .abs_h1_mitbutton h1 {clear:both;} /*sammlung*/

   /* Kreisgroesse mobil kommt aus den Floors der Hauptregel (42px Kreis / 28px Icon), hier nur der groessere Abstand */
   .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis { margin:0 1.7cqw 0 0; }

  /* keine feste Hoehe - die Leiste richtet sich nach dem Logo */
 

    #header #header_wrapper #quicklinks {   left:50%; transform:translateX(-50%);   white-space:nowrap;  }

    .abs.abs_h1 {margin-top: 20cqw;}
    .abs.abs_h1 h1 {  margin-left: 0;margin-top: 25cqw;    margin-bottom: 5cqw;font-size:clamp(26px, 9cqw, 9cqw);}

     /* ------------------------------------------ Ausstellungsmodul, Bild rechts */
    .abs.abs_ausstellung {
        flex-direction: column;
        aspect-ratio: unset;
        width: 100%;
        max-height: none;
        min-height: auto; /* Wichtig: min-height aufheben */
       margin-bottom: 1.5cqw;
    padding-bottom: 1.5cqw;
    padding-top: 1.5cqw;
    }
    .abs.abs_ausstellung .spalte.sort1{
        border-right:none;
    }
    .abs.abs_ausstellung .spalte{
       margin:0!important;
       padding:0 0 1em 0!important;
    }
    

    .abs.abs_ausstellung .spalte.spaltebild { 
        white-space: wrap;
        order: 1; /* ZUERST anzeigen */
        width: 100%;
        padding: 1em 0 0 0;
        height: auto; /* Höhe nicht mehr fixiert */
    }
        .abs.abs_ausstellung .spalte.spaltebild.sort1{border-right:none;}
        .abs.abs_ausstellung .spalte.spaltebild.sort2 {border-left:none;}
    .abs.abs_ausstellung .spalte.spaltetext {
        order: 2; /* DANACH anzeigen */
        border: none;
        width: 100%;
        padding: 0 0 0.5em 0;
        height: auto; /* Höhe nicht mehr fixiert */
        overflow-y: visible; /* Kein Scroll */
        justify-content: flex-start; /* Text oben statt unten */
    }
    
    .abs.abs_ausstellung .spalte.spaltetext .unten {
        margin-left: 0 !important; /* sort2 margin aufheben */
    }
    
    .abs.abs_ausstellung .abb img {
        height: inherit;
        max-height:inherit;
    }
    
    .abs.abs_ausstellung .abb {
        margin-bottom: 1em;
        margin-top: 1em;
        max-height:inherit;
    }
    
   .abs.abs_ausstellung .overline {
     font-size: clamp(18px, 1.4cqw, 26px);
   margin-top: 0; padding:0; 
    letter-spacing: inherit;
}

.abs.abs_ausstellung h3 {
       font-size: clamp(28px, 2.8cqw, 52px);
 margin-top: 0.3em;  padding:0; 
    letter-spacing: inherit; 
    line-height: 1.13em;
}

.abs.abs_ausstellung h4 {
       font-size: clamp(18px, 1.4cqw, 26px);
 margin-top: 0.5em;  padding:0; 
 }

   
/* ------------------------------------------------------------------------------------  Hauptmenue
   Handyversion nach der Grafiker-Vorlage (20.09.2026): 360 px breiter Entwurf, Bild 759 px breit -> cqw = Vorlage-px / 7,59
   (#mainmenue liegt ausserhalb der Container, cqw ist hier 1 % der Fensterbreite). Linksbuendig auf der Logo-Kante (4cqw)
   statt zentriert - der Wrapper-Rand zieht mit, damit Fusslinie und Fusslinks auf derselben Kante stehen.
   Oberpunkte 34 px = 9.44cqw fett, Grundlinie zu Grundlinie 14.9cqw. Unterpunkte 22 px = 6.11cqw in Book (400) - sie erbten
   bisher die 700 von #mainmenu_content -, laufen nebeneinander und brechen am Rand um, Zeilenabstand 12.6cqw. Dafuer
   inline-block statt Flex: jQuery slideDown stellt das ul auf display:block. Lange Unterpunkte brechen in sich um
   (kein nowrap mehr). Die Zeilenhoehen 1.1 / 1.06 legen die Unterkante des Links - also die Linie - auf den Abstand der
   Vorlage unter die Grundlinie (Futura PT: Grundlinie bei 0.86em). */
   #mainmenue #mainmenue_wrapper { margin-left:4cqw; margin-right:4cqw; }
   #mainmenue #mainmenu_content { align-items:stretch; }
   #mainmenue #mainmenu_mitte { display:none;    }
   #mainmenue #mainmenu_mobile { display:block; font-size:clamp(24px, 9.44cqw, 9.44cqw); line-height:1.1; }

   #mainmenue #mainmenu_mobile ul, #mainmenue #mainmenu_mobile ul li { margin:0; padding:0; list-style:none; }
   #mainmenue #mainmenu_mobile > ul > li { padding:1.84cqw 0; }
   /* Untermenue: oben 1.6cqw, unten 3.25cqw - der naechste Oberpunkt steht so 19.9cqw unter der letzten Unterpunkt-Zeile */
   #mainmenue #mainmenu_mobile ul li ul { display:none; padding:1.6cqw 0 3.25cqw 0; font-size:clamp(18px, 6.11cqw, 6.11cqw); font-weight:400; }
   #mainmenue #mainmenu_mobile ul li ul.open { display:block; }
   /* Abstand nebeneinander: 4.6cqw Rand + das Leerzeichen zwischen den li (zusammen ~6cqw wie in der Vorlage) */
   #mainmenue #mainmenu_mobile ul li ul li { display:inline-block; vertical-align:top; max-width:100%; margin-right:4.6cqw; padding:2.86cqw 0; }
   #mainmenue #mainmenu_mobile a { color:#fff; text-decoration:none; display:inline-block; border-bottom:max(3px, 0.9cqw) solid #A81D25; }
   #mainmenue #mainmenu_mobile ul li ul li a { line-height:1.06; border-bottom-width:max(1px, 0.4cqw); }
   /* offener Oberpunkt (.aktiv setzt js/reddank.js) traegt die Linie wie am Desktop */
   #mainmenue #mainmenu_mobile li a:hover, #mainmenue #mainmenu_mobile .mmzeile a.aktiv { border-bottom-color:#fff; }



/* ------------------------------------------------------------------------------------  Kalender
   Handyversion nach der Grafiker-Vorlage (15.09.2026): 360 px breiter Entwurf, Fliesstext 18 px = 5cqw. Alle Masse
   in cqw (1 % der Inhaltsbreite), Boeden wie bisher. Umrechnung: Vorlage in px bei 537 px Bildbreite / 5,37 = cqw.
   Buttons, Plus-/Minus-Kreis und Teilen-Kreis sind 14cqw hoch (Vorlage 75 px), Buttonschrift = Fliesstext. Die
   UI-Variablen gelten hier nur innerhalb des Kalenders (auch Filter und Blaettern); alle anderen Bedienelemente
   behalten die 43 px aus dem 768er-Block. --ui-pad-o/-u muessen mit neu gesetzt werden, weil var() in :root
   schon aufgeloest ist. */
    .kalender { --ui-schrift: clamp(18px, 5cqw, 26px);
                --ui-hoehe:   clamp(43px, 14cqw, 14cqw);
                --ui-pad-o:   calc((var(--ui-hoehe) - 1.4 * var(--ui-schrift) - 2px) * 0.6);
                --ui-pad-u:   calc((var(--ui-hoehe) - 1.4 * var(--ui-schrift) - 2px) * 0.4); }
    /* Zeile: Linie -> Wochentag 5.2cqw, Titel -> Linie 4.8cqw (Rest kommt aus den Zeilenkaesten der Schrift) */
    .kalender .zeile   { padding-top: 3.9cqw; padding-bottom: 3.2cqw; margin-bottom: 0; }
    .kalender .zeile .wrapper_kurzinfo {    position: relative; min-height:inherit; width: auto;  height:auto; display: inherit; flex-wrap: inherit; align-items: inherit; }
    .kalender .zeile .wrapper_langinfo   { height:auto;  }
    .kalender .datum {  border-right:none;  min-height:inherit; flex: none;  width:100%; display: inherit; align-items: inherit; justify-content: inherit;  height:auto;}
    .kalender .wrapper_kurzinfo .info { position: relative;  clear:both; padding:0; }
    .kalender .wrapper_langinfo .info { position: relative;  padding:0; }
    .kalender .wrapper_langinfo .datum {display:none; /*leerzeile links kann weg*/}
    /* Wochentag 5cqw (Vorlage 27 px), Tag 20cqw (Ziffern 14.2cqw hoch), Monat 3.5cqw auf der Ziffern-Grundlinie.
       Monat ab 29cqw statt 26cqw wie in der Vorlage: unsere Bold-Ziffern sind breiter als die der Vorlage ("20"/"30"
       reichen bis ~23cqw), der Abstand zur Ziffer bleibt so wie dort (~6cqw). */
    .kalender .datum .wtag {  position:relative; left:0; top:inherit; padding-top:0; margin-bottom:0; font-size: clamp(16px, 5cqw, 5cqw); }
    .kalender .datum .tagmonat { position: relative; top:0; left:0; margin-top: 4.2cqw; height: 14cqw; bottom: inherit; }
    .kalender .datum .tagmonat .tag {  position:absolute;   left:0; bottom:unset; margin:unset; font-size: clamp(35px, 20cqw, 20cqw); }
    .kalender .datum .tagmonat .monat {  position:absolute; left: 29cqw; bottom: 0; margin:unset; font-size: clamp(14px, 3.5cqw, 3.5cqw); }
    /* Overline und Titel wie Fliesstext bzw. 5.9cqw; rechts bleibt Platz fuer den Kreis (14cqw + 3cqw) */
    .kalender .info .overline { margin: 4.3cqw 0 2.6cqw 0; font-size: clamp(16px, 5cqw, 5cqw); width: calc(100% - 17cqw); }
    .kalender .info .titel { margin: 0; font-size: clamp(18px, 5.9cqw, 5.9cqw); width: calc(100% - 17cqw); }
    /* Plus-/Minus-Kreis 14cqw wie die Buttons, Symbol 5.6cqw: Inhaltskasten = Symbol (statt 1.5em aus .icon), der Rest
       ist Padding (14cqw - 5.6cqw - 2px Rand) / 2. Sitzt wie in der Vorlage knapp ueber der Titel-Grundlinie. */
    .kalender .info .mehr, .kalender .info .weniger { width: clamp(20px, 5.6cqw, 5.6cqw); height: clamp(20px, 5.6cqw, 5.6cqw);
                                                      padding: max(6px, calc(4.2cqw - 1px)); bottom: 1cqw; }
    .kalender .info .mehr::before, .kalender .info .weniger::before { width: 100%; height: 100%; }
    /* offener Eintrag: Titel -> Bild 8cqw, Bild -> Text 8.2cqw, Fliesstext 5cqw mit 127 % Zeilenhoehe und einer
       Leerzeile (6.4cqw) zwischen Absaetzen, Buttons mit 3cqw Spalten- und 5.6cqw Reihenabstand */
    .kalender .wrapper_langinfo .info .bildrechts { margin: 6.8cqw 0 7.4cqw 0 !important; }
    .kalender .wrapper_langinfo .info p { font-size: clamp(16px, 5cqw, 5cqw); line-height: 1.27; margin: 0 0 6.4cqw 0; }
    .kalender .wrapper_langinfo .info .btn { margin: 0 3cqw 5.6cqw 0; }
    /* Der Reihenabstand haengt als margin-bottom an jedem Button; unter der letzten Reihe nimmt ihn der Abstandhalter
       zurueck (negativer Rand), so dass Buttons -> Linie 2.4 + 3.2 (Zeilen-Padding) = 5.6cqw bleiben. */
    .kalender .wrapper_langinfo .info .abstand_unten { height: 2.4cqw; margin-top: -5.6cqw; }
    .kalender .btn.icon.icon-set-kreis.teilen-btn::before { width: clamp(16px, 5.6cqw, 5.6cqw); height: clamp(16px, 5.6cqw, 5.6cqw); }
    /* Pfeil-Buttons: Pfeil 6cqw breit (Vorlage 33 px), 6.3cqw vom linken Rand, 2.2cqw zum Text, rechts 6cqw */
    .kalender .btn.icon.icon-arrow-left:not(.icon-set-kreis),
    .kalender .btn.icon.icon-arrow-right:not(.icon-set-kreis) { padding-right: clamp(16px, 6cqw, 6cqw); padding-left: clamp(36.8px, 14.5cqw, 14.5cqw); }
    .kalender .btn.icon.icon-arrow-left:not(.icon-set-kreis)::before,
    .kalender .btn.icon.icon-arrow-right:not(.icon-set-kreis)::before { left: clamp(10px, 6.3cqw, 6.3cqw); width: clamp(20.8px, 6cqw, 6cqw); }
    .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover,  .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible,
    .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover, .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible {
        padding-right: calc(clamp(16px, 6cqw, 6cqw) - 4px); padding-left: calc(clamp(36.8px, 14.5cqw, 14.5cqw) - 4px); }
    .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover::before,  .kalender .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible::before,
    .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover::before, .kalender .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible::before {
        left: calc(clamp(10px, 6.3cqw, 6.3cqw) - 5px); }
    .kalender-einzel .zeile-haupt .wrapper_kurzinfo .info .bildrechts {max-width:inherit;max-height:inherit; width:100%;margin:3cqw 0;}
    .kalender-einzel .zeile-haupt .wrapper_kurzinfo .info figure.bildrechts img { width:100%; max-height:none; }

/* ------------------------------------------------------------------------------------  Zeitstrahl
   Handyversion nach der Grafiker-Vorlage (18.09.2026): 360 px breiter Entwurf, Bild 505 px breit -> cqw = Vorlage-px / 5,05.
   Fliesstext 18 px = 5cqw mit 127 % Zeilenhoehe (wie der Kalender), kleine Schrift (Label, Bildunterschrift) 3.5cqw,
   Zwischenueberschrift 5.7cqw, Jahreszahl 9.35cqw (= H1 der Vorlage). Einspaltig, ohne rote Linie: die Jahreszahl steht
   ueber dem Inhalt. Zeitraum-Navigation als Dropdown - Label, Button und .zj-liste baut js/reddank.js aus der Linkzeile
   (.hat-auswahl); ohne JS bleibt die Linkzeile stehen. */
    /* Zeitraum-Dropdown: Linie -> Label 4.6cqw, Label -> Pille 1.6cqw, Pille -> Linie 10.9cqw.
       Die Pille selbst folgt nicht der Vorlage (dort 13.7cqw = 50 px), sondern den UI-Variablen wie alle Bedienelemente:
       Hoehe --ui-hoehe (mobil 43 px), Schrift --ui-schrift, 1 px Rand und Hover/Fokus wie .btn.btn-light (Rand 5 px rot,
       Text und Chevron rot; Padding und Chevron ruecken 4 px nach, damit nichts springt). Waagerecht wie die
       Kalender-Filter: Chevron bei 1.2em, Text ab 2.8em. Chevron als Maske, damit er die Textfarbe annimmt. */
    .zeistrahljahre.hat-auswahl { display: block; position: relative; padding: 4.6cqw 0 10.9cqw 0; border-bottom: 1px solid #303030; }
    .zeistrahljahre.hat-auswahl .zj-label { display: block; font-size: clamp(12px, 3.5cqw, 3.5cqw); line-height: 130%; margin-bottom: 1.6cqw; }
    .zeistrahljahre.hat-auswahl .zj-toggle { display: block; position: relative; box-sizing: border-box; width: 100%; height: var(--ui-hoehe);
                                             margin: 0; padding: 0 1.5em 0 2.8em; border: 1px solid #303030; border-radius: 999px; background: #fff;
                                             font-family: inherit; font-size: var(--ui-schrift); line-height: normal; color: #303030;
                                             text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
    .zeistrahljahre.hat-auswahl .zj-toggle::before { content: ""; position: absolute; top: 0; left: 1.2em; width: 0.8em; height: 100%;
                                             background-color: currentColor;
                                             -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
                                             mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
                                             transition: transform 200ms ease; }
    .zeistrahljahre.hat-auswahl.ist-offen .zj-toggle::before { transform: rotate(180deg); }
    .zeistrahljahre.hat-auswahl .zj-toggle:focus { outline: none; }
    .zeistrahljahre.hat-auswahl .zj-toggle:hover,
    .zeistrahljahre.hat-auswahl .zj-toggle:focus-visible { border-width: 5px; border-color: #A81D25; color: #A81D25;
                                             padding-left: calc(2.8em - 4px); padding-right: calc(1.5em - 4px); }
    .zeistrahljahre.hat-auswahl .zj-toggle:hover::before,
    .zeistrahljahre.hat-auswahl .zj-toggle:focus-visible::before { left: calc(1.2em - 4px); }
    /* Liste: klappt 1.5cqw unter der Pille ueber den Inhalt (top rechnet das Padding unter der Pille zurueck).
       Rand und Rundung wie die Liste des Unterseiten-Dropdowns. Zeilen: Schrift --ui-schrift + 2 x 12 px = 47 px
       Zielflaeche, Text buendig mit dem Text der Pille. */
    .zeistrahljahre.hat-auswahl .zj-liste { display: none; position: absolute; left: 0; right: 0; top: calc(100% - 9.4cqw); z-index: 1000;
                                            padding: 0.5em 0; background: #fff; border: 1px solid #303030; border-radius: 1.5em; overflow: hidden;
                                            font-size: var(--ui-schrift); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
    .zeistrahljahre.hat-auswahl.ist-offen .zj-liste { display: block; }
    .zeistrahljahre.hat-auswahl > .zj-liste > div { font-size: var(--ui-schrift); padding: 0; margin: 0; border: 0; text-align: left; }
    .zeistrahljahre.hat-auswahl .zj-liste a { display: block; padding: 12px 1.5em 12px 2.8em; color: #303030; line-height: 130%; }
    .zeistrahljahre.hat-auswahl .zj-liste a.aktiv { color: #A81D25; font-weight: 600; text-decoration: none; }
    .zeistrahljahre.hat-auswahl .zj-liste a:hover,
    .zeistrahljahre.hat-auswahl .zj-liste a:focus-visible { outline: none; background: #f0ece6; color: #A81D25; }
    /* offene Liste ueber die folgenden Bloecke heben (wie beim Unterseiten-Dropdown) */
    .abs:has(.zeistrahljahre.ist-offen), .block:has(.zeistrahljahre.ist-offen) { position: relative; z-index: 1000; }

    /* Rote Zeitraum-Ueberschrift unter dem Dropdown: linksbuendig, Titelzeile 6cqw, die Jahreszeile darueber 10 % kleiner (Vorlage 5.4cqw) */
    .block:has(.zeistrahljahre) .abs.abs_h2 { margin: 6.1cqw 0 0 0; }
    .block:has(.zeistrahljahre) .abs.abs_h2.zentriert { text-align: left; }
    .block:has(.zeistrahljahre) .abs.abs_h2 h2 { font-size: clamp(20px, 6.1cqw, 6.1cqw); margin-bottom: 0; }
    .block:has(.zeistrahljahre) .abs.abs_h2 h2::first-line { font-size: 0.9em; }

    /* Jahresblock einspaltig: Jahres-Spalte zuerst (bei inhlinks ist das .sort2, bei inhrechts .sort1), keine rote Linie.
       Ab dem zweiten Jahr trennt eine Linie wie zwischen den Abschnitten. */
    .block.zeitstrahl { flex-direction: column; min-height: 0; }
    .block.zeitstrahl + .block.zeitstrahl { border-top: 1px solid #303030; }
    .block.zeitstrahl .spalte { width: 100%; }
    .block.zeitstrahl.inhlinks .spalte.sort1 { order: 2; border-right: none; }
    .block.zeitstrahl.inhlinks .spalte.sort2 { order: 1; }
    .block.zeitstrahl.inhrechts .spalte.sort1 { border-right: none; }
    .block.zeitstrahl.inhlinks .spalte .inner, .block.zeitstrahl.inhrechts .spalte .inner { margin-left: 0; margin-right: 0; }
    /* Jahreszahl: steht fest im Fluss. Das Sticky-Skript laesst einspaltige Reihen aus; !important raeumt Reste eines
       aelteren reddank.js (position:fixed per style-Attribut) und das float:right im Markup der rechten Bloecke ab. */
    .block.zeitstrahl .spalte .sticky { position: static !important; width: auto !important; }
    .block.zeitstrahl.inhlinks .spalte .jahr, .block.zeitstrahl.inhrechts .spalte .jahr {
                                            display: block; position: static; top: auto; float: none !important; margin: 6.9cqw 0 6.3cqw 0;
                                            font-size: clamp(26px, 9.35cqw, 9.35cqw); line-height: 100%; }
    .block.zeitstrahl.inhlinks .spalte .jahr::before, .block.zeitstrahl.inhrechts .spalte .jahr::after { display: none; }

    /* Abschnitte: Inhalt -> Linie 8.6cqw, Linie -> Zwischenueberschrift 6.5cqw, Ueberschrift -> Text 2.7cqw (-> Bild 4.1cqw),
       Text 5cqw / 127 %. Die Raender fallen zusammen (es gilt der groesste): Absaetze ohne Linie (z. B. aufgeklappte
       Klapptexte) stehen 4.85cqw auseinander, vor einer Linie - Absatz mit h3 oder .linieoben - sind es 8.6cqw; dasselbe
       unter dem letzten Absatz bis zur Linie des naechsten Jahres (4.85 + 3.75 Padding, .inner ist Flex-Kind und haelt es). */
    .block.zeitstrahl .spalte .inner { padding-bottom: 3.75cqw; }
    .block.zeitstrahl .spalte .abs_bild_text { margin-bottom: 4.85cqw; }
    .block.zeitstrahl .spalte .abs_bild_text:has(> h3):not(:first-child),
    .block.zeitstrahl .spalte .abs_bild_text.linieoben { margin-top: 8.6cqw; }
    .block.zeitstrahl .spalte .abs_bild_text h3 { font-size: clamp(16px, 5.7cqw, 5.7cqw); margin-bottom: 2.7cqw; padding-top: 6.5cqw; }
    .block.zeitstrahl .spalte .abs_bild_text:first-child h3 { padding-top: 0; }
    .block.zeitstrahl .abs_bild_text.linieoben { padding-top: 6.5cqw; }
    .block.zeitstrahl .spalte p,
    .block.zeitstrahl .spalte .abs ul:not([class]), .block.zeitstrahl .spalte .abs ol:not([class]) { font-size: clamp(16px, 5cqw, 5cqw); line-height: 1.27; }
    /* Bild hoechstens 51cqw hoch (Vorlage: Hochformat 40 x 51cqw). Der Bildkasten schrumpft auf das Bild, damit die Lupe im
       Bild sitzt und die Bildunterschrift an der Bildkante umbricht (width:0 + min-width:100% = sie macht den Kasten nicht
       breiter). Mindestens 40cqw, sonst wird die Unterschrift unter sehr schmalen Bildern zur Wortspalte. */
    .block.zeitstrahl .spalte .abs_bild_text .abb { width: fit-content; min-width: 40cqw; max-width: 100%; margin: 4.1cqw 0 5.3cqw 0; }
    .block.zeitstrahl .spalte .abs_bild_text .abb.zoom .imgwrapper { width: auto; max-width: 100%; }
    .block.zeitstrahl .spalte .abs_bild_text img { max-height: 51cqw; }
    .block.zeitstrahl .spalte .abs_bild_text .bu { box-sizing: border-box; width: 0; min-width: 100%; margin-top: 2.3cqw;
                                                   font-size: clamp(12px, 3.5cqw, 3.5cqw); line-height: 135%; }
    /* Lupe: 2.8cqw vom rechten und unteren Bildrand (Vorlage 10 px), Kreis bleibt bei seinen 50 px */
    .block.zeitstrahl .abb.zoom .imgwrapper::after { right: 2.8cqw; bottom: 2.8cqw; }
    /* Mehr lesen: Schrift = Fliesstext, Plus 7.45cqw (sichtbares Kreuz 5.35cqw) und um seinen Leerrand nach links gerueckt,
       damit das Kreuz buendig mit dem Text steht; Text -> Plus 4cqw (= Absatzabstand), Plus -> Text 1.5cqw */
    .block.zeitstrahl .mehr, .block.zeitstrahl .weniger { --klapp-icon: clamp(24px, 7.45cqw, 7.45cqw); font-size: clamp(16px, 5cqw, 5cqw);
                                                          gap: 1.5cqw; margin-top: 4cqw; margin-bottom: 4cqw; }
    .block.zeitstrahl .mehr::before, .block.zeitstrahl .weniger::before { margin-left: calc(var(--klapp-icon) * -0.14); }

/* ------------------------------------------------------------------------------------  Zitat */
    .zitat {  padding: 1.5em 0;}
    /*.zitatflaeche {  padding: 8em 0 7em 0;}*/
    .zitat .zitat-wrapper { margin:0em; padding: 0.5cqw 0% 0% 0; }
    .zitat .zitat-wrapper::before {    width: 5.8cqw; height: 5.8cqw; 
                                margin-bottom:1em; margin-left: 0em; }
    .zitat .zitat-wrapper .zitatinhalt {  font-size: clamp(20px, 2.0em,2.0em ); font-style: italic; }
    .zitat .zitat-wrapper .zitierende {   font-size: clamp(18px, 1.5cqw ,26px);    margin-top: 0.6em; }


/* ------------------------------------------------------------------------------------  Angebote 3-spaltig */
    /* Mobil 3.6cqw Innenabstand statt 2cqw, nur hier aendern (--kasten-pad). Das negative margin von .inner zieht um denselben Wert
       nach aussen, damit Bild und Text der aeusseren Kaesten buendig mit der Linie bleiben. Die anderen Kastenarten im selben Raster ziehen mit. */
    .verteiler_3spaltig {   width:auto;  height:auto; overflow:hidden; --kasten-pad:3.6cqw;}
    .verteiler_3spaltig .inner {   display: grid; grid-template-columns: repeat(2, 1fr);
                             width:calc(100% + 2 * var(--kasten-pad)); margin: 0 calc(-1 * var(--kasten-pad));
                             /* Negatives margin gleicht das erste/letzte Padding aus, Überlappung nach Außen durch overflow-x:hidden in .block  */  }
    .verteiler_3spaltig .kasten { border-right: 1px solid #303030;border-bottom: 1px solid #303030; margin-bottom:-1px; padding: var(--kasten-pad);   }
    .verteiler_3spaltig .abs_bild_gross,
    .verteiler_3spaltig .abs_text.mitOptKlapp { padding: var(--kasten-pad); }
    .verteiler_3spaltig .kasten .abb {  }
    .verteiler_3spaltig .kasten .abb img { }
    .verteiler_3spaltig .kasten .abb.verteiler { --pfeil-schrift:5.75cqw; } /* 2 statt 3 Spalten: Kasten 1,5-mal so breit, Pfeil im selben Verhaeltnis */

    .verteiler_3spaltig .kasten:nth-child(3n) {  border-right: 1px solid #303030;} /* Letzte Spalte: Keine Border rechts */
    .verteiler_3spaltig .kasten:nth-child(2n) {  border-right: none;} /* Letzte Spalte: Keine Border rechts */

    /*.verteiler_3spaltig .kasten .overline   { font-size: clamp(16px, 1.3em ,1.3em); }*/
    /*.verteiler_3spaltig .kasten .titel      { font-size: clamp(22px, 3.5cqw, 38px ); }*/
    .verteiler_3spaltig .kasten .untertitel { font-size: clamp(16px, 1.3em ,1.3em); }

/* ------------------------------------------------------------------------------------  Footer */
    #footer_inner   {  color:#fff;}
    #footer_inner .abs50p {width:100%; float:inherit; }
    #footer_inner .abs100p {width:100%; clear:both; }
    #footer_inner .zwischentitel {margin-bottom:20px;  margin-top: 30px;color:#fff;/*font-size: clamp(15px, 2.0em, 20px); letter-spacing: 3px; */ text-transform: uppercase;}
    #footer_inner p {  margin-bottom:1.4em;line-height:1.3em; }
    #footer_inner h4 {font-size: clamp(22px, 2em, 2em); margin: 2.4em 0 2.4em  0;line-height:1.3em; }
    #footer_inner hr {margin-bottom:10px;}
    #footer_inner .text-right { text-align:left!important;}
    #footer_inner .infolinks   {margin-bottom:50px;}

    /* Footer-Verteiler am Handy untereinander, 21.09.2026: Der 3-Spalter faellt hier sonst auf zwei Spalten
       (Regel weiter oben, fuer die Bild-Kaesten im Inhalt gedacht). Im Footer bleiben davon rund 150px
       Textbreite uebrig - "Erster Do im Monat 11 - 20 Uhr" und "museum@kollwitz.de" passen nicht mehr hinein,
       schieben ueber 1fr hinaus und werden vom overflow:hidden des Blocks abgeschnitten. Einspaltig wie die
       beiden anderen Footer-Verteiler: verteiler_2spaltig (weiter unten, flex-direction:column) und
       verteiler_1zu2 (schon ab 768px). Bewusst auf #footer_inner begrenzt - im Inhalt bleiben es zwei Spalten. */
    #footer_inner .verteiler_3spaltig > .inner { grid-template-columns: 1fr; }


    /*----------------------------------------------.abs.abs_zweispaltig (z. B. Biografie)
       Einspaltig wie der Zeitstrahl am Handy (19.09.2026): Ueberschrift -> Bild -> Bildunterschrift -> Text. Die fruehere Regel
       zielte auf ein .inner, das es in diesem Absatz nicht gibt - die Spalten blieben nebeneinander. Die Textspalte loest
       sich per display:contents auf, damit das Bild zwischen ihre Ueberschrift und den Text rutschen kann (order); im
       Quelltext bleibt die Reihenfolge Ueberschrift, Text, Bild. Masse wie im Block "Zeitstrahl": Linie -> Ueberschrift
       6.5cqw, Ueberschrift -> Bild 4.1cqw, Bild hoechstens 51cqw hoch mit der Lupe im Bild, Bildunterschrift 3.5cqw an der
       Bildkante, Bildunterschrift -> Text 5.3cqw, Text 5cqw / 127 %, Text -> Linie 8.6cqw (4 Absatzabstand + 4.6 Padding;
       Flex-Kinder: die Raender fallen hier nicht zusammen). Das Bild klebt nicht (js/reddank.js laesst einspaltige
       Reihen aus; position:static raeumt ein .sticky-an ab, das vom Drehen oder aus einem aelteren Skript stammt). */
    .abs.abs_zweispaltig { flex-direction: column; align-items: stretch; padding-top: 6.5cqw; padding-bottom: 4.6cqw; margin-bottom: 0; }
    .abs.abs_zweispaltig .spalte, .abs.abs_zweispaltig .spalte.sort1 { width: 100%; padding-right: 0; padding-bottom: 0; }
    .abs.abs_zweispaltig .spalte.spaltetext { display: contents; }
    .abs.abs_zweispaltig .spalte.spaltetext > * { order: 3; }
    .abs.abs_zweispaltig .spalte.spaltetext > h2:first-child { order: 1; margin-bottom: 4.1cqw; }
    .abs.abs_zweispaltig .spalte:not(.spaltetext) { order: 2; }
    .abs.abs_zweispaltig .abb { width: fit-content; min-width: 40cqw; max-width: 100%; margin: 0 0 5.3cqw 0; }
    .abs.abs_zweispaltig .abb.sticky-an { position: static; }
    .abs.abs_zweispaltig .abb.zoom .imgwrapper { width: auto; max-width: 100%; }
    .abs.abs_zweispaltig .abb img { width: auto; max-width: 100%; max-height: 51cqw; margin-bottom: 0; }
    .abs.abs_zweispaltig .abb .bu { box-sizing: border-box; width: 0; min-width: 100%; margin-top: 2.3cqw;
                                    font-size: clamp(12px, 3.5cqw, 3.5cqw); line-height: 135%; }
    .abs.abs_zweispaltig .abb.zoom .imgwrapper::after { right: 2.8cqw; bottom: 2.8cqw; }
    .abs.abs_zweispaltig p,
    .abs.abs_zweispaltig ul:not([class]), .abs.abs_zweispaltig ol:not([class]) { font-size: clamp(16px, 5cqw, 5cqw); line-height: 1.27; margin-bottom: 4cqw; }

    /* ------------------------------------------------------------------------------------ Bild groß z.B. Sammlung */
.abs_bild_gross {   }
.abs_bild_gross .abb { width:100%; max-width:100%; }
.abs_bild_gross .abb img {  }
.abs_bild_gross .abb .bu {/*font-size: clamp(14px, 1.5cqw, 20px);*/}


    /* ------------------------------------------------------------------------------------  Angebote 2-spaltig */
    .verteiler_2spaltig .inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2cqw;
  margin-top: 2cqw;
  padding-bottom: 2cqw;
}

.verteiler_2spaltig .abs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Mobile: Spalten untereinander */
@media (max-width: 600px) {
  .verteiler_2spaltig .inner {
    display: flex;
    flex-direction: column; /* übereinander */
  }
  .verteiler_2spaltig .abs {
    width: 100%;
    padding-right: 0;
  }
}
}


@media (max-width: 340px) {

}


.block.standard.removeLinieUnten,
.block.verteiler_3spaltig.removeLinieUnten,
.block.zeitstrahl.removeLinieUnten,
.block.verteiler_2spaltig.removeLinieUnten {border-bottom:none!important;}






.nav-geschwister-dropdown { position: relative; display: inline-block; margin-right: 20px; margin-bottom: 3.5cqw;  margin-top: 3.5cqw; }

/* Im offenen Zustand: Container über nachfolgende Inhalte heben */
.nav-geschwister-dropdown.is-open { z-index: 1000; }

/* Damit der z-index auch greift, wenn ein .abs/.block Elternelement
   im Reddank-Layout einen eigenen Stacking-Context aufstellt: */
.abs:has(.nav-geschwister-dropdown.is-open),
.block:has(.nav-geschwister-dropdown.is-open) {
    position: relative;
    z-index: 1000;
}

/* Toggle: nutzt .btn .btn-light .icon aus reddank_homepage.css. */
.nav-geschwister-dropdown .nav-dropdown-toggle {
    background: #fff;
    margin-right: 0;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.nav-geschwister-dropdown .nav-dropdown-toggle::before {
    content: "";
    position: absolute;
    top: 0cqw;
    left: 2cqw;
    width: 1cqw;
    height: 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2cqw 2cqw;
    transition: transform 200ms ease;
}
.nav-geschwister-dropdown.is-open .nav-dropdown-toggle::before {
    transform: rotate(180deg);
}
.nav-geschwister-dropdown .nav-dropdown-toggle:focus { outline: none; }
.nav-geschwister-dropdown .nav-dropdown-toggle:focus-visible { border-color: #A81D25; }

/* Custom Padding für diesen Toggle */
.nav-geschwister-dropdown .btn.icon {
    padding: 1.0cqw 2cqw 1.0cqw 5cqw;
}

/* Hover: dicker roter Rand wie bei .btn.btn-light, aber wackelfrei. Die allgemeine Regel weiter
   oben rechnet in em und passt nicht zu den cqw-Werten hier. Rand +4px, Padding -4px. */
.nav-geschwister-dropdown .nav-dropdown-toggle.btn.btn-light:hover,
.nav-geschwister-dropdown .nav-dropdown-toggle.btn.icon.btn-light:hover {
    border-width: 5px;
    border-color: #A81D25;
    padding: calc(1.0cqw - 4px) calc(2cqw - 4px) calc(1.0cqw - 4px) calc(5cqw - 4px);
}

/* Chevron 4px nach links rücken, damit es zur dickeren Border passt */
.nav-geschwister-dropdown .nav-dropdown-toggle.btn.btn-light:hover::before {
    left: calc(2cqw - 4px);
}

/* Liste */
.nav-geschwister-dropdown .nav-dropdown-list {
    position: absolute;
    top: calc(100% + 0.4em);
    left: 0;
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    background: #fff;
    border: 1px solid #303030;
    border-radius: 1.5em;
    min-width: 100%;
    z-index: 1;
    display: none;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.nav-geschwister-dropdown.is-open .nav-dropdown-list { display: block; }

.nav-geschwister-dropdown .nav-dropdown-list li { margin: 0; padding: 0; }
.nav-geschwister-dropdown .nav-dropdown-list a {
    display: block;
    padding: 0.55em 1.6em;
    color: #303030;
    text-decoration: none;
    white-space: nowrap;
    font-size: clamp(14px, 1em, 1em);
}
.nav-geschwister-dropdown .nav-dropdown-list a:hover,
.nav-geschwister-dropdown .nav-dropdown-list a:focus {
    background: #f0ece6;
    color: #A81D25;
    outline: none;
}
.nav-geschwister-dropdown .nav-dropdown-list a.is-active {
    font-weight: 600;
    color: #A81D25;
}




 /* ---------------------------------------- YouTube-Consent
       Alles unter .youtube-wrapper verschachtelt, wirkt nirgends sonst. */
  .youtube-wrapper {
      position: relative;
      width: 100%;
      max-width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 0px;
      overflow: hidden;
      background: #1a1a1a;  
      margin-top: 3cqw;
      margin-bottom: 3cqw; 
    }

    .youtube-wrapper .youtube-thumb {
      z-index: 1;
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #1e1e2e 0%, #2a1a3e 40%, #1a2a3e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .youtube-wrapper .youtube-thumb svg {
      width: 80px;
      height: 80px;
      opacity: 0.12;
    }

    .youtube-wrapper .youtube-consent {
      z-index: 3;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(2px);
      background: rgba(10, 10, 10, 0.55);
      transition: opacity 0.4s ease;
    }

    .youtube-wrapper .youtube-consent.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .youtube-wrapper .youtube-consent-card {
      background: #faf9f7;
      border-radius: 5px;
      padding: 32px 36px;
      max-width: 380px;
      width: 90%;
      text-align: center;
      /*box-shadow: 0 8px 40px rgba(0,0,0,0.35);*/
      transform: translateY(0);
      transition: transform 0.4s ease;
    }

    .youtube-wrapper .youtube-consent.hidden .youtube-consent-card {
      transform: translateY(12px);
    }

    .youtube-wrapper .youtube-consent-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 18px;
      background: #A81D25;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .youtube-wrapper .youtube-consent-icon svg {
      width: 26px;
      height: 26px;
      fill: #fff;
    }

    .youtube-wrapper .youtube-consent-card h3 {
     font-family: "futura-pt", sans-serif;font-weight: 400;
      font-size: 1.2rem;
      color: #1a1a1a;
      margin-bottom: 10px;
    }

    .youtube-wrapper .youtube-consent-card p {
      font-size: 0.83rem;
      color: #666;
      line-height: 1.6;
      margin-bottom: 22px;
    }

    .youtube-wrapper .youtube-consent-card p a {
      color: #A81D25;
      text-decoration: none;
    }

    .youtube-wrapper .youtube-btn-accept {
      display: block;
      width: 100%;
      padding: 13px 20px;
      background: #A81D25;
      color: #fff;
      border: none;
      border-radius: 5px;
     font-family: "futura-pt", sans-serif;font-weight: 400;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: background 0.2s, transform 0.1s;
      margin-bottom: 12px;
    }

    .youtube-wrapper .youtube-btn-accept:hover  { background: #cc0000; }
    .youtube-wrapper .youtube-btn-accept:active { transform: scale(0.98); }

    .youtube-wrapper .youtube-consent-always {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 0.8rem;
      color: #555;
      cursor: pointer;
      user-select: none;
    }

    .youtube-wrapper .youtube-consent-always input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: #A81D25;
      cursor: pointer;
    }

    .youtube-wrapper .youtube-consent-footer {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #eee;
      font-size: 0.72rem;
      color: #aaa;
    }

    .youtube-wrapper .youtube-iframe {
      z-index: 2;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      opacity: 0;
      transition: opacity 0.5s ease 0.1s;
    }

    .youtube-wrapper .youtube-iframe.visible {
      opacity: 1;
    }




/* --- Blaetter-Navigation im Kalender (14.09.2026) ---
   Zurueck / Seitenzahlen / Weiter sind .btn.btn-light, die aktuelle Seite .btn.btn-rot, und der Pager
   steht in .kalender. Schrift, Rand, Padding, Hoehe und Hover/Fokus kommen deshalb aus denselben Regeln
   wie "Mehr erfahren" (.kalender .btn, 1440er-Block, --ui-hoehe mobil). Hier nur Anordnung, Zustaende
   und der Pfeil hinter "Weiter". */
.kal-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: left;
    align-items: center;
    margin: 40px 0 10px;
}
/* Pfeile: "Zurueck" (.icon-arrow-left) bekommt Groesse, Farbe und Abstaende ohne eigene Regel aus dem Block
   "Pfeil-Buttons" weiter oben - Pfeil links vor dem Text wie "Mehr erfahren". "Weiter" traegt .icon-arrow-right
   HINTER dem Text: dieselben Werte, nur gespiegelt - Pfeil-Platz rechts, Maske rechts ausgerichtet, Icon an right
   statt left (left:auto, sonst waere das absolut positionierte ::before ueberbestimmt). Hover wie dort: Padding
   -4px, Icon -5px. Die Regeln stehen bewusst NACH dem Pfeil-Block und gewinnen bei gleicher Spezifitaet.
   Die eingefrorenen Werte ab 1440px stehen im 1440er-Block. */
.kal-pager .btn.icon.kal-pager-next {
    padding-left:  clamp(16px, 1.5cqw, 1.5cqw);
    padding-right: clamp(36.8px, 4.6cqw, 4.6cqw);
}
.kal-pager .btn.icon.kal-pager-next::before {
    left: auto;
    right: clamp(10px, 1.4cqw, 1.4cqw);
    -webkit-mask-position: right center;
    mask-position: right center;
}
.kal-pager .btn.icon.btn-light.kal-pager-next:hover, .kal-pager .btn.icon.btn-light.kal-pager-next:focus-visible {
    padding-left:  calc(clamp(16px, 1.5cqw, 1.5cqw) - 4px);
    padding-right: calc(clamp(36.8px, 4.6cqw, 4.6cqw) - 4px);
}
.kal-pager .btn.btn-light.icon.kal-pager-next:hover::before, .kal-pager .btn.btn-light.icon.kal-pager-next:focus-visible::before {
    left: auto;
    right: calc(clamp(10px, 1.4cqw, 1.4cqw) - 5px);
}
/* aktuelle Seite ist kein Link: kein Hand-Cursor, kein Hover-Wechsel auf den dunklen Grund von .btn-rot */
.kal-pager .kal-pager-aktiv { cursor: default; }
.kal-pager .btn.btn-rot.kal-pager-aktiv:hover { background-color: #A81D25; }
.kal-pager-disabled { opacity: .4; pointer-events: none; }
.kal-pager-ellipse { padding: 0 4px; color: #303030; font-size: var(--ui-schrift); }

/* --- Ausgegraute, nicht verfuegbare Filteroptionen --- */
.filter-select option:disabled { color: #bbb; }

/* --- Aktive Filter (Chips) --- */
.aktive-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
}
.aktive-filter-label { font-weight: normal; margin-right: .2rem; font-size:clamp(18px, 1.1cqw, 1.1cqw); }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    color:#303030;
    /*background: #f0f0f0;*/
    border: 1px solid #d0d0d0;
    border-radius: 999px;
    text-decoration: none;
    font-size: .9em;
    line-height: 1.4;
}
.filter-chip:hover { background: #e2e2e2; }
.filter-chip .chip-kat { font-weight: 600; }
.filter-chip .chip-x { font-weight: normal; }
.filter-reset-all {
    /*margin-left: .4rem;*/
    /*text-decoration: underline;*/
    font-size: .9em;
}





.shopd-titel {margin: 0 0 1cqw 0;color: #A81D25;
  font-size: clamp(18px, 2cqw ,2cqw);
  font-size: clamp(18px, 5cqw ,2.7cqw);
  font-weight: 600;
  line-height: 110%;
  width: calc(100% - 2.2em);}
 .shopd-einleitung {   margin-bottom:2cqw; }
    .shopd-kurzinfo {     margin-bottom:2cqw; }
    .shopd-kurzinfo p { margin:0 0 10px; }
    .shopd-varianten { margin:0 0 2cqw; padding:0; border:0; min-width:0; } /* fieldset ohne UA-Rahmen */
    /* Hover und Tastaturfokus im Shop: Buttons mit Rand bekommen ihn rot und innen verstaerkt,
       das Schliessen-Kreuz einen runden roten Ring. Rot gefuellte Buttons: dunkler Grund, kein Rahmen. */
    .shopwk-rund:hover, .shopwk-rund:focus-visible { outline:none; border-color:#A81D25; color:#A81D25; box-shadow:inset 0 0 0 2px #A81D25; }
    .shopwk-close:hover, .shopwk-close:focus-visible { outline:3px solid #A81D25; outline-offset:2px; border-radius:999px; color:#A81D25; }
    .shopwk-modal:focus { outline:none; } /* nur programmatischer Fokus nach Warenkorb-Aktion */
    /* Varianten-Radios mit eigenen Grafiken statt Browser-Optik: SVG als Maske auf ::before, Farbe
       aus currentColor (Hover rot wie der Text, aria-invalid rot). Tastaturfokus als roter runder
       Hintergrund mit weisser Grafik, kein Outline. Die SVGs haben Innenabstand, deshalb ist der
       Kasten etwas groesser und der Abstand zum Text kleiner als frueher. */
    .shopd-variante { display:flex; align-items:center; gap:0.5em; margin-bottom:0.6cqw; cursor:pointer; font-size:clamp(14px, 2cqw, 26px); line-height:1.3; }
    .shopd-variante input[type="radio"] { -webkit-appearance:none; appearance:none; flex:0 0 auto; margin:0; position:relative;
        width:clamp(22px, 1.35em, 32px); height:clamp(22px, 1.35em, 32px); border:0; border-radius:50%; background:transparent; color:#303030; cursor:pointer;
        transition:background-color 0.15s, color 0.15s, box-shadow 0.15s; }
    .shopd-variante input[type="radio"]::before { content:""; position:absolute; inset:0; background-color:currentColor;
        mask-image:url(../icons/radiobutton.svg); mask-repeat:no-repeat; mask-position:center; mask-size:contain;
        -webkit-mask-image:url(../icons/radiobutton.svg); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain; }
    .shopd-variante input[type="radio"]:checked::before { mask-image:url(../icons/radiobutton-filled.svg); -webkit-mask-image:url(../icons/radiobutton-filled.svg); }
    .shopd-variante:hover, .shopd-variante:focus-within { color:#A81D25; }
    .shopd-variante:hover input[type="radio"] { color:#A81D25; }
    .shopd-variante input[type="radio"]:focus-visible { outline:none; background:#A81D25; color:#fff; }
    .shopd-variante input[type="radio"][aria-invalid="true"] { color:#A81D25; box-shadow:0 0 0 3px #fbeaea; }
    .shopd-variante .shopd-v-titel { font-weight:600; }
    .shopd-variante .shopd-v-preis { white-space:nowrap; }
    /* "In den Warenkorb": Schrift und Hoehe wie alle Bedienelemente. */
    .shopd-btn { background:#A81D25; color:#fff; border:0; border-radius:30px;
                 box-sizing:border-box; height:var(--ui-hoehe); padding:0 26px;
                 display:inline-flex; align-items:center; justify-content:center;
                 font-size:var(--ui-schrift); cursor:pointer; font-family:inherit; }
    .shopd-btn:hover, .shopd-btn:focus-visible { background:#303030; outline:none; }   /* rot gefuellt: Hover/Fokus = dunkler Grund, kein Rahmen */
    /* Pfeil in den rot gefuellten Shop-Buttons (In den Warenkorb / Zur Kasse / Bestellung pruefen / Zur Zahlung):
       icons/arrow-right.svg statt Text-Pfeil, auf dunklem Grund invertiert (weiss) */
    /* Ohne senkrechte Aussenabstaende - die waren ein Grundlinien-Trick des frueheren inline-block-Buttons
       und wuerden das Icon im Flex-Button verschieben. */
    .shopd-btn .icon { width:2em; height:2em; margin:0 0.5em 0 -0.3em; flex:0 0 auto; }
    .shopd-btn .icon::before, .shopwk-kasse .icon::before, .kasse .kbtn .icon::before { background-position:center; filter:invert(1) brightness(2.5) contrast(2.5); }
    .shopd-text { margin-top:2cqw;    }
   

    /* Warenkorb-Modal: haengt per JS an <body>, hat also keinen Container-Vorfahren. Eigene
       Basisgroesse am Viewport, alle Innenmasse in em davon. */
    .shopwk-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
    /* Ohne Container-Vorfahr faellt cqw auf die Viewportbreite zurueck - praktisch dasselbe wie
       #content_wrapper, die Werte verhalten sich also wie im Seiteninhalt. */
    .shopwk-modal { background:#fff; width:100%; max-width:820px; font-family:'futura-pt','Century Gothic','Trebuchet MS',Arial,sans-serif; color:#303030;
                    font-size:clamp(14px, 1.4cqw, 22px); line-height:1.35; }
    .shopwk-head { display:flex; justify-content:space-between; align-items:center; padding:0.9em 1.2em; border-bottom:1px solid #ddd; }
    .shopwk-head span { font-size:1.2em; font-weight:700; }
    .shopwk-close { background:none; border:0; font-size:1.5em; line-height:1; cursor:pointer; color:#303030; padding:0 0.2em; }
    .shopwk-body { padding:0.5em 1.2em 1.2em; }
    .shopwk-pos { display:flex; align-items:flex-start; gap:0.8em; padding:0.8em 0; border-bottom:1px solid #eee; }
    .shopwk-pos img { width:3.5em; height:auto; flex:0 0 3.5em; }
    .shopwk-pos-info { flex:1 1 auto; }
    .shopwk-pos-kat { font-size:0.8em; color:#777; }
    .shopwk-pos-titel { font-weight:700; line-height:1.2; }
    .shopwk-pos-var { font-size:0.9em; color:#555; margin-top:0.2em; }
    .shopwk-menge { display:flex; align-items:center; gap:0.5em; flex:0 0 auto; }
    /* +/- und Entfernen: gleiche Hoehe wie "Zur Kasse", Icons aus icons/ (minus/plus/close). */
    .shopwk-rund { width:var(--ui-hoehe); height:var(--ui-hoehe); padding:0; display:inline-flex; align-items:center; justify-content:center;
                   border:1px solid #999; border-radius:50%; background:#fff; cursor:pointer; font-size:var(--ui-schrift); line-height:1; color:#303030; box-sizing:border-box; }
    .shopwk-rund:hover { border-color:#A81D25; color:#A81D25; }
    /* Entfernen im Modal: immer nur Icon-Kreis (remove.svg), gleiche Groesse wie +/- */
    .shopwk-del { width:var(--ui-hoehe); height:var(--ui-hoehe); padding:0; display:inline-flex; align-items:center; justify-content:center;
                  background:#fff; color:#303030; border:1px solid #999; border-radius:50%; font-size:var(--ui-schrift); line-height:1; font-family:inherit;
                  box-sizing:border-box; cursor:pointer; }
    .shopwk-del:hover, .shopwk-del:focus-visible { outline:none; border-color:#A81D25; color:#A81D25; box-shadow:inset 0 0 0 2px #A81D25; }
    .shopwk-rund .icon, .shopwk-del .icon { font-size:1em; width:clamp(16px, 2cqw, 2cqw); height:clamp(16px, 2cqw, 2cqw); margin:0; flex:0 0 auto; }
    /* Icon bei Hover/Fokus rot (schwarze SVGs per Filter, wie der Minus-Kreis im Kalender) */
    .shopwk-rund:hover .icon::before, .shopwk-rund:focus-visible .icon::before,
    .shopwk-del:hover .icon::before, .shopwk-del:focus-visible .icon::before { filter: brightness(0) invert(16%) sepia(82%) saturate(4500%) hue-rotate(348deg) brightness(82%); }
    @media (max-width: 600px) {
        /* Hoehe und Schrift kommen aus den UI-Variablen, hier nur noch waagerechte Abstaende und Icons. */
        .shopwk-kasse { padding-right:21px; padding-left:18px; gap:8px; }
        .shopwk-rund .icon, .shopwk-del .icon, .shopwk-kasse .icon { width:21px; height:21px; }
    }
    /* Warenkorb-Popup mobil (14.09.2026): gleiches Layout wie die Warenkorbzeile der Kasse (.kasse .kpos) - oben links
       das Bild so hoch wie die Buttons, rechts Menge (minus - Anzahl - plus) und Entfernen, darunter die Produkttexte in
       voller Breite. Nur die Darstellung wird umgeordnet: DOM-, Vorlese- und Tab-Reihenfolge bleiben. */
    @media (max-width: 600px) {
        .shopwk-pos { display:grid; grid-template-columns:auto 1fr auto auto; grid-template-areas:"bild . menge entf" "info info info info";
                      align-items:center; column-gap:12px; row-gap:12px; }
        .shopwk-pos img { grid-area:bild; height:var(--ui-hoehe); width:auto; flex:none; }
        .shopwk-pos .shopwk-menge { grid-area:menge; }
        .shopwk-pos .shopwk-del { grid-area:entf; }
        .shopwk-pos-info { grid-area:info; }
    }
    .shopwk-summen { margin-top:1em; font-size:0.95em; }
    .shopwk-summen .zeile { display:flex; justify-content:space-between; padding:0.2em 0; }
    .shopwk-summen .gesamt { font-weight:700; font-size:1.15em; border-top:1px solid #ccc; margin-top:0.5em; padding-top:0.6em; }
    .shopwk-foot { text-align:right; margin-top:1.2em; }
    /* "Zur Kasse": Schrift und Hoehe wie alle Bedienelemente. Der uebrige Modal-Text bleibt bei der
       kleineren Basisschrift des Modals. */
    .shopwk-kasse { display:inline-flex; align-items:center; gap:clamp(6px, 0.6cqw, 0.6cqw); white-space:nowrap; background:#A81D25; color:#fff; border:0; border-radius:999px;
                    font-size:var(--ui-schrift); line-height:1.2;
                    height:var(--ui-hoehe);
                    padding:0 clamp(16px, 1.5cqw, 1.5cqw) 0 clamp(14px, 1.4cqw, 1.4cqw);
                    box-sizing:border-box; cursor:pointer; font-family:inherit; }
    .shopwk-kasse .icon { font-size:1em; width:clamp(16px, 2cqw, 2cqw); height:clamp(16px, 2cqw, 2cqw); margin:0; flex:0 0 auto; }
    .shopwk-kasse:hover, .shopwk-kasse:focus-visible { background:#303030; outline:none; }
    .shopwk-leer { padding:1.2em 0; color:#777; }
    .shopwk-hinweis { background:#fbe9ea; border:1px solid #A81D25; color:#A81D25; padding:0.7em 0.9em; border-radius:8px; margin-bottom:0.9em; font-size:0.95em; }
    .shopwk-pos-gueltig { font-size:0.9em; color:#A81D25; margin-top:0.2em; }


    /* ---- Kasse (includes/shop_kasse.aspx + shop_kasse_action.aspx) ---- */
    .kasse h2.kueber { font-weight:700; margin:0 0 2.5cqw 0; border-bottom:1px solid #303030; padding-bottom: 2.7cqw;}

    .kasse .ksteps { display:flex; align-items:center; justify-content:center; gap:8px; padding:3cqw 0 2.2cqw 0; margin-bottom:2.7cqw; border-bottom:1px solid #303030; }
    .kasse .kstep { display:flex; flex-direction:column; align-items:center; gap:6px; color:#9a948c; }
    .kasse .kstep-num { width:3cqw; height:3cqw; min-width:30px; min-height:30px; margin-bottom:0.8cqw; border-radius:50%; background:#f1eee8; color:#9a948c; display:flex; align-items:center; justify-content:center;
                        font-size:clamp(14px, 2cqw, 22px);}
    .kasse .kstep-txt { font-size:14px; font-size:clamp(14px, 2cqw, 20px);}
    .kasse .kstep-on .kstep-num { background:#303030; color:#fff; }
    .kasse .kstep-on { color:#303030;     }
    .kasse .kstep-line { flex: 0 0 0 0 7.2cqw;  height: 1px; background: #303030; margin-bottom: 2.5cqw;width:6cqw; }

    .kasse .kgrid { display:flex; flex-wrap:wrap; gap:6cqw;    }
    .kasse .kspalte-links { flex:1 1 320px; min-width:300px; }
    .kasse .kspalte-rechts { flex:1 1 380px; min-width:320px; }
    .kasse .kspalte-rechts h2.kueber {  border:none; margin: 0;padding-bottom: 1.0cqw;}
    .kasse .kspalte-rechts  .kanzeige { padding-bottom: 2.0cqw;}
  
    .kasse .kspalte-rechts h2.kueber.klieferh2 {margin-top: 2.7cqw;}

    .kasse .kliste { /*border-top:1px solid #303030;*/ }
    .kasse .kpos { display:flex; align-items:flex-start; gap:16px; padding:1.5cqw 0 1.5cqw 0; border-bottom:1px solid #303030; }
    .kasse .kpos-bild { max-width:10cqw; max-height:10cqw; flex:0 0 1cqw; }
    .kasse .kpos-info { flex:1 1 auto; }
    .kasse .kpos-kat {   font-size:clamp(14px, 2cqw, 26px); color:#303030; }
    .kasse .kpos-titel { font-weight:700; line-height:1.25; font-size:clamp(14px, 2cqw, 26px);}
    .kasse .kpos-var {  font-size:clamp(14px, 2cqw, 26px); color:#303030; margin-top:4px; }
    .kasse .kpos-gueltig { font-size:clamp(13px, 1.8cqw, 22px); color:#A81D25; margin-top:4px; }
    .kasse .kpos-anz { flex:0 0 auto; color:#555;font-size:clamp(14px, 2cqw, 26px);  }
    .kasse .kpos-menge { display:flex; align-items:center; gap:clamp(8px, 0.8cqw, 0.8cqw); flex:0 0 auto; }
    .kasse .kpos-menge span, .shopwk-menge span { font-size:clamp(18px, 2cqw, 26px); min-width:1.2em; text-align:center; }   /* Mengenzahl wie Fliesstext (p) */
    /* +/- und Entfernen in der Kasse: gleiche Hoehe wie .kbtn, Icons aus icons/ (minus/plus/close). */
    .kasse .krund { width:var(--ui-hoehe); height:var(--ui-hoehe); padding:0; display:inline-flex; align-items:center; justify-content:center;
                    border:1px solid #b8b2a8; border-radius:50%; background:#fff; cursor:pointer; font-size:var(--ui-schrift); line-height:1; color:#303030; box-sizing:border-box; }
    .kasse .krund:hover { border-color:#A81D25; color:#A81D25; }
    .kasse .kbtn-ghost { display:inline-flex; align-items:center; gap:clamp(6px, 0.6cqw, 0.6cqw); white-space:nowrap; border:1px solid #b8b2a8; border-radius:999px; background:#fff;
                         height:var(--ui-hoehe);
                         padding:0 clamp(16px, 1.5cqw, 1.5cqw) 0 clamp(14px, 1.4cqw, 1.4cqw);
                         cursor:pointer; color:#303030; font-family:inherit; font-size:var(--ui-schrift); line-height:1.2; box-sizing:border-box; }
    .kasse .kbtn-ghost:hover { border-color:#A81D25; color:#A81D25; }
    .kasse .krund .icon, .kasse .kbtn-ghost .icon, .kasse .kbtn .icon { font-size:1em; width:clamp(16px, 2cqw, 2cqw); height:clamp(16px, 2cqw, 2cqw); margin:0; flex:0 0 auto; vertical-align:middle; }
    .kasse .krund:hover .icon::before, .kasse .krund:focus-visible .icon::before,
    .kasse .kbtn-ghost:hover .icon::before, .kasse .kbtn-ghost:focus-visible .icon::before { filter: brightness(0) invert(16%) sepia(82%) saturate(4500%) hue-rotate(348deg) brightness(82%); }
    @media (max-width: 600px) {
        .kasse .kbtn-ghost { padding-right:21px; padding-left:18px; gap:8px; }
        .kasse .krund .icon, .kasse .kbtn-ghost .icon, .kasse .kbtn .icon { width:21px; height:21px; }
        /* .kasse .kbtn: Mobil-Regel steht weiter unten HINTER der Basisregel (sonst ueberschreibt die spaetere Basisregel die Mobilwerte) */
        /* Entfernen mobil nur als Icon-Kreis (Name bleibt per aria-label) */
        .kasse .kbtn-ghost { width:var(--ui-hoehe); padding:0; gap:0; justify-content:center; border-radius:50%; }
        .kasse .kbtn-ghost .kbtn-ghost-text { display:none; }
    }
    /* Warenkorbzeile mobil (14.09.2026): zwei Reihen per Grid. Oben links das Bild so hoch wie die Buttons
       (--ui-hoehe, Breite aus dem Seitenverhaeltnis), rechts Menge (minus - Anzahl - plus) und Entfernen; in Schritt 2/3
       ohne Buttons steht dort die Anzahl "(2x)". Darunter die Produkttexte in voller Spaltenbreite.
       Nur die Darstellung wird umgeordnet: DOM-, Vorlese- und Tab-Reihenfolge bleiben (Info vor den Buttons). */
    @media (max-width: 600px) {
        .kasse .kpos { display:grid; grid-template-columns:auto 1fr auto auto; grid-template-areas:"bild . menge entf" "info info info info";
                       align-items:center; column-gap:12px; row-gap:12px; }
        .kasse .kpos-bild { grid-area:bild; height:var(--ui-hoehe); width:auto; max-width:none; max-height:none; }
        .kasse .kpos-menge { grid-area:menge; }
        .kasse .kpos .kbtn-ghost, .kasse .kpos-anz { grid-area:entf; }
        .kasse .kpos-info { grid-area:info; }
    }
    .kasse .kti { font-size:15px;font-size:clamp(12px, 2cqw, 26px); }

    .kasse .ksummen { margin-top:18px; }
    .kasse .kzeile { display:flex; justify-content:space-between; padding:4px 0;  font-size:clamp(14px, 2cqw, 26px); }
    .kasse .kgesamt { font-weight:700; font-size:19px;font-size:clamp(14px, 2cqw, 26px); border-top:1px solid #303030; margin-top:1.5cqw; padding-top:1.5cqw; }
    .kasse .kgesamt small { font-weight:400; font-size:14px;font-size:clamp(14px, 2cqw, 26px); }

    .kasse .kfeld { margin-bottom:14px; }
    .kasse .kfeld label { display:block; color:#555; margin-bottom:5px;font-size:clamp(16px, 2cqw, 22px); }
    /* Eingabefelder: Innenabstand in em, haengt also an der Schriftgroesse. Schrift mindestens 16px -
       das verhindert nebenbei den Auto-Zoom auf iOS. */
    .kasse .keingabe { width:100%; box-sizing:border-box; background:#f1eee8; border:0; border-radius:10cqw; padding:0.7em 1.2em; font-size:clamp(16px, 2cqw, 22px);font-family:inherit; color:#303030; line-height:1.3; }
    .kasse select.keingabe { -webkit-appearance:none; appearance:none; }
    /* Datumsfeld (Besuchstag, 14.09.2026): eigenes Kalender-Symbol icons/calendar.svg, 50% groesser als die bisherige
       Regel (1.4em -> 2.1em). Firefox laesst sein Symbol per CSS weder tauschen noch ausblenden - deshalb liegt
       .kdatum-icon als deckendes Deko-Element in Feldfarbe ueber dem Browser-Symbol. pointer-events:none: der Klick
       geht an das Browser-Symbol darunter und oeffnet den Kalender ohne JS. In Chrome/Edge/Safari ist das Browser-
       Symbol unsichtbar (opacity:0), aber so breit wie das eigene Symbol und damit auf dessen Flaeche klickbar; Hoehe
       1.3em = Zeilenhoehe, damit das Datumsfeld nicht hoeher wird als die Textfelder. .kdatum hat dieselbe Schrift-
       groesse wie .keingabe, damit right:1.2em genau am Innenabstand des Felds sitzt (mobil unten ebenso). */
    .kasse .kdatum { position:relative; display:block; font-size:clamp(16px, 2cqw, 22px); }
    .kasse input[type="date"].keingabe::-webkit-calendar-picker-indicator { opacity:0; width:2.1em; height:1.3em; margin:0; padding:0; cursor:pointer; }
    .kasse .kdatum-icon { position:absolute; top:50%; right:1.2em; width:2.1em; height:2.1em; transform:translateY(-50%);
                          background:#f1eee8 url('../icons/calendar.svg') no-repeat center / contain; pointer-events:none; }
    .kasse .kfeld-fehler .kdatum-icon { background-color:#fbeaea; }
    @media (max-width: 600px) {
        .kasse .keingabe { font-size:clamp(17px, 4.5cqw, 20px); border-radius:999px; }
        .kasse .kfeld label { font-size:clamp(16px, 4cqw, 19px); }
        .kasse .kdatum { font-size:clamp(17px, 4.5cqw, 20px); }
    }
    .kasse .krow2 { display:flex; gap:14px; }
    .kasse .kfeld-halb { flex:1 1 0; }
    /* Mobil (14.09.2026): Vorname/Nachname und PLZ/Ort (auch bei abweichender Rechnungsadresse) untereinander wie die
       uebrigen Felder - volle Breite, der Abstand kommt dann wie dort aus .kfeld margin-bottom statt aus dem gap. */
    @media (max-width: 600px) {
        .kasse .krow2 { flex-direction:column; gap:0; }
        .kasse .kfeld-halb { flex:none; }
    }
    /* Abweichende Rechnungsadresse: eigener Abstand nach oben im Rhythmus der Abschnittsueberschriften,
       damit das Raster als eigener Block lesbar ist. */
    .kasse .krebox { margin-top:clamp(18px, 2.7cqw, 2.7cqw); }
    .kasse .kcheck { /*display:flex; align-items:flex-start; gap:10px;*/ font-size:clamp(14px, 2cqw, 26px); cursor:pointer; 
    margin: 2cqw 0;   display: block;}
    .kasse .kcheck input[type="checkbox"] { -webkit-appearance:none; appearance:none; flex:0 0 auto;
        width:22px; height:22px; margin:2px 2px 0 0; border:1px solid #303030;
        background:#fff; cursor:pointer; position:relative; }
    .kasse .kcheck input[type="checkbox"]:checked { background:#A81D25; border-color:#A81D25; }
    .kasse .kcheck input[type="checkbox"]:checked::after { content:""; position:absolute; left:7px; top:3px;
        width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
    .kasse .kradio { display:block; border:1px solid #cfc9c0; border-radius:30px; padding:14px 20px; margin-bottom:12px; cursor:pointer; font-size:15px; font-size:clamp(14px, 2cqw, 26px);}
    .kasse .kradio input[type="radio"] { -webkit-appearance:none; appearance:none; flex:0 0 auto;
        width:22px; height:22px; margin:0 8px -5px 0; border:1px solid #303030; border-radius:50%;
        background:#fff; cursor:pointer; position:relative; top:-5px; vertical-align:middle; }
    .kasse .kradio input[type="radio"]:checked { background:#A81D25; border-color:#A81D25; }
    .kasse .kradio input[type="radio"]:checked::after { content:""; position:absolute; left:50%; top:50%;
        width:8px; height:8px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
    .kasse .kanzeige { font-size:16px;font-size:clamp(14px, 2cqw, 26px); line-height:1.5; margin:0 0 4px; }
    .kasse .khinweis { font-size:13px;font-size:clamp(14px, 2cqw, 26px); color:#8a8a8a; margin:14px 0 0; }
    .kasse .kfehler { background:#fbeaea; color:#A81D25; border:1px solid #e9c4c4; border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:14px;font-size:clamp(14px, 2cqw, 26px); scroll-margin-top:1em; }
    /* Fehleranzeige der Kasse: Sammelbox oben, dazu Rahmen, Text und rotes Label am Feld selbst. */
    .kasse .kfehler:focus { outline:2px solid #A81D25; outline-offset:2px; }
    .kasse .kfehler ul { margin:0.5em 0 0; padding-left:1.4em; }
    .kasse .kfehler li { margin:0.2em 0; }
    .kasse .kfehler a { color:inherit; text-decoration:underline; }
    .kasse .kfeld-fehler label { color:#A81D25; font-weight:700; }
    .kasse .kfeld-fehler .keingabe { box-shadow:inset 0 0 0 2px #A81D25; background:#fbeaea; }
    .kasse .kfeld-fehler-text { margin-top:5px; }
    .kasse .keingabe:focus-visible { outline:2px solid #303030; outline-offset:2px; }
    .kasse .kcheck.kcheck-fehler { color:#A81D25; }
    .kasse .kcheck input[type="checkbox"][aria-invalid="true"] { border:2px solid #A81D25; box-shadow:0 0 0 3px #fbeaea; }
    /* Hover und Tastaturfokus in der Kasse: Rand rot und innen verstaerkt, Checkbox/Radio mit rotem Ring. */
    .kasse .kcheck input[type="checkbox"]:focus-visible,
    .kasse .kradio input[type="radio"]:focus-visible { outline:3px solid #A81D25; outline-offset:2px; }
    .kasse .krund:hover, .kasse .krund:focus-visible { outline:none; border-color:#A81D25; color:#A81D25; box-shadow:inset 0 0 0 2px #A81D25; }
    .kasse .kbtn-ghost:hover, .kasse .kbtn-ghost:focus-visible { outline:none; border-color:#A81D25; color:#A81D25; box-shadow:inset 0 0 0 3px #A81D25; }
    .kasse .kradio:hover, .kasse .kradio:focus-within { border-color:#A81D25; box-shadow:inset 0 0 0 3px #A81D25; }
    .kasse .ksteps:focus { outline:none; } /* nur programmatischer Fokus (Schrittwechsel-Ansage), kein Rahmen noetig */

    .kasse .kfoot { text-align:right;   margin-top:26px; }
    /* "Zur Kasse" / "Bestellung pruefen" / "Zur Zahlung": Schrift und Hoehe wie alle Bedienelemente */
    .kasse .kbtn { display:inline-flex; align-items:center; gap:clamp(6px, 0.6cqw, 0.6cqw); white-space:nowrap; background:#A81D25; color:#fff; border:0; border-radius:999px;
                   height:var(--ui-hoehe);
                   padding:0 clamp(16px, 1.5cqw, 1.5cqw) 0 clamp(14px, 1.4cqw, 1.4cqw);
                   font-size:var(--ui-schrift); line-height:1.2; box-sizing:border-box; cursor:pointer; font-family:inherit; }
    .kasse .kbtn:hover, .kasse .kbtn:focus-visible { background:#303030; outline:none; }
    @media (max-width: 600px) {
        /* Mobil nur die waagerechten Abstaende - Hoehe und Schrift kommen aus den UI-Variablen. */
        .kasse .kbtn { padding-right:21px; padding-left:18px; gap:8px; }
    }
    /* Textgroessen im Shop wie der normale Fliesstext - vorher war der Shop auf Tablet und Handy kleiner. */
    .shopd-variante, .shopd-btn,
    .kasse .kpos-kat, .kasse .kpos-titel, .kasse .kpos-var, .kasse .kpos-anz, .kasse .kti,
    .kasse .kzeile, .kasse .kgesamt, .kasse .kgesamt small,
    .kasse .kcheck, .kasse .kradio, .kasse .kanzeige, .kasse .khinweis, .kasse .kfehler { font-size:clamp(18px, 2cqw, 26px); }
    .kasse .kleer { padding:30px 0; color:#777; }



    
/*Shop*/
#dankekasten  { margin-bottom:3cqw;  border-bottom:1px solid #303030; padding:1.5cqw 0 0.8cqw  10.2cqw;     }



/* ---------------------------------------- Sitemap-Include (includes/sitemap.aspx)
   Klappbare Seitenübersicht. Aufbau des Markups und die Barrierefreiheits-Vorgaben:
   docs/CSS_homepage.md, Abschnitt 8. */
.sitemap { margin: 0 0 2cqw 0; font-size: clamp(18px, 2cqw, 26px); line-height: 1.4; color: #303030; }
.sitemap .sitemap-hinweis { margin-bottom: 1.5cqw; }

.sitemap ul.sitemap-ebene { list-style: none; margin: 0; padding: 0; }
.sitemap ul.sitemap-ebene ul.sitemap-ebene { margin: 0.2em 0 0.6em 0; padding-left: 1.4em; border-left: 2px solid #e2ddd5; }
.sitemap ul.sitemap-ebene[hidden] { display: none; }
.sitemap li.sitemap-eintrag { margin: 0; padding: 0; }
.sitemap .sitemap-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2em 0.6em; }

/* Oberste Ebene = Bereiche (wie Hauptnavigation), deutlich abgesetzt */
.sitemap ul.sitemap-ebene-1 > li.sitemap-eintrag { margin-bottom: 0.8cqw; padding-bottom: 0.8cqw; border-bottom: 1px solid #303030; }
.sitemap ul.sitemap-ebene-1 > li.sitemap-eintrag:last-child { border-bottom: none; }
.sitemap ul.sitemap-ebene-1 > li.sitemap-eintrag > .sitemap-zeile > .sitemap-link,
.sitemap ul.sitemap-ebene-1 > li.sitemap-eintrag > .sitemap-zeile > .sitemap-gruppe { font-size: clamp(22px, 2.6cqw, 34px); font-weight: 500; }

/* Einträge: Link oder (nicht verlinkter) Gruppentitel, dahinter der Untertitel */
.sitemap .sitemap-link,
.sitemap .sitemap-gruppe { display: inline-block; min-height: 24px; padding: 0.15em 0; }
.sitemap a.sitemap-link { color: #303030; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.sitemap a.sitemap-link:hover { color: #A81D25; text-decoration-thickness: 2px; }
.sitemap a.sitemap-link:focus-visible { outline: 3px solid #A81D25; outline-offset: 3px; border-radius: 2px; color: #A81D25; }
.sitemap a.sitemap-link[aria-current="page"] { color: #A81D25; font-weight: 500; }
/* „Sie sind hier": rein visueller Pfeil (leeres content, Maske) – Screenreader melden aria-current */
.sitemap a.sitemap-link[aria-current="page"]::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.35em; vertical-align: middle;
    background-color: currentColor; mask-image: url(../icons/arrow-left.svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
    -webkit-mask-image: url(../icons/arrow-left.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.sitemap .sitemap-gruppe { color: #303030; }
.sitemap.js .sitemap-zeile > .sitemap-gruppe { cursor: pointer; }
/* Untertitel liegt INNERHALB des Links/Gruppentitels (Teil des Linknamens); nur optisch abgesetzt */
.sitemap .sitemap-untertitel { color: #5a5652; font-size: 1em; font-weight: 400; }   /* gleiche Größe wie der Titel; #5a5652 auf Weiß ≈ 7,3:1 */
.sitemap .sitemap-untertitel::before { content: "– "; }
.sitemap a.sitemap-link:hover .sitemap-untertitel,
.sitemap a.sitemap-link:focus-visible .sitemap-untertitel,
.sitemap a.sitemap-link.sitemap-aktuell .sitemap-untertitel { color: inherit; }

/* Toggle-Button (Disclosure): ohne JS verborgen, mit JS sichtbar; Chevron dreht bei aria-expanded=true */
.sitemap .sitemap-toggle { display: none; }
.sitemap.js .sitemap-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px;
    padding: 0; margin: 0; border: 1px solid #303030; border-radius: 50%; background: #fff; color: #303030; cursor: pointer; font: inherit; }
.sitemap.js .sitemap-toggle:hover { border-color: #A81D25; color: #A81D25; }
.sitemap.js .sitemap-toggle:focus-visible { outline: 3px solid #A81D25; outline-offset: 2px; }
.sitemap.js .sitemap-toggle[aria-expanded="true"] { background: #303030; color: #fff; }
.sitemap.js .sitemap-toggle[aria-expanded="true"]:hover { background: #A81D25; border-color: #A81D25; color: #fff; }
.sitemap .sitemap-toggle-icon { display: inline-block; width: 18px; height: 18px; background-color: currentColor;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    mask-repeat: no-repeat; mask-position: center; mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
    transition: transform 200ms ease; }
.sitemap .sitemap-toggle[aria-expanded="true"] .sitemap-toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sitemap .sitemap-toggle-icon { transition: none; } }

/* Werkzeugleiste „Alle aufklappen / zuklappen" (nur mit JS) */
.sitemap .sitemap-werkzeuge { display: none; }
.sitemap.js .sitemap-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-bottom: 1.5cqw; }
.sitemap .sitemap-werkzeug { border: 1px solid #303030; border-radius: 999px; background: #fff; color: #303030; cursor: pointer;
    font: inherit; font-size: 0.85em; padding: 0.3em 1em; min-height: 36px; }
.sitemap .sitemap-werkzeug:hover { border-color: #A81D25; color: #A81D25; }
.sitemap .sitemap-werkzeug:focus-visible { outline: 3px solid #A81D25; outline-offset: 2px; }
/* Statusmeldung nur für Screenreader (visuell versteckt, bleibt im Accessibility-Tree) */
.sitemap .sitemap-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Unterebenen */
.sitemap ul.sitemap-ebene-2 > li.sitemap-eintrag { margin: 0.15em 0; }
.sitemap ul.sitemap-ebene-3 { border-left-color: #efece6; }
.sitemap ul.sitemap-ebene-3 > li.sitemap-eintrag,
.sitemap ul.sitemap-ebene-4 > li.sitemap-eintrag,
.sitemap ul.sitemap-ebene-5 > li.sitemap-eintrag { font-size: 0.92em; }

/* Ohne JS zwei Spalten auf großen Bildschirmen; mit JS einspaltig, sonst sortieren sich die
   Spalten beim Auf- und Zuklappen um. */
@container (min-width: 900px) {
    .sitemap:not(.js) ul.sitemap-ebene-1 { column-count: 2; column-gap: 4cqw; }
    .sitemap:not(.js) ul.sitemap-ebene-1 > li.sitemap-eintrag { break-inside: avoid; }
}

/* ---------------------------------------- Nach-oben-Button (20.09.2026)
   Doppelpfeil im Kreis ueber dem roten Footer, rechtsbuendig mit dem Inhalt (.block = 4% Rand).
   js/reddank.js setzt das Markup vor #footer_rot, deshalb kein Neuexport der Seiten:
     #nachoben_zeile   haelt den Platz im Seitenfluss frei (auch waehrend der Button fixiert ist)
     .nachoben-halter  steht im Fluss oder - beim Hochscrollen, wie #header_sticky - fixiert am unteren Rand
     .nachoben-innen   Container fuer cqw. Bewusst INNERHALB des Halters: container-type macht ein Element
                       zum Bezugsrahmen fuer position:fixed, am Halter selbst wuerde das Fixieren scheitern.
   Groesse wie die runden Shop-Buttons (.kasse .krund): --ui-hoehe, Icon wie dort 2cqw. */
/* Abstaende aus der Grafiker-Vorlage (1129px Inhaltsbreite: 54px darueber, 63px bis zum Footer), in vw, weil die Zeile
   ausserhalb der Container liegt; gedeckelt auf den Stand bei 1440px wie der Block am Dateiende. */
#nachoben_zeile { margin-top: min(4.8vw, 69px); min-height: var(--ui-hoehe); }
#nachoben_zeile + #footer_rot { margin-top: min(5.6vw, 81px); }
#nachoben_zeile .nachoben-halter { width: 100%; }
#nachoben_zeile .nachoben-halter.fixiert { position: fixed; left: 0; bottom: clamp(16px, 2vw, 32px); z-index: 9998; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
#nachoben_zeile .nachoben-halter.fixiert.sichtbar { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
#nachoben_zeile .nachoben-innen { container-type: inline-size; max-width: 1920px; margin: 0 auto; display: flex; justify-content: flex-end; }
.nachoben { width: var(--ui-hoehe); height: var(--ui-hoehe); margin: 0 4cqw 0 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #303030; border-radius: 50%; background: #fff; color: #303030; cursor: pointer; box-sizing: border-box; pointer-events: auto; }
/* Hover/Fokus wie .kasse .krund (roter Rand, innen auf 3px verstaerkt, rotes Icon). Hover als Klasse aus dem JS,
   nur bei echter Maus - :hover bliebe auf Touch-Geraeten nach dem Tipp rot stehen. */
.nachoben.hover-an, .nachoben:focus-visible { outline: none; border-color: #A81D25; color: #A81D25; box-shadow: inset 0 0 0 2px #A81D25; }
.nachoben .nachoben-icon { display: block; width: clamp(16px, 2cqw, 2cqw); height: clamp(16px, 2cqw, 2cqw); background-color: currentColor;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 3.5 33 33'><path d='M8.586 19.834L20 8.419l11.414 11.415L30 21.248l-10-10-10 10zM8.586 29.834L20 18.419l11.414 11.415L30 31.248l-10-10-10 10z'/></svg>");
    mask-repeat: no-repeat; mask-position: center; mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 3.5 33 33'><path d='M8.586 19.834L20 8.419l11.414 11.415L30 21.248l-10-10-10 10zM8.586 29.834L20 18.419l11.414 11.415L30 31.248l-10-10-10 10z'/></svg>");
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
@media (max-width: 600px) {
    .nachoben .nachoben-icon { width: 21px; height: 21px; }   /* wie die Shop-Icons mobil */
}

/* Druck: alles sichtbar, keine Bedienelemente */
@media print {
    #nachoben_zeile { display: none !important; }
    .sitemap a.sitemap-link { color: #000; }
    .sitemap ul.sitemap-ebene[hidden] { display: block; }
    .sitemap .sitemap-toggle, .sitemap .sitemap-werkzeuge { display: none !important; }
}

/* ---------------------------------------- ab 1440px nicht weiter skalieren
   Friert die verbliebenen cqw-Werte auf ihren Stand bei 1440px ein (1cqw = 14.4px). Steht bewusst
   am Dateiende, damit die Regeln bei gleicher Spezifitaet gewinnen.
   Umrechnung: 0.6=8.64  0.7=10.08  0.8=11.52  1=14.4  1.2=17.28  1.4=20.16  1.5=21.6  1.6=23.04
               2=28.8  2.2=31.68  3=43.2  3.6=51.84  4=57.6  6=86.4 */
@media (min-width: 1440px) {
    /* Schrift und Hoehe der Bedienelemente stehen hier nicht - die kommen aus den UI-Variablen und
       sind durch deren eigene clamp schon gedeckelt. Hier nur waagerechte Abstaende und Icon-Masse. */
    /* Kalender-Buttons (Tickets / Mehr erfahren / Zur Ausstellung / Teilen) */
    .kalender .btn { padding-right:21.6px; padding-left:21.6px; }
    .kalender .btn.icon { padding-right:21.6px; padding-left:57.6px; }
    .kalender .btn.icon::before { left:20.16px; width:28.8px; }
    .kalender .btn.btn-light:hover, .kalender .btn.btn-light:focus-visible { padding-right:17.6px; padding-left:17.6px; }
    .kalender .btn.icon.btn-light:hover, .kalender .btn.icon.btn-light:focus-visible { padding-left:53.6px; }
    .kalender .btn.btn-light.icon:hover::before, .kalender .btn.btn-light.icon:focus-visible::before { left:15.16px; }
    /* Pfeil-Buttons: Pfeil 30% groesser (2.6cqw = 37.44px), Pfeilseite 4.6cqw = 66.24px, Textseite 1.5cqw = 21.6px,
       Hover Padding -4px / Icon -5px */
    .btn.icon.icon-arrow-left:not(.icon-set-kreis), .btn.icon.icon-arrow-right:not(.icon-set-kreis) { padding-right:21.6px; padding-left:66.24px; }
    .btn.icon.icon-arrow-left:not(.icon-set-kreis)::before, .btn.icon.icon-arrow-right:not(.icon-set-kreis)::before { left:20.16px; width:37.44px; }
    .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover,  .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible,
    .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover, .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible { padding-right:17.6px; padding-left:62.24px; }
    .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):hover::before,  .btn.icon.btn-light.icon-arrow-left:not(.icon-set-kreis):focus-visible::before,
    .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):hover::before, .btn.icon.btn-light.icon-arrow-right:not(.icon-set-kreis):focus-visible::before { left:15.16px; }
    /* Kalender-Pager: "Weiter" mit Pfeil rechts = die Werte darueber gespiegelt. left:auto auch hier, weil die
       Pfeil-Regeln direkt darueber left setzen und im Media-Block spaeter stehen als die normalen Pager-Regeln. */
    .kal-pager .btn.icon.kal-pager-next { padding-left:21.6px; padding-right:66.24px; }
    .kal-pager .btn.icon.kal-pager-next::before { left:auto; right:20.16px; }
    .kal-pager .btn.icon.btn-light.kal-pager-next:hover, .kal-pager .btn.icon.btn-light.kal-pager-next:focus-visible { padding-left:17.6px; padding-right:62.24px; }
    .kal-pager .btn.btn-light.icon.kal-pager-next:hover::before, .kal-pager .btn.btn-light.icon.kal-pager-next:focus-visible::before { left:auto; right:15.16px; }
    /* Teilen-Kreis: Durchmesser kommt aus --ui-hoehe, hier nur noch das Icon */
    .kalender .btn.icon.icon-set-kreis.teilen-btn::before { width:28.8px; height:28.8px; }
    /* Plus-/Minus-Kreis im Kalender */
    .kalender .info .mehr, .kalender .info .weniger { font-size:23.04px; padding:10.08px; }
    .kalender .info .mehr::before, .kalender .info .weniger::before { width:31.68px; height:31.68px; }
    /* Allgemeine .btn: waagerechte Abstaende und Icon auf die Werte der Kalender-Buttons gedeckelt. */
    .btn.icon { padding-right:21.6px; padding-left:57.6px; }
    .btn.icon::before { left:20.16px; width:28.8px; }
    .btn.btn-light:hover, .btn.btn-light:focus-visible { padding-right:17.6px; padding-left:53.6px; }
    .btn.icon.btn-light:hover, .btn.icon.btn-light:focus-visible { padding-left:53.6px; }
    .btn.btn-light.icon:hover::before, .btn.btn-light.icon:focus-visible::before { left:15.16px; }
    .btn.icon.icon-set-kreis:before { width:43.2px; height:43.2px; }
    /* Buttons in H1-Absaetzen haben hoehere Spezifitaet als .btn.icon und brauchen deshalb eine eigene
       Deckelung. Die Hover-Werte muessen mit hierher, sonst springt der Button beim Hover schmaler. */
    .abs.abs_h1 .btn { padding-right:21.6px; padding-left:57.6px; }
    .abs.abs_h1 .btn.icon::before { left:20.16px; width:28.8px; }
    .abs.abs_h1 .btn:hover, .abs.abs_h1 .btn:focus-visible { padding-right:17.6px; padding-left:53.6px; }
    .abs.abs_h1 .btn.icon:hover::before, .abs.abs_h1 .btn.icon:focus-visible::before { left:15.16px; }
    /* Runde Blaettern-Buttons der Sammlung: Durchmesser kommt aus --ui-hoehe, hier nur noch das Icon (3cqw -> 43.2px) */
    .abs.abs_h1 .nav-geschwister .btn.icon-set-kreis::before { width:43.2px; height:43.2px; }
    /* Shop, Kasse, Warenkorb-Modal - nur waagerechte Abstaende und Icons. */
    .shopwk-kasse, .kasse .kbtn, .kasse .kbtn-ghost { padding-right:21.6px; padding-left:20.16px; gap:8.64px; }
    .shopwk-rund .icon, .shopwk-del .icon, .shopwk-kasse .icon,
    .kasse .krund .icon, .kasse .kbtn-ghost .icon, .kasse .kbtn .icon { width:28.8px; height:28.8px; }
    .nachoben .nachoben-icon { width:28.8px; height:28.8px; }
    .kasse .kpos-menge { gap:11.52px; }
    /* Kalender-Dropdowns + Reset-Kreis: Schrift und Hoehe kommen aus --ui-schrift / --ui-hoehe */
    .kalender-filter .filter-row .filter-reset-all { margin-left:7.2px; }
    .kalender-filter .filter-row .filter-reset-all::before { width:28.8px; height:28.8px; }
    /* Kopfzeile: die Schrift kommt aus --ui-schrift und ist dort schon gedeckelt. Hier nur die Icons,
       fuer alle drei Leisten mit demselben Wert. */
    #header #header_wrapper #header_top_right .icon,
    #header_sticky #header_sticky_wrapper #header_top_right .icon,
    #mainmenue #header_top_right .icon { font-size:36px; }
    .warenkorb-count { min-width:28.8px; height:28.8px; padding:0 2.88px; }
}