/*
Theme Name: Web-Elements Theme
Theme URI: https://web-elements.ch/
Author: Web-Elements GmbH
Author URI: https://web-elements.ch/
Description: <strong>Programmiert für petrahieberberatung.ch</strong>. Bei Fragen oder Problemen stehen wir Ihnen gerne mit Rat & Tat zur Seite.
Version: 16.1.6
License: Non-Public, Non-GPL
License URI: none
Text Domain: webelements
Requires PHP: 7.4
Requires at least: 5.5
Tested up to: 5.7

This theme is not intended for further use.
© 2014-2026 by Web-Elements GmbH
*/


/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-size: 100%;
    font: inherit;
    padding: 0;
    border: 0;
    margin: 0;
    vertical-align: center;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

q {
    quotes: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

.clear {
    clear: both;
}


/*
|=============================================================
|
|   INDEX
|   |-- 1. General
|   |-- 2. Typography
|   |--- 2.1. Titles
|   |-- 3. Elements
|   |--- 3.1. Pagination
|   |--- 3.2. Social Media
|   |--- 3.3. Search
|   |-- 4. Tables
|   |-- 5. Navigation
|   |-- 6. Page content
|   |--- 6.1. Containers
|   |--- 6.2. Header
|   |--- 6.3. Footer
|   |--- 6.4. Frontpage
|   |--- 6.5. Single post
|   |-- 7. Miscellaneous
|
|=============================================================
*/


@font-face {
    font-family: 'Satoshi';
    src: url('fonts/satoshi/Satoshi-Medium.woff2') format('woff2'),
         url('fonts/satoshi/Satoshi-Medium.woff') format('woff'),
         url('fonts/satoshi/Satoshi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --ph_pink: #E50961;
}

/*______________________
|                       |
|   1. GENERAL          |
|______________________*/

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100%;
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    line-height:32px;
    font-feature-settings: "ss01" 1;
    font-weight: 400;
    position: relative;
    letter-spacing: 0.1px;
    color: #333333;
}

.mobile {
    display: none;
}

ol,
ul {
    margin-left: 23px;
}

ol {
    list-style-type: upper-roman;
}

ul {
    list-style-type: disc;
}

figure {
    margin: 0;
}

iframe {
    border: none;
}

img {
    max-width: 100%;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1794px;
    }
}

/*______________________
|                       |
|   2. TYPOGRAPHY       |
|______________________*/

h1 {
    font-size: 48px;
    color:var(--akzentfarbe);
    letter-spacing: 0.1px;
    margin-top: 0.3em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 32px;
    line-height:42px;
    color:var(--akzentfarbe);
    letter-spacing: 0.1px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 32px;
    line-height:42px;
    color:var(--akzentfarbe);
    letter-spacing: 0.1px;
    margin-top: 25px;
    margin-bottom: 0.5em;
}

h4 {
    font-size: 28px;
    color:var(--akzentfarbe);
    letter-spacing: 0.1px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h5 {
    font-size: 24px;
    color:var(--ph_pink);
    letter-spacing:0.1px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h6 {
    font-size: 20px;
    color:var(--ph_pink);
    letter-spacing: 0.1px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
    margin-top: 0;
}

*:not(.content-wrapper) > h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}

.lead {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
}

p {
    margin-bottom: 15px;
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 700;
}


/*______________________
|                       |
|   3. ELEMENTS         |
|______________________*/

/*
|    3.1. Pagination
*/

.pagination {
    display: block;
    margin: 30px 0;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    /*text-align: center;*/
}

.pagination .nav-links {
    height: 100%;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px;
    background-color: var(--color-grey2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


/*
|    3.2. Social Media
*/

.social-media {
}


/*
|    3.3. Search
*/

.searchform {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.searchform label {
    width: 100%;
    margin-right: 15px;
    display: inline-block;
}

.search #content {
    margin-top: 60px;
    margin-bottom: 60px;
}

.search h2 {
    margin-bottom: 0;
}

.search .search-field .searchform button {
    margin: 0;
}

.search #content article a {
    text-decoration: none;
}

.search #content article p {
    color: #333333;
}

.search #content article:not(:last-of-type) {
    margin-bottom: 30px;
}

/*______________________
|                       |
|   4. TABLES           |
|______________________*/

