/*
Theme Name: Zimmermann Consulting 2027
Author: KOCH ESSEN Kommunikation + Design GmbH
Author URI: https://koch-essen.de/
Version: 2.0.0
*/


/* ==========================================================================
   BASE
   @font-face rules are inlined in the <head>, see ke_theme_fonts() in functions/init.php.
   Components are in their own files: _header.css, _footer.css, ... (loaded after this file).
   ========================================================================== */

:root {
    --header-height: 151.99px;
    --admin-bar-height: 0px;

    /* layout */
    --content-max-width: 980px;
    --column-gap: 30px;

    /* colors */
    --color-black: #000;
    --color-white: #fff;
    --color-grey-100: #f7f7f7;
    --color-grey-150: #f4f4f4;
    --color-grey-175: #f0f0f0;
    --color-grey-200: #eee;
    --color-grey-250: #e8e8e8;
    --color-grey-400: #999;
    --color-grey-550: #777;
    --color-grey-600: #666;
    --color-grey-650: #5e5e5e;
    --color-grey-700: #555;
    --color-blue: #009dd3;
    --color-blue-light: #00a9c9;
    --color-teal: #4ca797;
    --color-teal-light: #5bb5a5;
    --color-green: #35892a;
    --color-green-light: #609b30;
    --color-green-dark: #008b3a;
    --color-error: #dc3232;
}

/* WP admin bar (logged-in users): 32px, 46px on narrow screens. */
:root:has(body.admin-bar) {
    --admin-bar-height: 32px;
}

@media (max-width: 782px) {
    :root:has(body.admin-bar) {
        --admin-bar-height: 46px;
    }
}

/* below 600px, WP's admin bar scrolls away instead of sticking to the top. */
@media (max-width: 600px) {
    :root:has(body.admin-bar) {
        --admin-bar-height: 0px;
    }
}

@media (min-width: 960px) {
    :root {
        --header-height: 120px;
    }
}


html {
    scroll-padding-top: calc(var(--header-height) + var(--admin-bar-height) + .8rem);
}

body {
    background: var(--color-white);
    color: var(--color-grey-600);
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    line-height: 1.765; /* 30px */
    /* thinner text rendering on macOS, like on the live site. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin: 0 0 20px;
}

a {
    color: var(--color-blue);
}

/* visually hidden, but read by screen readers (class name as used by wp core). */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ==========================================================================
   PAGEBUILDER
   every layout is a <section class="pb-section pb-{layout}">,
   its own styles are in assets/css/pagebuilder/{layout}.css (loaded only if the layout is used).
   ========================================================================== */

.pb-section {
    contain: content;
}

/* text sections (all except hero, image and map): content width + vertical spacing.
   the inline padding keeps the section itself full width (e.g. for backgrounds), no inner wrapper needed. */
.pb-content {
    padding: 60px max(5%, (100% - var(--content-max-width)) / 2) 110px;
    /* long words/urls would widen the page on mobile. */
    overflow-wrap: anywhere;
}

/* stacked text sections: the bottom padding of the first one is the gap. */
.pb-content + .pb-content {
    padding-top: 0;
}

.pb-content :is(p, ul, ol):last-child {
    margin-bottom: 0;
}

/* section headline, centered between two lines. */
.pb-headline {
    display: flex;
    align-items: center;
    gap: .8em;
    width: 80%;
    margin: 0 auto 40px;
    color: var(--color-black);
    font-size: 20.93px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
}

.pb-headline::before,
.pb-headline::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-blue);
}

/* columns: stacked on mobile, side by side (equal width) from 768px. */
.pb-columns {
    display: grid;
    gap: 90px var(--column-gap);
}

@media (min-width: 768px) {
    .pb-columns {
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
    }
}