/* ProCup — Modern marketing redesign
   Loaded last; overrides Bootstrap 3 + theme.css + default.css.
   Keeps the existing markup, IDs, JS hooks and links intact. */

/* (debug markers removed — redesign confirmed loading) */

/* Bootstrap .text-justify utility override — justified text causes uneven word gaps */
.text-justify { text-align: left; }

/* ----------------------------------------------------------
   Design tokens
   ---------------------------------------------------------- */
:root {
    --brand: #F97316;
    --brand-soft: #FB923C;
    --brand-glow: #FDBA74;
    --brand-dark: #C2410C;
    --brand-darker: #9A3412;

    --ink: #0C0A09;
    --ink-2: #1C1917;
    --text: #1C1917;
    --text-muted: #57534E;
    --text-soft: #78716C;
    --text-on-dark: #E7E5E4;

    --bg: #FFFFFF;
    --bg-alt: #FAFAF9;
    --bg-warm: #FFF7ED;
    --surface: #FFFFFF;
    --surface-2: #F5F5F4;
    --border: #E7E5E4;
    --border-strong: #D6D3D1;

    --gradient-warm: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%);
    --gradient-dark: linear-gradient(135deg, #0C0A09 0%, #1C1917 100%);
    --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(249,115,22,0.35) 0%, transparent 60%),
                     radial-gradient(900px 500px at 0% 30%, rgba(251,146,60,0.25) 0%, transparent 60%),
                     linear-gradient(180deg, #0C0A09 0%, #1C1917 60%, #292524 100%);

    --shadow-sm: 0 1px 2px rgba(12,10,9,0.06), 0 1px 1px rgba(12,10,9,0.04);
    --shadow-md: 0 4px 12px rgba(12,10,9,0.08), 0 2px 4px rgba(12,10,9,0.05);
    --shadow-lg: 0 20px 40px rgba(12,10,9,0.12), 0 8px 16px rgba(12,10,9,0.06);
    --shadow-glow: 0 18px 50px -12px rgba(249,115,22,0.55);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------
   Base typography
   ---------------------------------------------------------- */
/* NOTE: do NOT enable `html { scroll-behavior: smooth }` here.
   main.js intercepts a.scrollto clicks and animates the scroll
   itself via jQuery scrollTo. If both run together they fight
   (the browser keeps retargeting to each intermediate position)
   and the page jitters / stalls after ~1 cm. */

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--text) !important;
    background: var(--bg) !important;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

p, .lead {
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 400;
}

.lead { font-size: 17px !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink) !important;
    letter-spacing: -0.02em;
    font-weight: 700;
    line-height: 1.15;
    text-transform: none !important;
}

h1 { font-size: clamp(40px, 6vw, 64px) !important; font-weight: 800 !important; }
h2 { font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 700 !important; letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 600 !important; }
h4 { font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0; }

section h2, section h3 {
    color: var(--ink) !important;
    margin-bottom: 18px !important;
    line-height: 1.2 !important;
}

a { color: var(--brand); transition: color .2s var(--ease); }
a:hover, a:focus { color: var(--brand-dark); text-decoration: none; }

/* ----------------------------------------------------------
   Section spacing
   ---------------------------------------------------------- */
section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    position: relative;
}

@media (max-width: 768px) {
    section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
}

