:root{
  color-scheme: light dark;
  --brand:#C9A14A;
  --bg: #ffffff;
  --text: #1b1b1b;
  --muted: #6c757d;
  --card: #ffffff;
  --nav-bg:#212529;
}
@media (prefers-color-scheme: dark){
  :root{
  color-scheme: light dark;
    --bg: #0B0F1A;
    --text: #F5F7FA; /* brighter body text for improved contrast */
    --muted: #CBD0D6; /* lighter muted text for readability */
    --card: #121620;
    --nav-bg:#0B0F1A;
  }
}

body{background:var(--bg); color:var(--text); font-family:Poppins, Roboto, Arial, sans-serif}
.navbar{background:var(--nav-bg)!important}
.navbar .nav-link:hover{color:var(--brand)}
.btn-primary{background:var(--brand); border:none}
.btn-outline-light:hover{background:#fff;color:#000}
.feature-icon{width:56px;height:56px;display:block;margin:0 auto 10px}
.wrapper-band{background:linear-gradient(180deg, rgba(201,161,74,.08), transparent)}
.wrapper-icon{width:52px;height:52px;opacity:.9}
.hero{background:linear-gradient(135deg, rgba(13,110,253,.65), rgba(33,37,41,.75)), url('https://source.unsplash.com/1600x900/?technology,future') center/cover no-repeat; min-height:70vh; display:flex; align-items:center; justify-content:center}
.card{background:var(--card); border:0}
.card-animate:hover{transform:translateY(-4px); transition:transform .25s ease}

/* Dropdown animation */
.dropdown-animate{
  transform-origin: top;
  transition: opacity .15s ease, transform .15s ease;
}
.dropdown-menu.show{opacity:1; transform:scale(1)}
.dropdown-menu{opacity:0; transform:scale(.98)}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal-visible{opacity:1; transform:none}

/* CTA banner adapts to theme */
.cta-banner{background:var(--brand)}

/* Topbar adaptive */
.topbar{background:calc(var(--bg)); border-bottom:1px solid rgba(255,255,255,.08)}
@media (prefers-color-scheme: light){.topbar{background:#f8f9fa; border-bottom:1px solid #dee2e6}}

/* Generic adaptive background utility to replace Bootstrap's static utilities
   Use `bg-adaptive` where a component should follow the site's color tokens. */
.bg-adaptive{background:var(--bg) !important; border-bottom:1px solid rgba(255,255,255,0.06)}
@media (prefers-color-scheme: light){
  .bg-adaptive{background:#f8f9fa !important; border-bottom:1px solid #dee2e6}
}

/* Dark-mode fixes for card / SS section contrast and icons */
@media (prefers-color-scheme: dark){
  /* Ensure card text is bright and readable on dark backgrounds */
  .card, .feature, .card-body, .card-title, .card h5, .card p, .feature .mb-2, .features-grid .feature{
    color: var(--text) !important;
    opacity: 1 !important;
  }

  /* Make sure icons (SVG/PNG) appear at full opacity and aren't dimmed */
  img.feature-icon, img.section-icon, img.wrapper-icon, .feature img{
    filter: none !important;
    opacity: 1 !important;
  }

  /* Disable the subtle overlay on cards that can reduce contrast in dark mode */
  .card::before{ mix-blend-mode: normal; background:transparent; }

  /* If any elements are using muted text in cards, keep it readable */
  .card .text-muted, .feature .text-muted{ color: var(--muted) !important; }
}

/* Improved section/card styling for Anwendungsbereiche */
.area-section{border-radius:12px; box-shadow:0 6px 18px rgba(11,15,26,0.06); background:var(--card);}
.area-section h2{font-weight:600; margin-bottom:.5rem}
.area-section ul{list-style:none; padding-left:0; margin-bottom:0}
.area-section ul li{position:relative; padding-left:28px; margin-bottom:.6rem; color:var(--muted)}
.area-section ul li strong, .area-section ul li b{color:var(--text)}
.area-section ul li::before{content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:var(--brand)}

/* Two-column lists on medium+ screens */
@media(min-width:768px){
  .area-section ul{columns:2; column-gap:2.5rem}
  .area-section ul li{break-inside:avoid;}
}

/* Headline and lead tweaks */
.container h1{font-size:2.25rem; font-weight:700}
.lead{font-size:1.05rem; color:var(--muted)}

/* Ensure Bootstrap's text-muted maps to our tokens for better contrast in dark mode */
.text-muted{color:var(--muted) !important}

/* Improve visibility of section titles and headings */
.area-section h2,
.section-banner h3,
.features-grid h5,
.container h1,
.hero .hero-content h1,
.dropdown-menu .dropdown-item,
.navbar .nav-link{
  color:var(--text) !important;
}

/* Keep small/description text muted but readable */
.section-banner small,
.area-section p,
.area-section .small,
.lead,
.text-muted{ color:var(--muted) !important; }

/* Strong emphasis in lists remains bright */
.area-section ul li strong, .area-section ul li b{ color:var(--text); }

/* Make reveal animation triggerable via JS by adding class 'reveal-visible' */
.reveal{transition:opacity .6s ease, transform .6s ease}

/* Smooth scroll for anchor links */
html{scroll-behavior:smooth}
.area-section ul li .bi{color:var(--brand); font-size:1.05rem; position:relative; top:2px; margin-right:.6rem}
.area-section ul li .bi{color:var(--brand); font-size:1.05rem; position:relative; top:2px; margin-right:.6rem}

/* CTA prominence in sections */
.area-section .btn-primary{padding:.5rem 1rem; font-weight:600}

/* Small responsive tweak for icons on narrow viewports */
@media(max-width:420px){
  .area-section ul{columns:1}
}

/* Hero tweaks */
.hero{position:relative; padding-top:4rem; padding-bottom:4rem; border-radius:0 0 18px 18px; overflow:hidden}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,6,12,0.35), rgba(3,6,12,0.55)); pointer-events:none}
.hero .container{position:relative; z-index:2}

/* Ensure hero text is always readable on top of the video/imagery
   Some selectors earlier (e.g. .container h1) set dark text; override
   to enforce white, high-contrast text in the hero regardless of theme. */
.hero h1,
.hero .display-4,
.hero .lead,
.hero p{
  color: #ffffff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.65);
}

/* Hero buttons: ensure contrast and visible outlines in both themes */
.hero .btn-primary{background:var(--brand); color:#fff; border-color:transparent}
.hero .btn-outline-light{border-color:rgba(255,255,255,0.85); color:#fff}
.hero .btn-outline-light:hover{background:rgba(255,255,255,0.06)}


/* Background video inside hero */
.hero video.bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero::after{z-index:1}

/* Features grid */
.features-grid .feature{border-radius:10px; transition:transform .22s ease, box-shadow .22s ease; border:1px solid rgba(0,0,0,0.04)}
.features-grid .feature:hover{transform:translateY(-6px); box-shadow:0 14px 40px rgba(11,15,26,0.08)}
.feature-icon{width:44px; height:44px}
.features-grid h5{font-size:1rem; margin-bottom:.25rem}
.features-grid p{margin-bottom:0}

@media (prefers-color-scheme: dark){
  .features-grid .feature{border-color:rgba(255,255,255,0.03)}
}

/* Section banners that lead into each detailed area */
.section-banner{background:linear-gradient(90deg, rgba(201,161,74,0.04), transparent); border-radius:10px; border:1px solid rgba(11,15,26,0.04); align-items:flex-start}
.section-banner .section-icon{width:48px; height:48px}
.section-banner h3{font-size:1rem; margin-bottom:0}
.section-banner small{display:block}

@media(max-width:767px){
  .section-banner{flex-direction:column; align-items:flex-start}
  .section-banner .ms-auto{margin-left:0 !important}
}

@media (prefers-color-scheme: dark){
  .section-banner{border-color:rgba(255,255,255,0.02)}
}
/* Comparison panel: left (other providers) vs right (secure server) */
.compare-section .compare-left{
  background: var(--card);
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 10px 30px rgba(2,6,23,0.06);
}
.compare-section .compare-left h4{margin:0; font-weight:700}
.compare-section .compare-left ul{margin-top:1rem}
.compare-section .compare-left li{padding:0.9rem 0; font-weight:600; color:var(--text); display:flex; align-items:center}
.compare-section .compare-left .icon-circle{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-right:14px;background:#f1f3f6;color:#6c757d;font-weight:700}

.compare-section .compare-right{
  background:linear-gradient(135deg,#5b4bff 0%, #7a61ff 100%);
  color:#fff;
  border-radius:18px;
  padding:1.75rem;
  box-shadow:0 30px 60px rgba(90,72,255,0.12);
  position:relative;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s ease;
}
.compare-section .compare-right h4{margin:0; font-weight:700; color:#fff}
.compare-section .compare-right .check-list{margin-top:1.25rem}
.compare-section .compare-right li{padding:0.9rem 0; display:flex; align-items:center; font-weight:600}
.compare-section .compare-right .check-circle{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-right:18px;background:#fff;color:#5b4bff;font-weight:800}

/* Decorative subtle burst to the right card for a nicer look */
.compare-section .compare-right::after{
  content:'';
  position:absolute;
  right:-10%;
  top:-10%;
  width:60%;
  height:60%;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  transform:rotate(12deg);
  pointer-events:none;
}

/* Hover/Focus micro-interaction */
.compare-section .compare-right:hover,
.compare-section .compare-right:focus-within{transform:translateY(-6px); box-shadow:0 40px 80px rgba(90,72,255,0.16)}

/* Left card subtle polish */
.compare-section .compare-left{transition:transform .35s ease, box-shadow .35s ease}
.compare-section .compare-left:hover{transform:translateY(-4px); box-shadow:0 18px 48px rgba(2,6,23,0.06)}

/* Make the icon circles use brand-aware colors */
.compare-section .compare-left .icon-circle{background:rgba(11,15,26,0.04); color:var(--muted)}
.compare-section .compare-right .check-circle{background:#fff; color:#5b4bff}

/* Typography improvements for readability */
.compare-section h4{font-size:1.125rem}
.compare-section li{font-size:1rem; line-height:1.45}

/* Mobile: stack nicely, add spacing */
@media(max-width:991px){
  .compare-section{gap:1.25rem}
  .compare-section .compare-left, .compare-section .compare-right{padding:1.1rem}
  .compare-section .compare-right{border-radius:12px}
}

/* Prefer reduced motion: reduce transforms */
@media (prefers-reduced-motion: reduce){
  .compare-section .compare-right:hover, .compare-section .compare-left:hover{transform:none; box-shadow:none}
}

/* Responsive spacing */
@media(max-width:767px){
  .compare-section .compare-right{border-radius:12px}
  .compare-section .compare-left, .compare-section .compare-right{padding:1rem}
}

/* Respect dark mode tokens for left card */
@media (prefers-color-scheme: dark){
  .compare-section .compare-left{background:var(--card)}
}

/* SVG icon sizing inside comparison circles */
.icon-circle svg, .check-circle svg{width:18px; height:18px; display:block}
.icon-circle, .check-circle{line-height:0}
.icon-circle svg path, .check-circle svg path{stroke-linecap:round; stroke-linejoin:round}
/* Theme is handled by the `prefers-color-scheme` media query above; no JS overrides. */

/* 3D / smooth UI enhancements */
:root{
  --shadow-1: 0 6px 18px rgba(11,15,26,0.06);
  --shadow-2: 0 14px 40px rgba(11,15,26,0.08);
  --shadow-deep: 0 30px 60px rgba(11,15,26,0.12);
  --glass: rgba(255,255,255,0.04);
}

html,body{transition:background-color .35s ease,color .35s ease}

/* Apply soft, layered shadows and smooth transforms to cards */
.card{transition:transform .40s cubic-bezier(.2,.9,.2,1), box-shadow .40s cubic-bezier(.2,.9,.2,1); will-change:transform}
.card-3d{transform-style:preserve-3d; perspective:900px}
.card-3d:hover{box-shadow:var(--shadow-2); transform:translateY(-6px)}

/* Feature cards slightly tilt and lift on hover */
.features-grid .feature{border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); overflow:hidden}
.features-grid .feature:focus, .features-grid .feature:hover{box-shadow:var(--shadow-2); transform:translateY(-8px)}

/* Subtle inner sheen */
.card::before{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); mix-blend-mode:overlay}

/* Buttons with depth */
.btn{transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease;}
.btn:hover{transform:translateY(-3px); box-shadow:var(--shadow-1)}
.btn-primary{box-shadow:0 8px 20px rgba(201,161,74,0.12)}

/* Raise hero text slightly so it sits above the video with a soft text-shadow to pop */
.hero .hero-content h1, .hero .hero-content .lead{text-shadow:0 6px 20px rgba(2,6,23,0.45)}

/* Ensure hero headings and lead remain readable on top of the video/overlay
  Override the general `color: var(--text)` rule so hero text stays light
  regardless of the site's color tokens (fixes light-mode visibility). */
.hero .hero-content h1,
.hero .hero-content .lead,
.hero .hero-content p.lead,
.hero .hero-content .display-4{color:#ffffff !important}

/* ---------- Impressum: visual polish & animations ---------- */
.impressum-hero{position:relative; overflow:hidden}
.impressum-hero::after{content:''; position:absolute; right:-8%; top:-30%; width:480px; height:480px; background:radial-gradient(circle at 30% 30%, rgba(91,75,255,0.12), transparent 25%), radial-gradient(circle at 70% 70%, rgba(201,161,74,0.06), transparent 30%); transform:rotate(8deg); filter:blur(14px); pointer-events:none; z-index:0}
.impressum-hero > *{position:relative; z-index:2}

/* subtle typography tuning */
.impressum-hero h1{font-weight:800; letter-spacing:-0.6px}
.impressum-hero .lead{color:var(--muted)}

/* fade/slide reveal */
.fade-in{opacity:0; transform:translateY(10px); animation:fadeInUp .56s ease forwards}
.stagger-1{animation-delay:.08s}
.stagger-2{animation-delay:.16s}
.stagger-3{animation-delay:.24s}

@keyframes fadeInUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

/* Card polish */
.impressum-card{transition:box-shadow .26s ease, transform .26s ease; will-change:transform}
.impressum-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px rgba(2,6,23,0.08)}

/* Link hover underline animation */
.impressum-card a, .impressum-contact a{position:relative; display:inline-block}
.impressum-card a::after, .impressum-contact a::after{content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--brand); transition:width .22s ease}
.impressum-card a:hover::after, .impressum-contact a:hover::after{width:100%}

/* Contact card lift and CTA gradient */
.contact-card{transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease}
.contact-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(11,15,26,0.08)}
.contact-card .btn-primary{background:linear-gradient(90deg,var(--brand), #7a61ff); border:none}
.contact-card .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(122,97,255,0.12)}

/* small decorative divider */
.impressum-left .impressum-sep{margin:20px 0}

/* Slightly increase contrast for left accent stripe in light mode */
@media (prefers-color-scheme: light){
  .impressum-left{border-left-color:var(--brand)}
}

/* Make sure sticky contact stacks nicely on mobile */
@media(max-width:991px){
  .sticky-contact{position:relative; top:auto}
  .contact-card a.btn{display:block}
}


/* Deep shadow utility for highlighted elements */
.shadow-deep{box-shadow:var(--shadow-deep)}

/* Respect reduced motion: disable transitions/tilt where user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .btn, .features-grid .feature{transition:none !important}
  .hero video.bg-video{will-change:auto}
}

/* Fix dropdown contrast in dark mode: ensure menu background and items are readable */
@media (prefers-color-scheme: dark){
  .dropdown-menu{
    background:var(--card) !important;
    color:var(--text) !important;
    border:1px solid rgba(255,255,255,0.04);
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
  }
  .dropdown-menu .dropdown-item{
    color:var(--muted) !important;
  }
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus{
    background:rgba(255,255,255,0.03) !important;
    color:var(--text) !important;
  }
  .dropdown-menu .dropdown-item[aria-disabled="true"],
  .dropdown-menu .dropdown-item.disabled{
    color:rgba(255,255,255,0.45) !important;
  }
}

/* FAQ / Accordion contrast fixes for dark mode (SS section readability) */
@media (prefers-color-scheme: dark) {
  .accordion {
    background: transparent;
  }
  .accordion .accordion-item{
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: .6rem;
    overflow: hidden;
  }
  .accordion .accordion-button{
    background: transparent;
    color: var(--text);
    padding: 1rem 1.25rem;
    font-weight:600;
    box-shadow: none;
  }
  .accordion .accordion-button::after{ /* caret */
    filter: none;
    color: var(--muted);
    opacity: .95;
  }
  .accordion .accordion-button:not(.collapsed){
    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    color: var(--text);
  }
  .accordion .accordion-body{
    background: transparent;
    color: var(--muted);
    padding: 1rem 1.25rem 1.25rem;
  }
  /* Increase contrast for any highlighted or open item */
  .accordion .accordion-item.show, .accordion .accordion-item:has(.accordion-button:not(.collapsed)){
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 8px 30px rgba(2,6,23,0.55);
  }
}

/* Light-mode navbar & dropdown visibility fixes */
@media (prefers-color-scheme: light){
  /* Ensure navbar stands out on light backgrounds */
  .navbar{background:#f8f9fa !important; color:var(--text) !important}
  .navbar .navbar-brand, .navbar .nav-link{color:var(--text) !important}
  .navbar .nav-link:hover{color:var(--brand) !important}
  .navbar .navbar-toggler{filter:brightness(.95)}

  /* Dropdown menus in light mode: white background, readable text */
  .dropdown-menu{background:#ffffff !important; color:var(--text) !important; border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 24px rgba(2,6,23,0.06)}
  .dropdown-menu .dropdown-item{color:var(--muted) !important}
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus{background:rgba(0,0,0,0.04) !important; color:var(--text) !important}
  .dropdown-menu .dropdown-item[aria-disabled="true"], .dropdown-menu .dropdown-item.disabled{color:rgba(0,0,0,0.45) !important}
}

/* Security badge (small pill with icon + heading) */
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--badge-bg, #f3f4ff);
  color: var(--badge-color, #4b3bff);
  padding: 10px 18px;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.security-badge .badge-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  border-radius: 8px;
  object-fit: cover;
}
.security-badge .badge-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .security-badge {
    background: rgba(255,255,255,0.04);
    color: #9aa2ff;
    box-shadow: none;
  }
}

/* Size limit for the larger illustration used on the platform page */
.security-illustration-lg{max-width:260px; display:block; margin-left:auto; margin-right:auto; border-radius:12px}

/* Footer badges (pill-like trust / compliance icons) */
.footer-badges{display:flex; gap:12px; align-items:center; justify-content:flex-start; flex-wrap:wrap}

/* Single badge card: icon left, label right */
.fb-card{
  display:inline-flex; align-items:center; gap:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--text); padding:12px 18px; border-radius:14px; box-shadow:inset 0 -6px 18px rgba(0,0,0,0.06), 0 8px 22px rgba(2,6,23,0.06);
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; border:1px solid rgba(255,255,255,0.04);
}
.fb-card .fb-icon{width:48px; height:48px; background:#fff; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; padding:6px; box-shadow:0 6px 16px rgba(2,6,23,0.12)}
.fb-card .fb-icon img{height:28px; width:28px; object-fit:contain; display:block}
.fb-card span{font-weight:700; font-size:1rem; color:var(--text)}
.fb-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,0.14)}

@media(max-width:991.98px){
  .footer-badges{gap:10px}
  .fb-card{padding:10px 12px}
  .fb-card .fb-icon{width:40px; height:40px}
  .fb-card .fb-icon img{height:26px; width:26px}
  .fb-card span{font-size:0.92rem}
}

/* On narrow screens, hide labels to save space */
@media(max-width:575.98px){
  .footer-badges{gap:8px}
  .fb-card{padding:8px 10px; gap:8px}
  .fb-card .fb-icon{width:40px; height:40px}
  .fb-card .fb-icon img{height:22px; width:22px}
  .fb-card span{display:none}
}

/* Very small phones: stack badges vertically */
@media(max-width:420px){
  .footer-badges{flex-direction:column; align-items:flex-start}
  .fb-card{width:100%; justify-content:flex-start}
  .fb-card .fb-icon{width:44px; height:44px}
  .fb-card .fb-icon img{height:26px}
  .fb-card span{display:none}
}

/* Layout tweaks: make badges a responsive grid so they align neatly near the logo */
.footer-left{display:flex; flex-direction:column; gap:0.75rem}
.footer-left .d-flex{align-items:flex-start}
.footer-logo{flex:0 0 auto}
.footer-desc{margin-top:0.25rem; margin-bottom:0}

.footer-badges{display:flex; gap:12px; align-items:center; justify-content:flex-start; flex-wrap:nowrap}
.fb-card{width:auto; justify-content:flex-start; flex:1 1 0; max-width:calc(33.333% - 8px); min-width:0}

@media(max-width:991.98px){
  .fb-card{max-width:calc(33.333% - 8px)}
}

@media(max-width:575.98px){
  /* keep three compact icon cards in a row; labels hide to fit */
  .fb-card{flex:0 0 calc(33.333% - 8px); padding:6px 8px}
  .fb-card span{display:none}
}

@media (prefers-color-scheme: dark){
  .fb-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color:var(--text); border:1px solid rgba(255,255,255,0.04)}
  .fb-card span{color:var(--text)}
  .fb-card img{filter:none}
  .fb-card:hover{box-shadow:0 18px 40px rgba(0,0,0,0.6)}
}

/* Footer badges (small trust / compliance icons) */
.footer-badges{display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:wrap}

/* Single badge card: white rounded pill with icon left and text right */
.fb-card{
  display:inline-flex; align-items:center; gap:10px; background:#fff; color:#111; padding:10px 14px; border-radius:12px; box-shadow:0 8px 22px rgba(2,6,23,0.08);
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; border:1px solid rgba(0,0,0,0.04);
}
.fb-card img{height:34px; width:34px; object-fit:contain; display:block}
.fb-card span{font-weight:700; font-size:0.95rem; color:var(--text)}
.fb-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,0.12)}

@media(max-width:767px){
  .footer-badges{justify-content:flex-start; gap:10px}
  .fb-card{padding:8px 10px; border-radius:10px}
  .fb-card img{height:30px; width:30px}
  .fb-card span{font-size:0.9rem}
}

@media (prefers-color-scheme: dark){
  .fb-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color:var(--text); border:1px solid rgba(255,255,255,0.04)}
  .fb-card span{color:var(--text)}
  .fb-card img{filter:none}
  .fb-card:hover{box-shadow:0 18px 40px rgba(0,0,0,0.6)}
}