caption {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: "Verdana", "Cambria", "Times New Roman", "Times", serif;
    margin-bottom: 1.2rem;
    text-align: left;
}

table.borderless th,
table.borderless td {
    border: none;
    border-bottom: 1px solid #5B616B;
}

thead th,
thead td {
    background-color: #F1F1F1;
    font-weight: 600;
}

table.borderless thead th,
table.borderless thead td {
    background-color: #FFFFFF;
    font-weight: 600;
}

th,
td {
    background-color: #FFFFFF;
    border: 1px solid #5B616B;
    font-weight: 400;
    padding: 1rem 1.5rem;
}


/*______________________
|                       |
|   5. NAVIGATION       |
|______________________*/

.hamburger {
    display: none;
}

#menuwrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: end;
    -webkit-align-items: center;
    align-items: center;
}

header nav ul {
    display:flex;
    gap:45px;
}

header nav ul,
nav ul {
    overflow: hidden;
    margin-left: 0;
    list-style-type: none;
}

header nav ul li {
    display: inline-block;
    float: left;
}

header nav ul li a {
    display: block;
    padding: 58px 0 20px 0;
    border: none;
    font-size: 17px;
    font-weight: 400;

    color:black;
    text-decoration: none;
}


header nav ul li a:hover,
header nav ul li a:focus,
header nav ul li a:active {
    color: black;
    text-decoration: none;
}

header nav ul li.current-menu-ancestor a,
header nav ul li.current-menu-item a {
    color:var(--ph_pink);
    text-decoration:none;
}


/* Dropdown Menu */

header nav ul ul {
    position: absolute;
    background-color: #333333;
    visibility: hidden;
    opacity: 0;
    -webkit-filter: opacity(0);
    filter: opacity(0);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

header nav ul ul li {
    display: block;
    float: none;
    min-width: 175px;
}

header nav ul li:hover ul,
header nav ul li:focus ul {
    visibility: visible;
    opacity: 1;
    -webkit-filter: opacity(1);
    filter: opacity(1);
    -webkit-transition: all 200ms 200ms ease;
    -moz-transition: all 200ms 200ms ease;
    -o-transition: all 200ms 200ms ease;
    transition: all 200ms 200ms ease;
}

header nav ul ul li a {
    padding: 10px 45px 10px 18px;
    font-weight: 300;
    text-transform: none;
    font-size: 14px;
    color: #FFFFFF !important;
}

header nav ul ul li.current-menu-item a,
header nav ul ul li a:hover,
header nav ul ul li a:focus,
header nav ul ul li a:active {
    color: var(--color-grey4) !important;
    text-decoration: none;
}

header nav ul ul li:last-of-type a {
    padding: 10px 45px 20px 18px;
}


/*______________________
|                       |
|   6. PAGE CONTENTS    |
|______________________*/

/*
|    6.1. Containers
*/

.content-wrapper {
    overflow: hidden;
}


/*
|    6.2. Header
*/

header {
    position: relative;
    z-index: 100;

    color: #FFFFFF;
}

header .page-title {
    font-size: 24px;
    font-weight: 500;
    padding-top: 15px;
    padding-bottom: 15px;
}

header .page-title img {
    width:575px;
    height:auto;
    max-width:none;
    margin-top:8px;
}

header #site-description {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.topbar {
    background-color: var(--color-grey2);
    padding: 8px 0;
    font-size: 12px;
}


/*
|    6.3. Footer
*/

footer {
    background-color: var(--akzentfarbe);
    color:white;
    margin: 0;
    padding: 75px 0 125px 0;
    position: relative;
    font-size:17px;
    line-height:24px;
        font-weight: 300;
}

footer .logo {
    height:auto;
    width:175px;
}


footer a,
footer a:link,
footer a:visited,
footer a:focus,
footer a:active {
    color: #FFFFFF;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

footer .scroller {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 48px;
    fill:white;
    width:45px;
    height:45px;
}

footer ul {
    list-style-type: none;
    margin:0px;
    padding:0px;

}

footer ul li a {
    display: inline-block;

    font-size:17px;
    line-height:24px;
    font-weight:300;

    color: #FFFFFF;
    letter-spacing: 1px;
    text-decoration: none;
}

footer ul li:first-of-type a {
    padding-top: 0;
}

footer ul li:last-of-type a {
    padding-bottom: 0;
}


/*
|    6.4. Frontpage
*/


/*
|    6.5. Single-Post
*/

.postmeta {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #EFEFEF;
    padding-top: 15px;
    padding-bottom: 15px;
}

.postmeta .share_counter {
    display: inline-block;
    text-align: center;
    float: right;
    margin-left: 10px;
}

.postmeta p {
    margin-bottom: 0;
}

#commentform {
    margin-bottom: 75px;
}

#wp-comment-cookies-consent {
    float: left;
    margin-top: 4px;
    margin-right: 6px;
    position: relative;
}

.comment-form-cookies-consent label {
    font-weight: 300 !important;
    font-size: 14px;
}

.commentlist ul {
    list-style-type: none;
    margin-left: 0;
}

#commentform label {
    display: block;
    font-weight: 500;
    padding-bottom: 5px;
}

#commentform #email,
#commentform #author,
#commentform #url {
    width: 100%;
    max-width: 100%;
}

.comment-form-email {
    width: 50%;
    float: left;
}

.comment-form-url {
    width: 100%;
    margin-bottom: 25px;
}

.comment-form-author {
    width: 50%;
    float: left;
    padding-right: 10px;
}

#commentform #submit {
    cursor: pointer;
}

#commentform #comment {
    width: 100%;
}

.single_post_thumbnail {
    height: 50vh;
    min-height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.single_post_thumbnail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.55);
}

#single_post_wrapper {
    background-color: #FFFFFF;
    margin: 25px 50px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 2;
    position: relative;
}

.single_post_thumbnail_zoom {
    position: absolute;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    bottom: 0;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.single_post_thumbnail_zoom a {
    padding: 10px;
    display: block;
}

.single_post_thumbnail_zoom:hover {
    margin-bottom: -2px;
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

.single_post_thumb_caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 15px 10px 10px;
    font-style: italic;
    font-size: 14px;
}

.vote_overlay {
    position: relative;
}

#feedback.voted {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    z-index: 100;
}

.commentlist .comment-author img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.commentlist .comment-author .fn,
.commentlist .comment-author .says {
    padding: 0 5px;
}

.commentlist .comment-author {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding-top: 10px;
    padding-left: 25px;
}

.commentlist .date {
    font-size: 12px;
    margin-top: -4px;
    color: var(--color-grey4);
    display: block;
}

.commentlist .comment-body {
    margin: 25px 0 45px 0;
}

.commentlist .comment-body .comment_text_body {
    background-color: var(--color-grey2);
    padding: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 15px;
}

.commentlist .comment-body .comment_text_body::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 35px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: var(--color-grey2);
    border-bottom: 0;
    border-right: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}

.commentlist .reply {
    float: right;
}

.commentlist ul ul {
    margin-left: 8%;
}

.post-wrapper {
    margin-top: 60px;
    margin-bottom: 60px;
}

.post-wrapper article[id^=post-]:not(:last-of-type) {
    margin-bottom: 30px;
}

.post-wrapper article[id^=post-] h2 {
    margin-bottom: 0;
}

.post-wrapper article[id^=post-] a {
    text-decoration: none;
}

.post-wrapper article[id^=post-] p {
    color: #333333;
}


/*______________________
|                       |
|   7. MISCELLANEOUS    |
|______________________*/

.slick-slide {
    height: unset;
}

.cookie-notice {
    position: fixed;
    right: 0;
    bottom: -150px;
    left: 0;
    padding:15px;
    background-color: var(--ph_pink);
    color:white;
    height: 90px;
    z-index: 9999;
}

.cookie-notice p {
    margin-bottom: 0;
    margin-right: 30px;
    font-size: 16px;
    line-height: 20px;
}

.cookie-notice a, 
.cookie-notice a:link {
    color:white;
    text-decoration: underline;
}

.cookie-notice #cookie-accept {
    background-color:var(--ph_pink);
    color:white;
    border: 1px solid white;
}

