@import url("font.css");
@import url("colors.css");
@import url("header.css");
@import url("footer.css");
@import url("grid.css");
@import url("blog.css");
@import url("erweiterungen.css");
@import url("button.css");
@import url("icons.css");
@import url("images.css");
@import url("pagination.css");

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth; }}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
         }

body {
         font-size                       : 1.05em;
         line-height                     : 1.5;
         background-position             : center;
         font-family                     : 'standard';
                background                        : url(../images/Graue_Wassertropfen.png) var(--body-bg);
                background-repeat        : no-repeat;
                background-size                : contain;                 }


main {
  -webkit-hyphens: auto;
  hyphens: auto;
  -moz-hyphens: auto}


.unseen {
         position        : absolute;
         height          : 1px;
         width           : 1px;
         overflow        : hidden;
         clip            : rect(0 0 0 0);
         clip-path       : inset(100%);
         white-space     : nowrap;
}

@media screen and (max-width: 700px) {
body {
    font-size            : 1.25em;
    line-height          : 1.3;}}

main p {
         margin-bottom   : 1em;
         text-align: justify         }


/* Startseite Logo */
.logo h1  {
         line-height             : 1;
         margin                  : 0;
         padding                 : 0;
         color                   : white;
         z-index                 : 3;
         font-size               : clamp(4rem, 8vw, 8rem);}


.logo-text h3 {
         text-align              : center;
         color                   : white;
         z-index                 : 3;
         font-size               : clamp(1.25rem, 3vw, 3.5rem);}


.logo-text h1,
.logo-text h3 {
         width                   : 100%;
         text-align              : center;}

/* ##### Startseite Logo */

h1, h2, h3, h4, h5, h6 {
    font-family          : 'logo-schrift';}

main h1,
main h2 {
         font-size       : clamp(1.75rem, 5vw, 3rem);
         margin          : 0 0 0.6em 0;
         font-family     : 'logo-schrift';
         font-weight     : bold;}
main h3 {
         font-size     : 110%;
         margin-bottom : 0.15em;
         border-bottom   : 1px solid #5F5F5F;
         line-height     : 1.5}
main h4 {
         font-size     : 110%;
         margin-bottom : 0.5em;}
main h5 {
         font-size     : 110%;
         margin-bottom : 0.5em;}
main h6 {
         font-size     : 110%;
         margin-bottom : 0.5em;}

main a {
         color           : var(--link);
         text-decoration : none;
         font-weight     : bold}

main a:hover {
         color           : var(--link-hover);
         text-decoration : underline}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;}

main ul li {
         padding         : 0.25em 0;}

@media only screen and ( max-width: 850px ) {
    .umbruch::before {
        content: "\A";
        white-space: pre;}
}

@media only screen and ( max-width: 500px ) {
    .umbruch::before {
        content: "\A";
        white-space: pre;}
    .umbruch2::before {
        content: "\A";
        white-space: pre;}}


/* #############*/
/* Aktuelles auf Startseite */
.anker {position: relative;top:-200px;}

.audio-dateien {
         width :100%;
         display:flex;
         flex-wrap: wrap;
         margin-bottom: 1em}

.audio-dateien span {
         width   : 100%;
         align-self: center;
         padding-right:1em;
         font-weight: bold;
         padding-bottom: 0.5em}

.audio-dateien audio {
         width   : 90%;}