:root {
    --bg1: #292929;
    --bg2: #252626;
    --text: #f2f3f5;
    --muted: #b8c0cc;
    --accent: #3f6895;
    --tile: clamp(132px, 12vw + 60px, 168px);
}

/* ===== Base ===== */
* { box-sizing: border-box; }
body {
    background: linear-gradient(180deg, var(--bg1), var(--bg2));
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Solid (900) */
@font-face{
    font-family:"Font Awesome 6 Free";
    font-style:normal;
    font-weight:900;
    font-display:swap; /* oder optional */
    src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2");
}

/* Brands (400) */
@font-face{
    font-family:"Font Awesome 6 Brands";
    font-style:normal;
    font-weight:400;
    font-display:swap; /* oder optional */
    src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2") format("woff2");
}

/* ===== HERO ===== */

.hero{
    position:relative; isolation:isolate; overflow:hidden;
    height: auto;
    padding:clamp(3rem,7vw,6.5rem) 0 2rem;
    background:
            linear-gradient(135deg, #081018 0 55%, #0b141d 55% 100%);
}
.hero::before{
    content:""; position:absolute; inset:-10%;
    background:
            radial-gradient(60% 80% at 80% 20%, rgba(45,130,180,.35), transparent 60%),

    filter: blur(30px);
}
.search-wrap .input-group{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
    border-radius:16px; overflow:hidden;
}
.search-input{
    height:56px; background:rgba(12,16,22,.65);
    border:1px solid rgba(255,255,255,.08); border-right:0;
}
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Weiß mit Transparenz */
    opacity: 1; /* Wichtig, sonst ignorieren Browser die Transparenz */
}

.search-btn{ height:56px; background:#2bb07a; }


.hero h1 {
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(2.2rem, 5.6vw, 4rem);
    letter-spacing: -.02em;
}
.gradient-word {
    background: linear-gradient(135deg, #0093a0 0%, #2d83b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub { color: #dae2ea; }

/* Suche */
.search-wrap { max-width: 900px; }
.search-input {
    height: 56px;
    background: #121417;
    color: var(--text);
    border: 1px solid #2f6998;
    border-radius: 16px 0 0 16px;
}
.search-btn {
    position: relative;
    height: 56px;
    border-radius: 0 16px 16px 0;
    background: #29a36a;
    color: #fff;
    border: none;
    overflow: hidden;
    transition: background 0.3s ease;
}

.search-btn:hover {
    background: #29a36a;
    filter: brightness(1.05);
}

/* Shine Effekt */
.shine-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 15%;
    height: 100%;
    background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine-smooth 3.5s ease-in-out infinite;
    animation-delay: 2s; /* Start erst nach 2s */
    pointer-events: none;
}

@keyframes shine-smooth {
    0% {
        left: -40%;
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    50% {
        left: 140%;
        opacity: 0.8;
    }
    55% {
        opacity: 0;
    }
    100% {
        left: 140%;
        opacity: 0;
    }
}




/* ===== TILES / SLIDER ===== */
.tiles-shell { position: relative; margin-top: 1.25rem; }
.tiles-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--tile);
    gap: 1rem;
    overflow-x: auto;
    padding: .5rem .5rem 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding: 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tiles-row::-webkit-scrollbar { display: none; }

.tile {
    scroll-snap-align: center;
    inline-size: var(--tile);
    block-size: var(--tile);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    place-items: center;
    place-content: center;
    text-align: center;
    color: #fff;
    text-decoration: none;
    /*box-shadow: 0 8px 24px rgba(0,0,0,.25);*/
    transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,.35);
}
.tile i { font-size: 34px; margin-bottom: .6rem; }
.tile span {
    display: block;
    text-align: center;
    font-size: 0.9rem; /* leicht kleiner */
    line-height: 1.2;
    word-break: break-word; /* erlaubt Umbruch mitten im Wort */
    hyphens: auto; /* Silbentrennung falls möglich */
}


/* Branchenfarben */
.t-green  { background:#2fae84; }
.t-sky    { background:#66a9d8; }
.t-blue   { background:#2e6ccc; }
.t-violet { background:#6b57b9; }
.t-pink   { background:#e6688d; }
.t-orange { background:#f07b41; }
.t-teal   { background:#2aa6a1; }
.t-dark   { background:#171a20; }

/* Mobile-Slider-Pfeile */
@media (max-width: 767.98px) {
    /* 4rem = 2x Container-Gutter (1.5rem) + tiles-row Padding (0.5rem) + 2 Gaps à 1rem
   -> passt zu deiner Struktur. Bei Bedarf leicht anpassen. */
    :root {
        --tile: calc((100vw - 4rem) / 3);
    }
    .tiles-shell { position: relative; }

    .mobile-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 10px;
        background: rgba(0,0,0,.55);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(0,0,0,.25);
    }
    .mobile-nav i { font-size: 18px; line-height: 1; }
    .mobile-nav.prev { left: 6px; }
    .mobile-nav.next { right: 6px; }

    .mobile-nav:disabled { opacity: .35; pointer-events: none; }
}


/* ===== HEADER & NAVBAR ===== */

/* Header bleibt fix 86px hoch */
.header {
    transition: background-color .5s, padding .5s, box-shadow .5s;
    z-index: 997;
    padding: 0;
    background: #181a1d;
    height: 86px;
}

/* Glas/Shadow beim Scrollen – lässt Höhe unverändert */
.header.header-scrolled {
    background-color: rgba(0,0,0,.7);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
    box-shadow: 0 2px 20px rgba(1,41,112,0.1);
}

/* Wichtig: der direkte Container im Header füllt die Höhe,
   so kann Flex wirklich zentrieren */
.header > .container,
.header > .container-fluid,
.header > .container-xl {
    height: 100%;
    display: flex;
    align-items: center;      /* vertikal zentriert */
    justify-content: space-between;
}

/* Link-Wrapper fürs Logo nutzt die volle Header-Höhe */
.header .logo {
    height: 100%;
    display: flex;
    align-items: center;      /* vertikal zentriert */
}

/* Span um das Bild: keine zusätzliche Höhe erzeugen */
.header .logo {
    display: flex;                 /* Flexbox auch hier */
    align-items: center;           /* vertikal im Logo-Container */
    height: 100%;                  /* volle Höhe des Headers */
}

.header .logo img {
    display: block;
    max-height: 75px;              /* gewünschte Größe */
    width: auto;                   /* verhindert Verzerren */
    height: auto;
    margin: 0;                     /* kein zusätzlicher Abstand */
    padding-left: 10px;
}

/* Optional: auf kleineren Screens etwas kleiner */
@media (max-width: 768px) {
    .header .logo img { max-height: 48px; }
}


/* Icon-Leiste rechts (Desktop) */
.navbar-ul1 {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 10px 15px 22px 15px;
    margin: 0;
}
.navbar-ul1 li { display: inline-block; }
.icon-link {
    font-size: 22px;
    color: #fff;
    padding: 10px;
    transition: color .3s ease-in-out, transform .2s ease;
}
.icon-link:hover { color: #f1f1f1; }

/* Grundstruktur Navbar */
.navbar { padding: 0; width: 100%; }
.navbar ul {
    margin: 0;
    display: flex;
    list-style: none;
    align-items: center;
}
.navbar li { position: relative; }

/* Links */
.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0 10px 30px;
    font-family: "Nunito", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transition: color .3s;
}
.header.header-scrolled .navbar a { color: #fff; }
.navbar a i,
.navbar a:focus i {
    font-size: 24px;
    line-height: 0;
    margin-left: 0;
    transition: transform .3s ease-in-out, color .3s ease-in-out;
}
.navbar a:hover i { transform: scale(1.2); color: #2f6998; }

.navbar .active,
.navbar .active:focus,
.navbar li:hover > a { color: #fff; }

/* Get Started Button */
.navbar .getstarted,
.navbar .getstarted:focus {
    background: #026fa2;
    padding: 8px 20px;
    margin-left: 30px;
    border-radius: 4px;
    color: #fff;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover { background: #026491; }

/* Dropdowns */
.navbar .dropdown ul {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 0;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1000;
}
.navbar .dropdown:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
.navbar .dropdown ul li { min-width: 200px; }
.navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 600;
    border-bottom: 1px solid hsla(0,0%,80%,.1);
}
.navbar .dropdown ul a i { font-size: 12px; }
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a { color: #4154f1; }

/* Verschachtelte Dropdowns */
.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}
@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul { left: -90%; }
    .navbar .dropdown .dropdown:hover > ul { left: -100%; }
}

/* Hauptmenü-Breite & Hover-Hintergrund (Desktop) */
.navbar-main-list { width: calc(100% - 210px); padding: 0; }
.navbar-main-list li { width: 20%; text-align: center; }
.navbar-main-list li:hover { background: #066b9b; }
.navbar-main-list li a { margin: auto; width: 100%; }

/* Linkbreiten (Desktop) */
.nav-link {
    width: 8rem;
    padding-left: 0 !important;
    text-align: center;
    justify-content: center !important;
    padding-bottom: 30px !important;
}
.li-get-started { display: none; }

/* Desktop-Logo-Panel */
@media (min-width: 991px) {
    .container-xl { max-width: 100%; padding: 0; }
    .header .logo {
        background: #292929;
        padding: 18px;
        width: 300px;
    }
}

/* Breakpoints für Linkbreite */
@media (max-width: 1400px) {
    .nav-link { width: 6.5rem; }
}
@media (max-width: 1100px) {
    .nav-link {
        width: initial;
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }
}

/* ===== Bootstrap Collapse (Mobile) ===== */
.navbar-toggler { border: none; }
.navbar-dark .navbar-toggler:focus { box-shadow: none; }
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== Mobile-Menü Fixes (nur < 992px) ===== */
@media (max-width: 991.98px) {
    /* Menücontainer bündig unter dem Header, overlay & scrollable */
    #mainNav{
        position: fixed;
        top: 75px;             /* ggf. an reale Headerhöhe anpassen */
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(0,0,0,.92);
        padding: .5rem 0;
        border-radius: 0 0 .75rem .75rem;
        max-height: calc(100vh - 75px);
        overflow-y: auto;
        margin: 0;
    }

    /* Spaltenlayout der Desktop-Navi zurücksetzen */
    #mainNav .navbar-main-list,
    #mainNav .navbar-ul1{
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex !important;
        flex-direction: column;
    }

    /* Li volle Breite statt 20% */
    #mainNav .navbar-main-list li{
        width: 100% !important;
    }

    /* blauer Desktop-Hover auf Mobile deaktivieren */
    #mainNav .navbar-main-list li:hover{
        background: transparent !important;
    }

    /* Links: volle Breite, sauberes Padding, linksbündig */
    #mainNav .nav-link{
        width: auto !important;
        display: block;
        text-align: left;
        justify-content: flex-start !important;
        padding: .9rem 1rem !important;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .02em;
    }
    #mainNav .nav-link:focus,
    #mainNav .nav-link:hover{
        background: transparent;
        color: #fff;
        outline: none;
    }

    /* Icons unten im Menü, in einer Reihe */
    #mainNav .navbar-ul1{
        flex-direction: row;
        gap: 14px;
        padding: .5rem 1rem 1rem;
    }
    #mainNav .icon-link{ font-size: 22px; color: #fff; }
}

/* ===== A11y / Motion ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Solution (namespaced, kollisionssicher) ===== */
/* ===== Section: Lösung (#loesung) ===== */

/* Basis */
#loesung.solution{
    position:relative; isolation:isolate; overflow:hidden;
    background:
            radial-gradient(42% 60% at 85% -10%, rgba(45,131,180,.20), transparent 60%),
            radial-gradient(48% 62% at 10% 110%, rgba(0,147,160,.18), transparent 60%),
            linear-gradient(180deg, #181a1d 0%, #0f1216 100%);
    color: rgba(255,255,255,.90);
    padding: clamp(3rem, 7vw, 6rem) 0;
    color: rgba(255,255,255,.90); /* Grundtext heller */
}

/* Typo */
#loesung .eyebrow{
    letter-spacing:.12em; text-transform:uppercase;
    font-size:.8rem; color:rgba(255,255,255,.65);
}
#loesung .section-title{
    font-weight:800; line-height:1.1;
    color:#eaf3f7;
    letter-spacing:-.01em;
    font-size:clamp(2rem, 1.3rem + 2.4vw, 3rem);
    text-shadow:0 6px 28px rgba(0,0,0,.45);
}
#loesung .gradient-text{
    background:linear-gradient(135deg,#0093a0 0%,#2d83b4 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
#loesung .lead{ max-width:62ch; color:rgba(255,255,255,.92); }
#loesung .text-secondary,                 /* Bootstrap-Textfarbe in der Section aufhellen */
#loesung p{ color:rgba(255,255,255,.82) !important; }

/* Feature Cards */
#loesung .feature-card{
    display:flex; gap:14px; align-items:flex-start;
    padding:18px; border-radius:16px; min-height:110px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
#loesung .feature-card:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
}
#loesung .feature-icon{
    width:48px; height:48px; flex:0 0 48px; border-radius:14px;
    display:grid; place-items:center; color:#fff; font-size:1.2rem;
    background:linear-gradient(135deg,#0093a0 0%,#2d83b4 100%);
    box-shadow:0 10px 26px rgba(0,147,160,.28);
}

/* KPIs (optional) */
#loesung .kpi{ display:flex; flex-direction:column; align-items:center; gap:4px; }
#loesung .kpi-num{
    font-weight:800; line-height:1; font-size:clamp(1.6rem,3vw,2.4rem);
    background:linear-gradient(135deg,#0093a0,#2d83b4);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 12px rgba(0,147,160,.15);
}
#loesung .kpi-label{ opacity:.85; font-size:.95rem; }

/* Buttons */
#loesung .btn-gradient{
    background:linear-gradient(135deg,#0093a0 0%,#2d83b4 100%);
    border:none; color:#fff; box-shadow:0 12px 30px rgba(0,147,160,.30);
    transition:transform .2s, filter .2s;
}
#loesung .btn-gradient:hover{ filter:brightness(1.06); transform:translateY(-1px); }
#loesung .btn-outline-light:hover{ color:#0b0f14; background:#fff; }

/* Fokus/Lesbarkeit: dunkler „Scrim“ hinter linker Textspalte */
#loesung .col-lg-6.col-xl-5{ position:relative; z-index:1; }
#loesung .col-lg-6.col-xl-5::before{
    content:""; position:absolute; inset:-24px max(-40px, -6vw) -24px -24px;
    pointer-events:none; z-index:-1;;
}

/* Spalten-Abstand Desktop */
@media (min-width: 992px){
    #loesung .col-lg-6.col-xl-5{ padding-right:2rem; }
}

/* Bewegungsarme Nutzer */
@media (prefers-reduced-motion: reduce){
    #loesung .feature-card, #loesung .btn-gradient{ transition:none; }
}

/* ABO Section */
/* Basis bleibt wie bei dir */
/* Section höher, mehr Bühne */
/* Hero Section */
.hero-pro {
    position:relative; overflow:hidden; background:#181a1d;
    padding: clamp(5rem, 9vw, 8rem) 0; color:#fff;
    min-height:clamp(680px, 42vh, 920px);
}
.hero-pro .container{ position:relative; z-index:2; }

/* Deko */
.hero-vignette {
    position:absolute; inset:0;
    background:
            linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 22%),
            radial-gradient(1200px 600px at 20% 65%, rgba(0,0,0,.25), transparent 60%);
    pointer-events:none; z-index:1;
}
.hero-blob { position:absolute; filter: blur(38px); opacity:.35; pointer-events:none; z-index:0; }
.hero-blob--left {
    width:44vw; height:44vw; left:-14vw; top:6%;
    background: radial-gradient(closest-side, rgba(47,167,255,.25), rgba(47,167,255,0));
}
.hero-blob--right {
    width:42vw; height:42vw; right:-12vw; top:40%;
    background: radial-gradient(closest-side, rgba(41,163,106,.25), rgba(41,163,106,0));
}

/* Emojis */
.emoji-container { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.emoji { position:absolute; opacity:.12; line-height:1; will-change:transform; animation: floatEmoji linear infinite; }
@keyframes floatEmoji {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-60vh) rotate(180deg) translateX(10px); }
    100% { transform: translateY(-120vh) rotate(360deg) translateX(-10px); }
}

