/* -----------------------------
  * Fonts
  * ----------------------------- */
/* work-sans-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
src: url('../../fonts/work-sans-v19-latin-300.eot'); /* IE9 Compat Modes */
src: url('../../fonts/work-sans-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/work-sans-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/work-sans-v19-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/work-sans-v19-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/work-sans-v19-latin-300.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url('../../fonts/work-sans-v19-latin-regular.eot'); /* IE9 Compat Modes */
src: url('../../fonts/work-sans-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/work-sans-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/work-sans-v19-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/work-sans-v19-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/work-sans-v19-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
src: url('../../fonts/work-sans-v19-latin-500.eot'); /* IE9 Compat Modes */
src: url('../../fonts/work-sans-v19-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/work-sans-v19-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/work-sans-v19-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/work-sans-v19-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/work-sans-v19-latin-500.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
src: url('../../fonts/work-sans-v19-latin-600.eot'); /* IE9 Compat Modes */
src: url('../../fonts/work-sans-v19-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/work-sans-v19-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/work-sans-v19-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/work-sans-v19-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/work-sans-v19-latin-600.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: url('../../fonts/work-sans-v19-latin-700.eot'); /* IE9 Compat Modes */
src: url('../../fonts/work-sans-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/work-sans-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/work-sans-v19-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/work-sans-v19-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/work-sans-v19-latin-700.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../../fonts/open-sans-v40-latin-300.eot'); /* IE9 Compat Modes */
src: url('../../fonts/open-sans-v40-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/open-sans-v40-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/open-sans-v40-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/open-sans-v40-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/open-sans-v40-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../../fonts/open-sans-v40-latin-regular.eot'); /* IE9 Compat Modes */
src: url('../../fonts/open-sans-v40-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/open-sans-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/open-sans-v40-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/open-sans-v40-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/open-sans-v40-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src: url('../../fonts/open-sans-v40-latin-500.eot'); /* IE9 Compat Modes */
src: url('../../fonts/open-sans-v40-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/open-sans-v40-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/open-sans-v40-latin-500.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/open-sans-v40-latin-500.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/open-sans-v40-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../../fonts/open-sans-v40-latin-600.eot'); /* IE9 Compat Modes */
src: url('../../fonts/open-sans-v40-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/open-sans-v40-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/open-sans-v40-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/open-sans-v40-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/open-sans-v40-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../../fonts/open-sans-v40-latin-700.eot'); /* IE9 Compat Modes */
src: url('../../fonts/open-sans-v40-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/open-sans-v40-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url('../../fonts/open-sans-v40-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
    url('../../fonts/open-sans-v40-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    url('../../fonts/open-sans-v40-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: #f0f2f5;
    font-family: 'Work Sans', sans-serif;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%) no-repeat fixed,
        url('../images/std.webp') center / cover no-repeat fixed;
}
:root {
	--bs-body-bg: #fff;
	--Sky: #DBEAED;
	--Pearl: #EAEAE8;
	--Poppy: #CE1126;
	--Steel: #282b2e; 
    --SteelOLD: #4D5256; 
	--panel: #ffffff;
    --panel-2: #f3f6ff;
    --Red: #CE1126;
    --Grey: #E1E3E6;
	--card-radius: 30px;
    --shadow: 0 10px 25px rgba(16,23,40,.08);
    --border: #e5e7eb; /* gray-200 */
    --text: #111827; /* gray-900 */
    --muted:#6b7280; /* gray-500 */
    --accent:#2563eb; /* blue-600 */
    --accent-50:#eff6ff; /* blue-50 */
    --range:#dbeafe; /* blue-100 */
    --white:#fff;
    --Green: #93c108;
    --shadow2: 0 8px 24px rgba(0,0,0,.12);
    --radius: 14px;
    --GreyNormal: #EFF0F6;
    --GreyDark: #252525;
    --Success: #0BAA00;
    --GreyBack: #D9D9D9;
    --VPRed: #CE1126;
    --errorback: rgba(212, 46, 42, 0.21);
  }
.blacklink
{
    color: #000000;
}
.blacklink a
{
    color: #000000;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--text-color);
    height: 100vh;
    position: relative;
    overflow: hidden;
    
    /* Vollflächiger Hintergrund ohne Wiederholung */
    
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Startseite */
body.home {
  background-image: url('../images/EGY.webp');
}

/* Kontaktseite */
body.std {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%),
    var(--bg-image);
}

/* Über uns */
body.clear {
  background-image: url('../images/BGClear.jpg');
}
/* Über uns */
body.about {
  background-image: url('../images/bg_about.jpg');
}
input::placeholder {
        font-family: 'Work Sans', sans-serif;
}
.bg-dynamic {
    background-image:
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%),
        var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
h1
{
    color: var(--GreyDark);
    font-weight: 700;
    font-size: 1.6em;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Work Sans', sans-serif;
}
.FontInfoBox
{
    font-size:15px;
    line-height: 18px;
}
.FontSize10
{
    font-size: 10px;
}
.FontSize12
{
    font-size: 12px;
}
.FontSize15
{
    font-size: 15px;
}
.FontSize16
{
    font-size: 16px;
}
.FontSize20
{
    font-size:20px;
}
.FontSize24
{
    font-size:24px;
}
.FontSize26
{
    font-size:26px;
}
.FontSize28
{
    font-size:28px;
}
.FontSize50
{
    font-size:50px;
}
.FontGreyLight
{
    color: var(--Grey);
}
.FontGrey
{
    color: var(--GreyDark);
    font-weight: 350;
}
.FontDark
{
    color: var(--text);
}
.FontColor
{
    color: var(--Red);
}
.FontColorWhite
{
    color: var(--accent-50);
}
.FontGreySmall
{
    color: var(--GreyDark);
    font-size: 14px;
    font-weight: 350;
}
.FontSuccess
{
    font-weight: bolder;
    color: var(--VPRed);
    text-align: center;
    font-size: clamp(32px, 2vw, 42px);
    font-family: 'Work Sans', sans-serif;
}
.FontSuccess2
{
    font-family: 'Work Sans', sans-serif; 
    font-size: 18px;
    line-height: 23px;
    color: var(--GreyDark);
}
.FontBlackMedium
{
    color: #000000;

}
.FontWeight600
{
    font-weight: 600;
}
.LineHeight
{
    line-height: 1em;
}
.responsive-success-icon {
    max-width: 130px;
    width: 100%;
    height: auto;
    display: block; /* Optional: zentriert das Bild */
    margin: 0 auto; /* Optional: zentriert das Bild */
}
.TextLeft
{
    text-align: left;
}
.TextCenter
{
    text-align: center;
}
.TextRight
{
    text-align: right;
}
.DisplayNone
{
    display:none;
}
.DisplayBlack
{
    display:block;
}
.RedIcon
{
    font-size: clamp(24px, 2vw, 24px);
    color: var(--Red);
    flex: 0 0 28px;
    width: 28px;
}
.StableW
{
  flex: 1 1 auto;
  min-width: 0;         /* erlaubt Ellipsis */
}
.StableW50 {
  flex: 0 0 50%;        /* Basis 50%, nicht wachsen, nicht schrumpfen */
  max-width: 50%;       /* stellt sicher, dass es nicht größer wird */
  box-sizing: border-box;
}
.main-nav {
    width: 100%;
    padding: 0px 0px;
    position: relative;
    z-index: 100; /* Gleich wie corner */
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10001; /* HÖCHSTER Wert - immer klickbar */
    position: relative;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: #ffffff; /* ← Weiß */
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative; /* ← WICHTIG: Damit z-index funktioniert */
    z-index: 10000; /* ÜBER Panel (9999) */
    font-family: 'Work Sans', sans-serif;
}

.nav-link {
    display: block;
    padding: 12px 24px;
    text-decoration: none;
    color: var(--accent-50); /* ← Weiß */
    font-weight: 500;
    font-size: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: 'Work Sans', sans-serif;
}

/* Glasmorphismus bei Hover */
.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    color: var(--accent-50);
}
.OnlyMobile
{
    display: none;
}
.NotMobile
{
     opacity: 1;
}
/* Mobile */
@media (max-width: 768px) {
    
    .OnlyMobile
    {
        display: block;
    }
    .NotMobile
    {
        display: none;       /* komplett weg, kein Platz ✓ */
    }
    .nav-toggle {
        display: flex;
    }
    .nav-list {
        position: fixed;
        top: 60px;
        left: 0;
        right: auto;
        width: 280px;
        flex-direction: column;
        z-index: 10000;
        /* ← Glasmorphismus Hintergrund */
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        
        padding: 20px;
        gap: 5px;
        border-radius: 0 20px 20px 0; /* Abgerundet rechts */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.3s ease;
        transform: translateX(-100%);
    }
    
    .nav-list.active {
        max-height: 500px;
        opacity: 1;
        transform: translateX(0);
        z-index: 10000;
    }
    
    .nav-link {
        text-align: left;
        width: 100%;
        color: var(--GreyDark); /* ← Weiß im Mobile-Menü */
    }
    
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.25);
        color: var(--GreyDark);
    }
    
    /* Burger Animation zu X (weiß bleiben) */
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
        background: #ffffff;
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
        background: #ffffff;
    }
}
/* Eck-Elemente */
.corner {
    position: fixed;
    z-index: 100; /* Niedriger als Panel */
    padding: 50px;
}

.corner-top-left {
    top: 0;
    left: 0;
    z-index: 7777;
}

.corner-top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
}


