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

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
	font-size:1em;
	font:inherit;
	vertical-align:baseline;
	scroll-behavior: smooth;
}

body {
	line-height:1.5;
}

img,
picture,
video,
canvas,
svg {
	display:block;
	max-width:100%;
	height:auto;
}
input,
button,
textarea,
select {
	font:inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap:break-word;
}

blockquote, q {
	quotes: none;
}
blockquote::before:not(.instagram-media),
q::before {
	content: '»';
}

blockquote::after:not(.instagram-media),
q::after {
	content: '«';
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul, ol {
	padding-left:2em;
}
:root {
	/* Projektdaten: GLOBALER Gültigkeitsbereich
	   Farben: 1 Basisfarbe, 3-5 passende Farben, 3 kontrastreiche Farben --> Schriftfarbe, HG-Farbe, "tragende Farbe" (Gestaltungselemente wie Buttons, Links, Boxen, etc.), Abstufungen, ...
	   Schrift: Fliesstextschrift (+Größe, Fettigkeit, ...), Überschriften-Schrift (+Größe, Fettigkeit, ...)
	   Abstände, Größen: Breite des Inhaltsbereiches, Abstände zum Rand, Abstände zwischen einzelnen Blöcken, ...
	   
	*/
	--farbetext0: rgba(47, 165, 177);
	--c_fliesstext:#333;
	--c_hg: rgba(240, 240, 240, 0.61);
	--c_hggrid: rgba(240, 240, 240);
	--c_nav: rgba(255, 255, 255, 0.9);
	--c_section: rgb(233, 230, 229);
	--c_footer: rgba(18, 38, 63);
	--font0:"Raleway",Verdana,Arial,sans-serif;
	--fontsize0:1em;
	--fontweight0:normal;
	--w0:71.25em;
	--d0:2em;
	--c1: rgba(11, 93, 151);
	--c2: rgba(134, 187, 221);
	--bradius: 0.5em;
	--c_elterncom: rgb(213, 213, 213);
	--c_subcom: rgb(230, 230, 227);
	--c_newcom: rgb(197, 223, 182);
}
/* raleway-100 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/raleway/raleway-v28-latin-100.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-100.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-100.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-100italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/raleway/raleway-v28-latin-100italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-100italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-100italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-200 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/raleway/raleway-v28-latin-200.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-200.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-200.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-200italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/raleway/raleway-v28-latin-200italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-200italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-200italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/raleway/raleway-v28-latin-300.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-300italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/raleway/raleway-v28-latin-300italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-300italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/raleway/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/raleway/raleway-v28-latin-italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/raleway/raleway-v28-latin-500.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/raleway/raleway-v28-latin-500italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-500italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-500italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/raleway/raleway-v28-latin-600.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-600italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/raleway/raleway-v28-latin-600italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-600italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-600italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/raleway/raleway-v28-latin-700.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/raleway/raleway-v28-latin-700italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-700italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/raleway/raleway-v28-latin-800.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-800.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-800italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/raleway/raleway-v28-latin-800italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-800italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-800italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-900 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/raleway/raleway-v28-latin-900.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-900.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-900.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
  /* raleway-900italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/raleway/raleway-v28-latin-900italic.eot'); /* IE9 Compat Modes */
    src: url('../fonts/raleway/raleway-v28-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/raleway/raleway-v28-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-900italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/raleway/raleway-v28-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/raleway/raleway-v28-latin-900italic.svg#Raleway') format('svg'); /* Legacy iOS */
  }
  
.gridpage {
    display: grid;
    grid-template-columns: 1fr minmax(auto,var(--w0)) 1fr;
    grid-template-areas: 
        ". cont .";
}

header > img {
    width: 100%;
}

/*Grid für Blog*/
.gridblog {
    grid-area: cont;
    display: grid;
    grid-template-columns: 8fr 2fr;
    grid-template-areas:
        "navigation navigation"
        "header header"
        "main side"
        "pagenav side"
        "footer footer";
}

.gridblog > header {
    grid-area: header;
}

.gridblog > nav:first-of-type {
    grid-area: navigation !important;
}