.middle-margin {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ----------------------------------------------------------
   Navbar — modern glassmorphism, generous spacing
   ---------------------------------------------------------- */
.navbar.yamm.navbar-default.navbar-fixed-top {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(231, 229, 228, 0.7) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    min-height: 70px !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

/* Wipe the legacy theme.css offsets that push the menu down */
.navbar.yamm.navbar-default .navbar-nav,
.navbar.yamm.navbar-default .navbar-nav > li,
.navbar.yamm.navbar-default .navbar-nav > li > a {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.navbar.yamm.navbar-default .navbar-nav > li > a {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.navbar.yamm.navbar-default.navbar-fixed-top.is-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(231, 229, 228, 1) !important;
    box-shadow: 0 6px 24px -8px rgba(12,10,9,0.12), 0 1px 0 rgba(0,0,0,0.02);
}

.navbar.yamm .container {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* logo at left edge, menu at right edge */
    min-height: 70px;
}

.navbar.yamm .navbar-collapse {
    flex: 0 1 auto;
    margin-left: auto;                /* hard-pin menu to the right */
    border-top: 0;
    box-shadow: none;
}

.navbar.yamm .navbar-header {
    display: flex;
    align-items: center;
    float: none !important;
}

.navbar-brand-modern,
.navbar.yamm .navbar-brand-modern {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: fixed !important;       /* pinned directly to the viewport */
    left: 20px !important;            /* sit 20px from the viewport's left edge */
    top: 11px !important;             /* center vertically inside 70px navbar */
    text-decoration: none !important;
    transition: opacity .2s var(--ease) !important;
    z-index: 1031 !important;         /* above the .navbar (which is 1030) */
}

.navbar-brand-modern:hover {
    opacity: 0.92;
}

.navbar-brand-modern .brand-mark {
    width: auto;
    height: 48px;                /* a bit bigger so the logo reads clearly */
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    object-fit: contain;
    display: block;
}

@media (max-width: 991px) {
    .navbar-brand-modern,
    .navbar.yamm .navbar-brand-modern {
        left: 12px !important;
        top: 13px !important;
    }
    .navbar-brand-modern .brand-mark { height: 40px; }

    /* Pin hamburger to the right edge so it doesn't crash into the logo */
    .navbar.yamm .navbar-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        float: none !important;
    }
}

.navbar-default .navbar-nav > li > a {
    color: var(--ink-2) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.01em;
    padding: 14px 14px !important;
    border-radius: 8px !important;
    transition: color .2s var(--ease), background .2s var(--ease);
    text-transform: none !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--brand) !important;
    background: rgba(249, 115, 22, 0.08) !important;
    border-bottom: 0 !important;
}

.navbar.yamm.navbar-default .navbar-nav > .active > a,
.navbar.yamm.navbar-default .navbar-nav > .active > a:hover,
.navbar.yamm.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink-2) !important;
    border-bottom: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.navbar.yamm.navbar-default .navbar-nav > .active > a:hover,
.navbar.yamm.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--brand) !important;
    background: rgba(249, 115, 22, 0.08) !important;
}

.navbar-default .navbar-nav > li > a .caret { color: inherit; opacity: .55; }

/* Language dropdown — already styled inline; refine */
.lang-dropdown-toggle {
    padding: 8px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.lang-dropdown-toggle:hover {
    border-color: var(--brand-soft) !important;
    background: rgba(249,115,22,0.05) !important;
}

.nav-lang { margin-left: 18px !important; }
.nav-login { margin-left: 6px !important; }
.nav-cta { margin-left: 10px !important; }

/* ----------------------------------------------------------
   Language switcher — modern light dropdown
   ---------------------------------------------------------- */

/* yamm.css forces every .dropdown inside .yamm to position:static so
   mega-menus can span the container width. We want a normal per-<li>
   dropdown here, so re-establish the positioning context. Without this
   the panel pins to the navbar container's right edge, far past the
   DE pill. */
.navbar.yamm .nav-lang {
    position: relative !important;
}

/* Toggle button (DE flag + label + chevron).
   position:relative is required so the invisible hover bridge below
   (::after pseudo-element) positions itself against the toggle and
   not against yamm's container-level positioning context. */
.navbar.yamm .nav-lang > a.lang-dropdown-toggle,
.lang-dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    color: var(--ink-2) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
    position: relative;
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease) !important;
}

.navbar.yamm .nav-lang > a.lang-dropdown-toggle:hover,
.navbar.yamm .nav-lang > a.lang-dropdown-toggle:focus,
.navbar.yamm .nav-lang.open > a.lang-dropdown-toggle,
.lang-dropdown-toggle:hover {
    background: rgba(249,115,22,0.06) !important;
    border-color: rgba(249,115,22,0.4) !important;
    color: var(--brand) !important;
}

.lang-dropdown-toggle .ctry-img {
    width: 18px !important;
    height: 14px !important;
    border-radius: 3px !important;     /* rectangular, slightly rounded — looks like a flag */
    object-fit: cover !important;
    margin: 0 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
    flex-shrink: 0;
}

.lang-dropdown-toggle .lang-code {
    letter-spacing: 0.04em;
    font-weight: 600;
    color: inherit;
}

.lang-dropdown-toggle .lang-caret {
    font-size: 12px;
    opacity: 0.7;
    transition: transform .2s var(--ease);
}

.nav-lang.open .lang-dropdown-toggle .lang-caret {
    transform: rotate(180deg);
}

/* Desktop only: open the language menu on hover (matches the INFO
   dropdown behaviour). Click + .open are kept for touch + keyboard. */
@media (min-width: 992px) {
    .navbar.yamm .nav-lang:hover > .dropdown-menu {
        display: block;
    }

    .navbar.yamm .nav-lang:hover > .lang-dropdown-toggle {
        background: rgba(249,115,22,0.06) !important;
        border-color: rgba(249,115,22,0.4) !important;
        color: var(--brand) !important;
    }

    .navbar.yamm .nav-lang:hover .lang-dropdown-toggle .lang-caret {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* Invisible 14px bridge below the pill so the cursor can travel
       from the toggle into the dropdown without dropping hover. */
    .lang-dropdown-toggle::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 14px;       /* matches the dropdown's margin-top */
        background: transparent;
    }
}