/* Slider */
.mockup-slider {
    position:relative;
    width:100%;
    max-width:760px;
    aspect-ratio: 16/10;
    margin-inline:auto;
    perspective: 1400px;
}
.mockup-slider .slide {
    position:absolute; inset:0;
    display:grid; place-items:center;
    border-radius:16px;
    overflow:hidden;
    transform-origin: 60% 50%;
    transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .6s, filter .6s;
    box-shadow:
            0 26px 80px rgba(0,0,0,.55),
            0 8px 22px rgba(0,0,0,.35),
            0 0 0 1px rgba(255,255,255,.06) inset;
}
.mockup-slider .slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transform: scale(0.95);
    transition: transform .6s ease;
}
.mockup-slider .slide.is-center img { transform: scale(1); }
.mockup-slider .slide.is-left img { transform: scale(0.92) translateY(-10px); }
.mockup-slider .slide.is-right img { transform: scale(0.92) translateY(10px); }
.mockup-slider .slide.is-far-left img { transform: scale(0.88) translateY(-20px); }
.mockup-slider .slide.is-far-right img { transform: scale(0.88) translateY(20px); }

/* Slide States */
.mockup-slider .slide.is-center {
    transform: rotate(-6deg) translate3d(0,0,0) rotateY(-10deg) scale(1);
    z-index:4; opacity:1; filter: saturate(1);
}
.mockup-slider .slide.is-left {
    transform: rotate(-10deg) translate3d(-8%, -3%, -60px) rotateY(-18deg) scale(.94);
    z-index:3; opacity:.88; filter: brightness(.96);
}
.mockup-slider .slide.is-right {
    transform: rotate(-2deg) translate3d(8%, 2%, -60px) rotateY(-2deg) scale(.94);
    z-index:3; opacity:.88; filter: brightness(.96);
}
.mockup-slider .slide.is-far-left {
    transform: rotate(-14deg) translate3d(-16%, -6%, -120px) rotateY(-22deg) scale(.9);
    z-index:2; opacity:.75; filter: blur(.3px) brightness(.92);
}
.mockup-slider .slide.is-far-right {
    transform: rotate(4deg) translate3d(16%, 6%, -120px) rotateY(12deg) scale(.9);
    z-index:2; opacity:.75; filter: blur(.3px) brightness(.92);
}