.gridblog > main {
    grid-area: main;
}

.gridblog > aside {
    grid-area: side;
}

.gridblog > nav:last-of-type {
    grid-area: pagenav;
}

.gridblog > footer {
    grid-area: footer;
}

/*Grid für sonstige Seiten*/
.gridvarpage {
    grid-area: cont;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
    "navigation"
    "header"
    "main"
    "footer";
}

.gridvarpage > header {
    grid-area: header;
}

.gridvarpage > nav {
    grid-area: navigation;
}

.gridvarpage > main {
    grid-area: main;
}

.gridvarpage > footer {
    grid-area: footer;
}


/*Grid Lightbox*/
.lightboxBack {
    display: grid;
    grid-template-columns: 1fr minmax(auto,var(--w0)) 1fr;
    grid-template-rows: 80vh 20vh;
    grid-template-areas:
        ". lightbox ."
        ". otherpictures .";
}

.otherpictures {
    grid-area: otherpictures;
}

/*Grid Bild in Lightbox*/
#lightbox {
    grid-area: lightbox;
    display: grid;
    grid-template-rows: 90% 10%;
    grid-template-areas:
        ". pic ."
        ". figcaption .";
}

#lightbox > div {
    grid-area: pic;
}

#lightbox > figcaption {
    grid-area: figcaption;
}

/*Grid Blog Startpage*/
.blogstartpage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 
        "a1 a2 a3";
    gap: 2em;
}

.blogstartpage > article:first-of-type {
    grid-area: a1;
}

.blogstartpage > article:nth-of-type(2) {
    grid-area: a2;
}

.blogstartpage > article:last-of-type {
    grid-area: a3;
}


.blogstartpage > article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .5fr 1fr 1fr .3fr;
    grid-template-areas: 
        "top"
        "pic"
        "text"
        "button";
}
.blogstartpage > article > div:first-of-type {
    grid-area: top;
}

.blogstartpage > article > img {
    grid-area: pic;
}

.blogstartpage > article > p {
    grid-area: text;
}

.blogstartpage > article > div:last-of-type {
    grid-area: button;
}
body {
    font-family: var(--font0);
    background-color: var(--c_hg);
    font-variant-numeric: lining-nums;
}

.gridvarpage,
.gridblog {
    background-color: var(--c_hggrid);
}

.gridvarpage > header,
.gridvarpage main,
.gridblog > header,
.gridblog main {
    padding: 1em;
}

a {
    color: var(--farbetext0);
    font-size: 1em;
}

a:link {
    color: var(--farbetext0);
    text-decoration: none;    
}

a:visited {
    color: var(--farbetext0);
    text-decoration: none;    
}

a:active {
    color: var(--farbetext0);
    text-decoration: none; 
}

a:hover {
    color: var(--farbetext0);
    text-decoration: none;
}

.galleryTop > h1 {
    text-align: center;
    font-size: 3.2em;
    margin-bottom: .5em;
    margin-top: .5em;
}

.galleryTop > h2 {
    font-size: 2.8em;
}

.galleryKontakt {
    text-align: center;
    margin-bottom: 2em;
    margin-top: 2em;
}
.galleryKontakt > h2 {
    font-size: 3.2em;
}

.galleryKontakt > a {
    font-size: 1.8em;
}

header {
    margin-bottom: 2em;
}

.btn1 {
    padding: 0.5em 0.8em;
    color: var(--farbetext0);
    background-color: var(--c_hg);
    border: 1px solid var(--farbetext0);
    border-radius: .1875em;
    cursor: pointer;
}

.btn1:hover {
    background-color: var(--farbetext0);
    color: var(--c_hg);
}

.btn2 {
    font-size: 3em;
    color: var(--farbetext0);
    z-index: 33;
    cursor: pointer;
}

.btn3 {
    padding: 1em;
    color: var(--c2);
    background-color: var(--c1);
    border-radius: 1.25em;
    border: 0;
    line-height: 2em;
    cursor: pointer;
}


.btn3:hover {
    color: var(--c2);
    background-color: var(--c1);
}

.btn3hover {
    color: var(--c1) !important;
    background-color: var(--c2) !important;
}