/* Hide the legacy bootstrap caret if anything still renders it */
.lang-dropdown-toggle .caret { display: none !important; }

/* Dropdown panel */
.navbar.yamm .nav-lang .dropdown-menu,
.nav-lang .dropdown-menu,
.nav-lang.open .dropdown-menu,
.nav-lang .dropdown-menu > li {
    background: rgba(255,255,255,0.96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

.navbar.yamm .nav-lang .dropdown-menu,
.nav-lang .dropdown-menu {
    min-width: 200px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px -12px rgba(12,10,9,0.18), 0 6px 16px -8px rgba(12,10,9,0.08) !important;
    overflow: hidden;
    right: 0;
    left: auto;
    /* subtle entrance */
    transform-origin: top right;
    animation: lang-pop .18s var(--ease-out) both;
}

@keyframes lang-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.nav-lang .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    transition: background .15s var(--ease), color .15s var(--ease) !important;
}

.nav-lang .dropdown-menu > li > a span {
    color: inherit !important;
    flex: 1;
}

.nav-lang .dropdown-menu > li > a .ctry-img {
    width: 24px !important;
    height: 18px !important;
    border-radius: 3px !important;
    object-fit: cover !important;
    margin: 0 !important;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}

.nav-lang .dropdown-menu > li > a:hover,
.nav-lang .dropdown-menu > li > a:focus {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
}

/* Active (current) language */
.nav-lang .dropdown-menu > li.active > a,
.nav-lang .dropdown-menu > li.active > a:hover,
.nav-lang .dropdown-menu > li.active > a:focus {
    background: rgba(249,115,22,0.08) !important;
    color: var(--brand-dark) !important;
    font-weight: 600 !important;
}

.nav-lang .dropdown-menu > li.active > a::after {
    content: "\f00c";                 /* fa-check */
    font-family: FontAwesome;
    font-size: 11px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--brand);
    margin-left: auto;
}

/* Mobile: open inline rather than as a popover */
@media (max-width: 991px) {
    .navbar.yamm .nav-lang .dropdown-menu,
    .nav-lang .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 6px 0 0 0 !important;
        box-shadow: none !important;
        border-color: var(--border) !important;
        animation: none;
    }
    .lang-dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Secondary "Login" — subtle text link with icon */
.navbar.yamm.navbar-default .nav-login > a.nav-login-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    background: transparent !important;
    color: var(--ink-2) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: color .2s var(--ease), background .2s var(--ease);
    text-transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.navbar.yamm.navbar-default .nav-login > a.nav-login-link:hover,
.navbar.yamm.navbar-default .nav-login > a.nav-login-link:focus {
    color: var(--brand) !important;
    background: rgba(249, 115, 22, 0.06) !important;
}

.navbar.yamm.navbar-default .nav-login > a.nav-login-link i {
    color: inherit;
    font-size: 14px;
    opacity: 0.85;
}

/* Primary CTA — "Kostenlos testen" — orange gradient pill */
.navbar.yamm.navbar-default .nav-cta > a.nav-cta-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    background: var(--gradient-warm) !important;
    background-size: 200% 100% !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0;
    border: 0 !important;
    border-radius: 10px !important;
    text-transform: none !important;
    box-shadow: 0 6px 18px -6px rgba(249,115,22,0.55) !important;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-position .5s var(--ease) !important;
    white-space: nowrap;
}

.navbar.yamm.navbar-default .nav-cta > a.nav-cta-btn:hover,
.navbar.yamm.navbar-default .nav-cta > a.nav-cta-btn:focus {
    transform: translateY(-1px);
    background-position: 100% 50% !important;
    box-shadow: 0 14px 32px -8px rgba(249,115,22,0.7) !important;
    color: #ffffff !important;
}

@media (max-width: 991px) {
    .nav-cta { margin-left: 0 !important; }
    .navbar.yamm.navbar-default .nav-cta > a.nav-cta-btn {
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile toggle */
.navbar-toggle {
    border-radius: 10px !important;
    border-color: var(--border) !important;
    margin-top: 16px !important;
}
.navbar-toggle .icon-bar { background-color: var(--ink) !important; }

/* ----------------------------------------------------------
   Hero / Slider
   ---------------------------------------------------------- */
.slider-wrapper,
#header-image,
#header-image.slider-wrapper,
section#header-image.slider-wrapper {
    margin-top: 0 !important;
    padding-top: 70px;  /* offset fixed navbar */
    background-color: #0C0A09 !important;
    background-image:
        radial-gradient(1100px 600px at 85% -5%, rgba(249,115,22,0.35) 0%, transparent 55%),
        radial-gradient(900px 500px at 0% 35%, rgba(251,146,60,0.22) 0%, transparent 55%),
        linear-gradient(180deg, rgba(12,10,9,0.55) 0%, rgba(12,10,9,0.65) 60%, rgba(12,10,9,0.85) 100%),
        url("bg_support.jpg") !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-size: auto, auto, auto, cover !important;
    background-position: center !important;
    position: relative;
    overflow: hidden;
}

.slider-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(249,115,22,0.18) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(251,146,60,0.15) 0%, transparent 40%);
    pointer-events: none;
}

