html{
    scroll-behavior:smooth;
}


/* z.B. bei Hauptbreitrag */
.eigenname {
    
}


@media (prefers-reduced-motion: no-preference){
  :root {scroll-behavior: smooth;}}
.html {-webkit-tap-highlight-color: var(--orange);}

/* firefox */
body {
    scrollbar-width: thin;
    scrollbar-color: var(--gruen) white;
}
/*chrome, safari*/
::-webkit-scrollbar {
  width: 3px;
}::-webkit-scrollbar-track {
  background-color: white;
} ::-webkit-scrollbar-thumb {
  background-color: var(--gruen);
}::-webkit-scrollbar-thumb:hover {
  background-color: var(--schwarz);
}
/*
nav::-webkit-scrollbar {
  width: 1px;
}
nav::-webkit-scrollbar-track {
  background-color: white;
}
nav::-webkit-scrollbar-thumb {
  background-color: var(--gruen);
}
nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--schwarz);
}
*/

:root {
    --page-font-size: clamp(16px, calc(1rem + 0.38vw), 22px);
    --gruen:rgb(162,198,20);
    --gruen-hell:rgb(162,198,20,0.3);
    --schwarz:rgb(47,48,54);
    --grau:#ccc;
    --grau-trans:rgb(0,0,0,0.03);    
    --gelb:yellow;
    --orange:orange;
    --rot:rgb(230,61,66);
    --blau:#4fa5d2;
    --pfeil-links: '\f0d9'; /* \2190 ← */
    --pfeil-rechts: '\f0da'; /* \2192 → oder 27F6 ⟶ */ 
    --maxLetterWidth: 29rem;
    --shadow-unten:
        0 2px 5px 0 rgb(0,0,0,0.35),
        0 2px 10px 0 rgb(0,0,0,0.12);
    --shadow-3-seiten:
        -2px -1px 3px 0px rgb(0,0,0,0.35),
        2px -1px 3px 0px rgb(0,0,0,0.35);
    --shadow-4-seiten:
        0px 0px 3px 2px rgb(0, 0, 0, 0.35);
    --btn-open-menu-size: 40px;
    --btn-open-menu-font:clamp(30px,11vw,35px);
    --btn-open-search-font:clamp(32px,12vw,37px);
    --btn-close-search-font:var(--btn-open-menu-font);
    --header-font-size: clamp(42px, 7vw, 68px);
    --head-circle--size: 3.5em;
    --form-control-color: var(--orange);
    --show-bubbles: 600px;
    --transition-dur-time: .31s ease-in-out;
    --dist: 9px;
    --rand-dist: min(12px, var(--dist));
    --double-dist: min(32px, calc(2*var(--rand-dist)));
    --half-dist: max(calc(0.5*var(--dist)), 9px);
    --triple-dist: calc(3*var(--rand-dist));
    --logo-height:44px;
    --logo-width:64px;
    --search-height: calc(5*var(--rand-dist) + 50px);
}

@media(min-width: 280px){
    :root{
       
    }
}
@media(min-width: 320px){
    :root {
        --dist: 12px;
        --logo-height: 92px;
        --logo-width: 103px;
    }
    :root .scroll,
    :root .menu--open {
        --logo-height: 44px;
        --logo-width: 64px;
    }
}
@media(min-width: 600px) {
    :root {
        --dist: 16px;
        --rand-dist: var(--dist);
    }
}
/*
@media(min-width:993px){
    :root {
        --logo-height: calc(3 * 0.8 * var(--page-font-size) + 3*var(--dist));
    }

}
*/
@media(min-width:993px){
    :root {
        --logo-height: calc(3 * 0.8 * var(--page-font-size) + 3*var(--dist));
    }
    :root .scroll {
        --logo-height: calc(3 * 0.8 * var(--page-font-size) + var(--dist));
    }
}


::selection{
    background-color: var(--orange);
    color: white;
}

*, ::after, ::before{
    box-sizing:border-box;
    background-repeat:no-repeat;
    border-radius:2px;
}

svg,path{
    border-radius:0;
}

html {
    font-size: var(--page-font-size);
}

html,
body {
    -webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

body {
    background-color: var(--gruen);
    font-weight: normal;
    min-width: 240px; /* check body or html ### */
}

body, p, h1, h2, h3, h4, h5, h6 {
    color: var(--schwarz);
    line-height: 1;
    margin: 0;
}
p,
h1, h2, h3, h4, h5, h6 {
    -ms-word-break: normal;
    -webkit-word-break: normal;
        word-break: normal;
}

h1, h2, h3, h4, h5, h6 {
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    font-weight: 400;
}

body, p, h4, h5, h6 {
    font-family: 'Didact Gothic', sans-serif;
}


/* nur Hauptueberin Artikel */
h1, .h1 {
    font-family: Poppins-ExtraBold, 'Didact Gothic', sans-serif;
    --h1-fontsize: 24px;
    font-size: var(--h1-fontsize);
    line-height: 1.2;
    margin-bottom: calc(1.5*var(--dist));
    margin-top: var(--dist);
    text-transform: uppercase;
}
@media(min-width: 280px) {
    h1, .h1 {
        --h1-fontsize: clamp(24px, 1.85em, 35px);
    }
}

h2 {
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    font-size: 1em;
    line-height: 1.4;
    margin-bottom: var(--half-dist);
}

h3 {
    font-family: Poppins-SemiBold, 'Didact Gothic', sans-serif;
    font-size: 1.1rem;
    line-height: 1.2;
    margin-top: 2em;
}

h5 {
    font-size: 0.9em;
    line-height: 1.5;
}

a {
    -webkit-text-decoration-skip: objects;/* ### check */
/*    word-break: break-word;*/
    outline: 0;
    position: relative;
    text-decoration: none;
    transition: all 0.31s;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    background-color: transparent;
}
a:link,
a:visited {
    color: var(--gruen); 
}
a:link {
    text-decoration: none;
}
a:hover,
a:focus,
a:active {
    color: var(--schwarz);
    text-decoration: none;
}
a:hover {  
    outline-width: 2px;
}

a::after,
a::before {
    transition: all 0.3s;
}

.com-content-category-blog a,
.blog-featured a,
.com-content-article a,
.suchergebnis .search a,
a.underline,
.underline a {
    border-radius: 0;
}

.blog-featured a:focus,
.blog-featured a:hover,
.blog-featured a:active,
.com-content-article a:focus,
.com-content-article a:hover,
.com-content-article a:active,
.suchergebnis .search a:focus,
.suchergebnis .search a:hover,
.suchergebnis .search a:active,
a.underline:focus,
a.underline:hover,
a.underline:active,
.underline a:focus,
.underline a:hover,
.underline a:active {
    box-shadow: 0px 2px var(--gruen);
}

.blog-featured a:has(> img):focus,
.blog-featured a:has(> img):hover,
.blog-featured a:has(> img):active,
.com-content-article a:has(> img):focus,
.com-content-article a:has(> img):hover,
.com-content-article a:has(> img):active,
.suchergebnis .search a:has(> img):focus,
.suchergebnis .search a:has(> img):hover,
.suchergebnis .search a:has(> img):active,
a.underline:has(> img):focus,
a.underline:has(> img):hover,
a.underline:has(> img):active,
.underline a:has(> img):focus,
.underline a:has(> img):hover,
.underline a:has(> img):active {
    box-shadow: none;
}

/* Klasse ".underline" (ohne "a") fuer Navi Footer-Bereich */
/*.com-content-article a::before,*/

a.underline::before,
.underline a::before {
	content: '';
	position: absolute;
	height: 2px;
	bottom: -2px;
	width: 100%;
	left: 0;
	transition: all 0.3s ease-in-out 0s;
    background-color: var(--gruen);
    transform: scaleX(0);
}

a.underline:focus::before,
a.underline:hover::before,
a.underline:active::before,
.underline a:focus::before,
.underline a:hover::before,
.underline a:active::before {
	transform: scaleX(1);
}


/*
a[href$=".gif" i]::after,
a[href$=".jpg" i]::after,
a[href$=".jpeg" i]::after,
a[href$=".png" i]::after,
a[href$=".webp" i]::after {
    background-color: rgba(255, 255, 255, 0.5);
    content: "+";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 5em;
    transform: scaleX(0);
    transition: 0.3s;
}
a[href$=".gif" i]:focus::after,
a[href$=".gif" i]:hover::after,
a[href$=".gif" i]:active::after,
a[href$=".jpg" i]:focus::after,
a[href$=".jpg" i]:hover::after,
a[href$=".jpg" i]:active::after,
a[href$=".jpeg" i]:focus::after,
a[href$=".jpeg" i]:hover::after,
a[href$=".jpeg" i]:active::after,
a[href$=".png" i]:focus::after,
a[href$=".png" i]:hover::after,
a[href$=".png" i]:active::after,
a[href$=".webp" i]:focus::after,
a[href$=".webp" i]:hover::after,
a[href$=".webp" i]:active::after {
    transform: scaleX(1);
}
*/


/* Icons */
/* 
- Links mit href=tel oder mailto erhalten kein Symbol. Hierzu müssen gegebenenfalls explizit Klassen oder span/i gesetzt werden, damit bei hover das vorangestellte icon kein underline bekommt. Icons für Daten unter Kontakt etc. werden mit <i> angelegt. 
- display: inline-block; verursacht line-break 
*/


.com-content-category-blog a::after,
.com-content-category-blog a::before,
.com-content-category-blog span::after,
.com-content-category-blog span::before,
.blog-featured a::after,
.blog-featured a::before,
.blog-featured span::after,
.blog-featured span::before,
.com-content-article a::after,
.com-content-article a::before,
.com-content-article span::after,
.com-content-article span::before,
.suchergebnis .search a::after,
.suchergebnis .search a::before,
.suchergebnis .search span::after,
.suchergebnis .search span::before {
    display: inline;
	font-family: 'Font Awesome 6 Free';
    font-size: 0.6em;
    font-weight: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
	line-height: 2;
    vertical-align: 1px;
}
.com-content-category-blog a::after,
.blog-featured a::after,
.com-content-article a::after,
.suchergebnis .search a::after,
.com-content-category-blog span::after,
.blog-featured span::after,
.com-content-article span::after,
.suchergebnis .search span::after {
   margin-left: 5px; 
}
.com-content-category-blog a::before,
.blog-featured a::before,
.com-content-article a::before,
.suchergebnis .search a::before,
.com-content-category-blog span::before,
.blog-featured span::before,
.com-content-article span::before,
.suchergebnis .search span::before {
   margin-right: 5px; 
}

.symbol-mail-davor::before {
  content: "\f0e0";
}
.symbol-fax-davor::before {
  content: "\f1ac";
}
.symbol-handy-davor::before {
  content: "\f3cd";
}
.symbol-hoerer-davor::before {
  content: "\f095";
}
.symbol-www-davor::before {
  content: "\f0ac";
}
.symbol-flyer-davor::before {
  content: "\f518";
}

.intern::after,
.pfeil-dahinter::after {
    font-family: 'Font Awesome 6 Free';
    font-family: 'Didact Gothic', sans-serif;
    content: var(--pfeil-rechts)!important;
    transform: scaleX(1)!important
}
.pfeil-davor::before {
    content: var(--pfeil-rechts)!important;
    transform: scaleX(1)!important;
}

/* externer Link */
.symbol-extern-dahinter::after,
a[href^="http" i]::after {
    content: '\f08e';
}
/* externer Link: kein Symbol, wenn Link ueber Bild */
a[href^="http" i]:has(> img)::after {
    content: '' !important;
}
/* externer Link: kein Symbol im Newsbereich */
.news a[href^="http" i]::after {
    content: '' !important;
}
/* Link zu PDF-Datei */
a[href$=".pdf" i]::after {
    content: '[PDF]';
    font-family: 'Didact Gothic', sans-serif;
}
/* mail-link */
a[href^="mailto"] {
    word-break: break-word;
}
.intern::before,
.symbol-extern-dahinter::before,
.pfeil-dahinter::before,
.pfeil-davor::after {
	content: '';
	position: absolute;
	height: 2px;
	bottom: -2px;
	width: 100%;
	left: 0;
	transition: all 0.3s ease-in-out 0s;
    background-color: var(--gruen);
    transform: scaleX(0);
}

.intern:focus::before,
.intern:hover::before,
.intern:active::before,
.symbol-extern-dahinter:focus::before,
.symbol-extern-dahinter:hover::before,
.symbol-extern-dahinter:active::before,
.pfeil-dahinter:focus::before,
.pfeil-dahinter:hover::before,
.pfeil-dahinter:active::before,
.pfeil-davor:focus::after,
.pfeil-davor:hover::after,
.pfeil-davor:active::after {
	transform: scaleX(1);
}


/* Symbole aufheben */
.no-icon::after,
.ohne-symbol::after,
.ohne-symbol::before,
.sige a::after {
    content: ''!important;
    margin: 0!important;
    width: 0!important;
}

br{line-height:1}

button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
    outline-width: 0;
    margin: 0;
    padding: 0;
    transition: all var(--transition-dur-time);
}

button span,
button div,
button div span {
    pointer-events: none;
}

/* Sprungpunkt fuer Anker / Hoehenausgleich */
div[id].jumppoint {
    border-top: var(--dist) solid white;
    margin-top: var(--dist);
    padding: var(--double-dist) var(--dist);
}

dd {
    line-height: 1.5;
    margin-bottom: var(--double-dist);
    margin-inline-start: 0;
    margin-left: 0;
}
@media(min-width: 993px) {
    dd {
        margin-inline-start: 19px;
        margin-left: 19px;
    }
}

dt{color:var(--gruen);font-weight:bold}

hr{border:0;border-top:1px solid #eee;margin:20px 0}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: none;
    transition: opacity 0.31s ease-in-out;
}

li{line-height:1.3}

p {
    font-weight: normal;
    line-height: 1.4;
    margin-top: 2em;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h2 + p,
h3 + p {
    margin-top: 0;
}

ol, ul {
    margin-bottom: var(--dist);
    margin-top: var(--half-dist);
    padding-left: var(--double-dist);
}

ul + h2 {
    margin-top: var(--double-dist);
}

div > ul:last-child {
   margin-bottom: 0;
}
ul li:last-child {
    margin-bottom: 0;
}

li.anchor::marker {
    content: "\f13d\00a0\00a0";
    color: var(--gruen);
    font-family: 'Font Awesome 6 Free';
    font-size: 0.7em;
}
li:focus::marker,
li:hover::marker,
li:active::marker {
    color: inherit;
}

select {
    border-color: var(--gruen);
    border-width: 1px;
    border-radius: 3px;
    background-color: white;
    text-align: right;
}

strong {
    font-family: Poppins-SemiBold, 'Didact Gothic', sans-serif;
}

table {
    margin-bottom: var(--dist);
    margin-top: var(--dist);
}

th {
    background-color: #e6e6e6;
    text-align: left;
}


/* ------------ special classes ------------ */

/* Puenktchen am Ende des Textes vor read-more-Button */
.ellipsi {
    margin-bottom: 3em;
}
/* KEEP
.ellipsi::after {
  content: '\00a0\2026';
}
*/

.heart {
font-size: calc(var(--h1-fontsize) - 4px);
}
.heart::after,
.heart::before {
    content: '\f004';
    color: orange!important;
    display: inline!important;
	font-family: 'Font Awesome 6 Free';
    font-size: inherit!important;
    line-height: 1!important;
    margin: 0!important;
    margin-right: 1px!important;
    vertical-align: initial!important;
}
.heart::after {
    content: '';
}

.jump-dist {
    border-top: var(--double-dist) solid transparent;
}

.pos-rel {
    position: relative;
}


/* ------ read-more-buttons ------ */
.readmore {
    position: absolute;
    bottom: var(--rand-dist);
    right: var(--rand-dist);
}

.readmore a {
    border: 1px solid var(--gruen);
    display: inline-block;
    font-family: Poppins-SemiBold, 'Didact Gothic', sans-serif;
    font-size: 0.8em;
    padding: 4px var(--rand-dist);
    vertical-align: middle;
    white-space: nowrap;
	-webkit-touch-callout: none;/* ### */
}
@media(min-width: 600px) {
    .readmore a {
        padding-bottom: 4px;
        padding-top: 4px
    }   
}
.readmore a:link,
.readmore a:visited {
    background-color: var(--gruen);
    color: white;
    cursor: pointer;
}
.readmore a:focus,
.readmore a:hover,
.readmore a:active {
    background-color: white;
    border-color: var(--gruen);
    color: var(--gruen);
}
.readmore a::after {
    content: "\f0da";
    color: inherit;
    font-family: 'Font Awesome 6 Free';
    font-size: 0.9em;
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-left: 3px;
    transition: transform 1s;
    vertical-align: 0;
}
.readmore a:focus::after,
.readmore a:hover::after,
.readmore a:active::after {
    color: inherit;
    transform: rotate(359deg);
}



/* 
 * =================================
 *          helper classes
 * =================================
*/

.full-width-layout {
    border-radius: 0;
}

.centered-layout {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
/*    padding: 0 var(--rand-dist);*/
}
/*
@media(min-width: 1174px) {
    .centered-layout {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}
*/

.padlr--rand-dist {
    padding: 0 var(--rand-dist);
}
@media(min-width: 1174px) {
    .padlr--rand-dist {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

.marb--dist {
    margin-bottom: var(--dist);
}


.big-screen {
    display: none!important;
}
@media(min-width: 993px)  {
    .big-screen {
        display: block!important;
    }
    .small-screen {
        display: none!important;
    }
}

@media(min-width: 730px) AND (max-width: 767.98px) {
    .gallery-link-xs-only {
        display: none!important;
    }
}

@media(min-width: 914px)  {
    .gallery-link-xs-only {
        display: none!important;
    }
}

.sameWidthS,
.sameWidthL,
.sameWidth40 {
    display: inline-block;
}
.sameWidthS {
    width: 55px;
}
@media(min-width: 531px) {
    .sameWidthS {
        width: 76px;
    }
}
@media(min-width: 592px) AND (max-width: 767.98px) {
    .sameWidthS,
    .sameWidthL {
        width: 133px;
    }
}
@media(min-width: 768px) {
    .sameWidthS {
        width: 65px;
    }
}
@media(min-width: 870px) {
    .sameWidthL {
        width: 140px;
    }
}

.sameWidth40 {
    width: 40px;
}

/* hidden elements, screenreader only */
.sr-only {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    top: 50%;
}

.shadow {
    box-shadow: var(--shadow-4-seiten);
}


/* Farben */
.blau,
.blaue-Schrift {
    color: var(--blau)!important;
}
.gelb,
.gelbe-Schrift {
    color: var(--gelb)!important;
}
.gruen,
.gruene-Schrift {
    color: var(--gruen)!important;
}
.orange,
.orange-Schrift {
    color: var(--orange)!important;
}
.rot,
.rote-Schrift {
    color: var(--rot)!important;
}


/* circle */
.kreis {
    position: relative;
    background-color: transparent;
    border-radius: 50%;
    float: right;
    line-height: 1;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.kreis::after, .kreis::before {
    content: '';
    display: table;
    clear: both;
}


/* 
 * ==============================================
 *          LOGO (BOXES und FOOTER, Modul)
 * ==============================================
*/

.logo a {
    display: block;
    transition: transform .55s ease-in-out .06s;
}
.logo a:hover,
.logo a:focus,
.logo a:focus-within,
.logo a:active {
    transform: rotate(360deg);
}


/* 
 * ==============================================
 *                  MAIN LAYOUT
 * ==============================================
*/

.top-distance {
    padding-top: calc(var(--logo-height) + 3*var(--rand-dist) + 2px);
    transition: padding var(--transition-dur-time);
}

.search--open:not(.scroll) .top-distance {
    padding-top: calc(var(--logo-height) + 3*var(--rand-dist) + 2px + var(--search-height));
}

@media(min-width: 993px) {
    .top-distance {
        padding-top: calc(var(--logo-height) + var(--dist) + 2px);
    }
    .search--open:not(.scroll) .top-distance {
        padding-top: calc(var(--logo-height) + 1*var(--rand-dist) + 2px + var(--search-height));
    }
}


/* 
 * ==============================================
 *              MAIN LAYOUT: CONTENT
 * ==============================================
*/

main {
    display: grid;
    gap: var(--dist);
    grid-template-rows: min-content auto;
}
.main.gridTemplate {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: var(--dist);
    width: 100%;
}
@media (min-width: 1000px) {
    body:not(.termine) .main.gridTemplate {
        display: inline-grid;
        grid-template: auto / 1fr calc(200px + 2*var(--dist));
        column-gap: var(--dist);
        row-gap: unset;
    }
}

@media(max-width: 435.98px) {
    .wrapper-content {
        margin-bottom: 0;
        padding: 0;
    }
    main {
        padding: 0 var(--rand-dist);
    }
}


/* 
 * ==============================================
 *                  BREADCRUMBS
 * ==============================================
*/

.breadcrumbs {
    background-color: white;
    padding: var(--half-dist) var(--dist);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    font-family: Poppins-SemiBold, 'Didact Gothic', sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* hide joomla divider */
.breadcrumbs li:first-child {
    display: none;
}
.breadcrumbs li {
    margin-bottom: 0;
    padding-right: 1.0em;
    position: relative;    
}

.breadcrumbs li::after {
    position: absolute;
    top: 0.3em;
    right: 0;
    content: '\00a0\00a0\f0da\00a0\00a0';
    font-weight: 900;
    font-family: 'Font Awesome 6 Free';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    color: var(--orange);
    font-size: 0.75em;
}
.breadcrumbs li:last-child::after {
    content: '';
}

.breadcrumbs a,
.breadcrumbs span {
    font-size: 0.8rem;
}
.breadcrumbs a:focus,
.breadcrumbs a:hover,
.breadcrumbs a:active {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
    text-decoration-line: underline;
}


/* 
 * ======================================================
 * BOXES (Modul, Element aside)
 * ======================================================
 *
 * Logo (Anzeige auf Homepage, nur in der Seitenleiste 
 * ab 768px),
 * Sekretariat, OG, Sozialarbeit, Speiseplan, 
 * Elternbrief, SV ELternpost, 
 * Link zu Slider (im Modul fuer HOME nicht aktiviert)
 *
 * ======================================================
*/

aside {
    background-color: white;
    padding: var(--rand-dist);
    position: sticky;
    top: 0;
    align-self: start;
}

/*
.boxes {
    --max-cols: 2;
    display: grid;
    gap: var(--rand-dist);
    grid-template-columns: repeat(auto-fit, minmax(min((100%/1 - var(--dist)*(1 - 1)/1), max(200px, (100%/var(--max-cols) - var(--dist)*(var(--max-cols) - 1)/var(--max-cols)))), 1fr));
}
*/
.boxes {
    display: grid;
    gap: var(--rand-dist);
    grid-template-columns: 1fr;
}

.boxes > div {
    min-height: 170px;
}

@media(max-width: 459.98px) {
    .boxes .brief {
        min-height: 142px;
    }
}
@media(min-width: 460px) AND (max-width: 585.98px) {
    .boxes .contacts--title a,
    .boxes .brief a .brief--text {
        font-size: 0.76em;
    }
}
@media(min-width: 636px) AND (max-width: 663px) {
    .boxes .contacts--title a,
    .boxes .brief a .brief--text {
        font-size: 0.9em;
    }
}
@media(min-width: 460px) AND (max-width: 999.98px) {
    .boxes {
        grid-template-columns: 1fr 1fr;
    }
    .boxes .logo {
        order: 1;
    }
    .boxes .sekretariat {
        order: 4;
    }
    .boxes .og {
        order: 3;
    }
    .boxes .sozialarbeit {
        order: 2;
    }
    .boxes .speiseplan {
        order: 7;
    }
    .boxes .brief.sv {
        order: 6;
    }
    .boxes .brief.gsb {
        order: 5;
    }
    .boxes .slider-home-modal {
        order: 8;
    }
}
@media(min-width: 926px) AND (max-width: 999.98px) {
    .boxes {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .boxes .logo {
        order: 1;
    }
    .boxes .sekretariat {
        order: 4;
    }
    .boxes .og {
        order: 3;
    }
    .boxes .sozialarbeit {
        order: 2;
    }
    .boxes .speiseplan {
        order: 5;
    }
    .boxes .brief.sv {
        order: 7;
    }
    .boxes .brief.gsb {
        order: 6;
    }
    .boxes .slider-home-modal {
        order: 8;
    }
}
@media(min-width: 1000px) {
    body:not(.termine) .boxes { 
        font-size: 0.88em;
        gap: var(--double-dist);
    }
    body:not(.termine) .boxes .contacts,
    body:not(.termine) .boxes .speiseplan,
    body:not(.termine) .boxes .slider-home-modal {
        min-height: 200px;
    }
    body:not(.termine) .boxes .brief {
        min-height: 142px;
    }
    body:not(.termine) .boxes .logo {
        min-height: unset;
        height: calc(163px + var(--double-dist) - var(--rand-dist));
        padding-top: calc(var(--double-dist) - var(--rand-dist));
    }
}

.boxes a {
    transition: font-size .3s, color .6s, font-weight .3s, background-color .3s, background-image .2s, background-size .3s, border-radius .3s;
}
.boxes a:link,
.boxes a:visited {
    color: var(--schwarz);
}
.boxes a:hover,
.boxes a:focus,
.boxes a:active {
    color: var(--gruen);
}


/* 
 * ------------------
 * BOXES LOGO (Modul)
 * ------------------
*/

.boxes .logo a {
    display: block;
    background-image: url(/images/logo/logo-grundschule-buenningstedt.png);
	background-position: center;
    height: 100%;
	width: 100%;
	margin-inline: auto;
}


/* 
 * -----------------------------------------
 * BOXES ELTERNBRIEF & SV ELTERNPOST (Modul)
 * -----------------------------------------
*/

.boxes .brief {
    background-color: white;    
    border: var(--half-dist) solid var(--gruen) !important;
}
.boxes .brief a {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.boxes .brief .triangle {
    position: relative;
    height: 3.5em;
}
.boxes .brief .triangle > * {
    position: absolute;
}
.boxes .brief .triangle svg path {
    fill: white;
}
.boxes .brief .triangle svg:first-child path {
    fill: var(--gruen);
}
.boxes .brief .triangle p {
    margin-top: 5px;
    text-align: center;
    width: 100%;
}
.boxes .brief .triangle p span {
    transition: transform .71s;
}
.boxes .brief .triangle p span::before {
    color: var(--orange);
    font-size: 39px;
}
.boxes .brief a .brief--text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    padding: 0 var(--dist);
    transition: all .31s;
}

/* ------ BOX ELTERNBRIEF - ONLY ------ */
.boxes .brief.gsb a:hover .triangle p span,
.boxes .brief.gsb a:focus .triangle p span,
.boxes .brief.gsb a:active .triangle p span {
    transform: rotate(360deg);
}

/* ------ BOX SV ELTERNPOST - ONLY ------ */
.boxes .brief.sv .triangle p span {
    position: relative;
    color: var(--schwarz);
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    font-size: 17px;
    font-weight: bold;/*FALLBACK*/
    letter-spacing: 1px;
    z-index: 0;
}
.boxes .brief.sv .triangle p span::before {
    font-family: "Font Awesome 6 Free";
}
.boxes .brief.sv .triangle p span::before {
    position: absolute;
    top: -9px;
    left: -8px;
    color: var(--orange);
    z-index: -1;
    transition: transform .71s;
}
.boxes .brief.sv a:hover .triangle p span::before,
.boxes .brief.sv a:focus .triangle p span::before,
.boxes .brief.sv a:active .triangle p span::before {
    transform: rotate(360deg);
}


/* 
 * -----------------------------------------------
 * BOXES: CONTACTS (SEKRETARIAT, OG, SOZIALARBEIT) 
 * -----------------------------------------------
 */

.contacts .wrapper {
    border-style: solid;
    border-width: var(--half-dist);
    height: 100%;
}
.contacts .outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: var(--half-dist);
}
.contacts .contacts--title {
    line-height: 1.1;
    margin-top: 0; 
    text-align: center;
}
.contacts .contacts--title a {
    font-family: Poppins-SemiBold, 'Didact Gothic', sans-serif;
}
@media(min-width: 1000px) {
    .contacts .contacts--title a {
        font-size: 0.88em;
    }
}
.contacts .contacts--title a::after {
    content: "\f0da";
    color: inherit;
    font-family: 'Font Awesome 6 Free';
    font-size: 0.88em;
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-left: 3px;
    transition: transform 1s;
    vertical-align: -1px;
}
.contacts .contacts--title a:focus::after,
.contacts .contacts--title a:hover::after,
.contacts .contacts--title a:active::after {
    color: inherit;
    transform: rotate(359deg);
}
.contacts .fa-caret-right {
	font-size: 0.8em;
}
.contacts .nummer {
    text-align: center;
}
.contacts .nummer a {
    display: inline-block;
    line-height: 0.5;
    margin-top: 4px;
    white-space: nowrap; /* ### ??? */
}
.contacts .nummer a span {
    line-height: 2;
    transition: transform 1s, color .3s;
}
.contacts .nummer a:focus span,
.contacts .nummer a:hover span,
.contacts .nummer a:active span {
    transform: rotate(359deg);
}
.contacts .person {
    color: white;
    line-height: 1.3;
}
@media(min-width: 1000px) {
    .contacts .person {
        color: var(--schwarz);
    }
}


/* 
 * --------------------------
 * CONTACTS: SEKRETARIAT & OG
 * --------------------------
 *
*/

.sekretariat a:link,
.sekretariat a:visited,
.og a:link,
.og a:visited {
    color: white;
}
.sekretariat a:hover,
.sekretariat a:focus,
.sekretariat a:active,
.og a:hover,
.og a:focus,
.og a:active {
    color: var(--schwarz);
}
@media(min-width: 1000px) {
    .sekretariat a:link,
    .sekretariat a:visited,
    .og a:link,
    .og a:visited {
        color: var(--schwarz);
    }
}


/* 
 * ---------------------
 * CONTACTS: SEKRETARIAT
 * ---------------------
 *
*/

.sekretariat {
    background-color: var(--gruen);
}
.sekretariat .wrapper {
    border-color: var(--gruen);
}
@media(min-width: 1000px) { 
    .sekretariat .wrapper {
        background-color: white;
    } 
    .sekretariat a:hover,
    .sekretariat a:focus,
    .sekretariat a:active {
        color: var(--gruen);
    }
}


/* 
 * ------------
 * CONTACTS: OG
 * ------------
*/

.og {
    background-color: var(--orange);
}
.og .wrapper {
    border-color: var(--orange);
}
@media(min-width: 1000px) {
    .og,
    .og .wrapper {
        background-color: white;
    }
    .og a:hover,
    .og a:focus,
    .og a:active {
        color: var(--orange);
    }
}


/* 
 * ----------------------
 * CONTACTS: SOZIALARBEIT
 * ----------------------
*/

.sozialarbeit {
    border-color: var(--gruen);
}
.sozialarbeit .wrapper {
    border-color: var(--gruen);
}
.sozialarbeit .person {
    color: var(--schwarz);
}



/* 
 * ----------------
 * BOXES SPEISEPLAN
 * ----------------
*/

.boxes .speiseplan {
    background-color: var(--gruen);
}
@media(min-width: 1000px) {
    .boxes .speiseplan {
        border-radius: 50%;
    }
}
.boxes .speiseplan a {
    display: flex;
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    font-size: 1.1em;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: font-size .3s; 
    z-index: 0;
}
.boxes .speiseplan a,
.boxes .speiseplan a:link,
.boxes .speiseplan a:visited {
    color: white;
}
.boxes .speiseplan a:focus,
.boxes .speiseplan a:hover,
.boxes .speiseplan a:active {
    color: white;
    font-size: 0.88em;
}
.boxes .speiseplan a::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: url(/images/system/speiseplan.svg);
    background-position: center;
    background-size: 25%;
    transition: transform .71s, font-size .51s;
    z-index: -1;
}
.boxes .speiseplan a:hover::before,
.boxes .speiseplan a:focus::before,
.boxes .speiseplan a:active::before {
    transform: rotate(360deg);
}


/* 
 * -----------------------------
 * BOXES slider-impressionen
 * -----------------------------
 * alle Seiten ausser Homepage
 * keine Slider-Funktion
 * Slider oeffnet per Link modal
*/

.boxes .slider-home-modal button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-image: url(/images/SCHULE/bilder/grundschule-buenningstedt.jpg);
    background-size: cover;
    color: rgb(255, 255, 255, 0.5);
    font-size: 1.5rem;
    transition: all var(--transition-dur-time);
} 
.boxes .slider-home-modal button:focus,
.boxes .slider-home-modal button:hover,
.boxes .slider-home-modal button:active {
    color: var(--orange);
    font-size: 2.7rem;
}
.boxes .slider-home-modal button span {
    transition: transform .71s;
} 
.boxes .slider-home-modal button span::before {
    font-size: 39px;
}
.boxes .slider-home-modal button:focus span,
.boxes .slider-home-modal button:hover span,
.boxes .slider-home-modal button:active span {
    transform: rotate(360deg);
}
.boxes .slider-home-modal button svg {
    height: 30%;
    width: 30%;
    transition: all var(--transition-dur-time);
}
.boxes .slider-home-modal button path {
    fill: var(--orange);
}
.boxes .slider-home-modal button:focus svg,
.boxes .slider-home-modal button:hover svg,
.boxes .slider-home-modal button:active svg {
    height: 50%;
    width: 50%;
}


/* 
 * ------------------
 * SPECIAL: HOME ONLY
 * ------------------
*/

@media(min-width: 460px) AND (max-width: 999.98px) {
    body.home .boxes .logo {
        display: none;
    }
}
@media(min-width: 460px) AND (max-width: 702.98px) {
    body.home .boxes .sekretariat {
        order: 2;
    }
    body.home .boxes .og {
        order: 3;
    }
    body.home .boxes .sozialarbeit {
        order: 1;
    }
    body.home .boxes .speiseplan {
        order: 6;
    }
    body.home .boxes .brief.gsb {
        order: 4;
    }
    body.home .boxes .brief.sv {
        order: 5;
    }
}
@media(min-width: 703px) AND (max-width: 999.98px) {
    body.home .boxes {
        grid-template-columns: 1fr 1fr 1fr;
    }
    body.home .boxes .sekretariat {
        order: 1;
    }
    body.home .boxes .og {
        order: 3;
    }
    body.home .boxes .sozialarbeit {
        order: 2;
    }
    body.home .boxes .speiseplan {
        order: 5;
    }
    body.home .boxes .brief.gsb {
        order: 4;
    }
    body.home .boxes .brief.sv {
        order: 6;
    }
}


/* 
 * ---------------------
 * SPECIAL: TERMINE ONLY
 * ---------------------
*/

@media(min-width: 926px) AND (max-width: 999.98px) {
    .termine .boxes .contacts--title a,
    .termine .boxes .brief a .brief--text {
        font-size: 0.9em;
    }
}
@media(min-width: 1000px) {
    .termine .boxes {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .termine .boxes .logo {
        order: 1;
    }
    .termine .boxes .sekretariat {
        order: 4;
    }
    .termine .boxes .og {
        order: 3;
    }
    .termine .boxes .sozialarbeit {
        order: 2;
    }
    .termine .boxes .speiseplan {
        order: 5;
    }
    .termine .boxes .brief.sv {
        order: 7;
    }
    .termine .boxes .brief.gsb {
        order: 6;
    }
    .termine .boxes .slider-home-modal {
        order: 8;
    }
    
    .termine .boxes .speiseplan {
        border-radius: 0;
    }
    .termine .boxes .sekretariat .person,
    .termine .boxes .og .person,
    .termine .boxes .sekretariat a:link,
    .termine .boxes .sekretariat a:visited,
    .termine .boxes .og a:link,
    .termine .boxes .og a:visited {
        color: white;
    }
    .termine .boxes .sekretariat .wrapper {
        background-color: var(--gruen);
    }
    .termine .boxes .og,
    .termine .boxes .og .wrapper {
        background-color: var(--orange);
    }
    .termine .boxes .sekretariat a:hover,
    .termine .boxes .sekretariat a:focus,
    .termine .boxes .sekretariat a:active,
    .termine .boxes .og a:hover,
    .termine .boxes .og a:focus,
    .termine .boxes .og a:active {
        color: var(--schwarz);
    }
}


/* 
 * ===========================================================
 *          INFOBOX (max. 3 oder 4 anstehende Termine)
 * ===========================================================
 *
*/

.infobox {
    overflow: hidden;
}

.infobox a {
    display: block;
    background-color: white;
    border-radius: 0;
    padding-bottom: var(--double-dist);
    transition: all .9s ease-in-out 0.2s;
}
.infobox a:link,
.infobox a:visited {
     color: var(--schwarz);
}
.infobox a:hover,
.infobox a:focus,
.infobox a:active {
    cursor: url(/images/system/cursor-termine.png) 50 0, pointer;
    color: var(--orange);
}

    
/* ------ headline 'info' ------ */
.infobox .info--wrapper {
    position: relative;
}

.infobox .info--text {
    position: absolute;
    top: calc(-2.5*var(--rand-dist));
    right: calc(-1*var(--rand-dist));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    width: 1.1em;
    height: 1.1em;  
    background: linear-gradient(to bottom left, rgba(255, 165, 0, 0.8), var(--orange));
    color: white;
    border-radius: 50%; 
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    font-size: clamp(20px, 57vw, 600px);
    transition: all .3s ease-in-out;
}
.infobox .info--text::before {
    content: '!';
    margin-top: -0.1em;
}

@media(min-width: 1180px) {
    .infobox .info--text {
        right: calc(100px + var(--dist));
    }
}

.infobox a .info--text::before {
    transition: transform .71s ease-in-out;
}
.infobox a:hover .info--text::before,
.infobox a:focus .info--text::before,
.infobox a:focus-within .info--text::before,
.infobox a:active .info--text::before {
    transform: rotate(52deg);
}


/* ------ Termin-Ausgabe ------ */

.infobox .data {
    z-index: 1;
    position: relative;
}

.infobox .data--wrapper {
    margin-inline: auto;
    max-width: max-content;
    overflow: hidden;
    padding: calc(3*var(--header-font-size)) var(--rand-dist) var(--header-font-size);
}

.infobox table.mod_events_latest_table {
    margin: 0;
}

/* ein ganzer Eintrag */
.infobox table.mod_events_latest_table td {
    font-size: clamp(16px, calc(8px + 2.5vw), 30px);
    line-height: 1.3;
    padding: 0.5em 0;
}

/* Datum*/
.infobox .mod_events_latest_date {
      font-size: 0.9em;
}

/* Termintext */
.infobox .mod_events_latest_content {
    font-family: Poppins-SemiBold, 'Didact Gothic', sans-serif;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-transform: uppercase;
}
.infobox .mod_events_latest_content::before {
    font-family: Poppins-Thin, 'Didact Gothic', sans-serif; 
}
@media(max-width: 400.98px) {
    .infobox .mod_events_latest_content::before {
        content: '\A';
        white-space: pre;    
    }
}
@media(min-width: 401px) {
    .infobox .mod_events_latest_content::before {
        content: '\00a0|\00a0';
    }
}

.infobox .eventstyle[style*="white"] {
    border-color: rgb(162, 198, 20, 0.01)!important;
}

.infobox a .mod_events_latest_date,
    transition: all .3s ease-in-out;
}

.infobox a:hover .mod_events_latest_date,
.infobox a:focus .mod_events_latest_date,
.infobox a:active .mod_events_latest_date  {
    color: var(--schwarz)!important;
}
.infobox a:hover .mod_events_latest_content,
.infobox a:focus .mod_events_latest_content,
.infobox a:active .mod_events_latest_content,
.infobox a:hover .mod_events_latest_date,
.infobox a:focus .mod_events_latest_date,
.infobox a:active .mod_events_latest_date {
    color: var(--schwarz);
}

/* 
 * =================================
 * NEWS/FEATURES (Modul)
 * =================================
*/
.news {
    background-color: var(--schwarz);
    border-radius: 0;
    overflow: hidden;
}

.news .custom {
    padding-bottom: var(--double-dist);
}

.news .header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--orange); 
    border-radius: 50%;
    color: white;
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    font-size: var(--header-font-size);
    margin-bottom: 0;
    text-transform: uppercase;
    transition: all .5s ease-in-out .02s;
    margin-left: -2px;
    margin-top: calc(-2.5*var(--rand-dist));
    margin-bottom: -1em;
    height: var(--head-circle--size);
    width: var(--head-circle--size);
}
/* KEEP
.news .centered-layout:hover .custom .header h2 {
    background-color: var(--gruen); 
}
*/

@media(min-width: 1174px) {
    .news .header h2 {
        margin-left: -12px;
    }
}

/* ------ pins ------ */
.news .pin {
    border-radius: 50%;
    display: inline-block;
    position: absolute; 
    background-color: var(--gruen);
    height: 16px;
    width: 16px;
    left: -6px;
    top: -10px;
    box-shadow: 4px 4px 5px 0px rgb(0, 0, 0, 0.75);
    z-index: 1;
}
@media(min-width: 280px) {
    .news .pin {
        height: 20px;
        width: 20px;
        left: -8px;
        top: -11px;
    }
}
@media(min-width: 480px) {
    .news .pin {
        left: -10px;
    }
}

/* items Layout */
.news .gridTemplate {
  --grid-layout-gap: var(--dist);
  --grid-column-count: 4;
  --grid-item--min-width: 172px;
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    gap: max(var(--dist), 16px);
    grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-auto-rows: auto;
    justify-items: center;
    position: relative;
    padding: 0 var(--rand-dist);
    z-index: 2;
}

/* items: styles */
.news .gridTemplate > * {
    background-color: white;
    padding: var(--rand-dist);
padding: var(--half-dist);
    position: relative;
    width: 100%;
    transition: all .3s;
}
@media(min-width: 600px)  AND (max-width: 1099.98px){
    padding: min(12px,var(--rand-dist));
}

.news .gridTemplate > *,
.news .gridTemplate h3 {
    hyphens: manual!important;
}
.news .gridTemplate > div:hover {
	opacity: 0.8;
}

.news .img_wrapper {
    position: relative;
}
.news .img_wrapper::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.news .img_wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news .text {
    display: flex;
    flex-direction: column;
    padding-top: var(--half-dist);
}

.news .text h3 {
    border-top: 1px solid lightgray;
  	border-radius: 0;
    font-family: Poppins-Regular, 'Didact Gothic', sans-serif;
    font-size: 1rem;
  	font-weight: bold;
    text-transform: uppercase; 
    padding-top: 1em;
  	text-align: center;
    width: 100%;
}

.news .text p:first-of-type {
    font-size: 0.9em;
    hyphens: manual;
    margin-bottom: 1em;
    margin-top: 0.3em;
    text-align: center;
}

.news .text p:first-of-type:not(:only-of-type) {
    margin-bottom: 3em;
}

/* ====== readmore button ====== */

/*
.news .text p ~ p {
    line-height: 1;
    width: calc(100% - 2*var(--rand-dist));
    container: readmore / inline-size;
}
@container readmore (min-width: 1px) {
  .news .text p ~ p a {
      font-size: 16px;
      font-size: min(9cqi, 18px);
  }
}
*/
.news .text p ~ p {
    line-height: 1;
}

.news .text p ~ p a {
    border-radius: 0;
    padding: 0;
    position: relative;
    text-align: right;
    transition: all 0.4s;
    width: 100%;
    font-family: Poppins-Regular, 'Didact Gothic', sans-serif;
}

.news .text p ~ p a,
.news .text p ~ p a:link,
.news .text p ~ p a:visited {
    background-color: white;
    border-color: transparent;
    color: var(--orange);
}
.news .text p ~ p a:hover,
.news .text p ~ p a:focus,
.news .text p ~ p a:active {
    background-color: white;
/*    border-bottom-color: var(--gruen);*/
    color: var(--gruen);
}

/*
@media(min-width: 680px) AND (max-width: 745px){
    .news .text p ~ p a {
        font-size: 0.7em;
    }
}
*/

.news .text p ~ p a::before {
	content: '';
	position: absolute;
	height: 2px;
	bottom: -2px;
	width: 100%;
	left: 0;
	transition: all 0.3s ease-in-out 0s;
    background-color: var(--gruen);
    transform: scaleX(0);
}
.news .text p ~ p a:focus::before,
.news .text p ~ p a:hover::before,
.news .text p ~ p a:active::before {
	transform: scaleX(1);
}

.news .ellipsi {
    margin-bottom: 0;
}
.news .ellipsi::after {
    content: '';
}


.news .gridTemplate .dummy {
    display: none;
}
.news .gridTemplate .no1{
    background-color: rgb(162,198,20,0.3);
}
.news .gridTemplate .no2 {
    background-color: rgb(162,198,20,0.5);
}
.news .gridTemplate .no3 {
    background-color: rgb(162,198,20,0.7);
}
@media(min-width: 328px) {
    .news .gridTemplate .dummy.d1.no1 {
        display: block;
    }
}
@media(min-width: 630px) {
    .news .gridTemplate .dummy.d1.no2 {
        display: block;
    }
}
@media(min-width: 900px) {
    .news .gridTemplate .dummy.d1.no3 {
        display: block;
    }
}
@media(min-width: 670px) {
    .news .gridTemplate .dummy.d2.no1 {
        display: block;
    }
}
@media(min-width:900px) {
    .news .gridTemplate .dummy.d2.no2 {
        display: block;
    }
}
@media(min-width: 382px) AND (max-width: 568.98px) {
    .news .gridTemplate .dummy.d3.no1 {
        display: block;
    }
}
@media(min-width: 1000px) {
    .news .gridTemplate .dummy.d3.no1 {
        display: block;
    }
}
@media(min-width: 506px) AND (max-width: 679.98px) {
    .news .gridTemplate .dummy.d4.no1,
    .news .gridTemplate .dummy.d4.no2 {
        display: block;
    }
}
@media(min-width: 340px) {
    .news .gridTemplate .dummy.d5.no1 {
        display: block;
    }
}
@media(min-width: 680px) {
    .news .gridTemplate .dummy.d5.no2,
    .news .gridTemplate .dummy.d5.no3 {
        display: block;
    }
}
@media(min-width: 768px) {
    .news .gridTemplate .dummy.d6.no1,
    .news .gridTemplate .dummy.d6.no2 {
        display: block;
    }
}

@media(min-width: 382px) {
    .news .gridTemplate .dummy.d7.no1 {
        display: block;
    }
}
@media(min-width: 572px) AND (max-width: 767.98px) {
    .news .gridTemplate .dummy.d7.no2 {
        display: block;
    }
}
@media(min-width: 569px) AND (max-width: 763.98px) {
    .news .gridTemplate .dummy.d8.no1 {
        display: block;
    }
}


/* 
 * ===================
 * FOOTER
 * ===================
*/

footer {
    font-weight: bold;
    text-align: center;
}

footer a:link,
footer a:visited {
	color: white;
}
footer a:hover,
footer a:focus,
footer a:active {
    color: var(--schwarz);
}

footer img {
    max-width: min(160px, 82%);
}

footer .logoABC.grid  {
	font-size: 0.9em;
	display: grid;
    align-items: center;
	justify-items: center;
}

footer .logo {
    padding-top: var(--triple-dist);
}

footer .address {
    line-height: 1.7;
    padding: var(--dist) 0 var(--triple-dist);
}
footer .address .fa-phone {
    color: white;
}

footer .abczertifikat {
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    padding: var(--triple-dist) 0;
    width: 100%;
}

footer .abczertifikat a {
    display: block;
}

@media(min-width: 500px) {
    footer .logoABC.grid  {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--triple-dist);
    }
    footer .logoABC.grid > div {
        padding: var(--triple-dist) 0 var(--double-dist);
    }
    footer img {
        max-height: min(147px, 16vw);
        max-width: inherit;
    }
    footer .abczertifikat {
        border: none;
        width: initial;
    }
}
@media(min-width: 600px) {
    footer .logo {
        justify-self: end;
    }
    footer .abczertifikat {
        justify-self: start;
    }
}