.fadeOutDown:not(.wow) {
    -webkit-transform: translateY(150px);
    -moz-transform: translateY(150px);
    -ms-transform: translateY(150px);
    -o-transform: translateY(150px);
    transform: translateY(150px);
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

.fadeInUp:not(.wow) {
    -webkit-transform: translateY(-150px);
    -moz-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    -o-transform: translateY(-150px);
    transform: translateY(-150px);
    opacity: 1;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}


/* Flex Content */ 

.content-wrapper a, 
.content-wrapper a:active,
.content-wrapper a:focus, 
.content-wrapper a:visited {
    color:black;
    text-decoration: underline;
}

.content-wrapper a:hover {
    text-decoration: none;
}

.content-wrapper hr {
    width:250px;
    height:2px;
    border:none;
    background-color:var(--akzentfarbe);
    color:var(--akzentfarbe);
    opacity:1;
}

.fc_header .header-images {
    display: grid;
    gap: 10px;
 
}

/* portrait left */
.fc_header .header-images.image-left {
    grid-template-columns: 3fr 2fr;
}

/* portrait right */
.fc_header .header-images.image-right {
    grid-template-columns: 2fr 3fr;
}

.header-image-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:760px;
}


/* default = image 1 left */
.fc_header  .header-images.image-left .image-1 {
    order: 1;
}

.fc_header  .header-images.image-left .image-2 {
    order: 2;
}

/* switch image 1 to right */
.fc_header  .header-images.image-right .image-1 {
    order: 2;
}

.fc_header  .header-images.image-right .image-2 {
    order: 1;
}


.fc_header {
    margin-bottom:100px;
}

.fc_lead {
    text-align:center;
    margin-bottom:150px;
}

.fc_lead h2, 
.fc_lead h1 {
    color:var(--akzentfarbe);
    font-size:32px;
    line-height:42px;
    margin-top:0px;
}

.fc_lead p {

}

.fc_dreispaltig {
    margin-bottom:170px;
}

.fc_dreispaltig h3 {
    margin-top:25px;
    color:var(--akzentfarbe);
}


.fc_dreispaltig a {
    color: black;
    text-decoration: none;
}


.fc_dreispaltig a::before {
    content: "→";
    margin-right: 8px;
}

.fc_dreispaltig a span {
    text-decoration: underline;
}

.fc_dreispaltig a:hover span {
    text-decoration: none;
}


.fc_cta {
    padding-top:45px;
    text-align:center;
    margin-bottom:170px;
}

.fc_cta img {
    height:auto;
    max-width:425px;
}

.fc_zweispaltig {
    margin-bottom:150px;
}

.fc_zweispaltig ul {
    margin-bottom:15px;
}

.fc_zweispaltige_liste {
    margin-bottom:120px;
}

.fc_zweispaltige_liste h3 {
    margin-top:30px;
}

.fc_zweispaltige_liste .fc_zweispaltig_liste_colright {
    padding-top:45px;
}

.fc_zweispaltige_liste ul {
    margin-top:25px;
}

/* Kontakt Modal */
.kontakt-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.kontakt-modal.is-open {
    display: block;
}

.kontakt-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.kontakt-modal__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    padding: 30px;
}

.kontakt-modal__content {
    max-width: 1764px;
    margin: 0 auto;
}

.kontakt-modal__close {
    position: absolute;
    top: 25px;
    right: 25px;
    border: 0;
    background: transparent;
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    color:white;
}

.kontakt-modal #kreuz {
    height:50px;
    width:50px;
}

body.modal-open {
    overflow: hidden;
}

.kontakt-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 10px;
    align-items: start;
}

.kontakt-col {
    min-width: 0;
    padding:125px 75px;
        position:relative;
}

.kontakt-col a, 
.kontakt-col a:link,
.kontakt-col a:visited,
.kontakt-col a:active,
.kontakt-col a:focus {
    color:white;
    text-decoration: none;
}

.kontakt-col a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .kontakt-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .kontakt-col {
        padding:50px 25px;
    }

    .ph_emaillink {
        font-size:18px;
    }
    .kontakt-col-right { order: 1; font-size:22px;line-height:25px;}
    .kontakt-col-left { order: 2; }
}

.kontakt-col-left {
    height:calc(100vh - 60px);
    background-color:var(--ph_pink);
    color:white;
    font-size:34px;
    line-height:44px;
}

.kontakt-col-right {
    background-color: #EA5160;
    color:white;
    height:calc(100vh - 60px);
    font-size:24px;
    line-height:34px;
    padding-top:132px;
}

.linkedin_link {
    margin-top:55px;
    display:inline-block;
}
.linkedin_link svg {
    height:45px;
    width:auto;
    fill:white;
    margin-left:-5px;
}

.fc_fliesstext.abstand_unten {
    margin-bottom:120px;
}