.btn4 {
    padding: 0.3em 0.6em;
    color: var(--farbetext0);
    background-color: var(--c_hg);
    border: 1px solid var(--farbetext0);
    border-radius: .1875em;
    cursor: pointer;
    font-size: 0.9em;
    margin-right: 0.3em;
    margin-bottom: 0.3em;
}

.btn4:hover {
    background-color: var(--farbetext0);
    color: var(--c_hg);
}

/*CokkieBanner*/
#eu-cookie-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    background-color: var(--c_hg)
}

#eu-cookie-message > form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 2em;
    border: .3em solid var(--farbetext0);
    border-radius: .5em;
    margin-bottom: 2em;
    margin-left: 1em;
    margin-right: 1em;
    background: var(--c_hggrid);
}

#eu-cookie-message > form > label {
    margin-bottom: 2em;
}

#eu-cookie-message > form > input {
    text-transform: uppercase;
}


nav:first-of-type {
    padding-left: 2em;
    padding-right: 2em;
    position: sticky;
    top: 0px;
    background-color: var(--c_nav);
    z-index: 10;
    box-shadow: 0 0.05em 1em rgba(0, 0, 0, 0.15);
    margin-bottom: 2em;
    border-bottom-left-radius: .5625em;
    border-bottom-right-radius: .5625em;
    font-weight: bold;
}

#logo {
    height: 8em;
    display: inline-block;
    transition: 0.2s ease-in-out;
}

#logo > a {
    display: flex;
    align-items: center;
    height: 100%;
}

#logo > img {
    float: left;
}

nav:first-of-type > ul {
    float: right;
    line-height: 8em;
    transition: 0.2s ease-in-out;
}

nav:first-of-type > ul > li {
    display: inline-block;
    margin-left: 1em;
    height: 100%;
    color: var(--farbetext0);
    font-size: 1em;
}
nav:first-of-type > ul > li > span,
nav:first-of-type > ul > li > a {
    display: inline-block;
    text-decoration: none;
    height: 100%;
}

.active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    border-top: var(--farbetext0) solid 5px;
    z-index: 10;
}

nav:first-of-type > ul > li:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--farbetext0);
    transform-origin: bottom right;
}

nav:first-of-type > ul > li:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/*Dropdown Menü */
nav:first-of-type > ul > li > ul {
    display:none;
    position:absolute;
    left:0px;
    top:65%;
    left: -80%;
    z-index:11;
    line-height: 2em;
    list-style: none;
    padding-bottom: 2em;
}

nav:first-of-type > ul > li > ul > li > a {
    background-color: var(--c_nav);
    display: inline-block;
    width: 15em;
    padding: 0.3em;
    padding-left: 1em;
}

nav:first-of-type > ul:not(.vis) > li > ul > li:last-of-type::before {
    border-bottom-left-radius: var(--bradius);
}

nav:first-of-type > ul:not(.vis) > li > ul > li:last-of-type > a,
nav:first-of-type > ul:not(.vis) > li > ul > li:last-of-type {
    border-bottom-right-radius: var(--bradius);
    border-bottom-left-radius: var(--bradius);
}

nav:first-of-type > ul > li > ul > li > a:hover {
    background-color: var(--farbetext0);
    color: var(--c_hggrid);
}

.activeDrop::before {
    content: '';
    position: absolute;
    height: 100%;
    border-left: var(--farbetext0) solid 0.5em;
    z-index: 11;
}

li:hover > ul {
    display:block;
}

/*Mobiele Navs*/
#btnNav {
	display:none;
    position: fixed;
    bottom: 6em;
    right: 3em;
    font-size: 1em;
}

#btnNav > div {
    font-family: var(--font0);
    display: inline-block;
    margin-left: 0.2em;
}

.gridblog nav ul.vis,
.gridvarpage nav ul.vis {
	display:block !important;
    line-height: 2em;
    position: fixed;
    bottom: 8.9em;
    right: 1em;
    border-radius: var(--bradius);
}

.gridblog nav ul.vis > li:first-of-type::before,
.gridvarpage nav ul.vis > li:first-of-type::before{
    border-radius: 8px 0 0 0;
}

.gridblog nav ul.vis > li:last-of-type::before,
.gridvarpage nav ul.vis > li:last-of-type::before{
    border-radius: 0 0 0 8px;
}