/* ====== Abbinder Links ====== */

footer nav {
    border-top: 1px solid rgba(255, 255, 255, 0.7);
}
footer nav ul {
    display: grid;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: var(--triple-dist) 0;
}
footer nav ul li {
    line-height: 3;
}
@media(min-width: 500px) {
    footer .full-width-layout {
        border-top: 1px solid white;
    }
    footer nav {
        border-top: none;
    }
    footer nav ul {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: var(--rand-dist);
        padding: var(--half-dist) 0 0;
    }
    footer nav ul li:first-child {
        justify-self: start;
    }
    footer nav ul li:last-child {
        justify-self: end;
    }
}

footer nav .active a:link,
footer nav .active a:visited,
footer nav .active a:hover,
footer nav .active a:focus,
footer nav .active a:active {
    color: var(--schwarz);
    cursor: default;
    text-decoration: underline;
}

footer a.underline:hover,
footer a.underline:focus,
footer a.underline:active,
footer .underline a:hover,
footer .underline a:focus,
footer .underline a:active {
	text-decoration: underline;
	text-decoration-color: var(--schwarz);
}

footer a.underline:hover,
footer a.underline:focus,
footer a.underline:active,
footer .underline :not(.active) > a:hover,
footer .underline :not(.active) > a:focus,
footer .underline :not(.active) > a:active {
	box-shadow: 0 1px var(--orange);
}

