/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com
Description: Divi Child Theme
Author: Sabrina Schulz
Author URI: xy
Template: Divi
Version: 1.0
*/

/* =========================================================
   ROOT / DESIGN TOKENS
   ========================================================= */
:root {
    /* Fonts */
    --font-awesome: "Font Awesome 7 Free";
    --font-body: "Figtree", sans-serif;
    --font-heading: "Bricolage Grotesque", "Figtree", sans-serif;

    /* Brand */
    --color-primary: #6381a8;
    --color-primary-hover: #526f96;
    --color-accent: #2b7fff;
    --color-accent-dark: #1d4ed8;
    --color-navy: #23374d;

    /* Text */
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-white: #ffffff;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-warm: #fdfcfa;
    --color-surface-soft: #f4f4f4;

    /* Borders */
    --color-border: #e5e7eb;
    --color-border-warm: #e5e1da;

    /* RGB values for alpha colors */
    --rgb-primary: 99, 129, 168;
    --rgb-text: 17, 24, 39;
    --rgb-white: 255, 255, 255;
    --rgb-black: 0, 0, 0;

    /* Glass */
    --glass-bg: rgba(var(--rgb-white), .08);
    --glass-border: rgba(var(--rgb-white), .25);
    --glass-highlight: rgba(var(--rgb-white), .6);
    --glass-shadow: rgba(var(--rgb-black), .25);

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* Blur */
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(40px);

    /* Motion */
    --ease-ios: cubic-bezier(.22, 1, .36, 1);
    --transition-fast: .2s ease;
    --transition-base: .3s ease;

    /* Legacy aliases */
    --fontawesome: var(--font-awesome);
    --body-fonts: var(--font-body);
    --headline-fonts: var(--font-heading);
    --black: var(--color-text);
    --accent: var(--color-primary);
    --accent-hover: var(--color-primary-hover);
    --radius-liquid: var(--radius-lg);
}

/* =========================================================
   TYPOGRAFIE
   ========================================================= */
body,
.et_pb_text_inner {
    font-family: var(--font-body) !important;
    font-size: 16px;
    font-weight: 400;
}

#et-main-area h1,
#et-main-area h2,
#et-main-area h3,
#et-main-area h4,
#et-main-area h5 {
    font-family: var(--font-heading);
}

.home #et-main-area h1 {
    font-size: calc(40px + (80 - 40) * ((100vw - 320px) / (1600 - 320)));
    font-weight: 800;
}

#et-main-area h1 {
    font-size: calc(36px + (50 - 36) * ((100vw - 320px) / (1600 - 320)));
    font-weight: 600;
}

#et-main-area h2 {
    font-size: calc(36px + (42 - 36) * ((100vw - 320px) / (1600 - 320)));
    font-weight: 600;
}

#et-main-area h3 {
    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1600 - 320)));
    font-weight: 600;
}

#et-main-area h4 {
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1600 - 320))) !important;
}

#et-main-area h5 {
    font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1600 - 320)));
}

#et-main-area h2,
#et-main-area h3,
#et-main-area h4,
#et-main-area h5 {
    color: var(--color-text);
}

.blue{color:var(--color-accent)}

/* =========================================================
   HEADER / GLASSMENU
   ========================================================= */
.glassmenu .et_pb_menu_inner_container{
    display:flex;
    align-items:center!important;
    padding:18px 0;
    transition:padding .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1);
    will-change:padding,transform;
}

.glassmenu .et_pb_menu__wrap{
    max-height:100px;
    transition:max-height .35s cubic-bezier(.4,0,.2,1);
    will-change:max-height;
}

.glassmenu .et_pb_menu__logo-wrap img{
    width:110px!important;
    transform-origin:left center;
    transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
}

.et_pb_sticky .glassmenu .et_pb_menu_inner_container{
    padding:6px 0;
    transform:translateY(0);
}

.et_pb_sticky .glassmenu .et_pb_menu__wrap{
    max-height:60px;
}

.et_pb_sticky .glassmenu .et_pb_menu__logo-wrap img{
    width:85px!important;
    transform:scale(.95);
}

/* =========================================================
   UNIVERSAL PILL BUTTON
   ========================================================= */
.btn-pill,
.et_pb_pricing_table_button,
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-pill:hover,
.et_pb_pricing_table_button:hover,
.filter-btn:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
}

