/* Identifier: www.feldenkrais-prignitz.de/css/style.css */
@charset "UTF-8";

/* =============== Farben =============== */
:root {
        --textfarbe: #000;
        --akzentfarbe: midnightblue;
        --bgfarbe: midnightblue;
        --extrabgfarbe: #fffb;
        --abgfarbe: #fa2b;
        --navbgfarbe: #fff9;
}


/* =============== Schrift =============== */
@font-face {
        font-family: 'Vollkorn';
        src: url('../fnz/vollkorn-regular.woff2')        format('woff2'),
             url('../fnz/vollkorn-regular.woff')        format('woff');
        font-weight: normal;
        font-style: normal;
}
@font-face {
        font-family: 'Vollkorn';
        src: url('../fnz/vollkorn-italic.woff2')        format('woff2'),
             url('../fnz/vollkorn-italic.woff')        format('woff');
        font-weight: normal;
        font-style: italic;
}
@font-face {
        font-family: 'Vollkorn';
        src: url('../fnz/vollkorn-semibold.woff2')        format('woff2'),
             url('../fnz/vollkorn-semibold.woff')        format('woff');
        font-weight: bold;
        font-style: normal;
}
@font-face {
        font-family: 'Vollkorn';
        src: url('../fnz/vollkorn-semibolditalic.woff2')        format('woff2'),
             url('../fnz/vollkorn-semibolditalic.woff')        format('woff');
        font-weight: bold;
        font-style: italic;
}

* {
        font-family: 'Minion Pro', 'Minion Web Pro', 'Minion Web', 'Minion 3', 'Minion MM', Minion, Song, Vollkorn, 'Times New Roman', Times, 'Liberation Serif', serif;
        line-height: 1.625em;
}


/* =============== Allgemein =============== */
body {
        max-width: 60em;
        min-height: 100vh;
        margin: 0 auto;
        padding: 0;
        color: var(--textfarbe);
        background-color: var(--bgfarbe);
        background-image: url("../img/bg_see-himmel.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
}

a {
        font-weight: bold;
        line-height: 120%;
        text-decoration: none; 
        color: var(--akzentfarbe); 
}

a:focus,
a:hover,
a:active {                
        text-decoration:underline;
}

a::before {
        content: '▶ ';
}

.ext a::before {
        content: '▶▶ ';
}

img,
video {
        width: 100%; 
        height: auto;	
}

video {
        display: block;        
        box-sizing: content-box;        
        margin: 2em auto 2em auto;
}

/* =============== Header =============== */
header {
        display: grid;
        grid-template-columns: auto auto auto;        
        grid-template-rows: repeat(6, auto);
        grid-gap: 1em;
        padding: 0;
        border: 0;
        margin: 0;
}

@media (width < 40em) {
		header {
				grid-template-columns: 1fr 1fr;
				justify-items: center;
				padding: 1em;
		}
}

#s-logo {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        margin-left: 0;
        margin-top: 1em;
        width: 8em;        
        z-index: 9;
}

#titelei {
        text-align: center;
        display: block;
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        margin-top: -2em;
        color: var(--akzentfarbe);
}

@media (width < 40em) {
		#titelei {
				grid-column: 1 / -1;
		}
}

#claim {
        font-size: 1.5em;
        font-weight: bold;
        font-style: italic;
        display: block;
        margin: 3em auto auto auto;
        width: 12em;
}

@media (width < 40em) {
		#claim {
				width: auto;
		}
}

.l {
        text-align: left;
        display: block;
}

.c {
        text-align: center;
        display: block;
}

.r {
        text-align: right;
        display: block;
}

figure {
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;
}

figure:before {
        position: absolute;
        background: white;
        color: red;
        opacity: 0.4;
        width: 1.5em;
        height: 1.5em;
        border-radius: 1em;
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.5em;
        transition: all 1s ease;
}

.aktuell figure:before {
	    content: "↯";	/* ? ↡ ! */
        top: 2em;
        left: 2em;
}

.next figure:before {
	    content: "⟱"; /* ↓ ↧ ↡ ⇓ ⇣ ⇩ ⟱ */
        top: 0;
        left: 1em;
}

figure:hover:before {
        opacity: 0;
}

figure img {
        width: 100%;
        display: block;
}

figure > figcaption {
        position: absolute;
        width: 100%;
        text-align: center;
        line-height: 3em;
        background: #fff7;
        opacity: 0;
        bottom: -3em;
        transition: all 1s ease;
}

figure > figcaption {
        width: 0;
        bottom: 50%;
        left: 50%;
}

figure:hover > figcaption {
        opacity: 1;
        bottom: 0;
        left: 0;
        width: 100%;
}

figcaption {
        font-size: 1.5em;
        text-align: center;
        margin: 0;
        padding: 0;
}

#aktuell {
        text-align: center;
        display: block;
        grid-column: 3 / -1;
        grid-row: 3 / auto;
        margin-top: 2em;
}

#next {
        text-align: center;
        display: block;
        width: 5em;
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        margin: 0 auto;
}