.corner-top-right {
    top: 0;
    right: 0;
    text-align: right;
    z-index: 100; /* ← WICHTIG: IMMER hoch, nicht nur auf Mobile! */
}

.corner-bottom-left {
    bottom: 0;
    left: 0;
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}

.corner-bottom-left a {
    color: #ffffff;
    text-decoration: none;
}

.corner-bottom-right {
    bottom: 0;
    right: 0;
    text-align: right;
}
.corner-bottom-right a {
    color: var(--accent-50);
    text-decoration: none;
}
.corner-text {
    font-size: 14px;
    color: var(--accent-50);
    margin: 0;
}

.corner-text-right {
    font-size: 14px;
    color: var(--accent-50);
    text-decoration: none;
    margin: 0;
}

.logo {
    max-width: 200px;
    height: auto;
    display: block;
}

/* Content Area - Platz für Corner-Elemente */
.content-area {
    padding-top: 100px;
    padding-bottom: 60px;
    padding-left: 100px;
    padding-right: 100px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Anpassungen */
@media (max-width: 1200px) {
    .content-area {
        padding-top: 90px;
        padding-bottom: 60px;
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .corner {
        padding: 40px;
    }
}

@media (max-width: 992px) {
    .content-area {
        padding-top: 80px;
        padding-bottom: 60px;
        padding-left: 60px;
        padding-right: 60px;
    }
    
    .corner {
        padding: 30px;
    }
    
    .logo {
        max-width: 120px;
    }
}

@media (max-width: 768px) {
    .content-area {
        padding-top: 70px;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 60px;
    }
    
    .corner {
        padding: 20px;
    }
    
    .logo {
        max-width: 100px;
    }
    
    .corner-text,
    .corner-text-right {
        font-size: 12px;
    }

    .corner-top-right {
    z-index: 10002; /* ← WICHTIG: Höher als Panel, damit Children darüber sein können */
    }
}

@media (max-width: 576px) {
    .content-area {
        padding-top: 60px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 50px;
    }
    
    .corner {
        padding: 15px;
    }
    
    .logo {
        max-width: 160px;
        margin-left: 0;
        margin-top: 5px;
    }
    
    .corner-text,
    .corner-text-right {
        font-size: 11px;
    }
    
    /* Navigation anpassen für mobile */
    .corner-top-right {
        max-width: calc(100% - 120px); /* Platz für Logo lassen */
    }
}

@media (max-width: 450px) {
    .content-area {
        padding-top: 50px;
        padding-bottom: 40px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .corner {
        padding: 10px;
    }
    
    .logo {
        max-width: 160px;
        margin-left: 0;
        margin-top: 7px;
    }
    
}
@media (max-width: 750px) {
    .StableW50 {
         flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 500px) {
  .StableW {
   width:100%;
   text-align: left;
  }
}
.FlexRow {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
}
.FlexRowMobile {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: left;
}
.FlexRowStayRow {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
}
.FlexRowNoWrapDisclaimer {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start; /* ← NEU */
}
.FlexRowNoWrapDisclaimer > div:first-child {
    display: flex;
    align-items: flex-start;
}
.FlexRowNoWrapDisclaimer input[type="checkbox"] 
{
    accent-color: var(--Red);
    margin: 0px;
    padding: 0px;
}
.FlexRowSwitch
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
}
@media (max-width: 500px) {
  .FlexRowSwitch {
    flex-direction: column; /* Stapelt die Blöcke vertikal */
  }
  .FlexRowSwitch > .W200 {
    order: -1;  /* Bild an den Anfang */
    margin-bottom: 1rem; /* Abstand darunter */
    width:100%;
  }
}
.FlexWrapNoWrap
{
    flex-wrap: nowrap;
}
.MargTop10
{
    margin-top: 10px;
}
.MargTop20
{
    margin-top: 20px;
}
.MargTop40
{
    margin-top: 40px;
}
.MargBottom10
{
    margin-bottom: 10px;
}
.MargBottom20
{
    margin-bottom: 20px;
}
.MargLeft20
{
    margin-left: 20px;
}
.MargLeft30
{
    margin-left: 30px;
}
.MargLeft40
{
    margin-left: 40px;
}
.Gap10
{
	gap: 10px;
}
.Gap12
{
	gap: 12px;
}
.Gap15
{
	gap: 15px;
}
.Gap20
{
	gap: 20px;
}
.Gap25
{
	gap: 25px;
}
.Padding7
{
    padding: 7px;
}
.Padding10
{
    padding: 10px;
}


.FlexColumn
{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
}
.JustifyItemsLeft
{
    justify-items: left;
    justify-content: left;
}
.JustifyItemsCenter
{
    justify-content: center;
}
.JustifyContentSpaceBetween
{
	justify-content: space-between
}
.JustifyContentCenter
{
	justify-content: center;
}
.JustifyItemsRight
{
	justify-items: right;
	justify-content: right;
}
.JustifyItemsCenter
{
	justify-content: center;
}
.JustifyItemsCenter-I
{
	justify-items: center;
}
.JustifyContentEnd
{
	justify-content: flex-end;
}

.JustifyContentSpaceAround
{
	justify-content: space-around;
}
.AlignItemsCenter
{
	align-items: center;
}
.AlignItemsCenterMobile
{
	align-items: center;
}
@media (max-width: 500px) {
  .AlignItemsCenterMobile {
    align-items: baseline;
  }
}
.AlignItemsFlexEnd
{
    align-items: flex-end;
}
.AlignContentCenter
{
	align-content: center;
}
.AlignContentFlexEnd
{
    align-content: flex-end;
}
.AlignItemsBaseline
{
    align-items: baseline;
}
.TextVerticalTop
{
    align-items: initial;
}
.panel-outer {
    width: 100%;
    max-width: 710px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--card-radius);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    margin: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    position: relative;
    color: var(--panel-text, #111827);
}

.panel {
    padding: 54px;
    padding-bottom: 40px;
    padding-top: 40px;
    box-sizing: border-box;
    max-height: calc(100vh - 160px); /* 100px top + 60px bottom padding */
    overflow-y: auto;
    overflow-x: hidden;
}

.panel::-webkit-scrollbar {
    width: 5px;
}
.panel::-webkit-scrollbar-track {
    background: transparent;
    margin: calc(var(--card-radius) + 4px) 0;
}
.panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

/* Embedded / iframe-Modus: body hat keine Klasse, Corners fehlen */
body:not(.std) {
    height: auto !important;
    overflow-x: hidden;
    overflow-y: visible !important;
}
body:not(.std) .content-area {
    height: auto !important;
    min-height: 0 !important;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
body:not(.std) .panel {
    max-height: 800px;
    overflow-y: auto;
}

/* Heller Rahmen links und unten */
.panel-outer::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.lang-select {
  position: relative;
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
}

.lang-btn {
  background: none;
  border: none;
  font-size: 15px;
  color: var(--GreyDark);
  cursor: pointer;
}

.lang-btn:focus {
  outline: none;
}

.lang-menu {
  font-family: 'Work Sans', sans-serif;
position: absolute;
  top: 100%;
  left: 0;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: none;
  min-width: 60px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 100;
  font-size: 16px;
}

.lang-menu li {
  padding: 8px 12px;
  cursor: pointer;
  
}

.lang-menu li:hover {
  background: #f0f0f0;
}
.CircleRed
{
    width: 5vw;           /* 5% der Viewport-Breite, passt sich an */
    height: 5vw;          /* gleiche Höhe für Kreis */
    max-width: 30px;
    max-height: 30px;
    font-size:20px;
    background: var(--Red);
    border-radius: 20px;
    color: #ffffff;
    text-align: center;
    padding: 5px;
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    font-weight: 300;
}
.CircleGrey
{
    width: 5vw;           /* 5% der Viewport-Breite, passt sich an */
    height: 5vw;          /* gleiche Höhe für Kreis */
    max-width: 30px;
    max-height: 30px;
    font-size:20px;
    color: var(--GreyDark);
    background: color-mix(in srgb, var(--accent-50) 40%, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    text-align: center;
    padding: 5px;
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    font-weight: 300;
}
.CircleRed2
{
    width: 5vw;           /* 5% der Viewport-Breite, passt sich an */
    height: 5vw;          /* gleiche Höhe für Kreis */
    max-width: 35px;
    max-height: 35px;
    font-size:20px;
    background: var(--Red);
    border-radius: 20px;
    color: #ffffff;
    text-align: center;
    padding: 5px;
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    font-weight: 300;
}
.CircleGrey2
{
    width: 5vw;           /* 5% der Viewport-Breite, passt sich an */
    height: 5vw;          /* gleiche Höhe für Kreis */
    max-width: 35px;
    max-height: 35px;
    font-size:20px;
    color: var(--GreyDark);
    background: color-mix(in srgb, var(--accent-50) 40%, 0.2);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    text-align: center;
    padding: 5px;
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
    font-weight: 300;
}
@media (max-width: 500px) {
  .CircleRed,
  .CircleGrey {
    font-size: 0;        /* Schriftgröße auf 0, Text wird unsichtbar */
  }
}
.bar{
width: 11vw;
max-width: 105px;
min-width: 30px;
height: 1.2vw;
max-height: 12px;
min-height: 6px;
border-radius: 999px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2), inset 0 4px 3px rgba(0, 0, 0, 0.4), inset 0 -3px 4px rgba(255, 255, 255, 0.08);
}
.bar2{
    width: 12vw;              /* Breite relativ zur Viewport-Breite */
    max-width: 165px;         /* Maximalgröße */
    min-width: 30px;          /* Mindesgröße */
    height: 1.2vw;            /* Höhe relativ skalieren */
    max-height: 12px;         /* Max-Höhe */
    min-height: 6px;          /* Min-Höhe */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2), inset 0 4px 3px rgba(0, 0, 0, 0.4), inset 0 -3px 4px rgba(255, 255, 255, 0.08);
    border-radius: 999px;  /* runde Enden */
    overflow: hidden;
}
.bar__fill{
  width: var(--p, 0%);   /* Prozentwert hierher */
  height: 100%;
  background: var(--VPRed);   /* Rot der Füllung */
  border-radius: inherit;
  transition: width .4s ease; /* sanftes Füllen */
}
.bar__fill{ animation: fill .6s ease forwards; }
@keyframes fill{ from{width:0} to{width:var(--p,0%)} }
.Line
{
    border-bottom: 2px solid var(--GreyNormal);
    margin-top:20px;
    margin-bottom:20px;
}
.InnerContent
 {
    margin-top: 20px;
    padding: 32px;
    border-radius: 15px;
    border:0px solid var(--Grey);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    background: rgba(255, 255, 255, 0.2);
 }
 .InnerContentText
 {
    color: var(--GreyDark);
    font-size:16px;
    font-family: 'Work Sans', sans-serif;
 }
 .PriceLabel
 {
    font-size:24px;
    font-weight: bold;
    color: #000000;
    font-family: 'Work Sans', sans-serif;
 }
 .MargTop20Price
 {
    margin-top:20px;
 }
 .ImageCard
{
    width: 200px;
    height: 140px;
    border-radius: 15px;
    background-size: cover; 
    background-position: center;
}
@media (max-width: 500px) {
     .ImageCard
     {
        width: 100%;
        height: 140px;
        border-radius: 15px;
        background-size: cover; 
        background-position: center;
     }
    .PriceLabel
    {
        font-size:17px;
        font-weight: bold;
        color: #000000;
        font-family: 'Work Sans', sans-serif;
    }
    .MargTop20Price
    {
        margin-top:12px;
    }
}
 .ImageCardSmall
{
    width: 80px;
    height: 56px;
    border-radius: 5px;
    background-size: cover; 
    background-position: center;
}
.InputLabel
{
    font-size: 1.0em;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Work Sans', sans-serif;
}
.GreenBox
{
    background-color: var(--Green);
    padding: 10px;
    border-radius: 5px;
    color: #000000;
    width: 100%;
    border: 1px solid var(--Green);
}
.btn 
{
    background-color: var(--Red);
    padding: 10px;
    border-radius: 5px;
    color: #ffffff;
    width: 100%;
    border: 1px solid var(--Red);
    height: 45px;
    font-family: 'Work Sans', sans-serif;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;

}
.btn:hover
{
    background-color: var(--bs-body-bg);
    color: var(--Red);
}
.btn:disabled,
.btn[disabled]
{
    background-color: var(--muted);
    border-color: var(--muted);
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}
.btn:disabled:hover,
.btn[disabled]:hover
{
    background-color: var(--muted);
    border-color: var(--muted);
    color: #ffffff;
}
.btndisabled
{
    background-color: var(--muted);
    padding: 10px;
    border-radius: 5px;
    color: #ffffff;
    width: 100%;
    border: 1px solid var(--muted);
    height: 45px;
    font-family: 'Work Sans', sans-serif;
    cursor: pointer;
    font-weight: bold;
}
.btnRedBorder
{
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0px solid rgba(255, 255, 255, 0.3);
    padding: 10px;
    border-radius: 5px;
    color: var(--Red);
    width: 100%;
    border: 0px solid var(--Red);
    height: 45px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
}
.btnRed:hover
{
    background-color: var(--bs-body-bg);
    color: var(--Red);
}
.btnClear
{
    background: transparent;
    border:0px;
    padding: 10px;
    border-radius: 5px;
    color: #252525;
    width: 100%;
    height: 30px;
    font-family: 'Work Sans', sans-serif;
    cursor: pointer;
    font-size: 18px;
}
.DropDownFrame
{
    padding: 12px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid var(--Grey);
    width: 100%;
    color: var(--Steel);
}

@media (max-width: 768px)
{
    .DropDownFrame
    {
        font-size: 16px;
    }
}
.NoFrame
{
    border: 0px;
}
.InputGroup {
    min-width: 200px; /* Mindestbreite statt max-width */
    max-width: 280px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Wichtig für gleichmäßige Verteilung */
    font-size: 13px;
    color: var(--GreyDark);
}
.InputGroup100 {
    min-width: 200px; /* Mindestbreite statt max-width */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1; /* Wichtig für gleichmäßige Verteilung */
    font-size: 13px;
    color: var(--GreyDark);
}
@media (max-width: 700px) {
    .InputGroup {
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }
}
.CeckoutLabel
{
    border-radius: 15px;
    padding: 15px;
    width: 100%;
    border: 0px solid var(--Grey);
    display: flex;
    flex-direction: row;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    background: rgba(255, 255, 255, 0.2);
}
.CeckoutLabel h1
{
    font-size: 26px;
}
.CeckoutLabel:hover
{
    border:0px solid var(--Red);
    box-shadow: 0 2px 10px rgba(206,17,38,0.3);
}
.CeckoutLabel2
{
    border-radius: 15px;
    padding: 15px;
    width: 100%;
    border: 0px solid var(--Grey);
    display: flex;
    flex-direction: row;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    background: rgba(255, 255, 255, 0.2);
}
.CeckoutLabel2 h1
{
    font-size: 26px;
}
@media (max-width: 700px) {
   .CeckoutLabel2 h1
{
    font-size: 20px;
}
}
.CeckoutLabel2:hover
{
    border:0px solid var(--Red);
    
}
.CeckoutLabelNoBrder
{
    border-radius: 15px;
    padding: 15px;
    width: 100%;
    border: 0px solid var(--Grey);
    display: flex;
    flex-direction: row;
}
.CeckoutLabelNoBrderNoPadding
{
    border-radius: 15px;
    width: 100%;
    border: 0px solid var(--Grey);
    display: flex;
    flex-direction: row;
}

.PriceDescr
{
    color: var(--Red);
    font-size: 16px;
}
.PriceDescr2
{
    color: var(--GreyDark);
    font-size: 14px;
    position: relative;
    display: inline-block;
}
.RadioRedBig
{
    accent-color: var(--Red);
    width:15px;
    height: 15px;
}
.CAR {
  flex: 0 0 50px;    /* Kein Wachstum, kein Schrumpfen, basis: 50px */
  max-width: 50px;
  min-width: 40px;    /* Optional: Konsistente Mindestgröße */
}

.PriceMiddle {
  flex: 1 1 150px;    /* Wächst und schrumpft, basis: 150px, aber flexibel */
  min-width: 100px;   /* Optional: Lesbarkeit sichern */
  font-family: 'Work Sans', sans-serif;
}
.PriceMiddleCheckout {
  flex: 1 1 220px;    /* Wächst und schrumpft, basis: 150px, aber flexibel */
  min-width: 160px;   /* Optional: Lesbarkeit sichern */
  font-family: 'Work Sans', sans-serif;
}
.PriceMiddle2 {
  flex: 1 1 150px;    /* Wächst und schrumpft, basis: 150px, aber flexibel */
  min-width: 100px;   /* Optional: Lesbarkeit sichern */
  font-family: 'Work Sans', sans-serif;
}
.PriceRight {
  flex: 0 1 150px;     /* Bleibt am rechten Rand, schrumpft bei Platzmangel */
  text-align: right;
  min-width: 100px;    /* Optional: Mindestens sichtbar */
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
  position: relative;
}
.sw-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--Steel);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 101;
}
.sw-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--Steel);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}
.sw-tooltip:hover::before,
.sw-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.PriceRight2 {
  flex: 0 1 150px;     /* Bleibt am rechten Rand, schrumpft bei Platzmangel */
  text-align: right;
  min-width: 100px;    /* Optional: Mindestens sichtbar */
  font-size: 16px;
  font-family: 'Work Sans', sans-serif;
}
@media (max-width: 700px) {
    .PriceMiddle
    {
         flex: 1 1 130px;
        font-size: 20px;
    }
    .PriceMiddle h1
    {
        font-size: 20px;
    }
    .PriceMiddleCheckout {
    font-size: 20px;
    }
    .PriceMiddle2 {
    flex: 1 1 170px;    /* Wächst und schrumpft, basis: 150px, aber flexibel */
    min-width: 150px;   /* Optional: Lesbarkeit sichern */
    font-family: 'Work Sans', sans-serif;
    font-size: 17.6px;
    }
    .PriceRight2 {
        max-width: 100px;
    }
    .CeckoutLabel h1
    {
        font-size: 20px;
    }
    .CAR {
    flex: 0 0 30px;    /* Kein Wachstum, kein Schrumpfen, basis: 50px */
    max-width: 50px;
    min-width: 30px;    /* Optional: Konsistente Mindestgröße */
    }
    .PriceDescr
    {
        font-size:14px;
        line-height: 9px;
    }
}
/*** Kalenderfunktionen ***/
.kalender-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #666;
    user-select: none;
}