.btn-primary,
.filter-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover,
.filter-btn.active:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-white);
}

/* =========================================================
   MENU – LIQUID GLASS
   ========================================================= */
.glassmenu .et-menu.nav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    --active-x: 0px;
    --active-w: 0px;
    --hover-x: 0px;
    --hover-w: 0px;
    --morph: 1;
    padding: clamp(8px, 1.2vw, 14px) clamp(10px, 2vw, 28px);
    border: 1px solid rgba(var(--rgb-white), .18);
    border-radius: var(--radius-pill);
    background: rgba(var(--rgb-white), .10);
    box-shadow: inset 0 1px 1px rgba(var(--rgb-white), .35), inset 0 -1px 1px rgba(var(--rgb-black), .2), 0 12px 30px rgba(var(--rgb-black), .25);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    overflow: visible;
}

.glassmenu .et-menu.nav li {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 5px;
}

.glassmenu .et-menu.nav li a {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1vw, 16px) clamp(10px, 1.2vw, 22px) !important;
    white-space: nowrap;
}

.glassmenu .et-menu.nav::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: var(--active-x);
    width: var(--active-w);
    height: calc(100% - 12px);
    border-radius: var(--radius-pill);
    background: rgba(var(--rgb-white), .18);
    box-shadow: inset 0 1px 1px rgba(var(--rgb-white), .5), inset 0 -1px 1px rgba(var(--rgb-black), .2), 0 10px 20px rgba(var(--rgb-black), .25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(-50%) scaleX(var(--morph));
    transition: left 700ms cubic-bezier(.19, 1, .22, 1), width 700ms cubic-bezier(.19, 1, .22, 1), transform 350ms cubic-bezier(.2, 1, .2, 1);
    pointer-events: none;
}

.glassmenu .et-menu.nav::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: var(--hover-x);
    width: var(--hover-w);
    height: calc(100% - 16px);
    border: 1px solid rgba(var(--rgb-white), .22);
    border-radius: var(--radius-pill);
    background: rgba(var(--rgb-white), .10);
    opacity: 0;
    transform: translateY(-50%) scaleX(1.05);
    transition: left 200ms ease, width 200ms ease, opacity 150ms ease, transform 250ms ease;
    pointer-events: none;
}

.glassmenu .et-menu.nav.hovering::after {
    opacity: 1;
    transform: translateY(-50%) scaleX(1.08);
}

/* Mobile safe reset */
.et_mobile_menu::before,
.et_mobile_menu::after {
    display: none !important;
}

/* =========================================================
   GLASS HELPERS
   ========================================================= */
.glass-text {
    color: rgba(var(--rgb-white), .85);
    text-shadow: 0 0 10px rgba(var(--rgb-white), .25), 0 1px 2px rgba(var(--rgb-black), .4);
}

.btn-liquid {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: .4s var(--ease-ios);
}

.btn-liquid:hover {
    background: rgba(var(--rgb-white), .22);
    box-shadow: 0 8px 25px rgba(var(--rgb-black), .3), inset 0 1px 1px rgba(var(--rgb-white), .7);
    transform: translateY(-2px);
}

.card {
    height: auto;
    padding: 32px;
    border: 1px solid rgba(var(--rgb-white), .2);
    border-radius: var(--radius-lg);
    background: rgba(var(--rgb-white), .06);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transition: .5s var(--ease-ios);
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
}