/* Dots */
.slider-dots {
    position:absolute; left:0; right:0; bottom:-34px;
    display:flex; gap:8px; justify-content:center; z-index:5;
}
.slider-dots button {
    width:8px; height:8px; border-radius:999px; border:none;
    background:rgba(255,255,255,.28); padding:0; cursor:pointer;
    transition: transform .2s, background .2s;
}
.slider-dots button[aria-current="true"] {
    background:#29a36a; transform:scale(1.25);
}

/* Text */
.eyebrow { text-transform:uppercase; font-size:.8rem; color:rgba(255,255,255,.65); letter-spacing:.12em; }
.hero-title { color:#eaf3f7; font-weight:800; line-height:1.1; letter-spacing:-.01em;
    font-size:clamp(2rem, 1.3rem + 2.4vw, 3.2rem); position:relative; }
.hero-title .accent {
    background:linear-gradient(135deg,#0093a0 0%,#2d83b4 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Responsive Accent-Underline */
.accent-underline{
    position: absolute;
    left: 0;
    bottom: clamp(-8px, -0.6vw, -4px);       /* Abstand nach unten */
    height: clamp(3px, 0.45vw, 4px);          /* 3–4px Höhe */
    width: clamp(130px, 18vw, 230px);         /* 120–260px Breite */
    border-radius: 999px;
    background: linear-gradient(90deg,#2fa7ff,#7cf0ff);
    opacity: .65;
}

/* Optional feintuning für sehr kleine/ große Screens */
@media (max-width: 420px){
    .accent-underline{ width: clamp(280px, 40vw, 250px); }
}
@media (min-width: 1400px){
}

.lead { color:rgba(255,255,255,.88); max-width:60ch; }
.hero-points { list-style:none; margin:0 0 1.25rem 0; padding:0; }
.hero-points li { display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.84); margin:.35rem 0; }
.hero-points i { opacity:.9; }
.usp-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.pill { font-size:.85rem; padding:.45rem .75rem; border-radius:999px; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.86); }

/* Buttons */
.btn-cta { background:#29a36a; border:none; color:#fff; padding:.9rem 1.3rem; border-radius:14px; font-weight:600; }
.btn-cta:hover { filter:brightness(1.05); color:#fff; }
.btn-outline-light { border-width:2px; }

/* Responsive */
@media (max-width: 991.98px) {
    .hero-pro { padding:3.5rem 0; min-height:640px; }
    .mockup-slider { max-width:560px; aspect-ratio: 16/11; margin-bottom:1rem; }
    .slider-dots { bottom:-22px; }
    .hero-title { font-size:clamp(1.8rem, 5vw, 2.4rem); }
}

/* Werbemittel */
/* Section-Rahmen wie deine anderen Hero-Bereiche */
.wm-section{
    position:relative; isolation:isolate; overflow:hidden;
    background:#181a1d; color:#eaf3f7;
    padding: clamp(4rem, 7vw, 6rem) 0;
}

/* Typo/Accent wie bei dir */
.eyebrow{ text-transform:uppercase; font-size:.8rem; color:rgba(255,255,255,.65); letter-spacing:.12em; }
.wm-title{ font-weight:800; line-height:1.1; letter-spacing:-.01em; font-size:clamp(2rem, 1.3rem + 2.4vw, 3rem); position:relative; }
.wm-gradient{ background:linear-gradient(135deg,#0093a0 0%,#2d83b4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wm-underline {
    position: absolute;
    left: 0;
    bottom: clamp(-5px, -0.6vw, -8px);       /* leicht responsiv anpassen */
    height: clamp(3px, 0.5vw, 4px);          /* 3–4px */
    width: clamp(190px, 20vw, 274px);        /* 160–300px */
    border-radius: 999px;
    background: linear-gradient(90deg, #2fa7ff, #7cf0ff);
    opacity: .65;
}

/* Mobile Optimierung */
@media (max-width: 420px) {
    .wm-underline {
        width: clamp(160px, 40vw, 180px); /* kürzer auf kleinen Geräten */
    }
}

/* Extra große Screens */
@media (min-width: 1400px) {
    .wm-underline {
    }
}


/* Mockup: Glas & Shine + leichter 3D-Tilt */
.wm-mockup{
    position:relative; border-radius:18px;
    /*background:rgba(255,255,255,.04);*/
    /*border:1px solid rgba(255,255,255,.08);*/
    /*box-shadow:0 26px 80px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.35);*/
    overflow:hidden; transform: perspective(1000px) rotateY(-6deg) rotateX(1deg);
    transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .3s;
}
.wm-mockup img{ display:block; width:100%; height:auto; }
.wm-mockup::after{
    content:""; position:absolute; inset:-20% -60% auto -60%;
    height:160%; width:40%;
    background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-12deg); opacity:0; pointer-events:none;
}
.wm-mockup:hover{
    transform: perspective(1000px) rotateY(-2deg) rotateX(0deg) translateY(-2px);
    /*box-shadow:0 30px 100px rgba(0,0,0,.6);*/
}
.wm-mockup:hover::after{ animation: wm-shine 1200ms ease-out forwards; }
@keyframes wm-shine{
    0%{ left:-60%; opacity:0; }
    10%{ opacity:.45; }
    100%{ left:140%; opacity:0; }
}

/* Feature-Kacheln */
.wm-card{
    display:flex; gap:12px; align-items:flex-start; padding:16px;
    border-radius:16px; min-height:110px;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    transition:transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.wm-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.wm-icon{
    width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:1.1rem;
    background:linear-gradient(135deg,#0093a0 0%,#2d83b4 100%); box-shadow:0 10px 26px rgba(0,147,160,.28);
}
.wm-card-title{ font-size:1rem; margin:0 0 4px 0; color:#eaf3f7; font-weight:700; }
.wm-card-text{ margin:0; color:rgba(255,255,255,.82); }

/* Pills/USPs */
.wm-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.wm-pill{
    font-size:.85rem; padding:.45rem .75rem; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.86);
}

/* CTA (gleicher Stil wie oben) */
.btn-cta{ background:#29a36a; border:none; color:#fff; padding:.9rem 1.3rem; border-radius:14px; font-weight:600; }
.btn-cta:hover{ filter:brightness(1.05); color:#fff; }

/* Deko: Blobs & Vignette (wie in anderen Sections) */
.wm-blob{ position:absolute; filter: blur(38px); opacity:.35; pointer-events:none; z-index:0; }
.wm-blob--left{
    width:44vw; height:44vw; left:-14vw; top:10%;
    background: radial-gradient(closest-side, rgba(47,167,255,.25), rgba(47,167,255,0));
}
.wm-blob--right{
    width:42vw; height:42vw; right:-12vw; top:40%;
    background: radial-gradient(closest-side, rgba(41,163,106,.25), rgba(41,163,106,0));
}
.wm-vignette{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
            linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 24%),
            radial-gradient(1100px 520px at 20% 66%, rgba(0,0,0,.22), transparent 60%);
}

/* Floating Icons (sehr dezent) */
.wm-floating .wm-float{
    position:absolute; font-size:22px; color:rgba(255,255,255,.10); animation: wm-float 22s linear infinite;
}
.wm-floating .i1{ left:8%;  top:16%; animation-delay:0s; }
.wm-floating .i2{ left:78%; top:22%; animation-delay:3s; }
.wm-floating .i3{ left:14%; top:72%; animation-delay:6s; }
.wm-floating .i4{ left:88%; top:68%; animation-delay:9s; }
@keyframes wm-float{
    0%{ transform: translateY(0) rotate(0deg); opacity:.08; }
    50%{ transform: translateY(-40px) rotate(15deg); opacity:.12; }
    100%{ transform: translateY(0) rotate(0deg); opacity:.08; }
}

/* Responsive Tweaks */
@media (max-width: 991.98px){
    .wm-mockup{ transform:none; }
    .wm-floating{ display:none; }
}

/* Bewertungen Section */
.ts-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #181a1d;
    color: #eaf3f7;
    padding: clamp(4rem, 7vw, 6rem) 0;
}

.ts-title {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
}

.ts-gradient {
    background: linear-gradient(135deg, #0093a0 0%, #2d83b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Slider Layout */
.ts-slider {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Karten-Design */
.ts-card {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    transition: transform .25s ease, box-shadow .25s ease,
    background .25s ease, border-color .25s ease,
    opacity .5s ease, filter .5s ease;
}

/* Hover-Effekt */
.ts-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

/* Sanftes Ausblenden/Einblenden beim Slide-Wechsel */
.ts-card.is-switching {
    opacity: 0;
    filter: blur(6px);
}

/* Card Header */
.ts-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.ts-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0093a0, #2d83b4);
    color: #fff;
    font-weight: 700;
}

.ts-name {
    font-weight: 700;
    color: #eaf3f7;
    line-height: 1.1;
}

.ts-role {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, .7);
}

.ts-quote {
    color: rgba(255, 255, 255, .86);
    margin: 12px 0 14px;
    font-style: italic;
}

.ts-stars {
    color: #ffc958;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.ts-author {
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
}

/* Navigation Buttons */
.ts-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    z-index: 2;
    transition: background .2s, border-color .2s;
    opacity: 1; /* immer sichtbar */
}

.ts-nav:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

.ts-prev {
    left: -56px;
}

.ts-next {
    right: -56px;
}

/* Pagination Dots */
.ts-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    grid-column: 1 / -1;
}

.ts-dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, .28);
    transition: transform .2s, background .2s;
}

.ts-dots button[aria-current="true"] {
    background: #29a36a;
    transform: scale(1.25);
}

.ts-hidden {
    display: none !important;
}

/* Mobile Anpassung */
@media (max-width: 991.98px) {
    .ts-slider {
        grid-template-columns: 1fr;
    }
    .ts-prev {
        left: 8px;
    }
    .ts-next {
        right: 8px;
    }
}

/* Deko-Elemente */
.ts-blob {
    position: absolute;
    filter: blur(38px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.ts-blob--left {
    width: 44vw;
    height: 44vw;
    left: -14vw;
    top: 12%;
    background: radial-gradient(closest-side, rgba(47, 167, 255, .25), rgba(47, 167, 255, 0));
}

.ts-blob--right {
    width: 42vw;
    height: 42vw;
    right: -12vw;
    background: radial-gradient(closest-side, rgba(255, 193, 7, .25), rgba(255, 193, 7, 0));
}


/* eazycms Section */
/* ===== EAZY CMS SECTION (Straight + Lightbox, fixed left overlap) ===== */
.ecms-section{
    position:relative; isolation:isolate; overflow:hidden;
    background: radial-gradient(42% 60% at 85% -10%, rgba(45, 131, 180, .20), transparent 60%), radial-gradient(48% 62% at 10% 110%, rgba(0, 147, 160, .18), transparent 60%), linear-gradient(180deg, #181a1d 0%, #0f1216 100%);
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}

/* Copy sicher über Slides + eigene Breite */
.ecms-copy{ position:relative; z-index:20; }
@media (min-width: 992px){
    .ecms-copy{ max-width: 620px; }
}

/* Guard-Rail für die Slider-Spalte (verhindert „ins Bild laufen“) */
.ecms-media{ position:relative; z-index:5; }
@media (min-width: 992px){
    .ecms-media{ padding-left: clamp(28px, 4vw, 72px); } /* wichtiger Fix */
}

/* Headline / Accent */
.ecms-title{ font-weight:800; line-height:1.1; letter-spacing:-.01em;
    font-size:clamp(2rem, 1.3rem + 2.6vw, 3.2rem); position:relative; }
.ecms-gradient{
    background: linear-gradient(135deg,#0093a0 0%,#2d83b4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Responsive Underline für eazyCMS-Headline */
.underline-wrap {
    position: relative;
    display: inline-block; /* Damit sich die Linie nur an das Wort anpasst */
}

.ecms-underline {
    position: absolute;
    left: 0;
    bottom: clamp(-5px, -0.4vw, -8px); /* Abstand nach unten */
    height: clamp(3px, 0.5vw, 4px);
    width: 100%; /* Passt sich automatisch der Wortbreite an */
    border-radius: 999px;
    background: linear-gradient(90deg, #2fa7ff, #7cf0ff);
    opacity: .7;
}


/* Optional: auf sehr kleinen Geräten etwas kürzer,
   damit es nicht an Ränder stößt */
@media (max-width: 420px){
    .ecms-underline{
        width:clamp(56px, 24vw, 120px);
    }
}

/* Optional: auf sehr breiten Bildschirmen leicht verlängern */
@media (min-width: 1400px){
    .ecms-underline{
    }
}

/* Bullets & Pills */
.ecms-points{ list-style:none; margin:0 0 1.25rem 0; padding:0; }
.ecms-points li{ display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.86); margin:.4rem 0; }
.ecms-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{
    font-size:.85rem; padding:.45rem .75rem; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.86);
}

/* CTA */
.btn-cta{ background:#29a36a; border:none; color:#fff; padding:.9rem 1.3rem; border-radius:14px; font-weight:600; }
.btn-cta:hover{ filter:brightness(1.05); color:#fff; }
.btn-outline-light{ border-width:2px; }

/* ===== Stage & Slider ===== */
.ecms-stage{ position:relative; perspective:1200px; z-index:2; }
.ecms-slider{
    position:relative; width:100%; max-width:860px; aspect-ratio: 16/9;
    margin-inline:auto; transform-style:preserve-3d;
}

/* Slide Base */
.ecms-slide{
    position:absolute; inset:0; border-radius:16px; overflow:hidden;
    display:grid; place-items:center; transform-origin:center center;
    transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .7s, filter .7s;
    box-shadow:
            0 26px 80px rgba(0,0,0,.55),
            0 8px 22px rgba(0,0,0,.35),
            0 0 0 1px rgba(255,255,255,.06) inset;
    cursor: zoom-in;
}
.ecms-slide img{
    width:100%; height:100%;
    object-fit:contain; object-position:center;
    display:block; border-radius:16px;
    background:#242729; padding:6px;
    transform: scale(1);
    transition: transform .6s ease;
}

/* Caption / Label */
.ecms-caption{
    position:absolute; left:14px; bottom:14px;
    font-size:.85rem; padding:.35rem .6rem; border-radius:10px;
    background:rgba(0,0,0,.5); color:#eaf3f7;
    border:1px solid rgba(255,255,255,.12);
    display:inline-flex; align-items:center; gap:.45rem;
    backdrop-filter: blur(6px);
}

/* ===== Straighte States ===== */
.ecms-slide.is-center{
    transform: translate3d(0,0,60px) scale(1);
    z-index:5; opacity:1; filter:saturate(1);
}

/* Desktop: weniger negativer Versatz links -> ragt nicht in die Copy */
@media (min-width: 992px){
    .ecms-slide.is-left     { transform: translate3d(-8%, 0, 0)   scale(.94); z-index:4; opacity:.92; filter:brightness(.97); }
    .ecms-slide.is-right    { transform: translate3d( 18%, 0, 0)   scale(.94); z-index:4; opacity:.92; filter:brightness(.97); }
    .ecms-slide.is-far-left { transform: translate3d(-18%, 0,-80px) scale(.88); z-index:3; opacity:.78; filter: blur(.25px) brightness(.94); }
    .ecms-slide.is-far-right{ transform: translate3d( 34%, 0,-80px) scale(.88); z-index:3; opacity:.78; filter: blur(.25px) brightness(.94); }
}

/* Mobile: weiterhin ausgewogener Stack */
@media (max-width: 991.98px){
    .ecms-slide.is-left     { transform: translate3d(-18%,0,0)   scale(.94); }
    .ecms-slide.is-right    { transform: translate3d( 18%,0,0)   scale(.94); }
    .ecms-slide.is-far-left { transform: translate3d(-34%,0,-80px) scale(.88); }
    .ecms-slide.is-far-right{ transform: translate3d( 34%,0,-80px) scale(.88); }
}

/* Shine nur auf Center (Desktop Hover) */
@media (hover:hover){
    .ecms-slide.is-center::after{
        content:""; position:absolute; top:0; bottom:0; width:34%;
        left:-40%; border-radius:inherit; pointer-events:none;
        background:linear-gradient(90deg, rgba(255,255,255,0) 0%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,0) 100%);
        opacity:0;
    }
    .ecms-slide.is-center:hover::after{
        animation: ecms-shine-x 1200ms ease-out forwards;
    }
    @keyframes ecms-shine-x{
        0%{ left:-40%; opacity:0; }
        15%{ opacity:.35; }
        100%{ left:106%; opacity:0; }
    }
}

/* Dots */
.ecms-dots{
    position:absolute; left:0; right:0; bottom:-34px;
    display:flex; gap:8px; justify-content:center; z-index:6;
}
.ecms-dots button{
    width:8px; height:8px; border-radius:999px; border:none; cursor:pointer;
    background:rgba(255,255,255,.28); transition: transform .2s, background .2s;
}
.ecms-dots button[aria-current="true"]{ background:#29a36a; transform:scale(1.25); }

/* Glow */
.ecms-glow{
    position:absolute; inset:6% 12%; border-radius:22px; z-index:0; pointer-events:none;
    /*box-shadow:*/
    /*        0 0 120px 40px rgba(0,147,160,.25),*/
    /*        0 0 220px 80px rgba(45,131,180,.18);*/
}

/* Blobs & Vignette */
.ecms-blob{ position:absolute; filter: blur(38px); opacity:.35; pointer-events:none; z-index:0; }
.ecms-blob--left{
    width:44vw; height:44vw; left:-14vw; top:10%;
    background: radial-gradient(closest-side, rgba(47,167,255,.25), rgba(47,167,255,0));
}
.ecms-blob--right{
    width:42vw; height:42vw; right:-12vw; top:42%;
    background: radial-gradient(closest-side, rgba(41,163,106,.25), rgba(41,163,106,0));
}
.ecms-vignette{
    position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
            linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 24%),
            radial-gradient(1100px 520px at 20% 66%, rgba(0,0,0,.22), transparent 60%);
}

/* Lightbox */
/* Lightbox – Container bleibt wie gehabt */
.ecms-lightbox{
    position:fixed; inset:0; z-index:9999; display:none;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(2px);
    align-items:center; justify-content:center;
    padding: clamp(12px, 3vw, 28px);
}
/* Bildgröße in der Lightbox begrenzen */
.ecms-lightbox img {
    max-width: 90vw;       /* nicht breiter als 90% des Viewports */
    max-height: 80vh;      /* nicht höher als 80% der Bildschirmhöhe */
    height: auto;
    width: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    object-fit: contain;   /* Bild nicht verzerren */
}
.ecms-lightbox[aria-hidden="false"]{ display:flex; }

/* Buttons: absolute innerhalb der Lightbox statt fixed */
.ecms-lb-btn{
    position:absolute;                    /* <- vorher: fixed */
    z-index:10000;
    width:42px; height:42px;
    display:grid; place-items:center;
    border:none; border-radius:999px;
    cursor:pointer; color:#fff;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(4px);
    transition: transform .12s ease, background .2s ease;
}
.ecms-lb-btn:hover{ background: rgba(255,255,255,.18); }

/* Close oben rechts, mit Safe-Area */
.ecms-lb-close{
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
}

/* Pfeile mittig, mit Safe-Area-aware Innenabstand */
.ecms-lb-prev{
    top:50%; transform:translateY(-50%);
    left: max(12px, calc(env(safe-area-inset-left) + 8px));
}
.ecms-lb-next{
    top:50%; transform:translateY(-50%);
    right: max(12px, calc(env(safe-area-inset-right) + 8px));
}

/* Auf sehr kleinen Screens Pfeile noch etwas weiter rein */
@media (max-width: 480px){
    .ecms-lb-prev{ left: max(8px, calc(env(safe-area-inset-left) + 6px)); }
    .ecms-lb-next{ right: max(8px, calc(env(safe-area-inset-right) + 6px)); }
}


@media (prefers-reduced-motion: reduce){
    .ecms-slide, .ecms-slide img, .ecms-lb-btn{ transition:none !important; }
}

.footer-min {
    background-color: #0a0a0a;
    color: #fff;
    padding-top: 30px;
    font-size: 0.95rem;
}

.footer-min__top {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 15px 30px;
}

.footer-min__logo {
    max-width: 260px;
    margin-bottom: 20px;
}

.footer-min__nav {
    margin-bottom: 20px;
}
.footer-min__nav a {
    color: #fff;
    margin: 0 10px;
    text-decoration: none;
    font-weight: 500;
}
.footer-min__nav a:hover {
    color: #0d6efd;
}

.footer-min__tags {
    margin-bottom: 20px;
}
.footer-min__tags .pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 50px;
    margin: 5px;
    font-size: 0.85rem;
}

.footer-min__socials a {
    display: inline-block;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    margin: 0 5px;
    text-align: center;
    font-size: 1.1rem;
    transition: background 0.3s;
}
.footer-min__socials a:hover {
    background: #0d6efd;
}

/* --- Rechtliche Zeile --- */
.footer-min__legal {
    background-color: #050505;
    width: 100%;
}
.footer-min__legal-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.footer-min__legal p {
    margin: 0;
}
.footer-min__legal-nav a {
    color: #fff;
    margin-left: 15px;
    text-decoration: none;
}
.footer-min__legal-nav a:hover {
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .footer-min__legal-wrap {
        flex-direction: column;
        text-align: center;
    }
    .footer-min__legal-nav {
        margin-top: 8px;
    }
}

/* Row */
.btn-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;                   /* Abstand zwischen Buttons */
    align-items:center;
}

/* Basis */
.btn-pro{
    --h: 3rem;
    display:inline-flex;
    gap:.55rem;
    align-items:center;
    justify-content:center;
    height:var(--h);
    padding:0 1.2rem;
    border-radius:14px;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--ui-text);
    text-decoration:none;
    line-height:1;
    transition:
            transform .12s ease,
            box-shadow .25s cubic-bezier(.2,.6,.2,1),
            background .25s ease,
            border-color .25s ease,
            filter .25s ease;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
}
.btn-pro i{ font-size:1.05rem; }

/* PRIMARY – Brand Gradient */
.btn-pro--primary{
    background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
    border:0;
    color:#fff;
    box-shadow:
            0 14px 34px rgba(47,105,152,.35),
            inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn-pro--primary:hover{
    filter:saturate(1.05) brightness(1.02);
    transform:translateY(-1px);
    box-shadow:
            0 18px 42px rgba(47,105,152,.45),
            inset 0 0 0 1px rgba(255,255,255,.10);
}
.btn-pro--primary:active{
    transform:translateY(0) scale(.98);
}

/* GHOST/GLASS – dezenter Sekundärbutton */
.btn-pro--ghost{
    background:linear-gradient(
            to bottom,
            rgba(255,255,255,.08),
            rgba(255,255,255,.06)
    );
    border:1.5px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color:var(--ui-text);
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.btn-pro--ghost:hover{
    background:linear-gradient(
            to bottom,
            rgba(255,255,255,.12),
            rgba(255,255,255,.10)
    );
    border-color:rgba(255,255,255,.28);
    transform:translateY(-1px);
}
.btn-pro--ghost:active{ transform:translateY(0) scale(.98); }

/* Focus-Ring (Accessibility) */
.btn-pro:focus-visible{
    outline:none;
    box-shadow:
            0 0 0 3px rgba(47,167,255,.55),
            0 10px 26px rgba(0,0,0,.35);
}

/* Kleinere Screens */
@media (max-width: 576px){
    .btn-pro{ --h: 2.75rem; padding:0 1rem; }
}