/* === Aivora Green Theme === */
   :root{
     --brand-dark: #063a2e;   /* dunkles Aivora-Grün */
     --brand-mid:  #0a7b5d;   /* mittleres Aivora-Grün */
     --brand-light:#10d07a;   /* helles Aivora-Grün */
   }

   body{
     margin:0;
     background:
       radial-gradient(1400px 600px at 100% -10%, rgba(16,208,122,.18) 0%, rgba(0,0,0,0) 60%),
       linear-gradient(180deg, var(--brand-dark) 0%, #085845 38%, var(--brand-mid) 68%, var(--brand-light) 100%);
     background-attachment: fixed;
     color:#e6f2eb;
     font-family: system-ui, sans-serif;
   }

   /* Header / Markenname */
   
   .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--brand-light); /* helles Aivora-Grün */
     text-decoration: none;
     font-weight: 800;
     letter-spacing: .2px;
   }

   .brand span:first-child {
     color: #ffd86b; /* warmes Blitzgelb */
   }

   
   /* Untertitel unter der Hauptüberschrift */
   
   .lead {
     color: #ffffff; /* weißer Text */
   }

   /* Hauptüberschrift (Hero Title) */

   .hero h1 {
     font-size: clamp(28px, 6vw, 48px);
     line-height: 1.18;
     display: inline-block;
     padding: 2px 0 3px 0;
     -webkit-text-stroke: 0.3px transparent;
     letter-spacing: .3px;
     background: linear-gradient(90deg, #ffffff 0%, #8effc2 50%, #3bf59d 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-shadow: 0 0 12px rgba(16, 208, 122, 0.25);
     margin: 0 0 10px;
   }



   
   /* Buttons (Demo anfragen etc.) */

   .btn, .button, .button-primary {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     background: linear-gradient(135deg, #10d07a 0%, #7affc9 100%);
     color: #fff;
     font-weight: 700;
     border: 0;
     border-radius: 10px;
     padding: 12px 22px;
     cursor: pointer;
     box-shadow: 0 0 16px rgba(16, 208, 122, 0.25);
     transition: all 0.25s ease;
     text-decoration: none;
   }

   /* Hover-Effekt */

   .btn:hover, .button-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 0 24px rgba(16, 208, 122, 0.45);
     filter: brightness(1.05);
   }

   /* Alternative „ghost“-Buttons (z. B. Funktionen ansehen) */

   .btn.ghost {
     background: transparent;
     border: 1px solid rgba(255,255,255,0.25);
     color: #fff;
     box-shadow: none;
   }
   
   .btn.ghost:hover {
     background: rgba(255,255,255,0.08);
     border-color: rgba(255,255,255,0.4);
   }


   /* Karten / Boxen */
   
   .card, .feature, .panel{
     background: rgba(10,15,20,.55);
     border: 1px solid rgba(255,255,255,.06);
     backdrop-filter: blur(6px);
   }

   /* Navigation oben */
   
   .links a {
     color: var(--brand-light); /* helles Aivora-Grün */
     text-decoration: none;
     margin-left: 14px;
     padding: 8px 10px;
     border-radius: 10px;
     transition: background 0.2s ease, color 0.2s ease;
   }

   .links a:hover, .links a:focus {
     color: #fff; /* Weiß beim Hover */
     background: rgba(16, 208, 122, 0.15); /* sanftes grünliches Highlight */
     outline: none;
   }

   /* Allgemeine Links (z. B. im Text) */
   
   a {
     color: var(--brand-light);
     text-decoration: none;
   }

   a:hover {
     text-decoration: underline;
   }


   /* Footer-Farbe anpassen */
   
   .footer {
     color: #d9f7e5;  /* helleres Grünlich-Weiß für bessere Lesbarkeit */
   }

   .footer a {
     color: #ffffff;  /* Links in Weiß */
     text-decoration: none;
   }

   .footer a:hover {
     text-decoration: underline;  /* kleine Hover-Markierung */
   }




   /* === Layout & Header/Nav === */

   .container { width:100%; max-width:1100px; margin-inline:auto; padding-inline:20px; }

   .header { position: sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px); }
   .nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }

   .links a {
     color: var(--brand-light);
     text-decoration: none;
     margin-left: 14px;
     padding: 8px 10px;
     border-radius: 10px;
     transition: background .2s ease, color .2s ease;
   }
   .links a:hover, .links a:focus { color:#fff; background: rgba(16,208,122,.15); outline: none; }

   /* === Hero / Abstände === */
   .hero { padding: 70px 0 24px; }
   .badge{
     display:inline-block; font-size:12px; letter-spacing:.3px;
     padding:6px 10px; border-radius:999px;
     background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.06); color:#fff;
     margin-bottom:14px;
   }
   .lead { color:#fff; max-width:60ch; }

   /* === Cards & Rasters === */
   .card{
     background: rgba(10,15,20,.55);
     border: 1px solid rgba(255,255,255,.06);
     border-radius: 14px;
     padding:16px 14px;
     box-shadow: 0 8px 18px rgba(0,0,0,.25);
     backdrop-filter: blur(6px);
   }
   .small{ font-size:12px; color:#bfe7d7; }

   .kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top:18px; max-width:760px; }
   .section{ padding: 42px 0; }
   .grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
   .grid h3{ margin:0 0 6px; }

   /* === Footer === */
   .footer{ padding: 40px 0 60px; font-size:14px; }
   .footer a{ color:#fff; }

   /* === Responsive === */
   @media (max-width: 900px){
     .links{ display:none; }             /* vereinfachte mobile Nav */
     .kpis, .grid{ grid-template-columns: 1fr; }
     .hero{ padding-top: 44px; }
   }

   /* ===== Einheitliche Seitentitel ===== */
   
   .page-title{
     font-size: clamp(28px, 4.5vw, 40px);
     font-weight: 800;
     line-height: 1.15;
     margin: 28px 0 8px;
     color: #fff;
   }
   .page-sub{
     color:#bfe7d7;
     max-width: 62ch;
     margin:0 0 16px;
   }

   /* ===== Standard-Section & Grids ===== */
   
   .section{ padding: 42px 0; }
   .grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
   @media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

   /* ===== Karten-Optik angleichen ===== */
   
   .card, .panel{
     background: rgba(10,15,20,.55);
     border: 1px solid rgba(255,255,255,.06);
     border-radius: 14px;
     padding: 16px;
     box-shadow: 0 8px 18px rgba(0,0,0,.25);
     backdrop-filter: blur(6px);
   }

   /* ===== Nav: aktiver Link (aktuelles Menü) ===== */

   .links a.active{
     color:#fff;
     background: rgba(16,208,122,.18);
   }

   /* ===== Pricing-Layout (falls noch nicht vorhanden) ===== */

   .price-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); }
   .plan{ background: rgba(10,15,20,.55); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:18px; }
   @media (max-width: 980px){ .price-grid{ grid-template-columns: 1fr; } }

   /* ===== Formulare (Kontakt) ===== */

   form .row{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
   @media (max-width: 900px){ form .row{ grid-template-columns: 1fr; } }

   input[type="text"], input[type="email"], textarea{
     width:100%;
     background: rgba(255,255,255,.05);
     border:1px solid rgba(255,255,255,.12);
     color:#e6f2eb;
     border-radius: 12px;
     padding:12px 14px;
     outline: none;
   }
   input::placeholder, textarea::placeholder{ color: rgba(230,242,235,.55); }
   input:focus, textarea:focus{ border-color: rgba(16,208,122,.45); box-shadow: 0 0 0 2px rgba(16,208,122,.18); }


   /* ===== Pricing ===== */

   .price-grid{
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(3, minmax(0,1fr));
     align-items: stretch;
   }

   .plan{
     background: rgba(10,15,20,.55);
     border: 1px solid rgba(255,255,255,.06);
     border-radius: 14px;
     padding: 20px;
     box-shadow: 0 8px 18px rgba(0,0,0,.25);
     backdrop-filter: blur(6px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     transition: transform .2s ease, box-shadow .2s ease;
   }
   .plan:hover{
     transform: translateY(-3px);
     box-shadow: 0 12px 24px rgba(0,0,0,.30);
   }

   .plan h3{ margin: 0 0 8px; }
   .plan .price{
     margin: 6px 0 12px;
     display: flex; align-items: baseline; gap: 6px;
   }
   .plan .price .amount{ font-size: 28px; font-weight: 800; color: #fff; }
   .plan .price .per{ font-size: 13px; color: #bfe7d7; }

   .plan ul{ margin: 8px 0 14px; padding-left: 18px; }
   .plan li{ margin: 6px 0; }

   .plan .cta{ margin-top: 10px; }
   .plan .cta .btn{ width: fit-content; }

   .plan .note{ font-size: 12px; color:#bfe7d7; margin-top: 10px; }

   /* responsive */
   @media (max-width: 1100px){
     .price-grid{ grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 700px){
     .price-grid{ grid-template-columns: 1fr; }
   }

   /* ===== Kontaktseite ===== */
   
   .form-panel{ padding: 18px; }   /* extra Innenabstand im Card-Container */

   .contact-form .row{
     display: grid;
     grid-template-columns: 1fr 1fr;   /* 2 Spalten */
     gap: 12px;
   }

   .contact-form .field label{
     display:block;
     font-size: 12px;
     color: #bfe7d7;
     margin: 0 0 6px;
   }

   /* Inputs erben deine Basis-Styles – hier nur Feinschliff */

   .contact-form input[type="text"],
   .contact-form input[type="email"],
   .contact-form textarea{
     width: 100%;
     background: rgba(255,255,255,.05);
     border: 1px solid rgba(255,255,255,.12);
     color:#e6f2eb;
     border-radius: 12px;
     padding: 12px 14px;
     outline: none;
   }
   .contact-form textarea{ resize: vertical; }

   /* Textarea über beide Spalten */

   .contact-form .span-2{ grid-column: 1 / -1; }

   /* Button-Zeile */

   .contact-form .actions{
     grid-column: 1 / -1;           /* volle Breite */
     margin-top: 6px;
     display:flex; gap:10px;
   }

   /* Microcopy unter dem Button */

   .contact-form .fineprint{
     grid-column: 1 / -1;
     margin-top: 6px;
     font-size: 12px;
     color:#bfe7d7;
   }


  /* ===== Fix Kontaktformular-Layout ===== */

  *, *::before, *::after { box-sizing: border-box; }

  .contact-form .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .form-panel {
    max-width: 980px;
    margin-inline: auto;
  }



  /* ===== Mobile Fixes (Aivora) ===== */

  /* ===== Mobile Padding Fix ===== */

  .container {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 20px;  /* sorgt für sauberen Rand links/rechts */
  }

  @media (max-width: 700px) {
    .container {
      padding-inline: 16px; /* etwas enger auf sehr kleinen Displays */
    }
  }


  /* iOS: verhindert Auto-Zoom bei Inputs */
  html { -webkit-text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px; }

  /* Header über Content; Chat-Widget darunter, damit Menüs/Dropdowns nicht verdeckt sind */
  .header { z-index: 60; }
  #aivora-chat-root, .aivora-chat-root { z-index: 50; position: fixed; right: 20px; bottom: 20px; }

  /* iPhone Safe-Areas für Widget */
  @supports (padding: max(0px)) {
    #aivora-chat-root, .aivora-chat-root {
      right: max(16px, env(safe-area-inset-right));
      bottom: max(16px, env(safe-area-inset-bottom));
    }
  }

  /* Hamburger & Mobile-Menü (ergänzt deine bestehende .links-Regel) */
  .hamburger { display: none; }
  .mobile-menu { display: none; }

  @media (max-width: 900px){
    /* .links sind bereits hidden – jetzt Hamburger zeigen */
    .hamburger {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 40px; height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: #fff;
    }

    /* Slide-Dropdown */
    .mobile-menu {
      display: block; /* sichtbar, aber per .is-open steuerbar */
      position: absolute;
      left: 0; right: 0; top: calc(16px + 48px); /* unter deiner .nav (16px padding + ~48px Höhe) */
      background: rgba(10,15,20,.98);
      border-top: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 12px 24px rgba(0,0,0,.35);
      transform: translateY(-8px);
      opacity: 0; pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
 
    .mobile-menu a {
      display: block;
      padding: 14px 20px;
      color: #e6f2eb;
      text-decoration: none;
    }
    .mobile-menu a:hover { background: rgba(255,255,255,.06); text-decoration: none; }

    /* Kleinere Typo-/Layout-Feinschliffe mobil */
    .hero { padding-top: 44px; }
    .lead { font-size: 15.5px; }
    .kpis { grid-template-columns: 1fr; max-width: 100%; }
  }

  /* Optional: Chatpanel-Container falls du Klassen nutzt */
  @media (max-width: 640px){
    .chat-panel { max-height: min(80dvh, 620px); display:flex; flex-direction:column; overflow:hidden; }
    .chat-messages { overflow:auto; -webkit-overflow-scrolling: touch; }
  }

  /* Tap-Targets etwas größer auf Mobile */
  @media (max-width: 900px){
    .btn { padding: 12px 18px; font-size: 16px; }
  }


  /* ====== Mobile Menu Styling (Aivora Green Look) ====== */


  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;                         /* volle Breite */
    background: rgba(12, 30, 25, 0.88);  /* dunkler, leicht transparent */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px) saturate(120%);
    display: none;
    flex-direction: column;
    text-align: left;
    padding: 10px 0;
    z-index: 999;
    animation: menuSlideDown 0.25s ease;
  }

  .mobile-menu.is-open {
    display: flex;
    animation: menuSlideDown 0.25s ease;
  }

  .mobile-menu a {
    color: #f8fff9;
    padding: 14px 24px;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu a:hover {
    background: rgba(16,208,122,0.18);
    color: #ffffff;
  }

  /* sanftes Einblenden von oben */
  @keyframes menuSlideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* ===== Chat Datenschutz Overlay ===== */

  .chat-consent-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 16, 0.88);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-consent-box {
    max-width: 420px;
    background: rgba(12, 30, 25, 0.95);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color: #f0fff8;
  }

  .chat-consent-box h3 {
    margin: 0 0 10px;
    font-size: 18px;
  }

  .chat-consent-box p {
    font-size: 14px;
    line-height: 1.5;
    color: #cfeee0;
  }

  .chat-consent-box a {
    color: #7affc9;
    text-decoration: underline;
  }

  .chat-consent-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }