:root {
	/* ------------------
		typo 
	------------------ */	


    /* container max-width 1300px */

	
    --ff_stolzl: stolzl, sans-serif;
	--ff_din: urw-din, sans-serif;
	--ff_din_cond: urw-din-condensed, sans-serif;
	
    --fs_h1_small: clamp(1rem, 0.5803rem + 1.7219vi, 2.625rem); /* 16 - 42px stolzl light*/  /* Display 390 - 1900 */
    --fs_h1_big: clamp(2.0625rem, 1.207rem + 3.5099vi, 5.375rem); /* 33 - 86px stolzl bold*/  /* Display 390 - 1900 */
    --fs_h2: clamp(1.5rem, 1.3063rem + 0.7947vi, 2.25rem); /* 24 - 36px stolzl medium*/  /* Display 390 - 1900 */
	--fs_h3: clamp(1.25rem, 1.1209rem + 0.5298vi, 1.75rem); /* 20 - 28px din-condesed demi*/  /* Display 390 - 1900 */
	--fs_label: 1.75rem; /* x - 28px din-condesed demi*/
	--fs_copy: clamp(1rem, 0.3293rem + 0.9756vi, 1.5rem); /* 16 - 20px din light*/  /* Display 390 - 1900 */
	--fs_button: clamp(1rem, 0.9354rem + 0.2649vi, 1.25rem); /* 16 - 20px stolzl medium*/  /* Display 390 - 1900 */
	--fs_subnav: 1.25rem; /* x - 20px din regular*/
	--fs_footer_h3: 1.5rem; /* x - 24px stolzl medium*/
	--fs_footer_copy: 1rem; /* x - 16px stolzl light*/
	
	--lh_h2: clamp(1.75rem, 1.5563rem + 0.7947vi, 2.5rem); /* 28 - 40px */ /* Display 390 - 1900 */
	--lh_h3: clamp(1.5rem, 1.2417rem + 1.0596vi, 2.5rem); /* 24 - 40px */ /* Display 390 - 1900 */
	--lh_label: 1; 
	--lh_copy: clamp(1.5rem, 1.3709rem + 0.5298vi, 2rem); /* 24 - 32px */ /* Display 390 - 1900 */
	--lh_button: 1;
	--lh_subnav: 1; 
	--lh_footer_h3: 1; 
	--lh_footer_copy: 2rem; /* x - 32px */

    --fw_stolzl_thin: 100;
    --fw_stolzl_light: 200;
    --fw_stolzl_book: 300;
    --fw_stolzl_regular: 400;
    --fw_stolzl_medium: 500;
    --fw_stolzl_bold: 700;

    --fw_din_light: 300;
    --fw_din_regular: 400;
    --fw_din_bold: 700;

    --fw_din_cond_medium: 500;
    --fw_din_cond_demi: 600;
    --fw_din_cond_bold: 700;
	
		
	/* ------------------
		color
	------------------ */
	--clr_primary: hsl(150, 43%, 69%);
	--clr_primary_hover: hsl(150, 43%, 59%);
	--clr_secundary: hsl(148, 100%, 97%);
	--clr_copy: hsl(0, 5%, 33%);

    --clr_gradient: linear-gradient(var(--clrPrimary), #fff);
	
	--clr_border: #ddd;

    

	
	/* ------------------
		spacing
	------------------ */
    --step_faviconHeight: clamp(2rem, -0.0122rem + 2.9268vi, 3.5rem); /* Display 1100 - 1920 */
    --step_spacer_200: clamp(4.375rem, 2.908rem + 6.0185vi, 12.5rem); /* Display 390 - 2550 */
    --step_spacer_128: clamp(4rem, 3.2174rem + 3.4783vw, 8rem);
    --step_spacer_80: clamp(2.5rem, 2.0109rem + 2.1739vw, 5rem);
    --step_spacer_64: clamp(2rem, 1.6087rem + 1.7391vw, 4rem);
    --step_spacer_40: clamp(1.25rem, 1.0054rem + 1.087vw, 2.5rem);

    --header_height: calc(var(--margin_body_block) * 2 + var(--favicon_height));
    --primary_nav_gap: 1rem;
    --favicon_height: var(--step_faviconHeight, 3.5rem);
    --content_spacer_inline: ; /* Display 390 - 2550 */
    --content_maxwidth: 84rem; /* 1344px */

    --margin_body_block: 1rem;
    --margin_body_inline: 1rem;

    --fixed_position_top: calc(var(--header_height) + 7% + 2.5rem);

    --spacer_200: var(--step_spacer_200, 8rem);
    --spacer_128: var(--step_spacer_128, 6rem);
    --spacer_80: var(--step_spacer_80, 3.5rem);
    --spacer_64: var(--step_spacer_64, 3rem);
    --spacer_40: var(--step_spacer_40, 2rem);

    /* ------------------
		styles
	------------------ */
    --box_shadow: -3px 0px 6px #0000001A;
	--button_border_radius: 1.6rem; 
    --btn_padding: 0.75rem 1.2rem 0.5rem;
}

/* ------------------
	General 
------------------ */
html {
	scroll-behavior: smooth;
	/* scroll-padding-top: 3rem;  für anker auf der Seite - geht auch ohne smooth scroll */
    height: 100%;
    font-size: 16px;   
}
body {
	position: relative;
    background: #fff;
	color: var(--clr_copy);
	font-family: var(--ff_din);
	font-weight: var(--fw_din_light);	 
	font-size: var(--fs_copy);
	line-height: var(--lh_copy);
    min-height: 100%;
    margin: var(--margin_body_block) var(--margin_body_inline);
}

.mb-0 {
    margin-bottom: 0 !important;
}

/* ------------------
    typo 
------------------ */
h1 span {
    display: block;
    font-family: var(--ff_stolzl);
    font-weight: var(--fw_stolzl_light);
    font-size: var(--fs_h1_small);
    line-height: 1;
    text-transform: uppercase;
    color: var(--clr_copy);
}
h1 span + span {
    font-weight: var(--fw_stolzl_bold);
    font-size: var(--fs_h1_big);
    color: var(--clr_primary);
    margin-bottom: var(--spacer_40);
}
h2, .h2 {
    font-family: var(--ff_stolzl);
    font-weight: var(--fw_stolzl_medium);
    font-size: var(--fs_h2);
    line-height: var(--lh_h2);
    text-transform: uppercase;
    color: var(--clr_primary);
    margin-bottom: 0;
}
h3, .h3 {
    margin-bottom: 1.5rem;
}
h3, .h3,
label {
    font-family: var(--ff_din_cond);
    font-weight: var(--fw_din_cond_demi);
    font-size: var(--fs_h3);
    line-height: var(--lh_h3);
    text-transform: uppercase;
    color: var(--clr_copy);
}
.specialities-nav {
    font-weight: var(--fw_stolzl_regular);
    text-transform: uppercase;
    color: var(--clr_copy);
}
.specialities-nav svg,
.specialities-nav a {
    color: var(--clr_primary);
}
.specialities-nav svg {
    margin-right: 0.5rem;
}
.specialities-nav a {
    text-decoration: underline;
}
h6, .h6 {
    font-family: var(--ff_din);
    font-weight: var(--fw_din_light);
    font-size: var(--fs_h3);
    line-height: var(--lh_copy);
    margin-bottom: 0.5rem;
}
p {
    margin-bottom: var(--spacer_40);
}
p, li {}

a {
    text-decoration: none;
    color: var(--clr_primary);    
}
a:hover,
a:focus,
a:active {
    text-decoration: underline;
    color: var(--clr_primary_hover);    
}

nav ul,
nav li {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav a {
    color: var(--clr_primary);
}
nav a:hover,
nav a:focus,
nav a:active {
    text-decoration: none;
    color: var(--clr_primary_hover);
}

.subnav li {
    text-align: right;
}
.subnav a {
    color: var(--clr_copy);
    text-transform: uppercase;
}

/* ------------------
	styles
------------------ */
.btn {
    display: inline-block;
    font-family: var(--ff_stolzl);
    font-size: var(--fs_button);
    font-weight: var(--fw_stolzl_medium);
    line-height: var(--lh_button);
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    border: 2px solid var(--clr_primary);
    border-radius: var(--button_border_radius);
    background-color: var(--clr_primary);
    cursor: pointer;

    padding: var(--btn_padding);

    transition: all 200ms ease-in-out;
}
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none;
    color: #fff;
    border: 2px solid var(--clr_primary_hover);
    background-color: var(--clr_primary_hover);
}
.btn.btn-ghost {
    color: var(--clr_primary);
    border: 2px solid var(--clr_primary);
    background-color: transparent;
}
.btn.btn-ghost:hover,
.btn.btn-ghost:focus,
.btn.btn-ghost:active {
    color: #fff;
    border: 2px solid var(--clr_primary);
    background-color: var(--clr_primary);
}

/* ------------------
	Structure 
------------------ */
.favicon {
    display: block;
    position: fixed;
    top: calc(var(--margin_body_block) * 2);
    left: calc(var(--margin_body_block) + var(--margin_body_inline));
    width: var(--favicon_height);
    height: var(--favicon_height);
    z-index: 1000;
}
.favicon img {    
    height: var(--favicon_height);
}

#primary-nav-container {
    position: fixed;
    top: calc(var(--margin_body_block) * 2 + 0.1rem);
    right: calc(var(--margin_body_block) + var(--margin_body_inline));
    z-index: 1300;
}