.gridblog nav:first-of-type ul.vis > li,
.gridvarpage nav:first-of-type ul.vis > li {
    display: block;
    margin-left: 0;
    color: var(--c2);
    background-color: var(--c1);
}

.gridblog nav:first-of-type ul.vis > li > a,
.gridvarpage nav:first-of-type ul.vis > li > a {
    color: var(--c2);
    width: 100%;
}

/*Border Radius mobiles Menü*/
.gridblog nav ul.vis,
.gridvarpage nav ul.vis {
    border-radius: var(--bradius);
}

.gridblog nav:first-of-type ul.vis li:first-of-type,
.gridvarpage nav:first-of-type ul.vis li:first-of-type {
    border-top-right-radius: var(--bradius);
    border-top-left-radius: var(--bradius);
}

.gridblog nav:first-of-type ul.vis li:last-of-type,
.gridvarpage nav:first-of-type ul.vis li:last-of-type {
    border-bottom-right-radius: var(--bradius);
    border-bottom-left-radius: var(--bradius);
}


/*Aktive Mobile*/
.gridblog nav:first-of-type ul.vis .active:before,
.gridvarpage nav:first-of-type ul.vis .active:before {
    content: '';
    position: absolute;
    height: 100%;
    border-left: var(--farbetext0) solid 0.5em;
    z-index: 11;
    border-top: none;
    height: 4em;
    pointer-events: none;
}  


/*Sub Menü Mobile*/
.gridblog nav:first-of-type ul.vis > li > ul,
.gridvarpage nav:first-of-type ul.vis > li > ul {
    position: static;
    display: none;
    padding-left: 0;
    border-radius: 0;
    width: 100%;
    padding-bottom: 0;
    background-color: var(--c_nav);
    padding-top: 1em;
    padding-bottom: 1em;
}

.gridblog nav:first-of-type ul.vis > li > ul > li,
.gridvarpage nav:first-of-type ul.vis > li > ul > li {
    width: 100%;
    border-radius: 0;
    width: 100%;
    display: block;
    line-height: 2em;
}

.gridblog nav:first-of-type ul.vis > li > ul > li > a,
.gridvarpage nav:first-of-type ul.vis > li > ul > li > a {
    width: 100%;
    border-radius: 0;
    line-height: 2em;
    background: none;
}

.gridblog nav:first-of-type ul.vis > li > span,
.gridvarpage nav:first-of-type ul.vis > li > span {
    width: 100%;
    display: inline-block;
    line-height: 1em;
    padding: 0.5em 0.8em;
}

.gridblog nav:first-of-type ul.vis > li > ul > li > a:hover,
.gridvarpage nav:first-of-type ul.vis > li > ul > li > a:hover {
    background-color: var(--farbetext0);
    color: var(--c_hggrid);
}

.subfotos {
    cursor: pointer;
}

.show {
    display: block !important;
}


header > img {
    border-radius: var(--bradius);
}
footer {
    margin-top: 2em;
    font-size: 1.3em;
    height: 6em;
    line-height: 6em;
    background-color: var(--c_footer);
    border-top-right-radius: 1.1875em;
    border-top-left-radius: 1.1875em;
    box-shadow: 0 0.05em 1em rgba(0, 0, 0, 0.15);
    text-align: center;
}

footer > a {
    height: 100%;
}

footer:before, footer:after, footer > .arrow {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border: 1.3em solid transparent;
  border-bottom-color: var(--c_footer);
  pointer-events: none;
}

.arrow-up {
    position: absolute;
    bottom: 4.9em;
    left:calc(50% - 0.4em);
    z-index: 1;
    line-height: 0;
}