.slider-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}

.slider-wrapper .content-title-center {
    position: relative;
    z-index: 2;
    padding: 60px 0 30px !important;
    text-align: center;
}

.slider-wrapper .content-title-center h1 {
    color: #FFFFFF !important;
    text-shadow: none !important;
    margin: 0 auto;
    max-width: 18ch;
    background: linear-gradient(180deg, #FFFFFF 30%, rgba(255,255,255,0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-slider {
    background: transparent !important;
    min-height: 540px !important;
    position: relative;
    z-index: 2;
}

.main-slider .item {
    padding-top: 30px !important;
    padding-bottom: 80px !important;
}

#home-slider h3 {
    color: #FFFFFF !important;
    font-size: clamp(24px, 2.6vw, 34px) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    text-shadow: none !important;
    margin-bottom: 18px !important;
}

#home-slider p {
    color: rgba(255,255,255,0.78) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    padding: 0 !important;
    margin-bottom: 28px !important;
    text-shadow: none !important;
    font-weight: 400 !important;
}

#home-slider .col-sm-7 img {
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6),
                0 0 0 1px rgba(255,255,255,0.05);
}

/* Disable noisy per-element animations inside slides — let the whole slide
   transition smoothly from the right (Bootstrap's default) and have all
   inner elements stay put. */
.main-slider .item .animated,
#home-slider .item .animated,
#home-slider .item .animated[class*="slideIn"],
#home-slider .item .animated[class*="fadeIn"] {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Smooth out the Bootstrap carousel slide transition timing */
#home-slider.carousel.slide .item {
    transition: transform 0.7s ease, left 0.7s ease, opacity 0.4s ease;
}

/* Carousel indicators */
.carousel-indicators {
    bottom: 20px !important;
}

.carousel-indicators li {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
    background-color: rgba(255,255,255,0.3) !important;
    border: 0 !important;
    border-radius: 999px !important;
    transition: all .25s var(--ease);
}

.carousel-indicators .active {
    width: 28px !important;
    height: 8px !important;
    background-color: var(--brand) !important;
    border: 0 !important;
}

/* Hero badge above the H1 — injected via HTML */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
}

.hero-badge .dot {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: #34D399;
    box-shadow: 0 0 0 3px rgba(52,211,153,0.25);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,0.25); }
    50% { box-shadow: 0 0 0 6px rgba(52,211,153,0.05); }
}

/* CTA button */
.btn-test {
    background: var(--gradient-warm) !important;
    background-size: 200% 100% !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    padding: 14px 28px 14px 24px !important;
    text-transform: none !important;
    box-shadow: var(--shadow-glow) !important;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-position .6s var(--ease) !important;
    animation: none !important;
}

.btn-test:hover {
    transform: translateY(-2px) !important;
    background-position: 100% 50% !important;
    box-shadow: 0 24px 60px -12px rgba(249,115,22,0.7) !important;
    color: #fff !important;
}

.btn-test::after {
    transition: transform .25s var(--ease-out), opacity .25s var(--ease-out) !important;
}
.btn-test:hover::after {
    transform: translateY(-50%) translateX(2px);
}

/* Hero secondary link (added via HTML) */
.hero-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 18px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: color .2s var(--ease);
}

.hero-secondary-link::after {
    content: "→";
    transition: transform .2s var(--ease);
    display: inline-block;
}

.hero-secondary-link:hover {
    color: #fff;
}

.hero-secondary-link:hover::after {
    transform: translateX(3px);
}

/* Trust bar inside hero */
.hero-trust {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-weight: 500;
}

.hero-trust .trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-trust .trust-item i {
    color: var(--brand-glow);
}

/* ----------------------------------------------------------
   Logo marquee — infinite horizontal scroll
   ---------------------------------------------------------- */
.logo-marquee {
    background: var(--bg-alt);
    padding: 80px 0 !important;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.logo-marquee .container { margin-bottom: 40px; }

.marquee-eyebrow {
    color: var(--brand);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    margin: 0 0 8px;
}

.marquee-title {
    color: var(--ink) !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
}

.marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: marquee-scroll 75s linear infinite;
    will-change: transform;
}