#primary-nav-container.nav-is-closed ~ .primary-nav {
    transform: translateX(60rem);
}
#primary-nav-container.nav-is-open ~ .primary-nav {
    transform: translateX(0);
}


.primary-nav {    
    display: flex;
    flex-direction: column;
    gap: var(--primary_nav_gap);
    position: fixed;
    top: var(--margin_body_block);
    right: var(--margin_body_inline); 
    bottom: var(--margin_body_block); 
    left: var(--margin_body_inline);
    padding: calc(var(--margin_body_block) * 4) var(--margin_body_inline);
    box-shadow: var(--box_shadow);
    background: var(--clr_secundary);
    overflow: auto;
    transition: transform 500ms ease-in-out;
    z-index: 1200;
}
.primary-nav ul {
    list-style: none;
    text-align: right;
}
.primary-nav ul li {
   margin-bottom: 2rem;
}

.primary-nav a p {
    color: var(--clr_copy);
    padding-left: 4rem;
}

.primary-navtoggle {
    --burger_lineheight: 4px;
    --burger_spacing: 12px;
    --burger_height: 28px;
    --burger_width: 30px;

    width: var(--burger_width);
    height: var(--burger_height);
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.primary-navtoggle span{
    background-color: var(--clr_primary);
    position: absolute;
    border-radius: 2px;
    transition: .3s cubic-bezier(.8, .5, .2, 1.4);
    width: 100%;
    height: var(--burger_lineheight);
    transition-duration: 500ms
}
.primary-navtoggle span:nth-child(1){
    top:0px;
    left: 0px;
}
.primary-navtoggle span:nth-child(2){
    top: var(--burger_spacing);
    left: 0px;
    opacity:1;
}
.primary-navtoggle span:nth-child(3){
    bottom:0px;
    left: 0px;
}
.primary-navtoggle:not(.open):hover span:nth-child(1){
    transform: rotate(-3deg) scaleY(1.1);
}
.primary-navtoggle:not(.open):hover span:nth-child(2){
    transform: rotate(3deg) scaleY(1.1);
}
.primary-navtoggle:not(.open):hover span:nth-child(3){
    transform: rotate(-4deg) scaleY(1.1);
}
.primary-navtoggle.open span:nth-child(1){
    transform: rotate(45deg);
    top: 13px;
}
.primary-navtoggle.open span:nth-child(2){
    opacity:0;
}
.primary-navtoggle.open span:nth-child(3){
    transform: rotate(-45deg);
    top: 13px;
}

main {
    margin: 0 var(--content_spacer_inline);
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: calc(100vh - var(--margin_body_block) * 2);
    background-color: var(--clr_secundary);
    margin-bottom: var(--spacer_128);   
    overflow: hidden; 
    z-index: 500;
}
.hero .logo,    
.subpage .logo {    
    display: none;
}
.hero .logo img,     
.subpage .logo img {      
    height: calc(var(--favicon_height) - 0.4rem);
}
.hero-slogan {
    text-align: center;
    margin-top: 0;
}
.hero-content img {
    display: none;
}

.container {
    margin-bottom: var(--spacer_128);
}
.inner-container {
    position: relative;
    width: 100%;
    max-width: var(--content_maxwidth);    
    margin: 0 auto;    
}

.with-bg {
    background-color: var(--clr_secundary);
}
.with-bg.aboutme,
.with-bg .inner-container {
    padding: var(--spacer_128) 0;
}
.with-bg.aboutme,
.inner-container.my-specialities,
.inner-container.contact {
    padding-inline: var(--spacer_64);
}
.inner-container.two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(1.00rem, calc(0.77rem + 1.04vw), 2.00rem);
    padding-inline: var(--spacer_64);
}

