/*
    Theme Name: Adlers Consulting
    Description: 01. September 2026
    Version: 1.0
    Author: id-script // design & developing
    Author URI: https://www.id-script.com/
*/

/* Reset */

*,
::after,
::before,
::backdrop,
::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
	text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

ol,
ul,
menu {
    list-style: none;
}

address {
    font-style: normal;
}

img,
picture,
svg,
video,
canvas {
    display: block;
	width: 100%;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

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

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::selection,
::-moz-selection {
    color: var(--c-ink);
    background: var(--c-paper);
}


/* Variables */


:root {

    /* --- 1. FONTS (Familien) --- */

    --ff-sans: "Red Hat Display", sans-serif;
    --ff-serif: "Ovo", serif;
    --ff-brand: "id-script", sans-serif;

    /* --- 2. COLORS (OKLCH-System ohne Farbnamen) --- */

    --c-ink: oklch(22.0% 0.004 308.3); /* Black */
    --c-paper: oklch(98.3% 0.005 78.3); /* White - #f4f0e9 */

    --c-ink-muted: color-mix(in oklab, var(--c-ink) 60%, var(--c-paper));
    --c-paper-muted: color-mix(in oklab, var(--c-paper) 70%, var(--c-ink));
	
    --c-paper-accent-2: color-mix(in oklab, var(--c-paper) 85%, var(--c-accent-2));

    --c-accent-1: oklch(31.1% 0.1 12.8); /* Red */
    --c-accent-2: oklch(79.0% 0.045 85); /* Gold */
    --c-accent-3: oklch(60.2% 0.072 75.4); /* Brass */
    --developer: oklch(78.3% 0.148 224.9); /* Blue */

    --c-whatsapp: oklch(76.1% 0.201 149.7);
    --c-whatsapp-h: color-mix(in oklab, var(--c-whatsapp) 50%, transparent);

    /* --- 3. TYPOGRAPHY (Dicke Größe/Zeilenhöhe Familie) --- */

    --font-display: 600 clamp(2.6rem, 6.5vw, 5.2rem)/0.95 var(--ff-serif);
    --font-title: 500 clamp(2.2rem, 5vw, 3.6rem)/1.0 var(--ff-serif);
    --font-headline: 500 clamp(1.8rem, 4vw, 3rem)/1.05 var(--ff-serif);
    --font-heading: 400 1.5rem/1.2 var(--ff-serif);
    --font-lead: 400 1.25rem/1.4 var(--ff-sans);
    --font-intro: 600 1.05rem/1.5 var(--ff-sans);
    --font-text: 400 1rem/1.5 var(--ff-sans);
    --font-small: 400 0.938rem/1.4 var(--ff-sans);
    --font-caption: 400 0.75rem/1.3 var(--ff-sans);

    /* -- 4. BORDERS -- */

    --b-thin: 1px solid;
    --b-color-1: #e3ddd3;

    /* --- 5. LAYOUT & SPACING --- */

    --spacing: 0.25rem;
    --spacing-block: clamp(5rem, 8vw, 7rem);
    --spacing-inline: clamp(1.25rem, 5vw, 4rem);

    /* --- 6. ANIMATIONS --- */

    --ease-out-soft: cubic-bezier(.22, 1, .36, 1);

}



/* Globals */

body {
    position: relative;
    background-color: var(--c-paper);
    font: var(--font-text);
    color: var(--c-ink);
    letter-spacing: .025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-display {
    font: var(--font-display);
    color: var(--c-ink);
    letter-spacing: -.01em;
    margin-block-end: calc(var(--spacing) * 3);
}

.font-title {
    font: var(--font-title);
    color: var(--c-ink);
    letter-spacing: -.01em;
    margin-block-end: calc(var(--spacing) * 8);
}

.font-headline {
    font: var(--font-headline);
    letter-spacing: -.01em;
    margin-block-end: calc(var(--spacing) * 3);
}

.font-heading {
    font: var(--font-heading);
    color: var(--c-ink);
    margin-block-end: calc(var(--spacing) * 3);
}

.font-intro {
    font: var(--font-intro);
    margin-block-end: calc(var(--spacing) * 3);
}

.font-text {
    font: var(--font-text);
    color: var(--c-ink);
    margin-block-end: calc(var(--spacing) * 6);
}

.font-small {
    font: var(--font-small);
}

.note {
    font: var(--font-caption);
    margin-block-start: 1rem;
}

.page-gutter {
    inline-size: 100%;
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: var(--spacing-inline);
}

.p-hero {padding-block: calc(var(--spacing) * 36) calc(var(--spacing) * 16);}
.p-sec {padding-block: var(--spacing-block);}
.pbs-sec {padding-block-start: var(--spacing-block);}
.pbe-sec {padding-block-end: var(--spacing-block);}

.bg-dark {background: var(--c-ink);}
.bg-pa-2 {background: var(--c-paper-accent-2);}
    
.bb {border-bottom: var(--b-thin) var(--b-color-1);}