.kalender-icon:hover {
    color: #333;
}
      .zeitraum-container {
            max-width: 400px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        .input-gruppe {
            margin-bottom: 20px;
            position: relative;
        }

        label {
            
            margin-bottom: 4px;
            font-weight: 500;
            color: var(--GreyDark);
            font-size: 16px !important;
            font-family: 'Work Sans', sans-serif;
        }
        select, input[type="text"] {
            /* width: 100%; ← Nur außerhalb von Flexbox */
            padding: 12px;
            max-width: 100%; /* Wichtig: Input nimmt volle Container-Breite */
            border: 1px solid var(--Grey);
            border-radius: 5px;
            font-size: 16px;
            color: var(--GreyDarkOld);
            cursor: text;
            background: rgba(255, 255, 255, 0.4);
            transition: all 0.2s;
            box-sizing: border-box; /* Wichtig */
            font-family: inherit;
            height: 45px;
            padding-right: 4rem; /* mehr Platz zwischen Text und Pfeil */
            font-family: 'Work Sans', sans-serif;
        }
        input[type="text"]:focus {
            outline: none;
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }
        input[type="text"][readonly] {
            color: var(--GreyDark);
        }
        #zeitraum {
            color: var(--GreyDark);
        }
        #zeitraum::placeholder {
            color: var(--GreyDark);
        }
        select:not([class*="flex"]) {
            width: 100%;
            padding-right: 4rem; /* mehr Platz zwischen Text und Pfeil */
            background: rgba(255, 255, 255, 0.4);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1,1 L6,7 L11,1'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 10px 6px;
        }
        input[type="text"]:not([class*="flex"]) {
            width: 100%;
            padding-right: 4rem; /* mehr Platz zwischen Text und Pfeil */
            background: rgba(255, 255, 255, 0.4);
        }
        input[type="date"] {
            width: 100%;
            max-width: 100%; /* Wichtig: Input nimmt volle Container-Breite */
            padding: 12px;
            border: 1px solid var(--Grey);
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.4);
            transition: all 0.2s;
            box-sizing: border-box; /* Wichtig */
        }

        input[type="date"]:focus {
            outline: none;
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
        }
        select.highlight {
            border: 0px solid var(--Red);
            box-shadow: 0 0 8px rgba(206, 17, 38, 0.3),
                        0 0 5px rgba(206, 17, 38, 0.3);
            animation: pulse-border 1.5s ease-in-out infinite;
        }

        @keyframes pulse-border {
            0%   { box-shadow: 0 0 8px rgba(206, 17, 38, 0.6), 0 0 8px rgba(206, 17, 38, 0.3); }
            50%  { box-shadow: 0 0 14px rgba(206, 17, 38, 0.9), 0 0 20px rgba(206, 17, 38, 0.5); }
            100% { box-shadow: 0 0 8px rgba(206, 17, 38, 0.6), 0 0 8px rgba(206, 17, 38, 0.3); }
        }
        /* Mobile Spezifisch */
        @media (max-width: 768px) {
            input[type="date"] {
                font-size: 16px; /* ← Verhindert Auto-Zoom auf iOS */
                padding: 10px; /* ← Weniger Padding auf Mobile */
                max-width: 94%;
            }
        }
        input[type="radio"] {
            accent-color: var(--Red);
            }
        input[type="checkbox"] {
            accent-color: var(--Red);
            }
        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;

            width: 100%;
            padding: 12px;
            padding-right: 3rem; /* Platz für Pfeil */
            height: 45px;

            border: 1px solid var(--Grey);
            border-radius: 5px;
            font-size: 14px;
            font-family: 'Work Sans', sans-serif;
            background: rgba(255, 255, 255, 0.4);

            /* Eigener Pfeil als SVG-Icon */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1,1 L6,7 L11,1'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center; /* 🔹 hier Abstand einstellen */
            background-size: 10px 6px;

            box-sizing: border-box;
            transition: all 0.2s;
            cursor: pointer;
            }

            select:focus {
            outline: none;
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
            }
    .kalender {
    position: fixed;
    margin-top: 8px; /* ← Abstand nach unten */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none; /* ← Zurück auf none */
    width: 320px;
    max-width: 90vw;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    font-family: 'Work Sans', sans-serif;
    }
        .datum-bereich {
            padding: 16px 20px;
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
            font-size: 13px;
            color: #6b7280;
            text-align: center;
        }

        .kalender-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px 16px;
        }

        .nav-button {
            background: none;
            border: none;
            color: #6b7280;
            font-size: 16px;
            cursor: pointer;
            padding: 8px;
            border-radius: 6px;
            transition: all 0.2s;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-button:hover {
            background: #f3f4f6;
            color: #374151;
        }

        .monat-jahr {
            font-weight: 600;
            font-size: 16px;
            color: #111827;
        }

        .kalender-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            padding: 0 24px 20px;
        }
        #kalender-tage {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px; /* Abstand zwischen den Tagen, optional */
        }
        .wochentag {
            padding: 8px 0;
            text-align: center;
            font-weight: 500;
            font-size: 11px;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tag {
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: 400;
            transition: all 0.2s;
            border-radius: 50px;
            margin: 1px;
            position: relative;
        }

        .tag:hover {
            background: #f3f4f6;
        }

        .tag.anderer-monat {
            color: #d1d5db;
        }

        .tag.anderer-monat:hover {
            background: transparent;
        }

        .tag.heute {
            font-weight: 600;
            color: #ef4444;
        }

        .tag.von {
            background: #ef4444;
            color: white;
            font-weight: 500;
        }

        .tag.bis {
            background: #ef4444;
            color: white;
            font-weight: 500;
        }

        .tag.zwischen {
            background: #fef2f2;
            color: #ef4444;
        }

        .tag.von-bis-einzeln {
            background: #ef4444;
            color: white;
            font-weight: 500;
        }

        /* Für den runden Bereich der Auswahl */
        .tag.von::before,
        .tag.bis::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #ef4444;
            border-radius: 45px;
            z-index: -1;
        }

        /* Verbindungslinien zwischen den Tagen */
        .tag.zwischen::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -1px;
            right: -1px;
            background: #fef2f2;
            z-index: -2;
        }

        .tag.von::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: -1px;
            width: 50%;
            background: #fef2f2;
            z-index: -2;
        }

        .tag.bis::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -1px;
            width: 50%;
            background: #fef2f2;
            z-index: -2;
        }

        .wochenzeile {
            display: contents;
        }

        .wochenzeile:first-child .tag.von::after,
        .wochenzeile:last-child .tag.bis::after {
            display: none;
        }