header h2, 
header h3,
.speciality svg,
.speciality h3,
.speciality p {
    margin-bottom: var(--spacer_40);
}

.speciality {
    text-align: center;
}
.speciality svg {
    font-size: 8rem;
    color: var(--clr_primary);
}
.speciality p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.speciality .readmore {
    margin-bottom: var(--spacer_128);
}

.my-specialities h2 {
    margin-bottom: 0;
}
.my-specialities header h3 {
    margin-bottom: var(--spacer_80);
}

.img-container-about {
    text-align: center;
    padding: var(--spacer_64) var(--spacer_64) 0;
    background-color: var(--clr_secundary);
}
.img-container-about img {
    display: inline;
}

.contact h2 {
    margin-bottom: var(--spacer_80);
}

.contactform {
    text-align: center;
}
.contactform input,
.contactform textarea {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--clr_copy);
    font-family: var(--ff_din_cond);
    font-size: var(--fs_subnav);
    background-color: transparent;
    margin-bottom: var(--spacer_64);
}
.contactform input:focus-visible,
.contactform textarea:focus-visible {
    outline: 3px solid var(--clr_primary);
    border-bottom: 1px solid transparent;
}

.subpage {
    padding-top: calc(var(--header_height) + 7%);
    background: transparent linear-gradient(180deg, #F0FFF7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
}
.subpage .content-wrap {
    min-height: calc(100vh - calc(var(--header_height) * 3));
    padding-inline: var(--spacer_40);
}
.subpage .content-wrap .icon {
    --icon_size: 8rem;
    
    text-align: center;
    margin-bottom: var(--spacer_40);
}
.subpage .content-wrap .icon svg {
    font-size: var(--icon_size);
    color: var(--clr_primary);
}
.subpage section {
    --offset_top: calc(var(--fixed_position_top) + 0rem);
    
    padding-top: var(--offset_top);
    margin-top: calc(var(--offset_top) * -1); 
    margin-bottom: var(--spacer_128);
}
.subpage section:last-child {
    margin-bottom: 0;
}

.subnav {
    display: none;
    border-right: 1px solid var(--clr_copy);
    margin-bottom: 4rem;    
}
.subnav li {
    border-right: 4px solid transparent;
    padding-right: 1rem;
    margin-bottom: 1rem;
}
.subnav li.active {
    border-right: 4px solid var(--clr_primary);
}


.main-footer {    
    display: grid;
    gap: 3rem;
    position: relative;
    background-color: var(--clr_secundary);
    padding: var(--spacer_64);
    z-index: 500;
}
.main-footer * {
    font-family: var(--ff_stolzl);
    font-weight: var(--fw_stolzl_light);
    font-size: var(--fs_footer_copy);
}
.main-footer h3 {
    font-weight: var(--fw_stolzl_medium);
    font-size: var(--fs_footer_h3);
    text-transform: uppercase;
    color: var(--clr_primary);
    margin-bottom: var(--spacer_40)
}
.main-footer .logo img {
    max-width: 15.625rem;
}
.main-footer .social-icon img {
    width: 3rem;
}
.footer-link,
.footer-link:hover,
.footer-link:active,
.footer-link:focus {    
    color: var(--clr_copy);
    text-decoration: underline;
}

.floating-contact {
    display: none;
}

.success {
    text-align: center;
    margin-bottom: 2rem;
}

.grecaptcha-badge {
    position: absolute !important;
    right: 0 !important;
}

/* ************************* */
/* ***** media queries ***** */
/* ************************* */

@media (min-width: 31em) {  /* ca 490er Auflösung */
    .specialities {
        display: grid;
    }
}
@media (min-width: 42em) {  /* ca 670er Auflösung */
    :root {
        --margin_body_inline: 1rem;
    }
    
    #primary-nav-container {
        top: calc(var(--margin_body_block) * 2 + 0.7rem);
    }    
    .primary-navtoggle {
        --burger_lineheight: 5px;
        --burger_spacing: 13px;
        --burger_height: 32px;
        --burger_width: 37px;
    }
    
    .contact h2 {
        text-align: center;
    }
    
    .contactform {
        width: 36rem;
        margin: 0 auto;
    }
}