.glass {
    padding: 24px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    box-shadow: 0 10px 30px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

.liquid-shape {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;
    background: linear-gradient(135deg, #4da3ff, #ff7cc0);
    filter: blur(120px);
    animation: liquidMove 14s infinite alternate ease-in-out;
}

@keyframes liquidMove {
    0% { border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%; }
    100% { border-radius: 30% 70% 40% 60% / 60% 40% 70% 30%; }
}

.input-glass {
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(var(--rgb-white), .25);
    border-radius: 14px;
    background: rgba(var(--rgb-white), .06);
    color: var(--color-white);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}

.panel {
    position: fixed;
    right: 40px;
    bottom: 40px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: rgba(var(--rgb-white), .08);
    box-shadow: 0 20px 60px rgba(var(--rgb-black), .4);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
}

/* =========================================================
   STANDORTE
   ========================================================= */
.standorte-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.standort-row {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(var(--rgb-primary), .18);
    border-radius: 24px;
    background: var(--color-white);
    box-shadow: 0 16px 38px rgba(var(--rgb-text), .08);
    overflow: hidden;
}

.standort-media {
    position: relative;
    width: 100%;
    background: var(--color-surface-soft);
}

.standort-main-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.standort-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.standort-thumbs {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.standort-thumbs img {
    width: 46px;
    height: 46px;
    border: 2px solid rgba(var(--rgb-white), .95);
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(var(--rgb-text), .22);
    object-fit: cover;
    opacity: .92;
    cursor: pointer;
    transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.standort-thumbs img:hover {
    box-shadow: 0 10px 22px rgba(var(--rgb-text), .28);
    opacity: 1;
    transform: translateY(-2px) scale(1.04);
}

.standort-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 18px;
    padding-top: 20px;
}

.standort-content h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
}

.standort-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.standort-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(var(--rgb-primary), .14);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
}

.standort-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--rgb-primary), .14);
    color: var(--color-primary);
    font-size: 15px;
}

.standort-text {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}

.standort-text strong {
    display: block;
    margin-bottom: 3px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 800;
}

.standort-hinweis {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 13px !important;
    line-height: 1.4;
}

.standort-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.standort-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.standort-actions a:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    box-shadow: 0 10px 22px rgba(var(--rgb-primary), .28);
    color: var(--color-white);
    transform: translateY(-2px);
}

.standort-actions a.btn-pill {
    border-color: rgba(var(--rgb-primary), .35);
    background: var(--color-white);
    color: var(--color-primary);
}

.standort-actions a.btn-pill:hover {
    border-color: rgba(var(--rgb-primary), .55);
    background: rgba(var(--rgb-primary), .08);
    color: var(--color-primary-hover);
}

@media (max-width: 1100px) {
    .standorte-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .standorte-list {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .standort-row {
        border-radius: 22px;
    }

    .standort-content {
        padding: 24px 20px 26px;
    }

    .standort-content h3 {
        font-size: 26px;
    }

    .standort-actions {
        flex-direction: column;
    }

    .standort-actions a {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .standort-thumbs img {
        width: 42px;
        height: 42px;
    }

    .standort-item {
        padding: 14px;
    }

    .standort-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }
}


/* Erreichbarkeit */
.standort-erreichbarkeit{display:flex;flex-direction:column}
.standort-erreichbarkeit strong{display:block;margin:0 0 2px;color:var(--color-text);font-size:15px;font-weight:800;line-height:1.45}
.standort-erreichbarkeit-zeit{display:block;color:var(--color-text);font-size:15px;line-height:1.5}
.standort-erreichbarkeit-hinweis{display:block;margin-top:5px;color:var(--color-text-muted);font-size:13px;line-height:1.4}
/* =========================================================
   BLOG
   ========================================================= */
.lp-blog-wrapper {
    margin: 0 auto;
}

.lp-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
}

.lp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.blog-card {
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: 0 10px 25px rgba(var(--rgb-black), .08);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.blog-card:hover {
    box-shadow: 0 20px 50px rgba(var(--rgb-black), .15);
    transform: translateY(-5px);
}

.lp-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.lp-content {
    padding: 20px;
}

.lp-content h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.lp-content p {
    margin-bottom: 15px;
    color: #666666;
    font-size: 14px;
    line-height: 1.4;
}

.lp-content a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 980px) {
    .lp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lp-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   DIVI PRICING – CHECKMARKS
   ========================================================= */
.et_pb_pricing li {
    position: relative;
    padding-left: 10px;
}

.et_pb_pricing li > span::before {
    content: "\2713";
    position: absolute;
    top: .1em;
    left: -20px;
    width: auto;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   STANDORTE TEASER
   ========================================================= */

.standorte-teaser-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 auto;
}

.standort-teaser-card {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(var(--rgb-primary), .16);
    border-radius: 24px;
    background: var(--color-white);
    box-shadow: 0 12px 32px rgba(var(--rgb-text), .09);
    overflow: hidden;
    transition: transform .35s var(--ease-ios), box-shadow .35s var(--ease-ios), border-color .35s ease;
}

.standort-teaser-card:hover {
    border-color: rgba(var(--rgb-primary), .28);
    box-shadow: 0 22px 50px rgba(var(--rgb-text), .14);
    transform: translateY(-6px);
}

.standort-teaser-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--color-text);
    text-decoration: none;
}

.standort-teaser-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-surface-soft);
    overflow: hidden;
}

.standort-teaser-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-ios);
}

.standort-teaser-card:hover .standort-teaser-image img {
    transform: scale(1.055);
}

.standort-teaser-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(var(--rgb-black), .18),
        transparent 45%
    );
    pointer-events: none;
}

.standort-teaser-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--rgb-white), .35);
    border-radius: 50%;
    background: rgba(var(--rgb-white), .82);
    box-shadow: 0 8px 22px rgba(var(--rgb-black), .14);
    color: var(--color-primary);
    font-size: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .3s var(--ease-ios), background-color .3s ease;
}

.standort-teaser-card:hover .standort-teaser-arrow {
    background: var(--color-white);
    transform: translateX(3px);
}

.standort-teaser-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 20px;
}

.standort-teaser-content h3 {
    margin: 0 0 16px;
    padding: 0;
    color: var(--color-text) !important;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

.standort-teaser-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.standort-teaser-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.standort-teaser-icon {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -3px;
    border-radius: 50%;
    background: rgba(var(--rgb-primary), .1);
    color: var(--color-primary);
    font-size: 12px;
}

.standort-teaser-more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
}

.standort-teaser-more i {
    font-size: 11px;
    transition: transform .25s ease;
}

.standort-teaser-card:hover .standort-teaser-more i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET – horizontaler Scroll-Slider
   ========================================================= */

