/* ============================================
   scale Brand System – Style Guide 2026
   Angepasst an visuelles Erscheinungsbild der alten Seite
   (scale-digitalagentur.de: Manrope 400, Caladea, Pill-Buttons)
   ============================================ */

:root {
    /* Fonts */
    --font-sans: "General Sans", system-ui, sans-serif;
    --font-serif: "Source Serif 4", Georgia, serif;

    /* Colors */
    --color-text: #262626;
    --color-background: #ffffff;
    --color-white: #ffffff;
    --color-black: #262626;
    --color-border: rgba(38, 38, 38, 0.14);
    --color-muted: rgba(38, 38, 38, 0.55);
    --color-light-bg: #f2f2f2;
    --color-medium-bg: #e5e5e5;

    /* Service Colors (alte + neue Seite identisch) */
    --service-strategy: #c58cff;
    --service-design: #ff8a5b;
    --service-web: #6ee7ff;
    --service-marketing: #d7ff64;
    --service-process: #8effc1;

    /* Color Pairs (Leistungsfarben) */
    --color-marke: #de0b14;
    --color-design: #ff5400;
    --color-websites: #dcff02;
    --color-kampagne: #ff66da;
    --color-prozesse: #6801fa;
    --color-performance: #b8b8fe;

    /* Typography Sizes – angepasst an alte Seite (base 16-17px) */
    --type-overline: clamp(14px, 0.9vw, 17px);
    --type-hero: clamp(56px, 6.5vw, 96px);
    --type-headline: clamp(44px, 5.2vw, 78px);
    --type-statement: clamp(32px, 3.5vw, 52px);
    --type-large-body: clamp(22px, 2vw, 34px);
    --type-body: clamp(16px, 1vw, 17px);
    --type-small-body: clamp(13px, 0.85vw, 15px);
    --type-button: clamp(14px, 0.85vw, 16px);

    /* Line Heights – alte Seite: headers 1.1, body 1.5 */
    --line-overline: 1.4;
    --line-hero: 1.1;
    --line-headline: 1.1;
    --line-statement: 1.15;
    --line-large-body: 1.4;
    --line-body: 1.5;
    --line-small-body: 1.45;
    --line-button: 1;

    /* Letter Spacing – alte Seite: headers -1px */
    --ls-overline: 0em;
    --ls-hero: -0.02em;
    --ls-headline: -0.02em;

    /* Spacing */
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 32px;
    --space-l: 64px;
    --space-xl: 120px;
    --space-xxl: 180px;

    /* Buttons – alte Seite: Pill-Shape */
    --btn-radius: 100px;
    --btn-height: 52px;
    --btn-padding: 0 32px;
}

/* ============================================
   GLOBAL DEFAULTS
   ============================================ */