.arrow-up > a > i {
    font-size: 2em;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery > img {
    width: 20%;
    margin: 1em;
    object-fit:cover;
    object-position: center;
    aspect-ratio: 4/3;
    transition: width 0.5s, margin 0.5s;
    border-radius: var(--bradius);
    cursor: pointer;
}

.gallery {
    margin-bottom: 2em;
}
@media (hover:hover) {
    /*Hover ganze Seite*/
    .gallery > a:not(.lightbox):hover,
    .gallery > img:not(.lightbox):hover {
        /*width:23.8%;*/
        width: 22.8%;
        margin:0;
    }

    .gallery > a:not(.lightbox):last-of-type:hover,
    .gallery > img:not(.lightbox):last-of-type:hover {
        margin-bottom:.55em;
    }

    /*Hover wenn Blog mit Aside*/
    .gridblog .gallery > a:not(.lightbox):hover,
    .gridblog .gallery > img:not(.lightbox):hover {
        width:23.8%;
        margin:0;
    }

    .gridblog .gallery > a:not(.lightbox):last-of-type:hover,
    .gridblog .gallery > img:not(.lightbox):last-of-type:hover {
        margin-bottom:.53em;
    }
}

.gallery > a {
    width: 20%;
    margin: 1em;
    transition: width 0.5s, margin 0.5s;
    padding: 0;
}

.gallery > a > img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    object-position: center;
    aspect-ratio: 4/3;
    border-radius: var(--bradius);
    cursor: pointer;
}

/*Lightbox*/
#close {
    position: absolute;
    top: 1%;
    right: 5%;
    cursor: pointer;
}

#arrowLeft {
    position: absolute;
    top: 40%;
    left: 5%;
    cursor: pointer;
}

#arrowLeftsmallPic {
    position: absolute;
    bottom: -14%;
    left: -4%;
    cursor: pointer;
}

#arrowRight {
    position: absolute;
    top: 40%;
    right: 5%;
    cursor: pointer;
}

#arrowRightsmallPic {
    position: absolute;
    bottom: -14%;
    right: -4%;
    cursor: pointer;
}

.lightboxBack {
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.884) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0;
    z-index: 29;
}

#lightbox > div {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    z-index: 30 !important;
}

#lightbox > div > img {
    object-fit: scale-down;
    justify-content: center;
    object-position: center;
    margin-top: 4em;
    margin-bottom: 2em;
}


#lightbox > figcaption {
    display: block;
    color: var(--farbetext0);
    font-size: 2em;
    text-align: center;
}

@media (hover:hover) {
    #lightbox:hover {
        width: auto !important;
    }
}

.otherpictures {
    justify-content: flex-start;
    bottom: 1em;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 30;
    height: 20vh;
    width: 100%;
    max-width: var(--w0);
    padding-top: 1em;
    padding-bottom: 1em;
    overflow: hidden;
}

.otherpictures > img {
    object-fit:cover;
    aspect-ratio: 4/3;
    transition: margin 0.5s, margin-left 0.5s, margin-right 0.5s;
    z-index: 30;
    margin: 1em;
    cursor: pointer;
    border-radius: var(--bradius);
}

.otherpictures > a > img {
    object-fit:cover;
    aspect-ratio: 4/3;
    z-index: 30;
    cursor: pointer;
    border-radius: var(--bradius);
}

.otherpictures > a {
    margin: 1em;
    transition: margin 0.5s, margin-left 0.5s, margin-right 0.5s;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 15%;
}

.otherpictures > a > img,
.otherpictures > a {
    width: 100%;
}

.otherpictures > a > img {
    width: 100%;
    height: 100%;
}

@media (hover:hover) {
    .otherpictures > a:not(.lightbox):hover,
    .otherpictures > img:not(.lightbox):hover {
        margin:0;
        margin-left: 1em;
        margin-right: 1em;
    }

    .otherpictures > a:not(.lightbox):last-of-type:hover,
    .otherpictures > img:not(.lightbox):last-of-type:hover {
        margin-bottom:0.5em;
    }
}

.otherpictures > a:last-of-type,
.otherpictures > img:last-of-type {
    margin-right: 2em;
}

/*Akives Bild in der Lightbox bei den kleinen Bildern markieren*/
.otherpictures > a.activePic,
.otherpictures > img.activePic {
    margin: 0 !important;
}
aside {
    padding: 1em;
    margin-right: 1em;
}

aside i {
    color: var(--farbetext0);
    font-size: 2em;
}

aside > div > section {
    margin-bottom: 1em;
}

aside > div > section h2 {
    margin-bottom: 0.4em;
}

