/*******************************************************
*
Theme Name:         Amankaya
Theme URI:          https://agatheschnorrenberg.de/
Description:        My first Bludit Theme
Version:            1.0
Author:             Agathe Schnorrenberg
License:            CC BY-NC-ND 3.0 DE
Tags:               mobile first, responsiv
*
*******************************************************/


/*******************************************************
*
*****     Namenskonventionen: BEM

.sidebar {} /* Block
.sidebar__box {} /* Element
.sidebar__box--news {} /* Modifier

.page-header {} /* Block
.page-header--fullheight {} /* Modifier
.page-header__title {} /* Element
.page-header__subtitle {} /* Element
.page-header__subtitle-minor {} /* Modifier


Ein Block ist ein Container von grundsätzlich beliebiger Komplexität. Er enthält mehrere Elemente, die sinnvoll zum Block passen und diesen mit Leben füllen. Jeder Block und jedes Element kann außerdem einen optionalen Modifier haben, der das entsprechende Basis-Styling mit zusätzlichen CSS-Eigenschaften abwandelt und verfeinert, so dass es eben mehrere unterschiedliche Styling-Varianten dafür geben kann.

Die Schreibweise der BEM-Klassen ist zwar nicht platzsparend, aber einfach:

* Blöcke haben ganz normale semantische Klassen: class="pagination"
* darin enthaltene Elemente werden mit zwei Unterstrichen notiert: class="pagination__link"
* Abwandlungen der Elemente erhalten, zusätzlich zur Originalklasse, eine mit Doppeltrennstrich ergänzte Variante: class="pagination__link pagination__link--active"
* Aber auch Blöcke können direkt als Ganzes abgewandelt werden, insbesondere bei gewünschter Positionierung an anderer Stelle: class="pagination pagination--aside"


*****     Inhaltsverzeichniss

= Fonts
= Globale Variablen
= Spezifische Variablen
= Universelle CSS-Regeln
= Grid
= Header Content
== Menue
=== Menuicon
=== Menubutton
=== 48em = 768px
= Main Content
= Sidebar Content
= Widgets / Blocks Content
= Footer Content
= Formulare und Kommentare

*
*******************************************************/

/*****    Variablen    *****/

/* exo-2-300 - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 300;
    src: local(''),
        url('../fonts/exo-2-v8-latin-300.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/exo-2-v8-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* exo-2-500 - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 500;
    src: local(''),
        url('../fonts/exo-2-v8-latin-500.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/exo-2-v8-latin-500.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* exo-2-700 - latin */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 700;
    src: local(''),
        url('../fonts/exo-2-v8-latin-700.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/exo-2-v8-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/*****    Variablen    *****/
:root {

    --prmry: #BA2B90;
    --scndry: #85BC20;
    --black100: #333;
    --black50: #666;
    --grey: #999; 
    --dezent: #ececec;
    --light: #fff;

    --info: ;
    --success: ;
    --warning: ;

    --link-color: ;
    --link-color-visited: ;
    --link-color-hover: ;
    --link-color-active: ;

    --font-size: 1;
    --line-height: 1;
    --text-align: center;
    --text-transform: uppercase;

    --sectionpadding: 40px 30px;
    --distance: 10px;

    --border: ;
    --brdr-rds: 3px;
    --box-shdw: 0 2px 4px rgba(0, 0, 0, 0.1);

    --max-width: 1280px;
    --spacing: 1;
    --transition: all .5s ease;

}

/*****    Universelle CSS-Regeln    ******/
* {
    box-sizing: border-box;
    font-family: 'Exo 2', sans-serif;
    line-height: 1.5;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    font-size: 62.5%;
    /* 62.5% of 16px = 10px */
    scroll-behavior: smooth;
    font-family: 'Exo 2', sans-serif;
}

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

main {
    margin-top: 85px;
}

.section {
    position: relative;
    overflow: hidden;
    padding: 0 2rem;
}

.inner {
    max-width: 90rem;
    margin: 0 auto;
}

.dezent {
    background-color: var(--dezent);
}

.hdln {
    color: var(--prmry);
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    margin-top: 5rem;
}

.cntnt p {
  text-align: center;
}

.cntnt p:after {
content: '~';
display: block;
margin-top: 1rem;
color: var(--prmry);
font-size: 3rem;
}

.cntnt p:last-child:after {
content: '';
}

a {
    text-decoration: none;
 
}

p a:hover {
    color:var(--black100);
}

p a {
    color: var(--prmry);
}

p,
ul {
    font-size: 1.8rem;
    font-weight: 300;
    margin: 1rem 0;
    padding: 0;
    color: var(--black100);
}

.tel {
    margin: 1rem 0 0 0;
}

.tel,
.mail,
.web {
    display: flex;
    flex-wrap: wrap;
}

.d-none {
    display: none;
}










/*****    Header    ******/
.logo {
  text-decoration: none;
  display: block;
  margin-right: 20px;
}

.logo img {
    width: 240px;
    }
    
.hero {
    padding: 2rem;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.50) 25%, rgba(0,0,0,0.25) 100%), url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    text-shadow: black 0 0 20px;
}