body {
    font-family: var(--font-sans) !important;
    font-size: var(--type-body) !important;
    font-weight: 400 !important;
    line-height: var(--line-body) !important;
    color: var(--color-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   HEADINGS – Weight 400 wie alte Seite
   H1 = Hero  |  H2 = Headline  |  H3 = Statement
   H4 = Large Body  |  H5 = Body Bold  |  H6 = Overline
   ============================================ */

h1, .h1 {
    font-family: var(--font-sans) !important;
    font-size: var(--type-hero) !important;
    font-weight: 400 !important;
    line-height: var(--line-hero) !important;
    letter-spacing: var(--ls-hero) !important;
    color: var(--color-text);
}

h2, .h2 {
    font-family: var(--font-sans) !important;
    font-size: var(--type-headline) !important;
    font-weight: 400 !important;
    line-height: var(--line-headline) !important;
    letter-spacing: var(--ls-headline) !important;
    color: var(--color-text);
}

h3, .h3 {
    font-family: var(--font-sans) !important;
    font-size: var(--type-statement) !important;
    font-weight: 400 !important;
    line-height: var(--line-statement) !important;
    color: var(--color-text);
}

h4, .h4 {
    font-family: var(--font-sans) !important;
    font-size: var(--type-large-body) !important;
    font-weight: 400 !important;
    line-height: var(--line-large-body) !important;
    color: var(--color-text);
}

h5, .h5 {
    font-family: var(--font-sans) !important;
    font-size: var(--type-body) !important;
    font-weight: 600 !important;
    line-height: var(--line-body) !important;
    color: var(--color-text);
}

h6, .h6 {
    font-family: var(--font-serif) !important;
    font-size: var(--type-overline) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: var(--line-overline) !important;
    letter-spacing: var(--ls-overline) !important;
    color: var(--color-muted);
    text-transform: none !important;
}

/* ============================================
   PARAGRAPHS & TEXT
   ============================================ */

p, li, td, th {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: var(--line-body);
    color: var(--color-text);
}
/* ============================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================ */

.overline {
    font-family: var(--font-serif) !important;
    font-size: var(--type-overline) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: var(--line-overline) !important;
    color: var(--color-muted) !important;
    text-transform: none !important;
    margin-bottom: var(--space-s);
}

.hero-text {
    font-family: var(--font-sans) !important;
    font-size: var(--type-hero) !important;
    font-weight: 400 !important;
    line-height: var(--line-hero) !important;
    letter-spacing: var(--ls-hero) !important;
}

.headline {
    font-family: var(--font-sans) !important;
    font-size: var(--type-headline) !important;
    font-weight: 400 !important;
    line-height: var(--line-headline) !important;
    letter-spacing: var(--ls-headline) !important;
}

.statement {
    font-family: var(--font-sans) !important;
    font-size: var(--type-statement) !important;
    font-weight: 400 !important;
    line-height: var(--line-statement) !important;
}

.large-body {
    font-family: var(--font-sans) !important;
    font-size: var(--type-large-body) !important;
    font-weight: 400 !important;
    line-height: var(--line-large-body) !important;
}

.small-body {
    font-family: var(--font-sans) !important;
    font-size: var(--type-small-body) !important;
    font-weight: 400 !important;
    line-height: var(--line-small-body) !important;
}

/* ============================================
   BUTTONS – Pill-Shape wie alte Seite
   ============================================ */

.btn,
button:not(.mfp-close),
input[type="submit"],
.btn-container a,
a.btn {
    font-family: var(--font-sans) !important;
    font-size: var(--type-button) !important;
    font-weight: 500 !important;
    line-height: var(--line-button) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: var(--btn-radius) !important;
    min-height: var(--btn-height);
    padding: var(--btn-padding) !important;
    transition: all 0.3s ease !important;
}

/* Outline / Line Buttons */
.btn-outline,
.btn-link {
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

.btn-outline:hover,
.btn-link:hover {
    background: var(--color-text) !important;
    color: var(--color-white) !important;
    border-color: var(--color-text) !important;
}

/* Solid Buttons */
.btn-solid,
.btn-default {
    background: var(--color-text) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-text) !important;
}

.btn-solid:hover,
.btn-default:hover {
    opacity: 0.85;
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

/* ============================================
   NAVIGATION / MENU
   ============================================ */

.menu-container a,
.navbar-nav a,
.menu-smart a,
.main-menu-container a {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    font-size: var(--type-small-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* ============================================
   SPACING UTILITIES
   ============================================ */

.space-xs  { margin-bottom: var(--space-xs); }
.space-s   { margin-bottom: var(--space-s); }
.space-m   { margin-bottom: var(--space-m); }
.space-l   { margin-bottom: var(--space-l); }
.space-xl  { margin-bottom: var(--space-xl); }
.space-xxl { margin-bottom: var(--space-xxl); }

.pad-xs  { padding: var(--space-xs); }
.pad-s   { padding: var(--space-s); }
.pad-m   { padding: var(--space-m); }
.pad-l   { padding: var(--space-l); }
.pad-xl  { padding: var(--space-xl); }
.pad-xxl { padding: var(--space-xxl); }

/* ============================================
   COLOR UTILITIES
   ============================================ */

.text-muted  { color: var(--color-muted) !important; }
.text-white  { color: var(--color-white) !important; }
.text-dark   { color: var(--color-text) !important; }
.bg-dark     { background-color: var(--color-black) !important; }
.bg-white    { background-color: var(--color-white) !important; }
.bg-light    { background-color: var(--color-light-bg) !important; }
.bg-medium   { background-color: var(--color-medium-bg) !important; }

/* ============================================
   BORDERS
   ============================================ */

.border-top    { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.border-left   { border-left: 1px solid var(--color-border) !important; }
.border-right  { border-right: 1px solid var(--color-border) !important; }

/* ============================================
   DARK SECTIONS – Farb-Inversions
   ============================================ */

.style-dark h1,
.style-dark h2,
.style-dark h3,
.style-dark h4,
.style-dark h5,
.style-dark p,
.style-dark li,
.style-dark a,
[data-skin="dark"] h1,
[data-skin="dark"] h2,
[data-skin="dark"] h3,
[data-skin="dark"] h4,
[data-skin="dark"] h5,
[data-skin="dark"] p,
[data-skin="dark"] li,
[data-skin="dark"] a {
    color: var(--color-white);
}

.style-dark h6,
.style-dark .overline,
[data-skin="dark"] h6,
[data-skin="dark"] .overline {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Dark sections: Pill-Buttons invertieren */
.style-dark .btn-outline,
.style-dark .btn-link,
[data-skin="dark"] .btn-outline,
[data-skin="dark"] .btn-link {
    border-color: rgba(255,255,255,0.2) !important;
    color: var(--color-white) !important;
}

.style-dark .btn-outline:hover,
[data-skin="dark"] .btn-outline:hover {
    background: var(--color-white) !important;
    color: var(--color-text) !important;
}

/* ============================================
   UNCODE OVERRIDES
   ============================================ */

/* Heading weights: immer 400 (Regular) wie alte Seite */
h1.font-weight-700,
h2.font-weight-700,
h3.font-weight-700,
.h1.font-weight-700,
.h2.font-weight-700,
.h3.font-weight-700 {
    font-weight: 400 !important;
}

/* Uncode paragraph font-size fix */
.uncode-single-media-wrapper p,
.uncell p,
.uncont p,
.wpb_text_column p {
    font-size: var(--type-body) !important;
    line-height: var(--line-body) !important;
    font-weight: 400 !important;
}

/* Fix: Uncode duplicated font-family stacks */
body,
body .style-light-bg,
body .style-dark-bg {
    font-family: var(--font-sans) !important;
}

/* Logo / Site Title */
.logo-container a,
.navbar-brand {
    font-family: var(--font-sans) !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    h1, .h1, .hero-text {
        font-size: clamp(38px, 10vw, 56px) !important;
    }
    h2, .h2, .headline {
        font-size: clamp(32px, 8vw, 44px) !important;
    }
    h3, .h3, .statement {
        font-size: clamp(26px, 6vw, 32px) !important;
    }
    h4, .h4, .large-body {
        font-size: clamp(20px, 4vw, 24px) !important;
    }
    .btn,
    button:not(.mfp-close),
    .btn-container a {
        min-height: 44px;
        padding: 0 24px !important;
    }
}
/* ============================================
   HEADER: Logo weiss bei transparentem/dunklem Header
   ============================================ */

/* Logo + Menü weiss im transparenten Zustand (über dunklem Hero)
   WICHTIG: :not(.is_stuck) weil Uncode menu-transparent auch im Sticky behält */
.menu-transparent:not(.is_stuck) .logo-skinnable img,
.menu-transparent:not(.is_stuck) .navbar-brand img,
.menu-dark:not(.is_stuck) .logo-skinnable img,
.menu-dark:not(.is_stuck) .navbar-brand img,
.style-dark .logo-skinnable img {
    filter: brightness(0) invert(1) !important;
}

/* Menu-Links weiss bei transparentem Header (nicht sticky) */
.menu-transparent:not(.is_stuck) .menu-smart a,
.menu-transparent:not(.is_stuck) .main-menu-container a,
.menu-dark:not(.is_stuck) .menu-smart a,
.menu-dark:not(.is_stuck) .main-menu-container a {
    color: var(--color-white) !important;
}

/* ============================================
   HAMBURGER ICON – Custom (Uncode-Override)
   Komplett eigenes Icon: 36px breit, saubere Animation.
   Uncode-Animation wird nicht blockiert — nur Größe
   und Farben werden überschrieben.
   ============================================ */

/* === GRÖSSE: 36px breit, sauberer Abstand === */
#masthead .mobile-menu-button .lines,
#masthead .mobile-menu-button .lines::before,
#masthead .mobile-menu-button .lines::after {
    width: 36px !important;
    height: 2px !important;
}

/* Hamburger-Abstand (≡): nur wenn NICHT close */
#masthead .mobile-menu-button:not(.close) .lines::before {
    top: 10px !important;
}
#masthead .mobile-menu-button:not(.close) .lines::after {
    top: -10px !important;
}

/* === CLOSE-STATE (X): Uncode-Animation komplett ersetzen === */
/* Mittlere Linie: verzögertes Erscheinen nach Animation */
#masthead .mobile-menu-button:not(.close) .lines {
    background-color: currentColor !important;
    transition: background-color 0.01s ease 0.3s !important;
}
#masthead .mobile-menu-button.close .lines {
    background-color: transparent !important;
    transition: background-color 0.01s ease 0s !important;
}
#masthead .mobile-menu-button.close .lines::before,
#masthead .mobile-menu-button.close .lines::after {
    top: 0 !important;
    transform-origin: center center !important;
}
#masthead .mobile-menu-button.close .lines::before {
    transform: rotate(45deg) !important;
}
#masthead .mobile-menu-button.close .lines::after {
    transform: rotate(-45deg) !important;
}

