/*! 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: Tahoma, sans-serif;      
    background-image: url(../img/hintergrund.jpg);
	background-position: center;
	background-repeat: repeat-y;
	background-attachment: fixed;
    background-size: cover;    
 }

h1, h2, h3, h5, h6 {
    font-family: "Tahoma", sans-serif;  
}
h1 {
    color:rgb(3, 37, 3);
	font-weight:400;
    font-size: 96px;
}
h4{
    font-family: "Tahoma", sans-serif;  
    margin: 0;
	color:#060;
	font-weight:400;
	line-height: 24px;
}

b, th, dt {
    font-weight: 400;   /* 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!) */
}
.bild{
    max-width: 100%;    /* zu breite Bilder horizontal einpassen */
    height: auto;       /* Höhe im korrekten Seitenverhältnis anpassen (wichtig!) */	
	}

.site {
    max-width: 100%;         
    margin: 1.25rem auto;    
}


.site__navigation,
.site__content      /* Artikel im Hauptinhalt als einzelne Blöcke darstellen */
.site__footer {
    padding: 0 0 0 3.25rem;
               /* Hintergrund (Kurzschreibweise) */
    margin: 0.25rem 0;       
}
.artikel {
padding: 0 120px 0 120px;
               /* Hintergrund (Kurzschreibweise) */
    margin: 0.25rem 0; 
}
.site__header{
   padding: 0 0 24px 3.25rem;
               /* Hintergrund (Kurzschreibweise) */
    margin: 0.25rem 0;     
}
.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 */
    padding: 0 0 24px 3.25rem;
   }
.header__untertitel {
    margin: 5px 5px;
	font-weight:500;
	font-size:22px;
	color:#333;        /* nur kleiner Abstand nach unten */
}
.site__navigation {
    padding: 0 0 0 2rem;                 /* Innenabstand entfernen */
}

 /* Navbar container */
.navbar {
  overflow: hidden;
  font-family: Tahoma;
}

/* Links inside the navbar */
.navbar a { 
  font-size: 16px;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 14px 0 0 120px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {  
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 18px;
  font-weight:500;
  border: none;
  outline: none;
  color: rgb(0, 0, 0);
  padding: 14px 0 0 120px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: rgba(0, 255, 34, 0.027);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #dddddd2a;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.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; */
    }

}

/* 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: 560px) {
        .album__eintrag {
            flex: 1 1 20%;      /* 5 Bilder pro Zeile */
        }
    }


}

 /* Smartphone */
    @media screen and (max-width: 960px) {
       .artikel {
        padding: 0 0 0 2.25rem;
               /* Hintergrund (Kurzschreibweise) */
    margin: 0.25rem 0; 
}
    }

/* ==========================================================================
   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;
}