.hero__hdln {
    font-size: 4vh;
    color: var(--prmry);
    margin: 0;
}

.hero__subln {
    margin: 0;
    font-size: 3vh;
    color: var(--light);
    font-weight: 500;
}

.hero__intro {
    margin-top: 3rem;
    color: var(--light);
}

.hero > svg {
    position: absolute;
    bottom: 0;
    left: 0;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80%;
  margin-top: 10rem;
  text-shadow: black 0 0 20px;
  }
}


/*****    Page (Statische Seiten)    ******/

.page__inner {
    margin: 7vh auto 0 auto;
}

.page__hdln {
    margin: 0 auto 1rem auto;
    font-size: 3rem;
    line-height: 1.25;
}

.intro__supln:before {
    border-image-source: linear-gradient(to left, var(--grey), var(--light));
}

.intro__supln:after {
    border-image-source: linear-gradient(to right, var(--grey), var(--light));
}

/*****    Therapieangebote    ******/

/*.flex-container*/
.thrp__inner {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/*.flex-item*/
.thrp__card {
    flex-grow: 1;
    flex-shrink: 1;
    margin: 1rem 0;
    flex-basis: 350px;
    border-radius: 3px;
    border: 1px solid var(--prmry);
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--box-shdw);
}

.thrp__media {
    min-height: 280px;
}


.thrp__supln:before {
    border-image-source: linear-gradient(to left, var(--grey), var(--dezent));
}

.thrp__supln:after {
    border-image-source: linear-gradient(to right, var(--grey), var(--dezent));
}

.thrp__hdln {
    font-size: 2.4rem;
    line-height: 1.25;
    margin: 0;
    padding: 2rem 0 0 0;
}

.thrp__media {}

.thrp__content {
    padding: 0 1rem 3rem;
}

.prgrph-intro {
    padding: 1.4rem 0 1rem 0;
    font-weight: 500;
}

.prgrph-intro:after {
    content: '';
    display: block;
    width: 6rem;
    margin: 2rem 0 0 0;
    border-top: 2px solid var(--grey);
}

.prgrph p {
    color: var(--black50);
}

/*****    Team    ******/

.team__inner {
    margin: 0 auto;
}

.team__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 7vh 0;
}

.team__supln:before,
.team__supln:after {
    border-image-source: linear-gradient(to left, var(--grey), var(--light));
}

.team__supln:after {
    border-image-source: linear-gradient(to right, var(--grey), var(--light));
}

.team__hdln {
    font-size: 2.4rem;
    line-height: 1.25;
}

.staff__img {
    border-radius: 50%;
    border: 1px solid var(--prmry);
    max-width: 240px;
    max-height: 240px;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--box-shdw);
}

.staff__name {}

.staff__position {
    color: var(--grey);
    margin: 0;
    line-height: 1.25rem;
}

/*****    Praxis    ******/

.prxs__supln:before {
    border-image-source: linear-gradient(to left, var(--grey), var(--dezent));
}

.prxs__supln:after {
    border-image-source: linear-gradient(to right, var(--grey), var(--dezent));
}

.prxs__inner {
    display: flex;
    flex-wrap: wrap;
    max-width: 96rem;
    margin: 0 auto;
}

.prxs__inner > * {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 384px;
    position: relative;
    text-align: center;
    margin: 1rem;
}

.prxs__img {
    border-radius: var(--brdr-rds);
    border: 1px solid var(--prmry);
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--box-shdw);
}

.prxs__desc {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    font-size: 1.8rem;
    color: var(--light);
    margin: 0;
    font-weight: 400;
}


/*****    Footer    ******/

.footer {
    position: absolute;
    width: 100%;
}

.footer__bar {
    background-color: var(--prmry);
    text-align: center;
    padding: 2rem 0;
    margin: -1rem 0 0 0;
}

.footer__bar p {
  margin:2rem;
  color: var(--light);
}

.footer__bar a {
color: var(--light);
}

/*****    Page Content    *****/

.page-content h2 {
    margin: 0 auto 1rem auto;
    font-size: 3rem;
    line-height: 1.25;
    color: var(--prmry);
    font-weight: 500;
}

.page-content h2 {
    font-size: 2.4rem;
    line-height: 1.25;
    margin: 0;
    padding: 2rem 0 0 0;
    color: var(--prmry);
    font-weight: 500;
}

.page-content h3 {
    font-size: 2rem;
    line-height: 1.25;
    margin: 0;
    padding: 2rem 0 0 0;
    color: var(--black100);
    font-weight: 500;
}

.page-content h4 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0;
    padding: 2rem 0 0 0;
    color: var(--prmry);
    font-weight: 500;
}

/*****    Mindestbreite 768px    *****/

@media (min-width: 48em) {

    .hero__inner {
    padding: 0 10rem;
    }
    
    .hero__intro {
    padding: 0 10rem;
    }
    
.footer__bar {
        margin: -2rem 0 0 0;
    }
    
    .footer__bar p {
      display: inline;
    }



}