@media(max-width:767px){
  .security-badge{padding:8px 12px}
  .security-badge .badge-text{font-size:16px}
}

/* SS section centered features list */
.ss-features-list{display:inline-block; text-align:left; padding-left:1rem; margin-top:1rem}
.ss-features-list li{margin-bottom:.7rem; font-weight:600; color:var(--text)}
.ss-features-list li::marker{color:var(--brand)}

.ss-features-list::before{content:''; display:block; height:4px}

/* Small spacing polish for the SS heading */
.ss-heading-space{margin-bottom:.75rem}

/* ss features grid cards */
.ss-features-grid .ss-feature{border-radius:12px; transition:transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s ease; cursor:default}
.ss-features-grid .ss-feature:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,15,26,0.08)}
.ss-features-grid .ss-feature .ss-icon{width:64px; height:64px; margin:0 auto; display:flex; align-items:center; justify-content:center}
.ss-features-grid .ss-feature h5{font-size:1.05rem; margin-bottom:.25rem}
.ss-features-grid .ss-feature p{margin-bottom:0}

/* animated subtle float for reveal elements */
@keyframes ss-float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.reveal.reveal-visible.ss-float{animation:ss-float 6s ease-in-out infinite}

.ss-divider{width:120px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)); border:0; margin:0 auto}