/* Show each row of the existing club-logos collage as a separate horizontal strip,
   chained side-by-side so the marquee cycles through all 18 logos.
   The collage is roughly 1024 × 511 px, arranged in 3 rows of ~170 px each.
   At strip-width 540 the image scales to 540×269, so each row is ~90 px tall. */
.logo-strip {
    --strip-w: 540px;
    --strip-h: 82px;          /* tightened so the next row never peeks through */
    display: block;
    width: var(--strip-w);
    height: var(--strip-h);
    flex-shrink: 0;
    background-image: url("clublogos_ger.jpg");
    background-repeat: no-repeat;
    background-size: var(--strip-w) auto;
    margin: 0 28px;
    filter: saturate(0.85);
    opacity: 0.92;
    transition: filter .3s var(--ease), opacity .3s var(--ease);
    user-select: none;
    pointer-events: none;
}

.logo-row-1 { background-position: 0   -4px; }   /* top row    */
.logo-row-2 { background-position: 0  -94px; }   /* middle row */
.logo-row-3 { background-position: 0 -184px; }   /* bottom row */

.marquee:hover .logo-strip {
    filter: saturate(1);
    opacity: 1;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    /* scroll by exactly the width of the 3 unique strips before looping
       — duplicate strips after them ensure the loop is seamless */
    to   { transform: translateX(calc(-3 * (var(--strip-w, 540px) + 56px))); }
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

@media (max-width: 768px) {
    .logo-marquee { padding: 56px 0 !important; }
    .logo-marquee .container { margin-bottom: 28px; }
    .logo-strip {
        --strip-w: 380px;
        --strip-h: 58px;
        background-size: 380px auto;
        margin: 0 16px;
    }
    .logo-row-1 { background-position: 0   -3px; }
    .logo-row-2 { background-position: 0  -66px; }
    .logo-row-3 { background-position: 0 -129px; }
}

/* ----------------------------------------------------------
   Stats counter — modern gradient cards
   ---------------------------------------------------------- */
#counter-container {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

#counter-container h2 {
    text-align: center;
    margin-bottom: 8px !important;
    color: var(--ink) !important;
}

#counter-container .row.content-title-center::after {
    content: "Über 1.300 Turniere pro Jahr vertrauen ProCup ihre Planung an.";
    display: block;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 400;
    margin: 0 auto 60px;
    max-width: 60ch;
    text-align: center;
}

#counter-container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-left: 0;
    margin-right: 0;
}

#counter-container .row > .col-sm-2:empty,
#counter-container .row > .col-sm-2:not(.block) { display: none; }

#counter-container .block {
    flex: 1 1 220px;
    max-width: 260px;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 36px 24px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF9 100%);
    text-align: center;
    color: var(--ink) !important;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
    position: relative;
    overflow: hidden;
}

#counter-container .block::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-warm);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

#counter-container .block:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-soft) !important;
}
#counter-container .block:hover::before { opacity: 1; }

#counter-container .block i {
    color: var(--brand) !important;
    font-size: 32px !important;
    margin-bottom: 12px;
    display: inline-block;
}

#counter-container .counter-wrapper {
    font-size: 44px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    margin: 8px 0 6px !important;
    letter-spacing: -0.03em;
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#counter-container .text-block {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ----------------------------------------------------------
   News / blog section — proper cards
   ---------------------------------------------------------- */
#blog {
    padding-top: 32px !important;
    padding-bottom: 96px !important;
}

#blog::before {
    content: "Aktuelles";
    display: block;
    text-align: center;
    color: var(--brand);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    margin-bottom: 8px;
}

#blog::after {
    content: "";
    display: block;
    text-align: center;
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.025em;
    margin: -68px auto 56px;
    max-width: 24ch;
    line-height: 1.2;
    padding-top: 28px;
}

#blog > .row { margin-bottom: 0; }

.big-blog-entry {
    margin-bottom: 28px !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
    position: relative;
}

.big-blog-entry:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(249,115,22,0.3);
}

.big-blog-entry .blog-group { margin: 0; align-items: flex-start; }

.big-blog-entry .blog-left-detail { margin: 0; }

.date-post-circle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: var(--gradient-warm) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-glow);
    text-align: center;
    line-height: 1.1;
    padding: 6px;
}

.date-post-circle small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.92;
    display: block;
    margin-top: 2px;
}

.title-big-post {
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.title-big-post a {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: inline-block;
    transition: color .2s var(--ease);
}

.title-big-post a:hover { color: var(--brand) !important; }

.big-blog-entry .lead {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--text-muted) !important;
}

.big-blog-entry .lead a {
    color: var(--brand);
    font-weight: 600;
}

.big-blog-entry .lead a:hover { color: var(--brand-dark); }