#intro {
        display: block;
        grid-column: 2 / 3;
        grid-row: 5 / 6;
        box-sizing: border-box;
        margin: 3em auto 2em auto;
        min-width: 20em;
        width: 66%;
        padding: 1em;
        background: var(--extrabgfarbe); 
}

@media (width < 40em) {
		#intro {
				grid-column: 1 / -1;
				grid-row: 4 / 5;
				margin: 3em 0 2em 0;
				width: 100%;
		}
}

.intro-h {
        text-align: center;
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 1.2em;
}

.s-li {
        list-style: none;
        margin-bottom: 1em;
}
.s-li li::before {
        display: inline-block;
        content: ' ';
        background-image: url('../img/s-logo_k.svg');
        background-size: 1.553892883em 1.2em;
        background-repeat: no-repeat;
        margin: auto .2em .2em -1.5em;
        height: 1.2em;
        width: 1.6em;
        vertical-align: -.4em;
}

#f-logo {
        grid-column: 3 / -1;
        grid-row: 5 / 6;
        margin-top: 3em;
        width: 8em;
        height: auto;
}

@media (width < 40em) {
		#f-logo {
				grid-column: 1 / -1;
		}
}

#vid-s {
        grid-column: 2 / 3;
        grid-row: 6 / 7;
        width: 66%;
}

@media (width < 40em) {
		#vid-s {
				grid-column: 1 / -1;
				width: 100%;
		}
}

/* =============== Navigation =============== */
#skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
}

#nav1 { /* Reduzierte Navigationsleiste für breite Anzeige */
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        z-index: 8;
}

#nav1 ul {
        display: flex;
        flex-direction: row;
        list-style: none; 	
        list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");        /* Safari hack */
        margin-bottom: 0;
        padding-left: 0;
}

#nav1 li {
        display: inline-block;
        flex: 1;
        list-style: none;
        margin: 0 auto 0 auto;
        padding: 0;
        text-align: center;
}

#nav1 a {
        font-weight: bold;
        text-decoration: none; 
        display: block;
        padding: 0.4em;
        color: var(--akzentfarbe); 
}

#nav-bg { /* Hintergrund für reduzierte Navigationsleiste bei breiter Anzeige */
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        margin: 0 -20em;
        z-index: 0;
        background-color: var(--navbgfarbe);
}

@media (width < 40em) {
        #nav1,
        #nav-bg,
        #next,
        #aktuell,
        .aktuell {
                display: none;
        }
}

nav { /* Vollständige Navigation als Hamburgermenü */
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        z-index: 8;
        padding-right: 1em;
}

@media (width < 40em) {
		nav {
				grid-column: 2 / -1;
				padding-right: 0;
		}
}

nav summary {
        list-style-type: "☰";
        font-size: 2rem;
        color: var(--akzentfarbe);
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 1em;
        cursor: pointer;
}

nav summary:hover {
        font-size: 2.2em;
        text-shadow: 2px 2px 5px var(--akzentfarbe);
}

nav summary span {
        font-size: 0;
}

nav [open] summary {
        list-style-type: "✖";
        color: red;
}

nav details {
        text-align: left;
        background-color: var(--navbgfarbe);
        margin: 1em;
}

nav ul {
	margin-top: 0;
	margin-right: 2em;
	display: inline-block;
}

@media (width < 40em) {
		nav ul {
				margin-top: 0.5em;
				margin-right: 0.5em;
		}
}

nav li {
        list-style: none;
}

/* =============== Inhalt =============== */
main {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-gap: 1em;
}

article,
aside {
        grid-column: 2 / 3;
        margin: 1em 0;
        padding: 1em 2em 1em 2em;
        background-color: var(--abgfarbe);
}

@media (width < 40em) {
		article,
		aside {
				grid-column: 1 / -1;
		}
}

h2 {
        position: relative;
        grid-column: 1 / 2;
        margin: 2em auto;
        width: fit-content;
        height: fit-content;
        padding: 0 1em;
        color: var(--akzentfarbe);
        background-color: var(--extrabgfarbe);
}

@media (width < 40em) {
		h2 {
				margin: 2em 0 1em 2em;
		}
}

h2::before {
        font-size: 0;
        position: absolute;
        content: '';
        top: 10px;
        left: 0;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left-color: currentColor;
}

#news {
        display: block;
        grid-column: 3 / -1;
        grid-row: 1 / auto;
        margin: 3em auto 1em auto;
        padding: 0 1em;
        width: fit-content;
        height: fit-content;
        background: var(--extrabgfarbe);
}

@media (width < 40em) {
		#news {
				grid-column: 1 / -1;
		}
}

#icke {
        width: 33%;
        float: left;
        margin: 0 1em 1em 0;
}

#krugman {
        width: 33%;
        float: left;
        margin: 0 1em 1em 0;
}

/* =============== Aside =============== */

.lnx li {
        list-style: none;
        margin-left: -1em;
}


/* =============== Kontaktformular =============== */



/* =============== Footer =============== */
footer {
        text-align: center;
  //      margin: 2em -50em 0 -50em;  /* ! */
        padding: .1em;
        background: var(--navbgfarbe);
}

#impr {
        background: var(--extrabgfarbe);
        width: fit-content;
        padding: 1em 1em 1em 2em;
}

// EOF