@media (max-width: 700px) {
    .panel-outer {
        margin: 10px;
    }
    .panel {
        padding: 32px;
        max-height: calc(100vh - 130px); /* 70px top + 60px bottom */
    }

    .FlexRow {
        flex-direction: column; /* Spalten werden gestapelt */
        gap: 15px;
    }
    
    
    .Gap25 {
        gap: 15px; /* Kleinerer Gap auf mobilen Geräten */
    }
    
    h1 {
        font-size: 1.6em; /* Kleinere Überschrift auf mobilen Geräten */
    }
    
    /* Kalender auf mobilen Geräten */
    .kalender {
        width: 300px;
        max-width: calc(100vw - 20px); /* Berücksichtigt Seitenränder */
        left: 10px !important; /* Überschreibt JavaScript-Positionierung */
    }
}
@media (max-width: 560px) {
    html, body {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .panel-outer {
        margin: 10px;
        width: calc(100vw - 20px);
        max-width: none;
    }
    .panel {
        padding: 32px;
        max-height: calc(100vh - 110px); /* 60px top + 50px bottom */
    }
    
    .FlexRow {
        flex-direction: column; /* Forciert Spalten-Layout */
        gap: 10px;
    }
    
    .InputGroup {
        width: 100%;
        max-width: 100%;
        min-width: 0; /* Entfernt min-width */
    }
    
    /* Alle Input-Elemente */
    input[type="text"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    /* Labels responsive */
    label {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    /* Button responsive */
    .btn {
        padding: 12px;
        font-size: 16px;
        height: 45px;
    }
    
    /* Überschrift kleiner */
    h1 {
        font-size: 20px;
        margin: 0 0 10px 0;
    }
    
    /* Gap reduzieren */
    .Gap25 {
        gap: 10px;
    }
    
    .Gap10 {
        gap: 5px;
    }
    
    /* Kalender für sehr kleine Bildschirme */
    .kalender {
        width: calc(100vw - 30px);
        max-width: calc(100vw - 30px);
        left: 15px !important;
        right: 15px;
    }
    
    .kalender-header {
        padding: 12px 15px 10px;
    }
    
    .kalender-grid, #kalender-tage {
        padding: 0 15px 15px;
    }
    
    .tag {
        height: 32px; /* Kleinere Tage für mehr Platz */
        font-size: 13px;
    }
    
    .wochentag {
        font-size: 10px;
        padding: 6px 0;
    }
}
@media (max-width: 500px) {
    .panel-outer {
        margin: 5px;
    }
    .panel {
        padding: 32px;
        max-height: calc(100vh - 90px); /* 50px top + 40px bottom */
    }
    
    .kalender {
        width: 280px;
        max-width: calc(100vw - 10px);
        left: 5px !important;
    }
    
    .kalender-header {
        padding: 15px 20px 12px;
    }
    
    .kalender-grid {
        padding: 0 20px 15px;
    }
}
*, *::before, *::after {
    box-sizing: border-box;
}
.basic-input { 
            max-width: 100%; /* Wichtig: Input nimmt volle Container-Breite */
            padding: 12px;
            border: 1px solid var(--Grey);
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            background: white;
            transition: all 0.2s;
            box-sizing: border-box; /* Wichtig */
} 
.basic-input:focus { outline: none; border-color: var(--Red); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
/* Row-Container */
.FlexRow.flex-container{
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  align-items:flex-start;
}

/* Einleitung über volle Breite */
.FlexRow.flex-container > .W100P{
  flex:0 0 100%;
}

/* === MOBILE FIRST: < 600px genau 1 Spalte === */
.FlexRow.flex-container > .StableW{
  flex:1 0 100%;     /* volle Spaltenbreite */
  min-width:0;       /* darf schrumpfen */
  max-width:100%;
  width:100%;        /* Sicherheit, falls irgendwo width:auto gesetzt war */
}

/* Label oben, Control darunter */
.FlexRow.flex-container > .StableW.FlexColumn{
  display:flex;
  flex-direction:column;
}

/* Controls füllen IMMER die Spalte */
.FlexRow.flex-container > .StableW > input,
.FlexRow.flex-container > .StableW > select,
.FlexRow.flex-container > .StableW > textarea{
  width:100% !important; /* überstimmt evtl. width:auto */
  min-width:0;
  box-sizing:border-box;
  flex:0 0 auto;         /* neutralisiert evtl. flex:1-Regeln auf Inputs */
}

/* Ungültige Inline-Styles wie style="width:px" neutralisieren */
.FlexRow.flex-container > .StableW [style*="width:px"]{
  width:100% !important;
}

/* Headline/Paragraph kompakter, damit Gap nicht riesig wirkt */
.InnerContentText h1{ margin:0 0 8px; }
.InnerContentText p { margin:0; font-family: 'Work Sans', sans-serif;}
@media (max-width:500px) {
    .InnerContentText
    {
       text-align: left;
    }
    .InnerContentText h1
    {
        margin:0 0 4px;
    }
}
@media (max-width:500px) {
    .TextResponsive
    {
        text-align: center;
    }
    .FlexRow.flex-container
    {
        gap: 16px;
    }
}
/* === AB 600px: exakt 2 Spalten === */
@media (min-width:600px){

  .FlexRow.flex-container > .StableW{
    /* zwei Spalten + 25px Spaltengap */
    flex:0 0 calc((100% - 25px)/2);
    min-width:0;    /* wichtig: keine Minbreite blockiert das Layout */
    width:auto;
  }
  .FlexRow.flex-container h1
  {
    font-size: 20px;
  }
}
.PlusButton{
    width: 60px;
    height: 45px;
    border: 1px solid var(--Grey);
    color: var(--Grey);
    text-align: center;
    font-size: 26px;
    border-radius: 7px;
    display: flex;              /* neu */
    align-items: center;        /* vertikal zentrieren */
    justify-content: center;    /* horizontal zentrieren */
}
.PlusButton:hover
{
    background-color: var(--Red);
}
  /* Konfetti-Layer: liegt ganz oben, blockiert keine Klicks */
  .confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
  }

  .confetti {
    position: absolute;
    top: -10vh;
    width: var(--size, 8px);
    height: calc(var(--size, 8px) * 0.6);
    background: var(--color, #ff7a59);
    left: var(--x, 50%);
    transform: translateZ(0);
    border-radius: 1px;
    opacity: 0;
    animation: fall var(--dur, 3.5s) linear var(--delay, 0s) 1 both,
               sway var(--dur, 3.5s) ease-in-out var(--delay, 0s) 1 both;
    /* etwas 3D-Schimmer */
    box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.08) inset;
  }

  /* Dreieck & Streifen-Varianten */
  .confetti.is-tri { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
  .confetti.is-bar { height: calc(var(--size, 8px) * 2); border-radius: 2px; }

  @keyframes fall {
    0%   { transform: translate3d(0, -10vh, 0) rotateX(0) rotateZ(0); opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: translate3d(var(--drift, 0px), 110vh, 0) rotateX(720deg) rotateZ(720deg); opacity: 0.98; }
  }

  @keyframes sway {
    0%   { margin-left: 0; }
    50%  { margin-left: calc(var(--sway, 24px) * -1); }
    100% { margin-left: var(--sway, 24px); }
  }

  /* Respektiert Nutzer, die Animationen reduzieren */
  @media (prefers-reduced-motion: reduce) {
    .confetti { animation: none; opacity: 0; }
  }
  .form-input.error {
            border-color: #e74c3c;
            background: #fff5f5;
            animation: shake 0.5s ease-in-out;
        }

        .error-message {
            display: none;
            position: relative;
            top: 100%;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            padding: 12px 15px;
            border-radius: 0 0 12px 12px;
            font-size: 14px;
            font-weight: 500;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            pointer-events: none;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);

        }

        .error-message::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #e74c3c;
        }

        .error-message.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
            animation: shake 0.5s ease-in-out;
        }
		/* Schließen-Button */
		.error-message .close-btn {
		position: absolute;
		top: 4px;
		right: 6px;
		background: transparent;
		border: none;
		color: white;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		line-height: 1;
		}

		.error-message .close-btn:hover {
		color: #f1c0c0;
		}
        .error-icon {
            display: inline-block;
            margin-right: 8px;
            font-size: 16px;
        }

        .form-input.success {
            border-color: #27ae60;
            background: #f8fff8;
        }
        @keyframes shake {
            0%, 20%, 40%, 60%, 80%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-5px);
            }
        }
        /* 📌 Container */
        .upload-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .upload-containerIN {
            width: 100%;
            margin-bottom: 20px;
        }
        .upload-containerIN2C {
            width: 100%;
            margin-bottom: 20px;
            display: flex;
            flex-direction: row;
            gap:15px;
        }
        @media (max-width: 768px) {
            .upload-containerIN2C {
            width: 100%;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            gap:15px;
            }
         }
         /* 📌 Hidden File Input */
        #desktopFileInput {
            display: none;
        }
        /* 📌 Mobile-Only Elemente (Standard versteckt) */
        .mobile-only {
            display: none;
        }

        /* 📌 Desktop-Only Elemente */
        .desktop-only {
            display: flex;
            flex-direction: column;
        }
        .selfieupload
        {
            min-height: 150px;
			width:100%;
            border: 1px solid var(--GreyDark);
            border-radius: 12px;
            background: color-mix(in srgb, var(--GreyNormal) 40%, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            padding: 40px 20px;
            position: relative;
        }
        /* 📌 Drag & Drop Zone für Desktop */
        .drop-zone {
            min-height: 150px;
			width:100%;
            border: 1px solid var(--GreyDark);
            border-radius: 12px;
            background: color-mix(in srgb, var(--GreyNormal) 40%, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            padding: 40px 20px;
            position: relative;
        }
        .Border1Grey
        {
            border: 1px solid var(--GreyDark);
            border-radius: 12px;
        }
        .drop-zone:hover {
            border-color: #0056b3;
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            transform: translateY(-2px);
        }

        .drop-zone.dragover {
            border-color: #28a745;
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            transform: scale(1.02);
        }

        .drop-zone-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: #007bff;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .drop-zone-icon img{
        display:block;        /* keine Lücke unterhalb */
        max-width:300px;       /* niemals breiter als Container */
        height:auto;          /* Seitenverhältnis bewahren */
        object-fit:contain;   /* falls zusätzlich Höhe begrenzt wird */
        }
        .drop-zone-iconSM {
            font-size: 38px;
            margin-bottom: 16px;
            color: #007bff;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .drop-zone-iconSM img{
        display:block;        /* keine Lücke unterhalb */
        max-width:100px;       /* niemals breiter als Container */
        height:auto;          /* Seitenverhältnis bewahren */
        object-fit:contain;   /* falls zusätzlich Höhe begrenzt wird */
        }
        .drop-zone h3 {
            margin: 0 0 12px 0;
            color: #333;
            font-size: 24px;
        }

        .drop-zone p {
            margin: 0;
           
            line-height: 1.4;
        }

        /* 📌 Hidden File Input */
        #desktopFileInput {
            display: none;
        }

        /* 📌 Upload Status */
        .upload-status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            display: none;
        }

        .upload-status.success {
            background: rgba(234, 243, 222, 0.4);
            border: 0.5px solid #97C459;
            border-radius: 12px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            flex-direction: row;
            color: #27500A;
        }

        .upload-status.success .statusText {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
        }

        .upload-status.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
            display: block;
        }

        .upload-status.loading {
            background: #cce5ff;
            border: 1px solid #99d3ff;
            color: #004085;
            display: block;
        }

        /* 📌 Mobile Styles */
        @media (max-width: 768px) {
            .mobile-only {
                display: block;
            }
            
            .desktop-only {
                display: none;
            }

            .upload-container {
                padding: 15px;
            }
        }

        /* 📌 Mobile UI Elemente */
        .Camera
        {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        .mobile-controls2 {
            text-align: center;
            margin-bottom: 20px;
            display:flex;
            flex-direction: column;
            width:100%;
        }
        .mobile-controls2 select,
        .mobile-controls2 button,
        .mobile-controls2 input[type="file"] {
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            width:100%;
            max-width: 200px;
        }
        .mobile-controls2 button.danger {
            background: #dc3545;
            color: var(--accent-50);
        }

        .mobile-controls2 button.danger:hover {
            background: #c82333;
        }

        .mobile-controls2 button.success {
            background: #28a745;
            border: 1px solid #28a745;
            color: var(--GreyDark);
        }

        .mobile-controls2 button.success:hover {
            background: #218838;
        }

        .mobile-controls {
            text-align: center;
            margin-bottom: 20px;
        }
        .mobilefileinput2
        {
            max-width: 150px;
        }
        .mobile-controls select,
        .mobile-controls input[type="file"] {

            padding: 12px 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            width: 100%;
        }

        .mobile-controls button.danger {
            background: transparent;
            border: 1px solid #dc3545;
            color: #dc3545;
            padding: 8px 20px;
            border-radius: 8px;
            font-size: 14px;
            width: 100%;
            margin-top: 8px;
        }

        .mobile-controls button.danger:hover {
            background: #dc3545;
            color: #fff;
        }

        .mobile-controls button.success {
            background: #28a745;
            border: 1px solid #28a745;
            color: var(--accent-50);
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 16px;
            width: 100%;
            font-weight: 500;
            font-family: 'Work Sans', sans-serif;
        }

        .mobile-controls button.success:hover {
            background: #218838;
        }

        /* 📌 Video für Mobile */
        #video {
            width: 100%;
            max-width: 300px;
            height: auto;
            border: 2px solid #ddd;
            border-radius: 8px;
            margin: 0 auto 15px auto;
        }
        .video 
        {
            width:95%;
        }
        /* 📌 Vorschau Container */
        .preview-container {
            min-height: 80px;
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.15);
            margin: 15px 0;
            text-align: center;
            width:98%;
        }

        .preview-container:empty::before {
            content: "Vorschau erscheint hier...";
            color: #999;
            font-style: italic;
        }

        /* 📌 Einzelne Dateivorschau */
        .file-preview {
            display: inline-block;
            position: relative;
            margin: 5px;
            transition: transform 0.2s;
        }

        .file-preview:hover {
            transform: scale(1.05);
        }

        .file-preview img,
        .file-preview .pdf-icon {
            width: 120px;
            height: 90px;
            object-fit: cover;
            border: 2px solid #ddd;
            border-radius: 4px;
        }

        .file-preview .pdf-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            background: #f8f9fa;
        }

        .file-preview .delete-btn {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 19px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file-preview .file-label {
            position: absolute;
            bottom: 5px;
            left: 5px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 2px 6px;
            font-size: 10px;
            border-radius: 3px;
        }

        /* 📌 Canvas (versteckt) */
        #canvas {
            display: none;
        }

        /* 📌 Progress Animation */
        .upload-progress {
            width: 100%;
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
            margin: 10px 0;
        }

        .upload-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #0056b3);
            width: 0%;
            transition: width 0.3s ease;
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% { background-position: -200px 0; }
            100% { background-position: calc(200px + 100%) 0; }
        }
        /* Logo: niemals größer als der Container, behält Seitenverhältnis */
.brand-logo{
  display:block;          /* entfernt Unterzeilen-Abstand */
  max-width:100%;         /* skaliert in Breite mit */
  height:auto;            /* Seitenverhältnis wahren */
  max-height:38px;        /* << hier die Zielhöhe einstellen */
  object-fit:contain;
}

/* Optional: auf sehr kleinen Screens noch kleiner */
@media (max-width:480px){
  .brand-logo{ max-height:22px; }
}
.info-wrapperSW {
  position: relative;
  display: inline-block; /* wichtig: bleibt in der Textzeile */
  vertical-align: middle; /* optisch schön mittig */
  margin-left: 4px; /* kleiner Abstand zum Text */
}
/* Das „i“-Symbol */
.info-icoSW {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #f1f1f1;
  border:1px solid var(--VPRed);
  color: var(--VPRed);
  font-weight: bold;
  font-family: sans-serif;
  cursor: pointer;
}

.info-wrapperSW {
    position: relative;
    display: inline-block;
}

/* Standardmäßig nach rechts */
.info-boxSW {
    position: absolute;
    left: 35px;
    top: -10px;
    background-color: var(--VPRed);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    font-size: 14px;
    line-height: 1.3;
    width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 999;
}

/* Für Karten in der rechten Spalte — Box nach links */
.info-cards-grid .info-card:nth-child(even) .info-boxSW {
    left: auto;
    right: 35px;  /* nach links öffnen */
}