.big-blog-entry .blog-item img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* ----------------------------------------------------------
   Features sections (4-col icon cards)
   ---------------------------------------------------------- */
section.main-items {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

section.main-items .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}

section.main-items .row + .row { margin-top: 24px; }

section.main-items .features-item {
    padding: 28px 24px;
    margin-bottom: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
    position: relative;
    overflow: hidden;
}

section.main-items .features-item::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease-out);
}

section.main-items .features-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(249,115,22,0.25);
}

section.main-items .features-item:hover::after {
    transform: scaleX(1);
}

section.main-items .features-item img.h80 {
    height: 56px !important;
    margin-bottom: 18px;
    filter: drop-shadow(0 6px 14px rgba(249,115,22,0.25));
}

section.main-items .features-item h4 {
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 12px;
    letter-spacing: -0.005em;
    text-transform: none !important;
}

section.main-items .features-item p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ----------------------------------------------------------
   References / testimonials
   ---------------------------------------------------------- */
#references {
    background: var(--bg-alt);
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

#references .content-title-center h2 {
    text-align: center;
    margin: 0 auto 16px !important;
    max-width: 30ch;
    line-height: 1.2 !important;
    color: var(--ink) !important;
    text-transform: none !important;
}

#references .content-title-center h2::before {
    content: "Vertrauen von hunderten Vereinen";
    display: block;
    color: var(--brand);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    margin-bottom: 12px;
}

#references img.mh500 {
    max-height: 360px;
    margin: 24px auto 56px;
    opacity: 0.92;
    filter: grayscale(20%);
    transition: opacity .3s var(--ease), filter .3s var(--ease);
}

#references img.mh500:hover {
    opacity: 1;
    filter: grayscale(0%);
}

#references .features-item {
    padding: 32px 28px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}

#references .features-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(249,115,22,0.25);
}

#references .features-item .fa-quote-right {
    color: var(--brand) !important;
    font-size: 24px !important;
    margin-bottom: 16px;
    background: rgba(249,115,22,0.1);
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#references .features-item p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--text) !important;
    flex: 1;
    text-align: left !important;
}

#references .features-item h4 {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

/* ----------------------------------------------------------
   Functionality (alternating image+text)
   ---------------------------------------------------------- */
#functionality {
    padding-top: 32px !important;
    padding-bottom: 96px !important;
}

#functionality .container { margin-bottom: 56px; }
#functionality .container:last-child { margin-bottom: 0; }

#functionality .row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 0;
}

#functionality .col-sm-5,
#functionality .col-sm-7 {
    padding: 28px;
}

#functionality h2 {
    color: var(--ink) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
    text-transform: none !important;
}

#functionality h2::before {
    content: "Funktion";
    display: block;
    color: var(--brand);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    margin-bottom: 10px;
}

#functionality p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-muted);
}

#functionality img.project-detail-picture {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

#functionality img.project-detail-picture:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -15px rgba(12,10,9,0.18);
}

/* ----------------------------------------------------------
   Team / contact (orange section)
   ---------------------------------------------------------- */
#contact.main-color {
    background: var(--gradient-dark) !important;
    color: var(--text-on-dark) !important;
    position: relative;
    overflow: hidden;
}

#contact.main-color::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 80% 20%, rgba(249,115,22,0.20) 0%, transparent 50%),
        radial-gradient(700px 400px at 20% 80%, rgba(251,146,60,0.15) 0%, transparent 50%);
    pointer-events: none;
}

#contact.main-color > .container {
    position: relative;
    z-index: 2;
}

#contact.main-color h2 {
    color: #fff !important;
    text-align: center;
    margin-bottom: 48px !important;
}

#contact.main-color h2::before {
    content: "Das Team";
    display: block;
    color: var(--brand-glow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    margin-bottom: 10px;
}

.team-member {
    text-align: center;
}

.team-member img {
    border-radius: 999px;
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
    margin: 0 auto 18px;
}

.team-member .team-name {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.team-member .col-sm-12 {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
}

.team-member em {
    color: var(--brand-glow);
    font-style: normal;
    font-weight: 500;
}

/* ----------------------------------------------------------
   Contact form
   ---------------------------------------------------------- */
section:has(#contact-form) {
    background: var(--bg-alt);
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

#contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-md);
}

label.control-label {
    color: var(--ink) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.form-control {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    height: auto !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px rgba(249,115,22,0.12) !important;
    outline: 0;
}

textarea.form-control { line-height: 1.6 !important; }

.btn.g-recaptcha {
    background: var(--gradient-warm) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 14px 32px !important;
    text-transform: none !important;
    box-shadow: var(--shadow-glow) !important;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out) !important;
    font-size: 16px !important;
}

.btn.g-recaptcha:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px -12px rgba(249,115,22,0.7) !important;
}