aside > div > section > h2 ~ a > i:first-of-type {
    margin-right: 0.2em;
    margin-left: 0.1em;
}

aside > div > section > form > button {
    margin-top: 0.4em;
}

aside fieldset {
    border: none;
}

aside input {
    padding: .4em;
    padding-left: .6em;
    padding-right: .6em;
    margin-bottom: .4em;
}

aside fieldset > label {
    display: none;
}

aside > div > section:last-of-type > ul {
    list-style-type: none;
    padding-left: 0;
}

aside > div > section:last-of-type > ul > li {
    margin-bottom: 0.5em;
}

aside > div > section:last-of-type > ul > li > a > span:first-of-type {
    border-radius: 100%;
    color: var(--c_nav);
    background-color: var(--c1);
    height: 2em;
    min-width: 2em;
    line-height: 2em;
    display: inline-block;
    text-align: center;
    font-size: 0.7em;
    margin-right: 0.75em;
}

aside > div > section:last-of-type > ul > li > a > span {
    vertical-align: middle;
}

aside > div > section > h2 {
    font-size: 1.1em;
}

/*Instagram feed*/
#instagram-feed {
    display: flex;
    flex-wrap: wrap;
}

#instagram-feed > a {
    width: 27.5%;
    height: auto;
    margin-bottom: 1em;
}

#instagram-feed > a:nth-child(2),
#instagram-feed > a:nth-child(5),
#instagram-feed > a:nth-child(8) {
    margin-right: 1em;
    margin-left: 1em;
}

#instagram-feed > a > img,
#instagram-feed > a > video{
    height: auto;
    width: 100%;
    object-fit:cover;
    object-position: center;
    aspect-ratio: 4/3;
    border-radius: var(--bradius);
}

#instagram-feed i {
    font-size: 1em;
    position: absolute;
    top: 10%;
    right: 10%;
    color: white;
}
.flipcards {
    background-color: var(--c_section);
    padding-top: 2em;
    padding-bottom: 4em;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: var(--bradius);
    margin-top: 2em;
}

.flipcards > h2 {
    text-align: center;
    margin-bottom: 1em;
}

.flip-card {
    background-color: transparent;
    height: 13em;
}

.flip-card-inner {
    position: relative;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    border-radius: var(--bradius);
    width: 100%;
}

.flip-card-front > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--bradius);
}

.flip-card-back {
    background-color: var(--c_hggrid);
    transform: rotateY(180deg);
    border-radius: .4em;
    padding: 1em;
    width: 100%;
}

.flip-card-back > p {
    height: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    white-space: initial;
}

.flipcards > div > article,
.flipcards > div > article > h3,
.flipcards > div > article > h3 > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 1em;
    color: var(--farbetext0);
}

/*Grid Flex cards*/
.flipcards > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 
        "f1 f2 f3";
    gap: 2em;
}

.flipcards > div > article:first-of-type {
    grid-area: f1;
}

.flipcards > div > article:nth-of-type(2) {
    grid-area: f2;
}

.flipcards > div > article:last-of-type {
    grid-area: f3;
}
.commentsection {
    margin-top: 2.5em;
    /*word-break: break-all;*/
}

.commentsection h2 {
    text-align: center;
}

.commentsection > button:first-of-type {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2.2em;
    font-size: 1.3em;
}

.commentsection legend {
    width: 100%;
}

#formnewcomment {
    display: none;
}

.newcomment > fieldset {
    border: none;
    margin-top: 2em;
    margin-bottom: 2.5em;
}

.newcomment > fieldset > select,
.newcomment > fieldset > label,
.newcomment > fieldset > input,
.newcomment > fieldset > textarea {
    display: block;
    width: 35em;
    margin-left: auto;
    margin-right: auto;
    margin-top: .3em;
    font-size: 1.1em;
}

.newcomment > fieldset > select {
    margin-bottom: 1em;
}

.newcomment > fieldset > input,
.newcomment > fieldset > textarea {
    margin-bottom: 1.3em;
}

.newcomment > fieldset > textarea,
.newcomment > fieldset > input {
    background-color: var(--c_hg);
    color: black;
    box-shadow: 0 .3125em .0,1875em rgba(0, 0, 0, 0.06);
    padding: 0.5em;
    border: .125em solid black;
    transition: 0.2s ease-in;
}