footer a.underline::before,
footer .underline :not(.active) > a::before {
	height: 1px;
	bottom: 1px;
	background-color: white;
}


/* 
 * =================================================
 *
 * STARTSEITE:
 * 
 * (1) .blog-featured 
 *
 *     (2) .blog-items.items-leading
 *         oder nur .blog-items (Joomla 3)
 *
 *         (3) .blog-item
 *
 *             (4) .item-content
 *
 *
 *
 * BLOG (nur Neuigkeiten):
 *
 * (1) .com-content-category-blog oder .blog (Joomla 3)
 *     
 *     (2) .com-content-category-blog__items oder .blog-items               (Joomla 3)
 *
 *         (3) .com-content-category-blog__item oder .blog-item                 (ehemals .item) (Joomla 3)
 * 
 *             (4) .item-content
 *
 * 
 *
 * EINZELNER ARTIKEL:
 * 
 * (1) .com-content-article (= .item-page)
 *
 *     (2) .com-content-article__body (=itemprop="articleBody")
 *
 * 
 *
 * .suchergebnis .search: Suchergebnisseite
 *
 *
 *
 * jevents: Termine
 *
 * ================================================= 
*/

.blog-featured {
    position: relative;
}

/*.blog-featured,*/
.com-content-article,
.com-content-category-blog {
    background-color: white;
    padding: var(--double-dist) var(--rand-dist) var(--triple-dist);
    /*overflow-x: scroll; ###*/
}