/* Pfeil normal (zeigt nach links) */
.info-boxSW::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -15px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent var(--VPRed) transparent transparent;
}

/* Pfeil für rechte Spalte (zeigt nach rechts) */
.info-cards-grid .info-card:nth-child(even) .info-boxSW::before {
    left: auto;
    right: -15px;
    border-color: transparent transparent transparent var(--VPRed);
}

/* Sichtbar bei Hover */
.info-wrapperSW:hover .info-boxSW {
  opacity: 1;
  visibility: visible;
}
.CheckOutEdit
{
    font-size: 26px;
    color: var(--VPRed);
    cursor:pointer;
    max-width:60px;
}
.CheckOutEdit:hover
{
    cursor:pointer;
    color: var(--VPRed);
}
@media (max-width:500px){
    .CheckOutEdit
    {
        font-size: 20px;
        color: var(--VPRed);
        cursor:pointer;
        max-width:40px;
    }
}
  .SuccessGreen
  {
	padding:10px;
	border-radius: 8px;
	background: #0BAA00;
	width: 100%;
	color: #ffffff;
	text-align: center;
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
  }
  .SuccessGreen.FlexRowStayRow
  {
    flex-wrap: nowrap;
    align-items: center;
  }
  .SuccessGreen.FlexRowStayRow i
  {
    font-size: 32px;
    flex-shrink: 0;
  }
  .SuccessGreen.FlexRowStayRow > div
  {
    min-width: 0;
  }
  @media (max-width: 400px) {
    .SuccessGreen.FlexRowStayRow i
    {
        font-size: 20px;
    }
    .SuccessGreen
    {
        font-size: 13px;
        padding: 8px 6px;
    }
  }
     .btn-submit:active {
            transform: translateY(0);
        }
        /* Fehler-Popup Overlay */
        .submit-overlayCO {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeIn 0.3s ease;
        }

        .submit-overlayCO.show {
            display: flex;
        }
        /* Fehler-Popup Overlay */
        .error-overlayCO {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeIn 0.3s ease;
        }

        .error-overlayCO.show {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* Fehler-Popup */
        .error-popupCO {
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 450px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            overflow: hidden;
        }

        @keyframes slideUp {
            from {
                transform: translateY(100px) scale(0.9);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        /* Fehler Header */
        .error-headerCO {
            background: var(--VPRed);
            padding: 30px;
            text-align: center;
            position: relative;
        }
        .warning-headerCO {
            background: linear-gradient(135deg, #FFC43A 0%, #FFC43A 100%);
            padding: 30px;
            text-align: center;
            position: relative;
        }
        .error-iconCO {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            animation: shake 0.5s ease;
        }

        .error-iconCO i {
            font-size: 40px;
            color: #ff6b6b;
        }
        .warning-iconCO {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            animation: shake 0.5s ease;
        }
        .warning-iconCO i {
            font-size: 40px;
            color: #FFC43A;
        }
        .error-headerCO h3 {
            color: white;
            font-size: 24px;
            margin: 0;
        }

        /* Fehler Body */
        .error-bodyCO {
            padding: 30px;
        }

        .error-messageCO {
            color: #666;
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: center;
        }

        .error-listCO {
            background: #fff5f5;
            border-left: 4px solid var(--VPRed);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            max-height:250px;
            overflow-y: auto;
        }
        .warning-listCO {
            background: #fffced;
            border-left: 4px solid #FFC43A;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            max-height:250px;
            overflow-y: auto;
            color:#000000;
        }
        .error-list-titleCO {
            font-weight: 600;
            color: var(--VPRed);
            margin-bottom: 12px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .warning-list-titleCO {
            font-weight: 600;
            color: #000000;
            margin-bottom: 12px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .error-listCO ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .error-listCO li {
            padding: 6px 0;
            color: #666;
            font-size: 14px;
            padding-left: 6px;
        }

        .error-listCO li:before {
            content: "•";
            color: var(--VPRed);
            font-weight: bold;
            font-size: 20px;
            line-height: 1;
            margin-right: 5px;
        }

        /* Fehler Footer */
        .error-footerCO {
            padding: 0 30px 30px;
            display: flex;
            gap: 10px;
        }
        .btn-warning{
            background: #FFC43A;
            border: 1px solid #FFC43A;
        }
.tag.deaktiviert {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f5f5f5;
    pointer-events: none;
}

.tag.deaktiviert:hover {
    background-color: #f5f5f5;
}
.W100P
{
    width: 100%;
}
.W50P
{
    width: 50%;
}
.W50
{
    width: 50px;
}
.W80
{
    width: 80px;
}
.W90
{
    width: 90px;
}
.WM150
{
 width: 150px;
}
.WM300
{
   width:100%;
    max-width: 300px;
}
.AmountDivUst
{
    font-size:18px;
}
.AmountDiv {
    margin-top:10px;
    text-align: center;
    /*
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    */
    position: relative;
}
.AmountDiv h1
{
    font-size:26px;
}
 @media (max-width: 500px) {
    .AmountDiv h1
{
    font-size:20px;
}
 }
        .autocomplete-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 6px 6px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 4000;
            display: none;

        }

        .suggestion-item {
            padding: 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s;
            font-size:14px;
            font-weight: normal;
        }

        .suggestion-item:hover {
            background-color: #f8f9fa;
        }

        .suggestion-item:last-child {
            border-bottom: none;
        }

        .suggestion-main {
            font-weight: bold;
            color: #333;
        }

        .suggestion-details {
            font-size: 12px;
            color: #666;
            margin-top: 2px;
        }
        .loading {
            color: #666;
            font-style: italic;
        }
        /* Steps List */
        .steps-list_bounce {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
            margin-top: 15px;
        }
        .step-item_bounce_withoutline {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 7px 0;
            position: relative;
        }

        .step-item_bounce {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 16px 0;
            position: relative;
        }

        /* Vertikale Linie zwischen Icons */
        .step-item_bounce:not(:last-child)::before {
            content: '';
            position: absolute;
            left: 11px;
            top: 52px;
            bottom: -8px;
            width: 1px;
            background: #d1fae5;
            z-index: 0;
        }

        .step-icon_bounce {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #22c55e;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
        }

        .step-icon_bounce svg {
            width: 14px;
            height: 14px;
            color: white;
            stroke-width: 3;
        }

        .step-content_bounce {
            flex: 1;
        }

        .step-title_bounce {
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 6px;
            font-family: 'Work Sans', sans-serif;

        }

        .step-description_bounce {
            font-size: 14px;
            line-height: 1.6;
            color: var(--GreyDark);
            font-family: 'Work Sans', sans-serif;
        }

        .step-description_bounce strong {
            font-family: 'Work Sans', sans-serif;
            font-weight: 700;
            color: var(--GreyDark);
        }
        .success-icon-check {
            max-width: 50px;
            width: 100%;
            height: auto;
        }

        /* Auf mobilen Geräten kleiner */
        @media (max-width: 768px) {
            .success-icon-check {
                max-width: 35px;
            }
        }
        /* Info Box */
        .info-box_bounce {
            margin-top: 15px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 12px;
            border-bottom: 3px solid #e5e7eb;
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .info-icon_bounce {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #666;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: #666;
            margin-top: 2px;
        }

        .info-content_bounce {
            flex: 1;
        }

        .info-title_bounce {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 4px;
        }

        .info-text_bounce {
            font-size: 13px;
            line-height: 1.5;
            color: #666;
            
        }
/*InfoText bounce accordeon*/

       /* Info Box */
        .info-box_bounce_accordeon {
            margin-top: 24px;
            padding: 16px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 12px;
            border-bottom: 0px solid #e5e7eb;
            display: flex;
            gap: 12px;

            align-items: center;
        }

        .info-icon_bounce_accordeon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #282b2e;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            margin-top: 0px;
            margin-top: 0px; /* ← auf 0 setzen */
            align-self: flex-start; /* ← NEU */
        }

        .info-content_bounce_accordeon {
            flex: 1;
        }

        .info-title_bounce_accordeon {
            font-size: 14px;
            font-weight: 600;
            color: var(--GreyDark);
            margin-bottom: 4px;
            margin-top: 2px;
            display: flex; /* ← NEU */
            align-items: center; /* ← NEU */
            justify-content: space-between;
            cursor: pointer; /* ← NEU */
            width: 100%; /* ← NEU */
            font-family: 'Work Sans', sans-serif;
        }

        .info-text_bounce_accordeon {
            font-size: 13px;
            line-height: 1.5;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            font-family: 'Work Sans', sans-serif;
        }
        .info-content_bounce_accordeon.open .info-text_bounce_accordeon {
            max-height: 400px; /* groß genug für den Text */
        }
        .info-arrow_bounce_accordeon {
            display: inline-block;
            transition: transform 0.3s ease;
            font-size: 12px;
            margin-left: auto; /* Pfeil ans Ende */
            flex-shrink: 0;
        }

        .info-content_bounce_accordeon.open .info-arrow_bounce_accordeon {
            transform: rotate(180deg);
        }
          /* Footer Badges */
        .footer-badges_bounce {
            padding: 24px;
            display: flex;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .badge_bounce {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 500;
        }

        .badge_bounce svg {
            width: 16px;
            height: 16px;
            color: #999;
        }
        .info-box_bounce_info {
            margin-top: 15px;
            padding: 16px;
            background: rgba(138, 138, 138, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(138, 138, 138, 0.6);
            border-radius: 12px;
            display: flex;
            gap: 12px;
            align-items: center;
            width: 100%;
            color: #383838;
            font-size: 16px;
            font-family: 'Work Sans', sans-serif;
        }

        .info-icon_bounce_info {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 0px solid #666;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            font-weight: 700;
            color: #383838;
            margin-top: 2px;
            padding:16px;
        }
        .info-box_bounce_success {
            margin-top: 15px;
            padding: 16px;
            background: rgba(233, 247, 232, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(233, 247, 232, 0.4);
            border-radius: 12px;
            border: 1px solid #0CBA00;
            display: flex;
            gap: 12px;
            align-items: center;
            width: 100%;
            color: #097F00;
            font-size: 16px;
            font-family: 'Work Sans', sans-serif;
        }
        @media (max-width: 500px) {
            .info-box_bounce_success {
                padding-top: 38px;
            }
        }
        .info-icon_bounce_success {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 0px solid #666;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            font-weight: 700;
            color: #097F00;
            margin-top: 2px;
            padding:16px;
        }
        .info-box_bounce_error {
            margin-top: 15px;
            padding: 16px;
            background: #bac6d9;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 0px solid rgba(233, 247, 232, 0.4);
            border-radius: 12px;
            border: 0px solid #0CBA00;
            display: flex;
            gap: 12px;
            align-items: flex-start;
            width: 100%;
            color: #ce1126;
            font-size: 17px;
            font-family: 'Work Sans', sans-serif;
            font-weight: 400;
        }

        .info-icon_bounce_error {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 0px solid #666;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            color: #D42E2A;
            margin-top: 2px;
        }
        /* Responsive */
        @media (max-width: 600px) {
            .footer-badges_bounce {
                gap: 16px;
            }
        }
.content-wrapper-homepage
{
    color: var(--accent-50);
    font-size: 16px;
}
/* Grid Container für die 4 Kacheln */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Immer 2 Spalten */
    gap: 5px;
    margin-top: 20px;
}

/* Einzelne Kachel */
.info-card {
    /* background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px; */
    padding: 5px;
    padding-left:0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    min-height: 30px; /* Mindesthöhe für Konsistenz */
    max-height: 40px;
    transition: all 0.3s ease;
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
    font-size:16px;
}

.info-card:hover {
    /*transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(206, 17, 38, 0.3);*/
}

/* Icon Container */
.info-card-icon {
    width: 40px;
    height: 40px;
    /*background: linear-gradient(135deg, #CE1126 0%, #a00e1e 100%); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-shrink: 0;
    font-size:26px;
}

.info-card-icon i {
    font-size: 24px;
    color: var(--Red);
}

/* Text Content */
.info-card-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: var(--GreyDark);
    text-align: left
}

.info-card-text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--GreyDark);
    font-weight: 400;
    text-align: left;
    font-family: 'Work Sans', sans-serif;
}
.WorkSans
{
    font-family: 'Work Sans', sans-serif;
}
.WorkSans16
{
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
}
/* Tablet - 2 Spalten mit etwas weniger Abstand */
@media (max-width: 768px) {
    .info-cards-grid {
        gap: 15px;
    }

    .info-card {
        min-height: 60px;
        max-height: none;
        padding: 18px 12px;
    }
    
    .info-card-icon {
        width: 45px;
        height: 45px;
    }
    
    .info-card-icon i {
        font-size: 22px;
    }
    
    .info-card-text {
        font-size: 13px;
    }
}

/* Mobile - 2 Spalten bleiben, kompakter */
@media (max-width: 480px) {
    .info-cards-grid {
        gap: 15px;
    }
    .info-iconSW
    {
        display:none;
    }
    .info-card {
        min-height: 40px;
        max-height: none;
        padding: 4px 2px;
        flex-direction: column;
        align-items: center;
    }
    .info-card-content
    {
        justify-content: center;
    }
    .info-card-icon {
        width: 40px;
        height: 40px;
    }
    
    .info-card-icon i {
        font-size: 20px;
    }
    
    .info-card-text {
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
    }
}

/* Sehr kleine Screens - noch kompakter */
@media (max-width: 360px) {
    .info-cards-grid {
        gap: 8px;
    }
    
    .info-card {
        min-height: 80px;
        padding: 12px 8px;
    }
    
    .info-card-icon {
        width: 35px;
        height: 35px;
        margin-bottom: 8px;
    }
    
    .info-card-icon i {
        font-size: 18px;
    }
    
    .info-card-text {
        font-size: 11px;
        line-height: 1.3;
    }
}
@media (max-width: 768px) {
    .NoShowMobile
    {
        display:none;
    }
}
.DataProtectionText
{
    font-size: 14px;
    color: var(--GreyDark);
}
.DataProtectionText a
{
    font-size: 14px;
    color: var(--GreyDark);
    text-decoration: underline;
}
.DataProtectionTextSub
{
    margin-top: 10px;
    width:100%;
    text-align: right;
    font-size: 12px;
    color: var(--GreyDark);
    text-decoration: underline;
}
.DataProtectionTextSub a
{
    font-size: 12px;
    color: var(--GreyDark);
    text-decoration: underline;
}
.LinkConsulting
{
    margin-top: 10px;
    width:100%;
    text-align: left;
    font-size: 15px;
    color: var(--GreyDark);
    text-decoration: underline;
}
.LinkConsulting a
{
    font-size: 15px;
    color: var(--GreyDark);
    text-decoration: underline;
}
/* Trust Row */
.trust-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    justify-content: center;
    color: var(--GreyDark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.trust-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.5);
}
@media (max-width: 480px) {
    .trust-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .trust-item {
        white-space: normal;
    }
}

/* Trust Row unterhalb Panel */
.trust-row-below {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 20px 0;
    width: 100%;
    max-width: 710px;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.trust-item-below {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-start;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Work Sans', sans-serif;
    padding: 20px 26px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-sizing: border-box;
}
.trust-item-below span {
    overflow-wrap: break-word;
    word-break: break-word;
}
.trust-icon-below {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
@media (max-width: 700px) {
    .trust-row-below {
        margin: 20px 10px 0;
        width: calc(100vw - 20px);
        max-width: none;
        gap: 6px;
    }
    .trust-item-below {
        font-size: 12px;
        padding: 14px 12px;
        gap: 8px;
    }
    .trust-icon-below {
        width: 26px;
        height: 26px;
    }
}
@media (max-width: 500px) {
    .trust-row-below {
        margin: 20px 5px 0;
        width: calc(100vw - 10px);
        gap: 4px;
    }
    .trust-item-below {
        font-size: 11px;
        padding: 12px 8px;
        gap: 6px;
    }
    .trust-icon-below {
        width: 22px;
        height: 22px;
    }
}

/* ========== Achtung-Popup (Warning) ========== */
.warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.warning-overlay.show {
    display: flex;
}
.warning-popup {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 520px;
    padding: 28px 28px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    position: relative;
    animation: warningSlideIn 0.3s ease;
}
@keyframes warningSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.warning-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.warning-close:hover {
    color: #333;
}
.warning-title {
    color: var(--VPRed);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 14px;
}
.warning-message {
    color: #1a1a1a;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 18px;
}
.warning-link {
    display: inline-block;
    color: #2563eb;
    font-size: 15px;
    text-decoration: underline;
    margin-bottom: 22px;
}
.warning-link:hover {
    color: #1d4ed8;
}
.warning-footer {
    margin-top: 4px;
}
.warning-btn-correct {
    width: 100%;
    background: var(--VPRed);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.warning-btn-correct:hover {
    background: #a80e1f;
}
.info-recommendation-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background: #0CBA00;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 0 12px 0 8px;
    font-family: 'Work Sans', sans-serif;
    white-space: nowrap;
}
.h1-wrap { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.h1-wrap-parent { flex: 1 1 0; min-width: 0; }
@media (max-width:500px) { .h1-wrap-parent { flex: 0 0 100%; } }

/* ── Visa-Kachel ── */
.visa-kachel {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--card-radius);
    padding: 28px 22px 22px;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 387px;
    font-family: 'Work Sans', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.visa-kachel-titel {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.visa-feature-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.visa-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

.visa-feature-icon {
    color: var(--VPRed);
    font-size: 18px;
    flex-shrink: 0;
}

.visa-taetigkeiten-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.2s;
}

.visa-taetigkeiten-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.visa-taetigkeiten-btn .visa-chevron {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 13px;
}

.visa-taetigkeiten-btn.open .visa-chevron {
    transform: rotate(180deg);
}

.visa-taetigkeiten-inhalt {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    margin-bottom: 0;
}

.visa-taetigkeiten-inhalt.open {
    max-height: 400px;
    margin-bottom: 12px;
}

.visa-taetigkeiten-inhalt ul {
    list-style: none;
    padding: 8px 4px 4px 4px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visa-taetigkeiten-inhalt ul li {
    font-size: 14px;
    color: #fff;
    padding-left: 14px;
    position: relative;
}

.visa-taetigkeiten-inhalt ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--VPRed);
}

.visa-antrag-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: var(--VPRed);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.visa-antrag-btn:hover {
    background: #a80e1e;
    color: #fff;
    transform: translateY(-1px);
}

.visa-antrag-btn:active {
    transform: translateY(0);
}
.toast-success {
  background: rgba(234, 243, 222, 0.7);
  border: 0.5px solid #97C459;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(99, 153, 34, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3B6D11;
  font-size: 18px;
}

.toast-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #27500A;
}

.toast-filename {
  margin: 4px 0 0;
  font-size: 12px;
  color: #3B6D11;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pac-container {
    z-index: 99999 !important;
}