/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
::-moz-selection {          /* Mozilla-spezifisches Pseudoelement "selektierter Text" */
    background: #b3d4fc;    /* Hintergrundfarbe für markierten Text */
    text-shadow: none;      /* Textschatten stört bei markiertem Text */
}
::selection {               /* Pseudoelelement "selektierter Text" */
    background: #b3d4fc;    /* Hintergrundfarbe für markierten Text */
    text-shadow: none;      /* Textschatten stört bei markiertem Text */
}
hr {
    display: block;             /* Blockelement */
    height: 1px;                /* 1 Pixel Höhe */
    border: 0;                  /* Rahmen entfernen */
    border-top: 1px solid #ccc; /* nur obere Rahmenline zeichnen */
    margin: 1em 0;              /* Abstand über und unter der Line */
    padding: 0;                 /* kein Innenabstand */
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle; /* Entfernt den störenden Abstand unterhalb der Inline-Elemente */
}
fieldset {
    border: 0; 
    margin: 0; 
    padding: 0; 
}
textarea {
    resize: vertical;   
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
    font-family: Arial, sans-serif;      
    background-image: url(../img/hintergrund.jpg);
	background-position: center;
	background-repeat: repeat-y;
	background-attachment: fixed;
    background-size: cover;    
 }

h1, h2, h3, h4, h5, h6 {
    font-family: "Arial", sans-serif;  
}

b, th, dt {
    font-weight: 500;   /* medium */
}

strong {
    font-weight: 700;   /* fett */
}

a {
    color:#666;
	font-weight:600;     
}

img {
    max-width: 100%;    /* zu breite Bilder horizontal einpassen */
    height: auto;       /* Höhe im korrekten Seitenverhältnis anpassen (wichtig!) */
}

.site {
    max-width: 960px;         
    margin: 1.25rem auto;    
}

.site__header,
.site__navigation,
.site__content > .artikel,      /* Artikel im Hauptinhalt als einzelne Blöcke darstellen */
.site__footer {
    padding: 1.25rem;
    background: rgba(196, 196, 196, 0.3);           /* Hintergrund (Kurzschreibweise) */
    margin: 1.25rem 0;
    box-shadow: 0 0.3125rem 0.625rem -0.125rem rgba(0,0,0,0.3); /* Schattenwurf für die Blöcke */
}
.header__branding {
    text-transform: uppercase;  /* Text in Großbuchstaben anzeigen */
    letter-spacing: 0.0625em;   /* Zeichenabstand leicht erhöhen */
    font-size: 0.75em;          /* kleiner als Normalschrift */
    color: #666;                /* heller als Hauptüberschrift */
    line-height: 1;             /* Zeilenhöhe */
    font-weight: 500;           /* medium */
    margin: 0.25em 0;
}
.header__title {
    margin: auto;
	font-weight:500;
	font-size:28px; 
	color:#333;        /* nur kleiner Abstand nach unten */
}
.site__navigation {
    padding: 0;                 /* Innenabstand entfernen */
}
.navigation__menu {
    list-style: none;           /* keine Listenpunkte */
    margin: 0;
    padding: 0;
	width:100%;
}
.navigation__menu::after {
    /* Dieser 'clearfix' sorgt dafür, dass das Element enthaltene Floats umschließt und nicht zusammenfällt. */
    content: " ";                      
    display: table;
    clear: both;
}
.navigation__item {
    float: left;            /* Elemente als Floats nebeneinander anzeigen */
    text-align: center;     /* Text zentrieren */
    position: relative;     /* relativ positioniert, damit Untermenüs hieran absolut positioniert werden können */
}
.menubutton {display:none}

.foto__caption {
    margin-top: 4px;         /* Abstand zum Bild */
    font-size: 10px;          /* Schriftgröße */
}

.foto__lizenz {
    font-size: 1em;             /* Schriftgröße des Elternelementes beibehalten */
}