@media (prefers-color-scheme: light){
  .ss-features-grid .ss-feature{background:#fff}
}

@media (prefers-color-scheme: dark){
  .ss-features-grid .ss-feature{background:var(--card); border:1px solid rgba(255,255,255,0.02)}
}

/* Dark-mode adjustments for SS banner and cards */
@media (prefers-color-scheme: dark) {
  .ss-banner-inner{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    box-shadow:0 20px 50px rgba(2,6,23,0.6);
  }
  .ss-banner-inner::before{background:radial-gradient(ellipse at center, rgba(91,75,255,0.12), transparent 30%)}
  .ss-feature{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.03); color:var(--text)}
  .ss-feature h5{color:var(--text)}
  .ss-feature p{color:var(--muted)}
  .ss-features-list li{color:var(--text)}
  .ss-divider{background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02))}
  .btn-outline-light{border-color:rgba(255,255,255,0.12); color:#fff}
  .security-badge{background:rgba(255,255,255,0.03); color:#b9c1ff}
}

/* Highlight row: three boxed items replacing the bullet list */

.ss-highlight-row{display:flex; gap:18px; justify-content:center; align-items:stretch; margin-top:1rem; flex-wrap:wrap}
.ss-highlight{width:180px; max-width:92%; border-radius:12px; text-align:center; box-shadow:0 10px 22px rgba(2,6,23,0.06); background:linear-gradient(180deg,#ffffff,#fbfbff); padding:12px}
.ss-h-icon{width:36px; height:36px; display:flex; align-items:center; justify-content:center; margin:0 auto}
.ss-h-title{font-weight:800; font-size:1rem; color:var(--text); text-align:center}
.ss-h-desc{display:none}
.ss-highlight:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 30px 50px rgba(2,6,23,0.10)}

@media(min-width:768px){
  /* force single-row layout on tablet+ */
  .ss-highlight-row{flex-wrap:nowrap}
}

@media(max-width:767px){
  .ss-highlight{width:92%; margin:0 auto}
  .ss-h-title{font-size:1.05rem}
}

@media (prefers-color-scheme: dark){
  .ss-highlight{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border:1px solid rgba(255,255,255,0.03); box-shadow:0 18px 40px rgba(2,6,23,0.45)}
  .ss-h-desc{color:var(--muted)}
}

/* SS banner: a subtle 3D/panel treatment to highlight security section */
.ss-banner{position:relative; padding:3.5rem 0;}
.ss-banner-inner{background:linear-gradient(180deg, rgba(11,15,26,0.35), rgba(11,15,26,0.12)); border-radius:20px; padding:2.25rem; position:relative; overflow:visible}
.ss-banner-inner::before{content:''; position:absolute; inset:-30px -40px auto -40px; height:120px; background:radial-gradient(ellipse at center, rgba(91,75,255,0.12), transparent 30%); filter:blur(28px); z-index:0; pointer-events:none}
.ss-banner-inner .container, .ss-banner-inner .row{position:relative; z-index:2}

/* 3D card stack inside banner */
.ss-card-stack{display:flex; gap:18px; justify-content:center; margin-top:1.25rem}
.ss-card-stack .ss-feature{width:100%; max-width:320px; transform-origin:center; will-change:transform}
.ss-card-stack .ss-feature:nth-child(1){transform:translateZ(8px) translateY(0)}
.ss-card-stack .ss-feature:nth-child(2){transform:translateZ(16px) translateY(-6px)}
.ss-card-stack .ss-feature:nth-child(3){transform:translateZ(10px) translateY(-3px)}

.ss-banner .ss-feature:hover{transform:translateY(-10px) scale(1.02)}

@media(max-width:991px){
  .ss-card-stack{flex-direction:column; align-items:center}
  .ss-card-stack .ss-feature{max-width:520px}
  .ss-banner-inner::before{display:none}
}

@media (prefers-reduced-motion: reduce){
  .ss-card-stack .ss-feature, .ss-banner .ss-feature{transition:none !important; transform:none !important}
}

/* Language switcher styling (header) */
.lang-switcher .btn{
  padding: .25rem .55rem;
  font-weight:600;
  border-radius:6px;
  font-size:.9rem;
}
.lang-switcher .btn-sm{line-height:1}

@media (prefers-color-scheme: light){
  .lang-switcher .btn-outline-light{
    border-color: rgba(0,0,0,0.12);
    color: var(--text);
    background: transparent;
  }
  .lang-switcher .btn-primary{background:var(--brand); color:#fff}
}
@media (prefers-color-scheme: dark){
  .lang-switcher .btn-outline-light{
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    background: transparent;
  }
  .lang-switcher .btn-primary{background:var(--brand); color:#fff}
}

/* Fix for light mode: ensure outline 'EN' is visible on light navbar backgrounds */
@media (prefers-color-scheme: light){
  .navbar .lang-switcher .btn-outline-light{
    color: var(--text) !important;
    border-color: rgba(0,0,0,0.16) !important;
    background: transparent !important;
  }
  .navbar .lang-switcher .btn-outline-light:hover{
    color: var(--text) !important;
    background: rgba(0,0,0,0.04) !important;
  }
}

/* Extra specificity for cases where navbar classes may change */
.navbar-light .lang-switcher .btn-outline-light,
.navbar .lang-switcher .btn-outline-light{
  transition: background-color .12s ease, color .12s ease;
}



/* Contact form specific styling */
.contact-form .form-control:focus{box-shadow:0 6px 20px rgba(11,15,26,0.06); border-color:var(--brand)}
.contact-form .form-label{font-weight:600}
.contact-form .form-text{color:var(--muted)}
.contact-form .card{border-radius:12px}
.contact-page .contact-info .card{background:var(--card); border:1px solid rgba(0,0,0,0.04)}

@media (prefers-color-scheme: dark){
  .contact-form .card{background:var(--card); border:1px solid rgba(255,255,255,0.03)}
  .contact-form .form-text{color:var(--muted)}
}

/* Responsive adjustments for the contact page */
@media (max-width: 575.98px) {
  .contact-page .container{padding-left:1rem; padding-right:1rem}
  .contact-form .card-body{padding:1rem}
  .contact-form .form-control{font-size:1rem; padding:.7rem .75rem}
  .contact-form .form-label{font-size:.98rem}
  .contact-form .form-check-label{font-size:.92rem}
  .contact-form .row.g-3{row-gap:.75rem; column-gap:.5rem}
  .contact-form .btn{width:100%}
  .contact-page .col-lg-5{margin-top:1rem}
  #contactStatus{margin-top:.5rem}
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .contact-form .card-body{padding:1.25rem}
  .contact-form .form-control{font-size:0.98rem}
}

/* Slightly larger touch targets on small devices */
@media (max-width: 420px){
  .contact-form .btn{padding:.75rem 1rem}
}

/* Impressum page specific styles */
.impressum-card{max-width:900px; margin:0 auto; background:var(--card); border:1px solid rgba(0,0,0,0.04); border-radius:12px}
.impressum-card h2{font-size:1.45rem; margin-bottom:.5rem}
.impressum-card h3{font-size:1rem; margin-top:1rem; margin-bottom:.5rem; font-weight:700}
.impressum-card address{font-style:normal; line-height:1.5; color:var(--text); margin-bottom:0.75rem}
.impressum-card p, .impressum-card ul{color:var(--muted); line-height:1.6}
.impressum-card ul{padding-left:1.25rem}
.impressum-card a{color:var(--brand); text-decoration:underline}

@media (prefers-color-scheme: dark){
  .impressum-card{border-color:rgba(255,255,255,0.03); background:var(--card)}
  .impressum-card p, .impressum-card ul{color:var(--muted)}
}

/* Layout for impressum: main details left, contact aside right */
.impressum-grid{display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start}
@media(max-width:991px){
  .impressum-grid{grid-template-columns:1fr; gap:18px}
}

.impressum-hero{background:linear-gradient(90deg, rgba(201,161,74,0.06), transparent);}
.impressum-badge{background:var(--brand); color:#fff; font-weight:700; padding:.35rem .6rem; border-radius:8px}

.impressum-contact .contact-card{background:var(--card); border:1px solid rgba(0,0,0,0.04); padding:12px; border-radius:10px}
.impressum-contact .contact-card h4{font-size:1rem; margin-bottom:.5rem}
.impressum-contact dl{margin:0; color:var(--muted)}
.impressum-contact dt{font-weight:700}
.impressum-contact dd{margin:0 0 0.75rem 0}

@media (prefers-color-scheme: dark){
  .impressum-hero{background:linear-gradient(90deg, rgba(91,75,255,0.04), transparent)}
  .impressum-badge{background:var(--brand)}
  .impressum-contact .contact-card{border-color:rgba(255,255,255,0.03); background:var(--card)}
}

/* Additional styling to better match the reference layout */
.impressum-logo{height:56px; border-radius:8px; box-shadow:0 8px 30px rgba(11,15,26,0.06)}
.impressum-left{background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98)); border-left:4px solid var(--brand)}
.impressum-left h2{letter-spacing:-0.5px}
.impressum-left h3{font-size:.95rem; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-top:1.25rem}
.impressum-sep{border:0; height:1px; background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); margin:18px 0}

.sticky-contact{position:sticky; top:100px}
.contact-card a.btn{width:100%}

@media (prefers-color-scheme: dark){
  .impressum-left{background:linear-gradient(180deg, rgba(18,22,32,0.6), rgba(18,22,32,0.4)); border-left:4px solid rgba(91,75,255,0.9)}
  .impressum-left h3{color:var(--muted)}
  .impressum-sep{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))}
}