.blog-featured::before,
.com-content-article::before,
.com-content-category-blog::before {
    content: "";
    clear: both;
    display: table;
}

.blog-featured img,
.com-content-article img,
.com-content-category-blog img {
    max-width: 100%;
    height: auto;
    transition: opacity var(--transition-dur-time);
}


/* 
 * ================================             
 * HOME ONLY, Startseitentext
 * ================================
*/

.blog-featured .blog-items.items-leading {
    min-height: 100%;
    display: grid;
}

.blog-featured .blog-items.items-leading .blog-item {
    background-color: white;
    padding: var(--triple-dist) var(--dist);
    position: relative;
}
.blog-featured .blog-items.items-leading .blog-item:not(:last-child) {
    margin-bottom: var(--dist);
}

.blog-featured .blog-items.items-leading .blog-item .item-content {
    margin-inline: auto;
    max-width: var(--maxLetterWidth);
    var(--double-dist) var(--dist) var(--triple-dist);
}


/* 
 * ================================
 * STATISCHE SEITEN
 * ================================
*/

.com-content-article__body {
    margin-inline: auto;
    max-width: var(--maxLetterWidth);
/*    min-height: 100%;*/
}

.com-content-article__body div {
    background-color: var(--grau-trans);
    margin-top: var(--double-dist);
    padding: var(--double-dist) var(--dist);
}
.com-content-article__body div.slider {
    padding: 0;
}
.com-content-article__body li {
    margin-bottom: 0.5em;/*###*/
}