@media (min-width: 59em) {  /* ca 950er Auflösung */
    :root {
        --buttonBorder: 3px solid var(--clr_primary); 
        --btn_padding: 1.1rem 3rem 0.8rem;
    }
    
    .primary-nav {    
        right: var(--margin_body_inline); 
        left: auto;
        width: 45rem;
    }
    .primary-nav ul {
        text-align: left;
        width: 30rem;
        padding-left: 5rem;
    }
    .primary-nav ul li {
        margin-bottom: 3rem;
    }
    .primary-nav a p {
        padding-left: 0;
    }
    #primary-nav-container.nav-is-closed ~ .primary-nav {
        transform: translateX(50rem);
    }
    
    .hero .logo,    
    .subpage .logo {    
        display: block;
        position: absolute;
        top: calc(var(--margin_body_block) + 0.2rem);
        left: calc(var(--margin_body_block) + var(--favicon_height) + 1rem);
    }

    .inner-container.two-col h2 {
        text-align: right;
    }

    .specialities {
        --speciality_width: 30rem;
        
        grid-template-columns: repeat(auto-fit, minmax(var(--speciality_width), 1fr));
    }

    .subnav {
        display: block;  
    }
    .subpage .content-wrap {
        display: grid;
        grid-template-columns: 20rem 1fr;
        gap: 4rem;
        padding-inline: var(--spacer_64);
    }
    .subpage .content-wrap .icon {
        --icon_size: 10rem;
        text-align: right;
        padding-right: 2rem;
    }
    .subpage .leftcol {
        position: relative;
    }
    .subpage .fixed-position {
        position: sticky;
        top: var(--fixed_position_top);
    }

    .main-footer {
        --footer_col_width: 20rem;
        
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--footer_col_width), 1fr));
        gap: 3rem;
        background-color: var(--clr_secundary);
        padding: var(--spacer_64);
    }
    .main-footer > div {
        padding-inline: 3rem;
    }
}

