/* Theme Name: lumencoaching */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} @font-face {font-family: 'MsMadi';src: url('/wp-content/themes/lumencoaching/assets/fonts/MsMadi-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;} /* === Zitate === */ @font-face {font-family: 'Scriptina';src: url('/wp-content/themes/lumencoaching/assets/fonts/scriptina.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;} /* === HEADER === */ @font-face {font-family: 'Myriad Pro Condensed';src: url('/wp-content/themes/lumencoaching/assets/fonts/Myriad Pro Condensed.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;} /* === Text === */ @font-face {font-family: 'Myriad Pro Regular';src: url('/wp-content/themes/lumencoaching/assets/fonts/Myriad Pro Regular.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;} /* === Colors ans More === */ :root { --Petrolgrün: #2A6E6E; /* Hauptfarbe, Buttons, Headlines */ --Terracotta: #D86C4B; /* Call-to-Actions, Zitate, Icons */ --Karamell: #B67F5E; /* Unterstreichungen, Hover-Effekte */ --Wolkengrau: #F4F2EF; /* Hintergrundbereiche, Leerräume */ --Espressobraun: #3B2F2F; /* Fließtext, Footer, Kontraste */ } * {margin: 0;padding: 0;box-sizing: border-box;} body {background-color: var(--Wolkengrau); color: var(--Espressobraun); font-family: 'Myriad Pro Regular', sans-serif; text-transform: none; font-style: normal; text-align: inherit; font-size: 16px; line-height: 1.5; letter-spacing: 0px;} /* Header */ h1, h2, h3, h4, h5, h6 {color:var(--Petrolgrün); font-family: 'Myriad Pro Condensed'; line-height:1.5; } h1, .h1 {font-size:36px;} h2, .h2 {font-size:36px;} h3, .h3 {font-size:36px;} h4, .h4 {font-size:21px;} .fs18 {font-size:18px; line-height:1.6;} .fs27 {font-size:27px; line-height:1.6;} p {margin-bottom:1em;} a {text-decoration:none !important; color:var(--Terracotta);} a:hover {text-decoration:underline !important;cursor:pointer; } .bckgrndfff {background:#fff} .tac {text-align:center} .m0a {margin:0 auto;} .fwb {font-weight:bold;} .mb16 {margin-bottom:16px;} .mb24 {margin-bottom:24px;} .mb36 {margin-bottom:36px;} .mb45 {margin-bottom:45px;} /* Sections */ section {width: 100%;} section .inner {width: 100%;margin: 0 auto;padding: 1.5rem;;} @media (min-width: 1328px) { section .inner {width: 100%;max-width: 1328px;} } /* ==== ==== DISPLAY FLEX */ .df {display:flex;} .fdr {flex-direction:row;} .fdc {flex-direction:column} .jcfs {justify-content: flex-start;} .aic {align-items:center;} .aifs {align-items:flex-start;} .fww {flex-wrap:wrap;} .gap9 {gap:9px;} .gap18 {gap:18px;} .gap45 {gap:45px;} .gap60 {gap:60px;} .gap90 {gap:90px;} /* ==== ==== Buttons */ button, .btn {margin:9px;display: inline-block;letter-spacing: 0px;font-weight: 300;text-transform: none;text-decoration: none;font-style: normal;border-width: 1px;border-style: solid;border-radius: 5px 5px 5px 5px;max-width: 100%;box-shadow: none;transform: none;transition: all .3s ease-in-out;background: var(--Terracotta);color: #fff;border-color: var(--Terracotta);padding: .75rem 3rem;font-size: 16px;line-height: 1.5;} button:hover, .btn:hover {background:#fff;color:var(--Terracotta);transform: translate3d(0px, 0px, 0) scale(1.) rotate(0deg) skew(0deg, 0deg);border:1px solid var(--Terracotta);cursor:pointer;text-decoration:none !important} button.sec, .btn.sec {background:#fff;color:var(--Terracotta);transform: translate3d(0px, 0px, 0) scale(1.) rotate(0deg) skew(0deg, 0deg);border:1px solid var(--Terracotta);} button.sec:hover, .btn.sec:hover {background: var(--Terracotta);border-color: var(--Terracotta);color:#fff;cursor:pointer;text-decoration:none !important;} /* ==== ==== List styles */ ul { list-style: none; padding-left: 0;} ul.arr li {position: relative;padding-left: 30px;margin-bottom: 8px;} ul.arr li::before {content: ""; position: absolute; left: 0; top: calc(50% - 2px); width: 12px; height: 12px; transform: translateY(-50%); background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: contain; } /* === SIDEBAR === */ nav {background-color: #fff;padding: 1rem 0;position: fixed;width: 100%;top: 0;z-index: 1000; transition: padding 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);} nav.shrink {padding: 0.5rem 0;} nav .inner {max-width: 1328px;width: 100%;margin: 0 auto;padding: 0 1.5rem;display: flex;align-items: center;justify-content: space-between;} nav .logo {text-align: center;flex: 1;} nav .logo img { height: 90px; transition: height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);} nav .logo img.shrink { height: 45px;} nav .nav-links {flex: 1;display: flex;justify-content: space-between;gap: 1rem;} nav .nav-links ul {list-style: none;width: 100%;display: flex;justify-content: space-between;gap: 1rem;} nav .nav-links li {position: relative;} nav .nav-links a {color: #2A6E6E;text-decoration: none;font-size: 1rem;font-weight: 600;font-size: 18px;font-weight: normal;} nav .nav-links a:hover {color: #B67F5E;} nav .nav-links li:hover .dropdown {display: block;} nav .nav-links a.haschilds:after {display: inline-block;width: .25em;height: .25em;margin-left: .5em;border-right: .1em solid;border-top: .1em solid;transform: rotate(135deg);content: "";vertical-align: middle;} nav .dropdown {display: block;position: absolute;background-color: #fff;min-width: 390px;box-shadow: 0 8px 16px rgba(0,0,0,0.2);z-index: 1;top: calc(100% + 18px);opacity: 0;transform: translateY(-10px);visibility: hidden;transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;border-radius:9px;overflow:hidden;} nav .nav-links li:hover .dropdown {opacity: 1;transform: translateY(0);visibility: visible;} nav .dropdown a {color: #3B2F2F;padding: 12px 16px;display: block;} nav .dropdown a:hover {background-color: var(--Terracotta);color: #F4F2EF;} /* Mobile Menu Toggle */ nav .mobile-menu-toggle {display: none;background: none;border: none;width: 30px;height: 30px;cursor: pointer;position: absolute;top: 2rem;right: 1.5rem;z-index: 1001;} nav .mobile-menu-toggle span {display: block;width: 100%;height: 3px;background: #2A6E6E;position: absolute;left: 0;transition: all 0.3s ease;} nav .mobile-menu-toggle span:nth-child(1) {top: 6px;} nav .mobile-menu-toggle span:nth-child(2) {top: 13.5px;} nav .mobile-menu-toggle span:nth-child(3) {top: 21px} nav .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {transform: rotate(45deg);top: 13.5px} nav .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {opacity: 0;} nav .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {transform: rotate(-45deg);top: 13.5px;} @media (max-width: 768px) { nav {min-height:100px;} nav .inner {display:flex; flex-direction:column;} nav .logo img {height: 70px;} nav .nav-links {display: none;} nav .nav-links.active {display: block;width: calc(100% - 30px);background-color: #fff;z-index: 999;} nav .nav-links.active.left {padding-top: 6rem ;} nav .nav-links ul {flex-direction: column;gap: 0.5rem;} nav .nav-links li {width: 100%;} nav .nav-links a {font-size: 1.2rem;padding: 0.5rem 0;display: block;} nav .nav-links a.haschilds:after {float: right;transform: rotate(135deg);vertical-align: middle;} nav .dropdown {position: static;min-width: 100%;box-shadow: none;opacity: 1;transform: none;visibility: visible;display: none;padding-left: .5rem;} nav .nav-links li.active .dropdown {display: block;} nav .mobile-menu-toggle {display: block;} nav .logo {flex: 0;position: absolute;top: 1rem;left: 1.5rem;transform: none;z-index: 1002;} nav .nav-links.left.active, .nav-links.right.active {position: relative;top: 0;} /* Combine left and right nav-links in mobile view */ nav .nav-links.left.active + .logo + .nav-links.right.active {margin-top: 0;} } section#banner {background-size: cover;background-attachment: fixed;height: calc(100vh - 100px);padding: 0 100px;position: relative;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: center;align-content: stretch;overflow: hidden;} section#banner .caption {position: absolute;margin-top: 60px;width: 50%;} section#banner .header_title {color: #fff;font-size: 3.5em; line-height: 1.25em;margin-bottom: 30px; font-weight: 400;} section#banner .header_title.subtitle { text-align: center; padding: 0 12%; } section#banner .caption p {margin-bottom: 0;text-transform: uppercase;font-weight: 600;color: #fff;letter-spacing: .1em;} section#banner #ql {margin: 0;padding: 0; position: absolute; left: 0; right: 0; margin: auto; bottom: 4em; width:100%; display:flex; flex-direction:row; justify-content:center;gap:45px } section#banner.sub_banner {align-items: center;} section#banner { background: url(/wp-content/uploads/astrid-kellenbenz.jpg) no-repeat top center; background-size: cover; background-attachment: scroll;margin-top:0; } @media (max-width: 1400px) { section#banner { background-position: center right -0px; background-attachment: unset} } @media (max-width: 1000px) { section#banner {padding-left:50px; } section#banner .header_title {font-size: 2.5em; }} @media (max-width: 800px) { section#banner {background-position: center right -150px;padding:0 18px; } section#banner .caption {position: absolute;margin-top: 320px;width: 100%;} section#banner .header_title {font-size: 2em; } section#banner #ql {display:none;} } @media (max-width: 550px) { section#banner {background-position: center right -150px; padding:0 18px; } section#banner .caption {position: absolute;padding:1.5rem;} section#banner .header_title {font-size: 1.5em; } } @media (max-width: 450px) { section#banner {background-position: center right -180px; padding:0 18px; } section#banner .caption {position: absolute;padding:1.5rem;} section#banner .header_title {font-size: 2.5em; } } @media (max-width: 350px) { section#banner {background-position: center right -200px; padding:0 18px; } section#banner .caption {position: absolute;padding:1.5rem;} section#banner .header_title {font-size: 3.5em; } } /* === HERO === */ .hero-section-container{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;overflow:hidden} .hero-section-container.flex-row-reverse{flex-direction:row-reverse} .hero-text-column{flex:1 1 500px;display:flex;align-items:center;justify-content:center;padding:45px;background:#f8f8f8} .hero-text-inner{max-width:680px} .hero-image-column{flex:1 1 500px;min-height:55vh;background-size:cover;background-position:center;background-repeat:no-repeat} @media(max-width:900px){ .hero-text-column{flex-basis:100%;padding: 1.5rem} .hero-image-column{flex-basis:100%;min-height:55vh} .hero-text-inner h1{font-size:2.4rem} } /* === FEEDBACK === */ #feedback .slider-container {width: 900px;max-width: calc(100% - 80px);position: relative;text-align: center;margin: 90px auto;} #feedback .review-card {padding: 18px;border-radius: 9px;display: none;} #feedback .review-card.active {display: block;} #feedback .review-card h3 {margin: 0 0 10px; color:#B67F5E} #feedback .review-card p {margin: 0 0 15px;color: #555;font-style:italic;} #feedback .arrow {position: absolute;top: 50%;transform: translateY(-50%);cursor: pointer;width: 30px;height: 30px;} #feedback .arrow.left {left: -40px;} #feedback .arrow.right {right: -40px;} #feedback .bullets {margin-top: 20px;} #feedback .bullet {display: inline-block;width: 9px;height: 9px;background: #ccc;border-radius: 50%;margin: 0 5px;cursor: pointer;} #feedback .bullet.active {background: var(--Terracotta);} /* === rating === */ section.rating { width:100%; margin:90px 0; padding:45px 0 0} section.rating .inner { width:960px; max-width:calc(100% - 36px); margin:0 auto} section.rating .frame { margin-left:130px; background:#f8f8fc; position:relative; border-radius:10px} section.rating .frame .imgbx { background:url('/wp-content/uploads/ak-profil.png') 0 0/cover; width:260px; height:260px;display:block; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; position:absolute; left:-180px; top:50%;transform:translateY(-50%); box-shadow: 0 0 20px 8px rgba(0,0,0,.06);border: 1px solid #dfe3eb;} section.rating .frame .imgbx.overme { background:url('/wp-content/uploads/astrid-kellenbenz-profil.png') 0 0/cover; } section.rating .frame .imgbx::before { content:""; position:absolute; width:60px; height:60px; bottom:0; background-size:cover; background-repeat:no-repeat;} section.rating .frame .rbx { font-size:18px; line-height:1.6; padding:60px 45px 60px 130px; font-weight:lighter; box-shadow: 0 0 20px 8px rgba(0,0,0,.06); border: 1px solid #dfe3eb;} section.rating .frame .rbx .rfooter { border-top:1px solid #cdcdcd; margin-top:18px; padding:18px; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap;gap:18px} section.rating .frame .rbx .rfooter .prefav { flex:1 1 80px; display:flex; align-items:center; height:60px; width:60px} section.rating .frame .rbx .rfooter .prefav img { height:60px;width:auto} section.rating .frame .rbx .rfooter .con { display:flex; align-items:center; height:80px} @media (max-width:750px) { section.rating .frame {margin-left:0;} section.rating .frame .rbx {padding:120px 27px 27px;} section.rating .inner {padding:135px 0 0;} section.rating .frame .imgbx { width: 180px; height: 180px; top: -90px; left:50%; transform: translateX(-50%); } section.rating .frame .rbx .rfooter .conh {padding-left:0;} } /* === FOOTER === */ #beforefooter {background:#fff;} #beforefooter .inner div {flex:1 1 250px; text-align:center;} #beforefooter .inner div img {height:120px; width:auto;} @media (max-width: 850px) { #beforefooter .inner div img {height:100px; width:auto;} } @media (max-width: 800px) { #beforefooter .inner div {flex:1 1 200px;} #beforefooter .inner div img {height:90px; width:auto;} } @media (max-width: 600px) { #beforefooter .inner div {flex:1 1 100px;} #beforefooter .inner div img {height:50px; width:auto;} } @media (max-width: 380px) { #beforefooter .inner div {flex:1 1 75px;} #beforefooter .inner div img {height:40px; width:auto;} } footer {background:var(--Espressobraun); color:#fff;} footer .inner {width: 100%;max-width: 1328px;margin: 0 auto;padding: 1.5rem;} footer .inner .blck {flex:1 1 250px} footer .inner .blck h4 {font-size:16px;margin-bottom:18px;} footer .inner .blck li {padding:4.5px 0;} #afterfooter {background:#333; padding:18px; text-align:center; color:#fff;}