/*
Bei modernen Browsern Flex-Layout verwenden.
Floats werden dadurch automatisch deaktiviert.
*/
@supports (display: flex) {

    .navigation__menu {
        display: flex;          /* Flex-Layout aktivieren */
        flex-direction: row;    /* in einer Zeile anzeigen */
        flex-wrap: wrap;        /* bei zu wenig Platz für alle Elemente umbrechen */
    }

    .navigation__item {
        flex: 1 0 auto;         /* flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
    }

}

/*smartphone: Nav untereinander*/


@media screen and (max-width: 720px) {

/*menubutton gestalten*/
.js .menubutton{
    display:flex;
    align-items:center;
    cursor:pointer;
    background: inherit;
    color:rgb(0, 0, 0);
    font:inherit;
    text-align:center;
    padding: 0.5rem 1rem;
    border:0;
    margin:0;
    }
    .js .menubutton::before{
        content: url(../img/menuburger.svg);
        width: 1rem;
        height: 1rem;
        margin-right: 0.25rem;
    }
    .js .site__navigation ul{
        max-height:0;
        overflow:hidden;
        padding:0;
    }
    .js .showmenu + ul{
        max-height: 100rem;
        transition: max-height 0.5 ease;
        overflow: auto;
    }
    .js .showmenu.menubutton::before{
        content: url(../img/menuclose.svg);
    }

    /*Aussehen des ausgeklappten Menues*/

@supports (display: flex) {

    .navigation__menu {
        display: flex;          /* Flex-Layout aktivieren */
        flex-direction: column;    /* untereinander anzeigen */
        flex-wrap: wrap;        /* bei zu wenig Platz für alle Elemente umbrechen */
        margin:auto;
        width:200px;
        }

    .navigation__item {
        padding-top:0.5rem;
        flex: 1 0 auto;         /* flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
        text-align:left;
    }

    }
    .site__navigation {
        padding: 1rem;
        max-width:120px;
        margin:1.25rem 0;
           }
}



/* Artikel-Kopfbereich */
.artikel__header {
    margin-bottom: 1.5rem;
	color:#333;
}

/* Artikel-Titel */
.artikel__titel {
    margin: 0;
	color:#060;
	font-weight:700;
	line-height: 24px;
	
}

/* Artikel-Untertitel */
.artikel__untertitel {
    margin: 0;
	color:#111;	
	font-size:10px;
}
.artikel_text{
	margin:0;
	color:#333;
	font-size:14px;
	}

/*
Mit der folgenden Technik lassen sich per Iframe eingebundene Videos responsiv 
im korrekten Seitenverhältnis skalieren.
*/

.video {
    width: 100%;                /* maximal Inhaltsbreite */
}

.video__container {
    width: 100%;                /* 100% der verfügbaren Breite */
    height: 0;                  /* keine Höhe, diese wird durch padding-top erzeugt */
    position: relative;         /* Iframe wird an diesem Element positioniert */
}

.video__container--16x9 {
    padding: 56.25% 0 0;        /* für Videos mit Seitenverhältnis von 16:9 – Prozentwerte beziehen sich auf die Breite des Elternelementes */
}

.video__container--4x3 {
    padding: 75% 0 0;           /* für Videos mit Seitenverhältnis von 4:3 – Prozentwerte beziehen sich auf die Breite des Elternelementes */
}

.video__iframe {
    position: absolute;         /* absolut am Elternelement positionieren */
    left: 0;                    /* links */
    top: 0;                     /* oben */
    width: 100%;                /* volle Breite */
    height: 100%;               /* volle Höhe */
    border: 0;                  /* kein Rahmen */
    margin: 0;                  /* kein Außenabstand */
    padding: 0;                 /* kein Innenabstand */
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color:#360;
}
a:active {
	text-decoration: none;
}
/* Navigation im Fußbereich der Seite */

.footernav__menu {
    list-style: none;           /* keine Listenpunkte */
    margin: 0;                  /* kein Außenabstand */
    padding: 0;                 /* kein Innenabstand */
    text-align: right;          /* rechtsbündig */
}

.footernav__item {
    display: inline;            /* als Inline-Text anzeigen */
}

/* hinter den Elementen einen hellgrauen Strich einfügen */
.footernav__item::after {
    content: " | ";             /* Strich mit Leerzeichen für Abstand */  
    color: #aaa;
}

/* nur beim letzten Element nicht */
.footernav__item:last-child::after {
    content: "";                /* Strich und Leerzeichen entfernen */
}

/* Fotos als Liste */
.album__fotos {
    list-style: none;           /* keine Listenpunkte */
    margin: 0;                  /* kein Außenabstand */
    padding: 0;                 /* kein Innenabstand */
}

@supports (display: flex) {

    .album__fotos {
        display: flex;          /* Flex-Layout */
        flex-direction: row;    /* zeilenweise anzeigen */
        flex-wrap: wrap;        /* bei zu wenig Platz umbrechen */
    }

    .album__eintrag {
        flex: 1 1 50%;          /* zwei Bilder pro Zeile */
        padding: 1px;           /* statt 'gap', da 'gap' derzeit nur von Firefox 63+ unterstützt wird */
        box-sizing: border-box; /* Breite umfasst Innenabstand und Rahmen */
    }

    /* wenn Breite ausreicht */
    @media screen and (min-width: 480px) {
        .album__eintrag {
            flex: 1 1 25%;      /* 4 Bilder pro Zeile */
        }
    }

    /* wenn noch mehr Breite verfügbar */
    @media screen and (min-width: 800px) {
        .album__eintrag {
            flex: 1 1 20%;      /* 5 Bilder pro Zeile */
        }
    }


}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;   /* Element verbergen */
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

/*
Nur für Bildschirmlesegeräte sichtbar
*/
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

/*
… auch bei Fokussierung sichtbar (z. B. mittels Tabulator-Taste)
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
    visibility: hidden;     /* unsichtbar, Platz im Layout wird aber reserviert */
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}