#social-links-contact ul.social { padding: 0; margin: 16px 0 0; }

#social-links-contact a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px !important;
    border: 1.5px solid var(--border) !important;
    color: var(--ink) !important;
    transition: all .2s var(--ease);
}

#social-links-contact a:hover {
    color: #fff !important;
    background: var(--brand);
    border-color: var(--brand) !important;
    transform: translateY(-2px);
}

.feedback {
    color: var(--brand-dark);
    font-weight: 500;
    font-size: 14px !important;
    margin-right: 16px;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
#footer {
    background: var(--ink) !important;
    color: rgba(255,255,255,0.6) !important;
    padding-top: 56px !important;
    padding-bottom: 40px !important;
}

#footer .container {
    text-align: center;
}

#footer .copyright {
    margin-bottom: 12px;
    font-size: 14px;
}

#footer a,
#footer .nostyle {
    color: rgba(255,255,255,0.7) !important;
    transition: color .2s var(--ease);
}

#footer a:hover,
#footer .nostyle:hover {
    color: var(--brand-glow) !important;
    text-decoration: none !important;
}

#footer span[style*="c6c4c3"] { color: rgba(255,255,255,0.7) !important; }

/* ----------------------------------------------------------
   Misc helpers / responsive
   ---------------------------------------------------------- */
img.img-responsive { max-width: 100%; height: auto; }

/* Clean up the old "main-color" elsewhere — limit to navbar exception */
section.main-items.main-color { background: transparent !important; }

/* Hide the empty col-sm-2 spacers that broke flex layout in counters */
#counter-container .row > .col-sm-2:not(.block) {
    display: none !important;
}

/* Make the carousel-portfolio image (news with carousel) look nice */
#carousel-portfolio { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
#carousel-portfolio .carousel-control { background: rgba(0,0,0,0.3); width: 12%; }
#carousel-portfolio .carousel-control:hover { background: rgba(0,0,0,0.5); }

/* Mobile tweaks */
@media (max-width: 991px) {
    .navbar.yamm .navbar-header::after { display: none; }
    .navbar-collapse {
        background: rgba(255,255,255,0.98);
        border-top: 1px solid var(--border);
        margin-top: 12px;
        padding: 8px 14px 12px;
        border-radius: 0 0 12px 12px;
    }
    .nav-lang, .nav-login { margin-left: 0 !important; }
    .nav-login a { width: auto; height: auto; padding: 10px 14px; box-shadow: none; }
    #functionality .row { gap: 8px 0; }
    #functionality .col-sm-5,
    #functionality .col-sm-7 { padding: 12px 16px; }
}

@media (max-width: 768px) {
    .slider-wrapper .content-title-center { padding: 32px 0 8px !important; }
    .main-slider { min-height: 480px !important; }
    #home-slider h3 { font-size: 22px !important; }
    .big-blog-entry { padding: 22px; }
    .date-post-circle { width: 64px; height: 64px; font-size: 12px; }
    section.main-items .features-item { padding: 22px 18px; }
    #references .features-item { padding: 24px 20px !important; }
    #contact-form { padding: 22px; }
}

/* Make sure WOW.js hidden elements that never got triggered still show */
.wow:not(.animated) { visibility: visible !important; }
.wow[style*="visibility: hidden"] { visibility: visible !important; }

/* Override any animation-name: none overrides from inline styles */
section[style*="visibility: hidden"] { visibility: visible !important; }
section[style*="visibility: hidden"] * { visibility: visible !important; }

/* Clean appearance for the news carousel area */
#blog .blog-item { padding: 8px 0 0; }

/* The h2 inside #blog should hide because we use ::before/::after */
#blog > .row:first-child h2 { display: none; }

/* ============================================================
   Scroll-triggered fade-up — used via .reveal class
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    will-change: transform, opacity;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* When reduced motion is requested, disable transitions */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Standalone subpages (kontakt_de.htm, etc.) — first section
   has to clear the fixed navbar (70px) on its own.
   ============================================================ */
.page-subpage section:first-of-type {
    padding-top: 156px !important;   /* 70px navbar + 86px breathing room */
}

/* Contact page hero — reuses #contact.main-color dark gradient
   from the team section above, but adds a centered intro block. */