@media (max-width: 980px) {

    .standorte-teaser-grid {
        display: flex;
        gap: 18px;
        width: 100%;
        padding: 3px 0 18px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .standorte-teaser-grid::-webkit-scrollbar {
        display: none;
    }

    .standort-teaser-card {
        flex: 0 0 calc(50% - 9px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .standort-teaser-card:hover {
        transform: none;
    }

}


/* =========================================================
   MOBIL – eine Karte + Vorschau der nächsten
   ========================================================= */

@media (max-width: 600px) {

    .standorte-teaser-grid {
        gap: 14px;
        padding-right: 12%;
    }

    .standort-teaser-card {
        flex: 0 0 88%;
        border-radius: 22px;
    }

    .standort-teaser-image {
        aspect-ratio: 16 / 11;
    }

    .standort-teaser-content {
        padding: 20px 18px 18px;
    }

    .standort-teaser-content h3 {
        margin-bottom: 14px;
        font-size: 21px;
    }

    .standort-teaser-more {
        padding-top: 18px;
    }

    .standort-teaser-arrow {
        right: 14px;
        bottom: 14px;
        width: 40px;
        height: 40px;
    }

}

/* =========================================================
   HERO WATERMARK
   ========================================================= */
.lp-hero {
    overflow: hidden;
}

.lp-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    right: 20px;
    bottom: 20px;
    width: 300px;
    height: 300px;
    background: url("/wp-content/themes/Divi-Child/img/lernpilot-bildmarke-blau-transp.svg") no-repeat center;
    background-size: contain;
    filter: blur(.3px);
    opacity: .3;
    pointer-events: none;
}

/* =========================================================
   MAP
   ========================================================= */
.ruebenberg::after,
.barsinghausen::after {
    content: var(--pin-count, "");
    position: absolute;
    z-index: 10;
    top: -30px;
    right: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(var(--rgb-black), .3);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   DITTY
   ========================================================= */
.ditty-item__content {
    font-family: var(--font-heading) !important;
}

.standort-row,
.standort-teaser-card {
    position: relative;
    overflow: hidden;
}

.standort-banderole {
    position: absolute;
    top: 22px;
    right: -42px;
    z-index: 20;
    width: 170px;
    padding: 9px 10px;
    background: #f4c542;
    color: #15202c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    transform: rotate(45deg);
    pointer-events: none;
}

.lp-tilt-row{
    --tilt-x:0deg;
    --tilt-y:0deg;
    position:relative;
    transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style:preserve-3d;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.lp-tilt-row.lp-tilt-active{
    transition:transform .08s linear;
}

@media (prefers-reduced-motion:reduce){
    .lp-tilt-row{
        transform:none;
        transition:none;
    }
}
/* =========================================================
   LERNPILOT – ABLAUF / HORIZONTAL SCROLL
   ========================================================= */

.lp-ablauf-scroll {
    position: relative;
    width: 100%;
    overflow: clip;
    background: #fff;
}

/* Wird per JS um Überschrift, Balken und Karten gelegt */
.lp-ablauf-sticky {
    position: sticky;
    top: 90px;
    width: 100%;
    padding: 38px 0 60px;
}

/* =========================================================
   HEADLINE
   ========================================================= */

.lp-ablauf-title-row {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
}


.lp-ablauf-title-row h2 {
    max-width: 700px;
    margin: 0 !important;
    padding: 0 !important;
   line-height: 1.03 !important;
}

/* =========================================================
   SCROLL-FORTSCHRITT
   ========================================================= */

.lp-ablauf-scrollhint {
    display: flex;
    align-items: center;
    gap: 16px;

    width: min(1180px, calc(100% - 48px));
    margin: 28px auto 48px;
}

.lp-ablauf-progress {
    position: relative;
    flex: 0 1 420px;
    max-width: 420px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4e1db;
}

.lp-ablauf-progress__bar {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #2f7cff;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.lp-ablauf-scrollhint__text {
    flex: 0 0 auto;
    color: #9ca6b2;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

/* =========================================================
   KARTEN-TRACK
   ========================================================= */

.lp-ablauf {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    width: min(1400px, calc(100% - 48px)) !important;
    max-width: 1400px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 28px !important;

    overflow: visible !important;
    transform: translate3d(0, 0, 0);

    will-change: transform;
}

/* =========================================================
   KARTEN
   ========================================================= */

.lp-ablauf > .lp-ablauf-card,
.lp-ablauf > .et_flex_column_1_5,
.lp-ablauf > .et_flex_column_12_24_tablet,
.lp-ablauf > .et_flex_column_24_24_phone {
    flex: 0 0 400px !important;

    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;

    min-height: 330px;

    margin: 0 !important;
    padding: 34px 28px !important;

    border: 1px solid rgba(17, 24, 39, .07);
    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 20px 45px rgba(17, 24, 39, .08);

    overflow: hidden;
}

/* =========================================================
   NUMMERN
   ========================================================= */
.lp-ablauf .lp-ablauf-card > .lp-ablauf-number {
    display: block !important;
    width: 100% !important;
    margin: 0 0 55px !important;
    padding: 0 !important;
}

.lp-ablauf .lp-ablauf-card > .lp-ablauf-number .et_pb_text_inner {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lp-ablauf .lp-ablauf-card > .lp-ablauf-number .et_pb_text_inner p {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #dce7f4 !important;

    font-size: 64px !important;
    line-height: .85 !important;
    font-weight: 700 !important;

    letter-spacing: -.07em !important;
}

/* =========================================================
   KARTENTEXTE
   ========================================================= */

.lp-ablauf-card h3 {
    margin: 0 0 16px !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em;
}

.lp-ablauf-card h3 + p {
    margin-top: 0 !important;
}

.lp-ablauf-card p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* =========================================================
   HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine) {
    .lp-ablauf-card {
        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }

    .lp-ablauf-card:hover {
        transform: translateY(-5px);
        box-shadow:
            0 26px 55px rgba(17, 24, 39, .12);
    }
}

/* =========================================================
   TABLET / MOBILE
   Kein vertikal gebundener Effekt,
   sondern normal horizontal wischen.
   ========================================================= */

@media (max-width:980px) {
    .lp-ablauf-scroll {
        height: auto !important;
        overflow: visible;
    }

    .lp-ablauf-sticky {
        position: relative !important;
        top: auto !important;
        padding: 45px 0;
    }

    .lp-ablauf-scrollhint {
        display: none;
    }

    .lp-ablauf-title-row {
        width: calc(100% - 40px) !important;
    }

    .lp-ablauf {
        width: 100% !important;
        max-width: 100% !important;

        gap: 18px !important;

        padding: 5px 20px 28px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        transform: none !important;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .lp-ablauf::-webkit-scrollbar {
        display: none;
    }

    .lp-ablauf > .lp-ablauf-card,
    .lp-ablauf > .et_flex_column_1_5,
    .lp-ablauf > .et_flex_column_12_24_tablet,
    .lp-ablauf > .et_flex_column_24_24_phone {
        flex: 0 0 72% !important;

        width: 72% !important;
        min-width: 72% !important;
        max-width: 72% !important;

        scroll-snap-align: start;
    }
}

@media (max-width:767px) {
    .lp-ablauf-title-row {
        width: calc(100% - 32px) !important;
    }

    .lp-ablauf-title-row h2 {
        font-size: 36px !important;
    }

    .lp-ablauf {
        gap: 14px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        scroll-padding-left: 16px;
    }

    .lp-ablauf > .lp-ablauf-card,
    .lp-ablauf > .et_flex_column_1_5,
    .lp-ablauf > .et_flex_column_12_24_tablet,
    .lp-ablauf > .et_flex_column_24_24_phone {
        flex: 0 0 86% !important;

        width: 86% !important;
        min-width: 86% !important;
        max-width: 86% !important;

        min-height: 315px;

        padding: 28px 24px !important;
    }

    .lp-ablauf-number {
        margin-bottom: 45px !important;
    }
}

.lp-counter-greater .percent-value::before{
    content: ">";
    display:inline-block;
    margin-right:.12em;
    font-size:.7em;
    vertical-align:.08em;
}

/* ==========================================================
   LERNPILOT HEADER – FINAL
   Divi 5 Struktur:
   .lp-site-header
   └─ .lp-header-row
      ├─ .lp-header-menu-col
      │  └─ .glassmenu
      └─ .lp-header-actions-col
         └─ .lp-header-actions-module
   ========================================================== */

/* ---------- Desktop-Grundlayout ---------- */
.lp-site-header{
    overflow:visible!important;
}

.lp-header-row{
    width:92%!important;
    max-width:1500px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content!important;
    align-items:center!important;
    gap:16px!important;
    padding:0!important;
}

.lp-header-menu-col,
.lp-header-actions-col{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
}

.lp-header-menu-col{
    min-width:0!important;
}

.lp-header-actions-col{
    min-width:max-content!important;
    align-self:center!important;
}

.lp-header-menu-col .glassmenu{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
}

.lp-header-menu-col .glassmenu .et_pb_menu_inner_container{
    width:100%!important;
}

.lp-header-menu-col .glassmenu .et_pb_menu__wrap{
    min-width:0;
}

/* ---------- Action-Modul ---------- */
.lp-header-actions-module{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    overflow:visible!important;
}

.lp-header-actions-module .et_pb_text_inner{
    width:auto!important;
    overflow:visible!important;
}

.lp-header-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    width:auto!important;
    margin:0!important;
    white-space:nowrap!important;
}

/* ---------- Buttons ---------- */
.lp-header-action{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1!important;
    text-decoration:none!important;
    transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}

.lp-header-action svg{
    flex:0 0 auto;
    width:12px!important;
    height:12px!important;
}

.lp-header-action:hover{
    transform:translateY(-1px);
}

.lp-header-trial{
    border:1px solid #3278f6!important;
    background:#3278f6!important;
    color:#fff!important;
}

.lp-header-trial:hover{
    border-color:#2469df!important;
    background:#2469df!important;
    color:#fff!important;
}

.lp-header-phone{
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
}

.lp-header-phone:hover{
    border-color:rgba(255,255,255,.28)!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
}

/* ---------- GTranslate ---------- */
.lp-header-language{
    position:relative!important;
    z-index:500!important;
    display:flex!important;
    align-items:center!important;
    height:38px!important;
    margin:0!important;
    overflow:visible!important;
}

/* Der von GTranslate zusätzlich erzeugte Standard-Select wird nicht benötigt. */
.lp-header-language #google_translate_element2,
.lp-header-language .goog-te-gadget{
    display:none!important;
}

.lp-header-language .gtranslate_wrapper,
.lp-header-language #gt_float_wrapper,
.lp-header-language .gt_float_switcher,
.lp-header-language .gt-selected,
.lp-header-language .gt-current-lang{
    display:flex!important;
    align-items:center!important;
}

.lp-header-language .gt_float_switcher{
    margin:0!important;
    border-radius:999px!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:13px!important;
    overflow:visible!important;
}

.lp-header-language .gt_float_switcher .gt-selected{
    background:#fff!important;
    border-radius:999px!important;
}

.lp-header-language .gt_float_switcher .gt-selected .gt-current-lang{
    height:38px!important;
    min-height:38px!important;
    gap:6px!important;
    padding:0 11px!important;
    box-sizing:border-box!important;
    border-radius:999px!important;
    color:#151f30!important;
    font-family:inherit!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1!important;
}

.lp-header-language .gt-lang-code{
    text-transform:uppercase!important;
}

.lp-header-language .gt_float_switcher .gt-selected img{
    width:22px!important;
    height:auto!important;
    border-radius:2px!important;
}

.lp-header-language .gt_float_switcher-arrow{
    margin-left:2px!important;
}

.lp-header-language .gt_float_switcher .gt_options{
    position:absolute!important;
    top:calc(100% + 7px)!important;
    right:0!important;
    left:auto!important;
    width:205px!important;
    max-height:330px!important;
    padding:5px!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 14px 35px rgba(0,0,0,.18)!important;
    overflow:auto!important;
}

.lp-header-language .gt_float_switcher .gt_options a{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 10px!important;
    border-radius:8px!important;
    font-family:inherit!important;
    font-size:13px!important;
    line-height:1.25!important;
}

.lp-header-language .gt_float_switcher .gt_options a:hover{
    background:#f3f4f6!important;
}

.lp-header-language .gt_float_switcher .gt_options img{
    width:22px!important;
    height:auto!important;
}

/* ---------- Kompakter Desktop ---------- */
@media(max-width:1600px){
    .lp-header-row{
        width:95%!important;
        gap:10px!important;
    }

    .lp-header-trial-text{
        font-size:0!important;
    }

    .lp-header-trial-text::after{
        content:"Probestunde";
        font-size:13px!important;
    }

    .lp-header-phone{
        width:38px!important;
        min-width:38px!important;
        padding:0!important;
    }

    .lp-header-phone-text{
        display:none!important;
    }
}

@media(min-width:1251px) and (max-width:1600px){
    .lp-header-menu-col .et-menu.nav{
        padding-left:10px!important;
        padding-right:10px!important;
    }

    .lp-header-menu-col .et-menu.nav li{
        padding:3px!important;
    }

    .lp-header-menu-col .et-menu.nav li a{
        padding-left:9px!important;
        padding-right:9px!important;
        font-size:14px!important;
    }
}

/* ---------- ≤ 1250 px: Logo | Actions | Hamburger ---------- */
@media(max-width:1250px){
    .lp-header-row{
        position:relative!important;
        display:block!important;
        width:94%!important;
        max-width:none!important;
        min-height:76px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        padding:0!important;
    }

    .lp-header-menu-col{
        position:relative!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        flex:0 0 100%!important;
    }

    .lp-header-menu-col .glassmenu{
        width:100%!important;
        margin:0!important;
    }

    .lp-header-menu-col .glassmenu .et_pb_menu_inner_container{
        position:relative!important;
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        width:100%!important;
        min-height:76px!important;
        padding:0!important;
    }

    /* Logo */
    .lp-header-menu-col .et_pb_menu__logo-wrap{
        position:relative!important;
        z-index:20!important;
        display:flex!important;
        flex:0 0 auto!important;
        align-items:center!important;
        width:200px!important;
        margin:0!important;
    }

    .lp-header-menu-col .et_pb_menu__logo{
        display:block!important;
        width:auto!important;
        max-width:none!important;
    }

    .lp-header-menu-col .et_pb_menu__logo img{
        display:block!important;
    
           }

    /* Desktop-Navigation aus */
    .lp-header-menu-col .et_pb_menu__menu{
        display:none!important;
    }

    /* Hamburger ganz rechts */
    .lp-header-menu-col .et_pb_menu__wrap{
        position:static!important;
        display:flex!important;
        flex:0 0 auto!important;
        align-items:center!important;
        justify-content:flex-end!important;
        margin-left:auto!important;
        max-height:none!important;
    }

    .lp-header-menu-col .et_mobile_nav_menu{
        position:static!important;
        z-index:200!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
    }

    .lp-header-menu-col .mobile_nav{
        position:static!important;
    }

    .lp-header-menu-col .mobile_menu_bar{
        position:relative!important;
        z-index:210!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
        padding:8px!important;
    }

    /* Actions unmittelbar links vom Hamburger */
    .lp-header-actions-col{
        position:absolute!important;
        z-index:100!important;
        top:50%!important;
        right:50px!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        margin:0!important;
        transform:translateY(-50%)!important;
    }

    .lp-header-actions{
        gap:5px!important;
    }

    .lp-header-action{
        height:34px!important;
        min-height:34px!important;
    }

    .lp-header-trial{
        padding:0 10px!important;
    }

    .lp-header-trial-text::after{
        font-size:12px!important;
    }

    .lp-header-phone{
        width:34px!important;
        min-width:34px!important;
        padding:0!important;
    }

    .lp-header-language{
        height:34px!important;
    }

    .lp-header-language .gt_float_switcher .gt-selected .gt-current-lang{
        height:34px!important;
        min-height:34px!important;
        padding:0 8px!important;
        font-size:12px!important;
    }

    .lp-header-language .gt_float_switcher .gt-selected img{
        width:20px!important;
    }

    /* Mobile Dropdown */
    .lp-header-menu-col .et_mobile_menu{
        position:absolute!important;
        z-index:99999!important;
        top:100%!important;
        right:0!important;
        left:0!important;
        width:100%!important;
        min-width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:10px!important;
        border-top:1px solid rgba(255,255,255,.12)!important;
        border-radius:0 0 16px 16px!important;
        background:#111b2b!important;
        box-shadow:0 14px 30px rgba(0,0,0,.2)!important;
    }

    .lp-header-menu-col .mobile_nav.closed .et_mobile_menu{
        display:none!important;
    }

    .lp-header-menu-col .mobile_nav.opened .et_mobile_menu{
        display:block!important;
    }

    .lp-header-menu-col .et_mobile_menu li{
        display:block!important;
        width:100%!important;
        margin:0!important;
        padding:0!important;
    }

    .lp-header-menu-col .et_mobile_menu li a{
        display:block!important;
        width:100%!important;
        padding:11px 14px!important;
        border:0!important;
        border-radius:8px!important;
        color:#fff!important;
        font-size:15px!important;
        line-height:1.3!important;
        text-align:left!important;
    }

    .lp-header-menu-col .et_mobile_menu li a:hover{
        background:rgba(255,255,255,.07)!important;
        opacity:1!important;
    }

    .lp-header-menu-col .et_mobile_menu li:first-child a{
        display:flex!important;
        align-items:center!important;
    }

    .lp-header-menu-col .et_mobile_menu svg{
        width:15px!important;
        height:15px!important;
    }
}

/* ---------- Smartphone ---------- */
@media(max-width:767px){
    .lp-header-row{
        width:94%!important;
        min-height:70px!important;
    }

    .lp-header-menu-col .glassmenu .et_pb_menu_inner_container{
        min-height:70px!important;
    }


    .lp-header-actions-col{
        right:44px!important;
    }

    .lp-header-actions{
        gap:4px!important;
    }

    .lp-header-action{
        height:32px!important;
        min-height:32px!important;
    }

    .lp-header-trial{
        padding:0 8px!important;
    }

    .lp-header-trial-text::after{
        font-size:11px!important;
    }

    .lp-header-trial svg{
        width:9px!important;
        height:9px!important;
    }

    .lp-header-phone{
        width:32px!important;
        min-width:32px!important;
    }

    .lp-header-phone svg{
        width:11px!important;
        height:11px!important;
    }

    .lp-header-language{
        height:32px!important;
    }

    .lp-header-language .gt_float_switcher .gt-selected .gt-current-lang{
        height:32px!important;
        min-height:32px!important;
        padding:0 7px!important;
        font-size:11px!important;
    }

    .lp-header-language .gt_float_switcher .gt-selected img{
        width:19px!important;
    }
}

/* ---------- Schmale Smartphones ---------- */
@media(max-width:430px){
    .lp-header-row{
        width:96%!important;
    }


    .lp-header-actions-col{
        right:39px!important;
    }

    .lp-header-actions{
        gap:3px!important;
    }

    .lp-header-trial{
        padding:0 7px!important;
    }

    .lp-header-trial-text::after{
        font-size:10px!important;
    }

    .lp-header-trial svg{
        display:none!important;
    }

    .lp-header-language .gt-lang-code{
        display:none!important;
    }

    .lp-header-language .gt_float_switcher .gt-selected .gt-current-lang{
        padding:0 6px!important;
    }
}

/* ---------- Sehr schmale Smartphones ---------- */
@media(max-width:360px){


    .lp-header-actions-col{
        right:36px!important;
    }

    .lp-header-trial{
        padding:0 6px!important;
    }

    .lp-header-trial-text::after{
        content:"Termin";
    }
}