.com-content-article__body .fa-book-open,
.com-content-article__body .fa-door-open,
.com-content-article__body .fa-envelope,
.com-content-article__body .fa-fax,
.com-content-article__body .fa-globe,
.com-content-article__body .fa-mobile-screen-button,
.com-content-article__body .fa-phone {
    color: var(--gruen);
    line-height: 2;
    width: 1.5em;
}
.com-content-article__body .fa-fax,
.com-content-article__body .fa-door-open {
    color: var(--schwarz);
}
.com-content-article__body h2 {
    margin-bottom: 0;
    margin-top: 2em;
}

.com-content-article__body div h2:first-of-type {
    margin-top: 0.5em;
}
.com-content-article table {
    line-height: 1.4;
    max-width: 100% !important;
}
.com-content-article__body h2 ~ table {
    margin-top: 0.4em;
}
.com-content-article td,
.com-content-article th {
    padding: 0.5em;
}   
.schulportrait .com-content-article td,
.schulportrait .com-content-article th {
    border: none;
}      

/* 
 * ========================
 * BLOGS
 * ========================
*/

.com-content-category-blog > * {
    margin-inline: auto;
    max-width: var(--maxLetterWidth);
}

.com-content-category-blog__item {
    border: 1px solid transparent;
    background-color: var(--grau-trans);
    margin-bottom: var(--double-dist);
    padding: var(--double-dist) var(--dist);
    position: relative;
    transition: border-color 0.31s, background-color 0.31s;
}
@media(min-width: 280px) {
    .com-content-category-blog__item {
        padding: var(--dist);
    }
}
.com-content-category-blog__item:focus,
.com-content-category-blog__item:hover
.com-content-category-blog__item:active {
    background-color: white;
    box-shadow: var(--shadow-4-seiten);
}


/* 
 * ========================================================
 *                      BLOG NEUIGKEITEN
 * ========================================================
*/

.blogSpecial.category-desc {
    text-align: center;
}

.blogSpecial .item-content {
    font-size: 0.9em;
}
.blogSpecial .item-content p,
.blogSpecial .item-content h2 {
    font-size: 1.1em;
}


.blogSpecial .item-content h2 {
    line-height: 1.4;
    margin: var(--half-dist) 0 0;
}

.blogSpecial .item-content a {
    display: inline-block;
    line-height: 1.4;
    margin-bottom: var(--half-dist);
}

/* einzelne Artikelansicht */
.blogSpecial .com-content-article img {
    max-height: 400px;
}

/* readmore-button */
.blogSpecial .item-content .readmore a {
	line-height: 1.5;
	margin-bottom: 0;
}