.contact-page-hero .page-eyebrow {
    color: var(--brand-glow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    margin: 0 0 12px;
}

.contact-page-hero .page-title {
    color: #fff !important;
    font-size: clamp(34px, 4.5vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    margin: 0 auto 18px !important;
    max-width: 22ch;
    background: linear-gradient(180deg, #FFFFFF 30%, rgba(255,255,255,0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-page-hero .page-lead {
    color: rgba(255,255,255,0.78) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    margin: 0 auto 56px !important;
    max-width: 56ch;
    font-weight: 400 !important;
}

.contact-page-hero .team-member {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .page-subpage section:first-of-type {
        padding-top: 120px !important;   /* tighter on mobile */
    }
    .contact-page-hero .page-lead {
        margin-bottom: 36px !important;
    }
}

/* ============================================================
   INFO dropdown — styled to match the regular nav links,
   with a chevron that rotates open and a clean light dropdown
   panel that mirrors the language dropdown's polish. Used by the
   single "INFO" nav item that groups Über uns / Kontakt / Support.
   ============================================================ */

/* yamm.css forces every .dropdown inside .yamm to position:static
   so mega-menus can span the container width. We want a normal
   per-<li> dropdown here, so re-establish the positioning context. */
.navbar.yamm .nav-info {
    position: relative !important;
}

/* Toggle (text + chevron) — keep the same look as plain nav links.
   position:relative is required for the invisible hover bridge below. */
.navbar.yamm .nav-info > a.nav-info-toggle,
.nav-info-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
}

/* Desktop only: open on hover, mirror the visual feedback the rest of
   the navbar uses on hover, and rotate the chevron 180°. The click /
   .open behaviour remains active for touch + keyboard users. */
@media (min-width: 992px) {
    .navbar.yamm .nav-info:hover > .dropdown-menu {
        display: block;
    }

    .navbar.yamm.navbar-default .navbar-nav > .nav-info:hover > .nav-info-toggle {
        color: var(--brand) !important;
        background: rgba(249, 115, 22, 0.08) !important;
    }

    .navbar.yamm .nav-info:hover .nav-info-toggle .nav-info-caret {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* Invisible bridge under the toggle so the cursor can travel from
       the toggle text down into the dropdown panel without crossing a
       hover-dead zone (which would close the menu mid-traverse). */
    .nav-info-toggle::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 14px;       /* matches the dropdown's margin-top */
        background: transparent;
    }
}

.nav-info-toggle .nav-info-caret {
    font-size: 12px;
    opacity: 0.6;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.nav-info.open .nav-info-toggle .nav-info-caret,
.nav-info-toggle:hover .nav-info-caret {
    opacity: 1;
}

.nav-info.open .nav-info-toggle .nav-info-caret {
    transform: rotate(180deg);
}

/* Hide the legacy bootstrap caret if anything still renders it */
.nav-info-toggle .caret { display: none !important; }

/* Active state on the parent <li> when the user is on a sub-page —
   give the toggle a subtle brand tint, same energy as :hover. */
.navbar.yamm.navbar-default .navbar-nav > .nav-info.active > a,
.navbar.yamm.navbar-default .navbar-nav > .nav-info.active > a:hover,
.navbar.yamm.navbar-default .navbar-nav > .nav-info.active > a:focus {
    color: var(--brand) !important;
    background: rgba(249, 115, 22, 0.08) !important;
}

/* Dropdown panel */
.navbar.yamm .nav-info .dropdown-menu,
.nav-info .dropdown-menu {
    min-width: 200px !important;
    margin-top: 10px !important;
    padding: 6px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 20px 50px -12px rgba(12,10,9,0.18), 0 6px 16px -8px rgba(12,10,9,0.08) !important;
    overflow: hidden;
    left: 0;
    right: auto;
    transform-origin: top left;
    animation: info-pop .18s var(--ease-out) both;
}

@keyframes info-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.nav-info .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    transition: background .15s var(--ease), color .15s var(--ease) !important;
}

.nav-info .dropdown-menu > li > a:hover,
.nav-info .dropdown-menu > li > a:focus {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
}

/* Active sub-item (e.g. Kontakt while on kontakt_de.htm) */
.nav-info .dropdown-menu > li.active > a,
.nav-info .dropdown-menu > li.active > a:hover,
.nav-info .dropdown-menu > li.active > a:focus {
    background: rgba(249,115,22,0.08) !important;
    color: var(--brand-dark) !important;
    font-weight: 600 !important;
}

.nav-info .dropdown-menu > li.active > a::after {
    content: "\f00c";                 /* fa-check */
    font-family: FontAwesome;
    font-size: 11px;
    color: var(--brand);
    margin-left: auto;
}

/* Mobile: collapse the dropdown inline (same behaviour as lang menu) */
@media (max-width: 991px) {
    .navbar.yamm .nav-info .dropdown-menu,
    .nav-info .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 6px 0 0 0 !important;
        box-shadow: none !important;
        border-color: var(--border) !important;
        animation: none;
    }
    .nav-info-toggle {
        width: 100%;
        justify-content: flex-start;
    }
}