.newcomment > fieldset > textarea:focus,
.newcomment > fieldset > input:focus {
    outline-color: var(--farbetext0);
    width: 36em;
}

.newcomment > fieldset > div {
    display: flex;
    justify-content: center;
}

.subcom > div,
.elterncom > div {
    display: flex;
}

.subcom {
    background-color: var(--c_subcom);
    border-radius: var(--bradius);
    padding: 1em;
    margin-left: 3em;
    margin-top: 0.3em;
}

.elterncom {
    background-color: var(--c_elterncom);
    border-radius: var(--bradius);
    padding: 1em;
    margin-top: 1.5em;
}

.elterncom > div > div:first-of-type,
.subcom > div > div:first-of-type {
    width: 100%;
}

.elterncom > div > div:first-of-type > div:first-of-type,
.subcom > div > div:first-of-type > div:first-of-type{
    font-size: .8em;
    margin-top: .3em;
    margin-bottom: .1em;
}

.elterncom > div > div:first-of-type > div:first-of-type > time,
.subcom > div > div:first-of-type > div:first-of-type > time,
.elterncom > div > div:first-of-type > div:first-of-type > span,
.subcom > div > div:first-of-type > div:first-of-type > span {
    font-weight: bold;
}

[id^="answer"] {
    display: block;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

.elterncom > h3 {
    text-align: center;
    font-size: 1.4em;
}

.subcom > h4 {
    text-align: center;
    font-size: 1.2em;
}

.commentsection img {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    object-fit:cover;
    object-position: top;
    aspect-ratio: 4/3;
    margin-right: 1.2em;
    margin-left: .5em;
}

.g-recaptcha {
    margin-bottom: 1.3em;
}

.error {
    font-size: 1.3em;
	font-weight:bold;
    text-align: center;
    margin-bottom: 1em;
    color: red;
}

.actualcom {
    background-color: var(--c_newcom);
}

.internbutton {
    display: flex;
    justify-content: center;
}

.internbutton > button:first-of-type {
    margin-right: 1em;
}
article > header > h1 {
    margin-bottom: 0.2em;
    display: inline-block;
    text-align: center;
}

article h2 {
    font-size: 1.3em;
}

article h3 {
    font-size: 1.1em;
}

main > article > header > div {
    margin-bottom: 0.5em;
}

article > header > span {
    display: inline-block;
    text-align: right;
}

article a {
    padding: 0em !important;
}

article ul {
    margin-bottom: 2em;
}

article button + img:first-of-type,
header > img {
    max-height: 12.688em;
    width: 100%;
    object-fit: cover;
    border-radius: var(--bradius);
    object-position: center;
}

article p {
    text-align: justify;
    margin-bottom: 1.5em;
}

article iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    margin-bottom: 2em;
    max-width: 100%;
}

.gallery {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

aside {
    padding: 0;
}

aside > div {
    border-radius: var(--bradius);
    background-color: var(--c_section);
    padding: 1em;
}

main > article > header > div:first-child {
    display: flex;
    align-items: center;
}

time {
    display: inline-flex;
    flex-direction: column;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    min-width: 2.5em;
}

time > span:first-of-type {
    font-size: 1.5em;
    line-height: 110%;
    color: var(--farbetext0);
}

time > span:last-of-type {
    border-top: 0.1em solid var(--c1);
    color: var(--farbetext0);
    font-style: normal;
    text-transform: uppercase;
}

/*Readingtime*/
header > span:last-of-type {
    display: block;
    text-align: left;
    margin-top: .5em;
    margin-bottom: .5em;
    font-style: italic;
    font-size: .95em;
}

iframe {
    border: none;
    border-radius: var(--bradius);
}
@media screen and (min-width:80em) {
	/* Desktop */
	
}

@media screen and (max-width:80em) {
	/* Notebook groß */
	#arrowRightsmallPic {
		bottom: -14%;
		right: 1em;
	}

	#arrowLeftsmallPic {
		bottom: -14%;
		left: 1em;
	}
}

@media screen and (max-width:66em) {
	.blogstartpage > article > div:last-of-type {
		margin-top: 1em;
	}
}