/* weitere Beitraege */
.com-content-category-blog .items-more {
    font-size: 0.9em;
    padding: var(--dist);
    border: 1px solid var(--gruen);
    border-bottom: none;
    border-left-style: solid;
}
.items-more h3 {
	border-bottom: 1px solid var(--gruen);
    font-weight: 700;
    margin-top: var(--dist);
}

.items-more ol li {
	margin-bottom: var(--dist);
	padding-left: 4px;
	padding-right: var(--dist);
	line-height: 1.3;
}
.items-more ol li:last-child {
	margin-bottom: 0;
}

.items-more a:link {
	color: inherit;
    text-decoration: underline;
}
.items-more a:visited {
	color: inherit;
/*    text-decoration: none;*/
}
.items-more a:focus,
.items-more a:hover,
.items-more a:active {
    color: var(--gruen);
    text-decoration: none;
}


/* === pagination (page, back, forward) === */

.com-content-category-blog__navigation,
.suchergebnis .pagination {
    margin-top: var(--double-dist);
}

.com-content-category-blog__navigation nav,
.suchergebnis .pagination nav {
    text-align: center;
}

.pagination {
    padding-left: 0;
}
.pagination ul {
    list-style-type: none;
    padding-left: 0;
}

.pagination li {
    display: inline-block;
margin-right: -5px;
}

.pagination li a {
    border-bottom: 1px solid var(--gruen);
    border-radius: 0;
    padding: 0 19px;
    text-decoration: none;
}
.pagination li a:focus,
.pagination li a:hover,
.pagination li a:active {
    box-shadow: 0 -2px var(--gruen) inset!important;
    text-decoration: none;
}


/* aktive Seitenzahl */
.pagination li.active a {
    border-color: var(--schwarz);
    color: var(--schwarz);
    box-shadow: 0 -2px var(--schwarz) inset;
    font-weight: 700;
}
.pagination li.active a:focus,
.pagination li.active a:hover,
.pagination li.active a:active {
    box-shadow: 0 -2px var(--schwarz) inset;
    cursor: default;
}


/*
.pagination li span.pagenav {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-radius: 0;
    padding: 0 12px;
    text-decoration: none;
    border-color: var(--schwarz);
    box-shadow: 0 -2px var(--schwarz) inset;
    font-weight: 700;
}
*/
/* zurueck ausblenden, wenn erste Seite aktiv */
/*
.com-content-category-blog__navigation-prev span.pagenav,
.com-content-category-blog__navigation-next span.pagenav {
    display: none;
}
*/

/* Anzeige bei hover (eigentl. fuer screenreader?) BUG! */
.tooltip-inner {
/*    display: none!important;*/
}
.hasTooltip {
/*    display: none!important;*/
}



/* 
 * ================================================
 * SUCHBOX (Suchmodul, Terminsuche, Suchkomponente)
 * ================================================
*/

input::placeholder {
    color: var(--schwarz);
    opacity: 1;
}
input:hover::placeholder {
    color: var(--gruen);
}
input:focus::placeholder {
    color: transparent;
}


/* 
 * ================================
 * SUCHERGEBNISSEITE
 * ================================
*/

/*
 * SUCHFELD
 * ---------------------------------------------
 * Modul im header und Suchergebnisseite
*/

.suchergebnis .search {
    background-color: white;
/*    box-shadow: var(--shadow-4-seiten);*/
    padding: var(--double-dist) var(--dist);
}
.suchergebnis .search > * {
    margin-inline: auto;
    max-width: var(--maxLetterWidth);
}

.suchergebnis .search .error {
    color: var(--rot);
    margin-top: var(--double-dist);
}
/* Gefundeses Suchwort in Suchergebnistext highlighten */
/*
.suchergebnis .search .highlight {
    color: white;
    background-color: var(--gruen);
}
*/

.suchergebnis .tooltip-inner,
.suchergebnis .tooltip.fade {
    display: none!important;
}

.suchergebnis .search .btn-group.w3-left {
    width: calc(100% - 36px - var(--dist));
    max-width: 400px;
}
.suchergebnis .btn-toolbar {
text-align: center;
}
.suchergebnis .search .btn-group input {
    background-color: white;
    border: 2px solid var(--gruen);
    
    color: var(--schwarz);
    font-size: 1rem;
    height: 36px;
    margin-bottom: var(--double-dist);
    padding: 0 var(--dist);
    width: 100%;
}

.suchergebnis label.me-2 {
    display: none;
}

.suchergebnis .search .btn-group button,
.suchergebnis .btn.btn-primary {
    background-color: transparent;
    color: var(--orange);
    border: 0;
    font-size: var(--btn-open-search-font);
    line-height: 36px;
    padding: 0 0 0 var(--dist);
}

.suchergebnis .search .btn-group button:focus,
.suchergebnis .search .btn-group button:hover,
.suchergebnis .search .btn-group button:active {
	background-color: white;
    border-color: var(--gruen);
	color: var(--gruen);
}

.suchergebnis .com-finder__search {
    border: 0;
    padding: 0;
    text-align: center;
}

.com-finder__results-list {
	list-style-position: inside;
    list-style-type: decimal;
    margin-top: 2.5em;
}

/*
.suchergebnis .search .searchintro {
    border-bottom: 1px solid var(--gruen);
    margin-top: var(--double-dist);
    padding-bottom: 5px;
}

.suchergebnis .search .result-text {
    margin-bottom: var(--double-dist);
}
*/

/*
.suchergebnis .search .pagination ul {
	border: none;
}
*/

.result__item > * + * {
	margin-top: 0;
}

.com-finder p.result__title {
    margin-top: 0.3em;
}

.result__item + .result__item {
	margin-top: 1em;
	padding-top: 1em;
}

.result__title-text {
    font-family: Poppins-SemiBold, "Didact Gothic", sans-serif;
	font-size: 1rem!important;
}
.result__title-link:focus .result__title-text, .result__title-link:hover .result__title-text {
	text-decoration: none!important;
}
.result__item + .result__item {
	border-top: 1px solid var(--gruen)!important;
}

.com-finder .pagination__wrapper {
    text-align: center;
}

/* 
 * ================================
 * SPECIALS
 * ================================
*/

/* Wochenplan */
.alle,
.schulschluss {
    text-transform: uppercase;
    font-weight: bold;
    background-color: rgb(242, 242, 242);
}


/* 
 * =================================
 * SLIDER: all pages
 * =================================
*/

@keyframes animateFromRight {
    from{right:-300px;opacity:0} 
    to{right:0;opacity:1}
}
@keyframes animateFromLeft {
    from{left:-300px;opacity:0} 
    to{left:0;opacity:1}
}

.slider {
    background-color: white;
/*    margin-bottom: var(--dist);*/
    position: relative;
}

.slider img {
    position: relative;
    border-radius: 2px;
/*    box-shadow: var(--shadow-4-seiten);*/
    width: 100%;
}.slider img.animateFromRight {
    animation: animateFromRight 0.4s;
}.slider img.animateFromLeft {
    animation: animateFromLeft 0.4s;
}

.slider .backfor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}
.slider .backfor::after {
    content: "";
    display: table;
    clear: both;
}
.slider .backfor div {
    color: rgb(255, 255, 255, 0.9);
    cursor: pointer;
    line-height: 1;
    padding: var(--triple-dist) var(--dist);
    transition: all 0.3s;
}
.slider .backfor .back {
    float: left;
    text-shadow: -4px 0 rgb(0, 0, 0, 0.4);
}
.slider .backfor .back:focus,
.slider .backfor .back:hover,
.slider .backfor .back:active {
    text-shadow: -10px 0px var(--gruen);
}
.slider .backfor .for {
    float: right;
    text-shadow: 4px 0 rgb(0, 0, 0, 0.4);
}
.slider .backfor .for:focus,
.slider .backfor .for:hover,
.slider .backfor .for:active {
    text-shadow: 10px 0px var(--gruen);
}
.slider .backfor div i {
    font-family: 'Font Awesome 6 Free';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-size: 35px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-rendering: auto;
    line-height: 1;
}
.slider .backfor .back i::before {
    content: var(--pfeil-links);
}
.slider .backfor .for i::before {
    content: var(--pfeil-rechts);
}

/* dots */
.slider .dots {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,0%);
    color: white;
    margin-top: var(--dist);
    margin-bottom: var(--dist);
    padding: 0.01em var(--dist);
    text-align: center;
    width: 100%;
}
@media(max-width: 479.98px) {
    .slider .dots {
        display: none;
    }
}
.slider .dots .dot {
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: clamp(11px, 4vw, 19px);
	width: clamp(11px, 4vw, 19px);
    margin: 0 6px;
}

.slider .dots .dot:focus,
.slider .dots .dot:hover,
.slider .dots .dot:active {
    background-color: rgb(255, 255, 255, 0.7);
/*    color: var(--schwarz);*/
}
.slider .dots .dot.activeImage {
    background-color: white;
}
.slider .dots .dot.activeImage:focus,
.slider .dots .dot.activeImage:hover,
.slider .dots .dot.activeImage:active {
    background-color: white;
    cursor: auto;
}


/* 
 * ================================
 * DIALOGS/MODALS
 * ================================
*/

dialog {
    border-color: white;
    overflow: hidden;
    padding: 0;
}