/* Äußere Linien: smooth transition + box-shadow für mittlere Linie */
#masthead .mobile-menu-button .lines::before,
#masthead .mobile-menu-button .lines::after {
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease !important;
}


/* === FARBEN: Transparent Header === */
#masthead.menu-transparent:not(.is_stuck) .mobile-menu-button {
    color: var(--color-white) !important;
}
#masthead.menu-transparent:not(.is_stuck) .lines::before,
#masthead.menu-transparent:not(.is_stuck) .lines::after {
    background-color: var(--color-white) !important;
}

/* === FARBEN: Sticky Header === */
.is_stuck .logo-skinnable img,
.is_stuck .navbar-brand img {
    filter: none !important;
}
#masthead.is_stuck .mobile-menu-button {
    color: var(--color-text) !important;
}
#masthead.is_stuck .lines::before,
#masthead.is_stuck .lines::after {
    background-color: var(--color-text) !important;
}

/* === FARBEN: Close/X immer WEISS (Overlay ist dunkel) === */
#masthead .mobile-menu-button.close {
    color: var(--color-white) !important;
}
#masthead .mobile-menu-button.close .lines::before,
#masthead .mobile-menu-button.close .lines::after {
    background-color: var(--color-white) !important;
}

/* Smooth Transitions */
.logo-skinnable img {
    transition: filter 0.3s ease !important;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    transition: background-color 0.3s ease !important;
}