@media screen and (max-width:64em) {
	/* Tablet quer, Notebook klein */
	.otherpictures > a {
		flex-basis: 25%;
	}

	/*flipcards*/
	.flipcards > div {
		grid-template-areas: 
			"f1"
			"f2"
			"f3";
		grid-template-columns: auto;
	}
}

@media screen and (max-width:60em) and (orientation: landscape) {
	#lightbox {
		grid-template-rows: 80% 20%;
	}
	
	.otherpictures > a {
		flex-basis: 10%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (max-width:58em) and (orientation: landscape) {
	.otherpictures > a {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0.3em !important;
		padding-right: 0.3em !important;
		margin-top: .5em;
		margin-bottom: .5em;
	}
}

@media screen and (max-width:48em) {
	/* Tablet */
	/*Navigation*/
	nav {
		position: static;
	}

	#btnNav {
		display:block;					
	}

	.gridblog > nav:first-of-type > ul,
	.gridvarpage > nav > ul {
		display:none;
		padding-left: 0;
		width: 20em;
		text-align: center;
		line-height: 4em !important;
	}

	#logo {
		display: flex;
		justify-content: center;
		height: 4em !important;
	}

	.vis {
		border-radius: var(--bradius);
	}


	/*Blog Startseite*/
	.blogstartpage > article:not(:last-of-type) > div:last-of-type {
		margin-bottom: 2em;
	}

	.blogstartpage {
		grid-template-areas: 
			"a1"
			"a2"
			"a3";
		grid-template-columns: 100%;
	}
	.blogstartpage > article {
		grid-template-rows: auto;
	}

	/*Blog page*/
	.gridblog {
		grid-template-columns: auto;
		grid-template-areas: 
			"navigation"
			"header"
			"main"
			"pagenav"
			"side"
			"footer";
	}

	aside > div {
		border-radius: var(--bradius);
		background-color: var(--c_section);
		padding: 1em;
		margin-left: 1em;
	}

	/*Galerie*/
	.gallery > img {
		width: 40%;
		margin: .5em;
	}
	@media (hover:hover) {
		.gallery > img:not(.lightbox):hover {
			width:45%;
			margin:0;
		}
		
		.gallery > img:not(.lightbox):last-of-type:hover {
			margin-bottom:0.5em;
		}

		.gallery > a:not(.lightbox):hover {
			width:45%;
			margin:0;
		}
	
		
		.gallery > a:not(.lightbox):last-of-type:hover {
			margin-bottom:0.5em;
		}
	}
	.gallery > a {
		width: 40%;
		margin: .5em;
	}

	.otherpictures > a {
		padding-left: 0.3em !important;
		padding-right: 0.3em !important;
	}

	/*Über mich*/
	/*Foto von mir*/
	#uebermich > section > h1 ~ img {
		height: 15em;
	}

	/*Kontaktformular*/
	section > address,
	section > form > fieldset > label,
	section > form > fieldset > input,
	section > form > fieldset > textarea {
		width: 91%;
	}
}

@media screen and (max-width:30em) {
	/* Smartphone */
	/*Wörter umbrechen wenn nicht genügen Platz*/
	body {
		word-break: break-word;
	}
	h1 {
		word-break: break-all;
	}

	/*Über mich*/
	/*Foto von mir*/
	#uebermich > section > h1 ~ img {
		height: 10em;
	}

	.otherpictures {
		height: 15vh;
	}

	#lightbox {
		grid-template-rows: 80% 20%;
	}

	#arrowRightsmallPic {
		bottom: -11%;
	}

	#arrowLeftsmallPic {
		bottom: -11%;
	}
	
}

@media screen and (pointer:coarse) {
	/* "grobes Zeigegerät": Finger oä.; Gegenteil: fine */
	a:not(nav a):not(.blogstartpage > article > div > h2 > a):not(.gallery a):not(aside a) {
		padding:0.5em 0.8em;
		border-radius:0.2em;
		line-height:1em;
		text-decoration:none;
	}

	.arrow-up {
		left:calc(50% - 1.2em);
	}
}
/*
@media (hover: none) {
	.gallery > img:hover,
	.gallery > a:hover {
		pointer-events:none;
	}
}*/