dialog::backdrop {
    background-color: rgb(0, 0, 0, 0.8);
}

dialog .button.close { 
    position: absolute;
    top: var(--rand-dist);
    right: var(--rand-dist);
    z-index: 1;
/*
    height: 100px;
    width: 100px;
*/
}

dialog span.logo {
    background-image: url(/images/logo/logo-dialog.png);
    position: absolute;
    bottom: 0;
    right: 0;
    height: 39px;
    width: 52px;
    margin: 0 var(--rand-dist) var(--rand-dist) 0;
}

dialog .button.close i {
    background-color: var(--gruen);
    border: 2px solid var(--gruen);
    border-radius: 50%;
    color: white;
    font-size: clamp(30px, 7vw, 38px);
}
dialog .button.close:focus i::before,
dialog .button.close:hover i::before,
dialog .button.close:active i::before {
    color: var(--gruen);
    background-color: white;
    border-radius: 50%;
    border-color: white;
}



/* 
 * =========================================================
 * SLIDER IMPRESSIONEN: STARTSEITE only
 * =========================================================
*/

.slider.impressionen.startseite {
    padding: var(--rand-dist);
}
@media(min-width: 320px) {
    .slider.impressionen.startseite {
        padding-bottom: 0;
    }
}
.slider.impressionen.startseite .backfor div {
    color: rgb(255, 255, 255, 0.7);
    opacity: .75;
    padding: var(--triple-dist);
    text-shadow: 0 4px var(--schwarz);
}
.slider.impressionen.startseite .backfor .back {
    margin-left: var(--dist);
    padding-left: var(--dist);
}
.slider.impressionen.startseite .backfor .for {
    margin-right: var(--dist);
    padding-right: var(--dist);
}
.slider.impressionen.startseite .backfor div:focus,
.slider.impressionen.startseite .backfor div:hover,
.slider.impressionen.startseite .backfor div:active {
    text-shadow: 0 10px var(--gruen);
}
   

.slider.impressionen.startseite .backfor div i {
    font-size: clamp(30px, 7vw, 38px);
}
.slider.impressionen.startseite .backfor div i::before {
        display: inline;

    content: "\f004";
}
.slider.impressionen.startseite a:focus .backfor div i::before,
.slider.impressionen.startseite a:hover .backfor div i::before,
.slider.impressionen.startseite a:active .backfor div i::before {
    color: var(--gruen);
}
.slider.impressionen.startseite .backfor .back i {
    transform: rotate(90deg);
}
.slider.impressionen.startseite .backfor .for i {
   transform: rotate(270deg);
} 


.slider.impressionen.startseite .dots {
    position: static;
    color: rgb(0, 0, 0, 0.2);
    margin-top: 0;
    margin-bottom: 0;
    padding: 6px 0;
    transform: none;
}
@media(min-width: 320px) {
    .slider.impressionen.startseite .dots {
        display: block!important;
    }
}
.slider.impressionen.startseite .dots .dot {
    font-family: 'Font Awesome 6 Free';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-rendering: auto;
    line-height: 1;
    border: none;
    height: 40px;
	width: 34px;
    margin: 0;
}
@media(min-width: 370px) {
    .slider.impressionen.startseite .dots .dot {
        width: 40px;
    }
}
@media(min-width: 420px) {
    .slider.impressionen.startseite .dots .dot {
        margin: 0 3px;
    }
}

.slider.impressionen.startseite .dots .dot:focus,
.slider.impressionen.startseite .dots .dot:hover,
.slider.impressionen.startseite .dots .dot:active {
    color: var(--gruen);
}
.slider.impressionen.startseite .dots .dot.activeImage {
    color: var(--orange);
}
.slider.impressionen.startseite .dots .dot.activeImage:focus,
.slider.impressionen.startseite .dots .dot.activeImage:hover,
.slider.impressionen.startseite .dots .dot.activeImage:active  {
    color: var(--orange);
    cursor: auto;
}
.slider.impressionen.startseite .dots .dot::before {
    display: inline;
    content: "\f004";
    vertical-align: -10px;
}


/* 
 * ============================================
 * SLIDER IMPRESSIONEN: ALL PAGES (ausser home)
 * ============================================
*/


dialog.slider .dots .dot:focus,
dialog.slider .dots .dot:hover,
dialog.slider .dots .dot:active {
    background-color: white;
    border-color: var(--gruen);
}
dialog.slider .dots .dot.activeImage {
    background-color: var(--gruen);
}
dialog.slider .dots .dot.activeImage:focus,
dialog.slider .dots .dot.activeImage:hover,
dialog.slider .dots .dot.activeImage:active {
    background-color: var(--gruen);
}


/* 
 * ======================================
 * Page: SCHULNEUBAU-NEWS
 * ======================================
*/

/*
Spezielle Blogansicht per Override
Kategorie-Beschreibung enthält Slider. Dieser wird nur auf der ersten Seite der Listeneinträge angezeigt.
Abfrage erfolgt über GET-String (Variable "start"): Falls vorhanden wird Klasse der Kategoriebeschreibung mit "false" ergänzt; sonst "true"
*/
.category-desc.false .category-intro {
    display: none;
}

.category-desc p {
    margin-bottom: var(--double-dist);
}
@media(min-width: 1000px) {
    .blogSpecial.neuigkeiten .category-desc p {
        padding: 0 var(--double-dist);
    }
}

/* Seite x von y */
.counter {
    font-size: 0.9em;
    margin: 1.5em 0 var(--dist);
    text-align: right;
}


/* ================================
 * Page Veranstaltungen
 * ================================
*/

.veranstaltungen .com-content-article__body > p {
    padding-left: var(--dist);
    padding-right: var(--dist);
}
.veranstaltungen .com-content-article__body > ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}

/*
 * Page Kontakt
 * ----------------------------------------
*/

.kontakt h1 + p {
    padding-left: var(--dist);
    padding-right: var(--dist);
}


/*
 * Page Elternbriefe
 * ----------------------------------------
*/
.itemid-398 .com-content-article__body h2 {
  	border-bottom: 1px solid var(--gruen);
  	margin: 0;
	padding: 16px 0;
}

/*
 * Page Schulportrait
 * ----------------------------------------
*/
.schulportrait .com-content-article__body td {
  	vertical-align: top;
}



/*
 * Page Modellschule Niederdeutsch, Blog-Unterseiten
 * -------------------------------------------------
*/
.niederdeutsch .category-desc.false h2.h1 {
    font-family: Poppins-Bold, 'Didact Gothic', sans-serif;
    font-size: 1em;
}








/* ================================
 * Benutzer-Menü
 * ================================
*/
.user-menu {
    background: white;
}
.user-menu .centered-layout {
    background: white;
    display: flex;
    justify-content: center;
    padding: 0;
}
.user-menu .nav {
    margin: 0;
    padding: 0 var(--dist);
    list-style: none;
}
.user-menu .nav a {
    color: var(--orange);
    font-family: Poppins-Regular, 'Didact Gothic', sans-serif;
    text-transform: uppercase;
}

/* Button "Web-Authentifizierung" */
button[class*="plg_system_webauthn_login_button"] {
    display: none;
}

/* Button "Anmelden" */
.com-users-login__submit button[type=submit] {
    background: white;
    padding: 6px;
}


/* "Passwort/Benutzername vergessen" */
.com-users-login .com-users-login__options a {
    color: white;
}



/* "Bearbeiten" --- */
/* Tooltipp veröffentlichen */
div[id^='editarticle'] {
    display: none;
}
/* Button */
.icons a {
    border: 1px solid black;
    padding: 5px;
}
.float-end {
    text-align: right;
}



/* 
 * ===================================================
 * Simple Image Gallery (by JoomlaWorks)
 * ===================================================
*/

.sigFreeContainer a:focus,
.sigFreeContainer a:hover,
.sigFreeContainer a:active {
    box-shadow: none;
}

ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink,
ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink:focus,
ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink:hover,
ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink:active {
    background-color: transparent !important;
}
.sigFreeContainer img {
    border: 1px solid var(--schwarz)!important;
    box-shadow: none;
}
.sigFreeContainer .com-content-article.neuigkeiten img {
    box-shadow: none;
}

.fancybox-caption__body {
    display: none !important;
}


@media(max-width: 729.98px) {
    ul.sigFreeClassic li.sigFreeThumb:not(:first-child) {
        display: none;
    }
    ul.sigFreeClassic li.sigFreeThumb:first-child {
        width: 100% !important;
    }
    ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink {
	   width: 100% !important;
    }
    ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink img.sigFreeImg {
        margin-inline: auto !important;
    }
}
@media(min-width: 768px) AND (max-width: 913.98px) {
     ul.sigFreeClassic li.sigFreeThumb:not(:first-child) {
        display: none;
    }
    ul.sigFreeClassic li.sigFreeThumb:first-child {
        width: 100% !important;
    }
    ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink {
	   width: 100% !important;
    }
    ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink img.sigFreeImg {
        margin-inline: auto !important;
    }
}


/* 
 * =================================
 * SIGE Bildergalerie ### in use?
 * =================================
*/

#lbClose {
	width: 101px;
}


/* 
 * ===========================================
 * Gruene Border und Abstand bei Mehrfachlinks
 * ===========================================
*/
.borderB {
  border-bottom: 1px solid var(--gruen);
  margin: 0;
  padding:16px 0;
}