@media (min-width: 71em) {  /* ca 1100er Auflösung */
    :root {
        --fs_h1_small: clamp(1.5rem, -0.0091rem + 2.1951vi, 2.625rem); /* 24 - 42px stolzl light*/  /* Display 1100 - 1920 */
        --fs_h1_big: clamp(3.5rem, 0.9848rem + 3.6585vi, 5.375rem); /* 33 - 86px stolzl bold*/  /* Display 1100 - 1920 */
    
        --fs_button: clamp(1rem, 0.6646rem + 0.4878vi, 1.25rem); /* 16 - 20px stolzl medium*/  /* Display 1100 - 1920 */
    }

    .hero-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-left: calc(var(--margin_body_block) + var(--favicon_height));
    }
    .hero-content img {
        display: block;
        width: 50%;
    }
    
    .about {
        --img-width: 24rem;
    }
    .specialities {
        --speciality_width: 30rem;

        gap: 4rem;
     }

     .speciality .readmore {
        margin-bottom: var(--spacer_40);
    }

     .inner-container.two-col {
        grid-template-columns: 1fr 60%;
        padding-inline: 0;
    }
     .inner-container.two-col > h2 {
        padding-left: var(--spacer_64);
    }
     .inner-container.two-col > div {
        padding-right: var(--spacer_64);
    }
    
    .img-container-about {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: var(--img-width);
        text-align: left;
        padding: 0;
        background-color: transparent;
    }

    .with-bg.aboutme {
        padding-left: var(--img-width);
        margin-left: var(--header_height);
    }

    .inner-container.about {
        z-index: -1;
    }
    .floating-contact {
        display: block;
        position: fixed;
        bottom: calc(var(--margin_body_block) * 2);
        right: calc(var(--margin_body_inline) + var(--margin_body_block));
    }
    .floating-contact .page-up{
        margin-bottom: 0.5rem;
    }
    .floating-contact .page-up,
    .floating-contact .mailme {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--clr_primary);
    }
    .floating-contact .page-up svg,
    .floating-contact .mailme svg {
        font-size: 2rem;
        color: #fff;
        margin: 0.5rem;
    }
}

@media (min-width: 86em) {  /* ca 1400er Auflösung */
    :root {
        --fixed_position_top: calc(var(--header_height) + 7% + 3.2rem);
    }
    
    .subpage .content-wrap {
        max-width: var(--content_maxwidth);
        margin: 0 auto;
        grid-template-columns: 25rem 1fr;
        padding-inline: 0;
    }
    
    .main-footer {
        --footer_col_width: 15rem;
        gap: 0;
    }
    .main-footer > div {
        border-right: 1px solid var(--clr_border);
    }
    .main-footer > div:last-child {
        border-right: none;
    }
}

@media (min-width: 118em) {  /* ca 1890er Auflösung */
    :root {
        --fixed_position_top: calc(var(--header_height) + 7% + 4.5rem);
    }
    
    .hero-content {
        width: 100%;
        margin-left: 0;
    }
    .hero-slogan {
        flex: 1;
    }
    
    .about {
        --img-width: 28rem;
    }
    .main-footer {
        padding-inline: 10rem;
    }
}

@media (min-width: 137em) {  /* ca 2200er Auflösung */
    :root {
        --fixed_position_top: calc(var(--header_height) + 7% + 6.5rem);
    }
}