.menu-container {
    transition: background-color 0.3s ease !important;
}
/* ============================================
   FULLSCREEN REVEAL OVERLAY
   Clip-Path Circle vom Burger-Icon
   ============================================ */

/* Burger-Position (JS aktualisiert dynamisch) */
:root {
    --burger-x: calc(100% - 44px);
    --burger-y: 32px;
}

/* --- Overlay: clip-path statt fade --- */

/* Immer opacity:1 + visibility:visible, clip-path kontrolliert Sichtbarkeit */
.overlay.overlay-unblock {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    clip-path: circle(0% at var(--burger-x) var(--burger-y)) !important;
    transition: clip-path 0.45s cubic-bezier(0.6, 0, 0.4, 1) !important;
    background: transparent !important;
}

/* Hintergrund dunkel */
.overlay.overlay-unblock .overlay-bg {
    background-color: var(--color-black) !important;
    opacity: 1 !important;
}

/* Open: Circle wächst auf */
.overlay.overlay-unblock.open {
    pointer-events: auto !important;
    clip-path: circle(150% at var(--burger-x) var(--burger-y)) !important;
    transition: clip-path 0.85s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

/* Closing: Circle schrumpft
   WICHTIG: visibility-Transition mit Delay für Uncode's transitionend-Handler.
   Uncode wartet auf transitionend mit propertyName='visibility',
   sonst bleibt .close-Klasse hängen. */
.overlay.overlay-unblock.close {
    pointer-events: none !important;
    visibility: hidden !important;
    clip-path: circle(0% at var(--burger-x) var(--burger-y)) !important;
    transition: clip-path 0.45s cubic-bezier(0.6, 0, 0.4, 1),
                visibility 0s linear 0.45s !important;
}

/* Burger Button ÜBER dem Overlay */
.menu-wrapper,
.menu-container.menu-sticky {
    z-index: 10001 !important;
}
#masthead .mobile-menu-button {
    z-index: 10 !important;
    position: relative !important;
}

/* --- Menu Items: Staggered Entrance --- */

/* Default: unsichtbar */
.overlay.overlay-unblock .menu-smart > li > a,
.overlay.overlay-unblock .menu-smart > li > button {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s ease,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s ease !important;
}

/* Open: Items einblenden mit Stagger */
.overlay.overlay-unblock.open .menu-smart > li > a,
.overlay.overlay-unblock.open .menu-smart > li > button {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.overlay.overlay-unblock.open .menu-smart > li:nth-child(1) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(1) > button { transition-delay: 0.15s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(2) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(2) > button { transition-delay: 0.20s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(3) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(3) > button { transition-delay: 0.25s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(4) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(4) > button { transition-delay: 0.30s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(5) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(5) > button { transition-delay: 0.35s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(6) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(6) > button { transition-delay: 0.40s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(7) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(7) > button { transition-delay: 0.45s !important; }
.overlay.overlay-unblock.open .menu-smart > li:nth-child(8) > a,
.overlay.overlay-unblock.open .menu-smart > li:nth-child(8) > button { transition-delay: 0.50s !important; }

/* Closing: Items schnell ausblenden */
.overlay.overlay-unblock.close .menu-smart > li > a,
.overlay.overlay-unblock.close .menu-smart > li > button {
    opacity: 0 !important;
    transform: translateY(-12px) !important;
    transition-delay: 0s !important;
    transition-duration: 0.15s !important;
}

/* Hover: Items dimmen */
.overlay.overlay-unblock.open .menu-smart > li > a:hover,
.overlay.overlay-unblock.open .menu-smart > li > button:hover {
    opacity: 0.4 !important;
}

/* Body: kein Scroll wenn Overlay offen */
body:has(.overlay.overlay-unblock.open) {
    overflow: hidden !important;
}