/* assets/css/style.css */

/* ----------------------------------------
   1. Farbvariablen für modernes Dark-Theme
   ---------------------------------------- */
:root {
  /* Hintergrundfarben */
  --bs-body-bg:         #121216;  /* Sehr dunkler Haupthintergrund */
  --bs-secondary-bg:    #1e1e28;  /* Sekundärer Hintergrund (Karten, Navbar) */
  --bs-light-bg:        #272732;  /* Helle AKZENT-Fläche für Inputs, Buttons, etc. */

  /* Textfarben */
  --bs-body-color:      #e0e0e0;  /* Haupttext in Weiß/Grau */
  --bs-muted-color:     #a0a0a8;  /* Sekundärer Text in hellem Grau */

  /* Primär-/Sekundärfarben */
  --bs-primary:         #4f5dff;  /* Hellblau als Akzent */
  --bs-primary-hover:   #6a7fff;  /* Hellblauer Hover */
  --bs-success:         #28a745;  /* Standard-Grün (Erfolgsmeldungen) */
  --bs-danger:          #dc3545;  /* Standard-Rot (Fehlermeldungen) */
  --bs-border-color:    #3a3a48;  /* Grauer Rahmen für Input/Tabellen */

  /* Tabellen & Karten */
  --bs-table-head-bg:   #2c2c3c;  /* Tabellenkopf-Hintergrund */
  --bs-card-bg:         #1e1e28;  /* Karten-Hintergrund */
}

/* ----------------------------
   2. Grundlegende Body-Styles
   ---------------------------- */
body {
  background-color: var(--bs-body-bg) !important;
  color:            var(--bs-body-color) !important;
  font-family:      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:      1.6;
}

/* Link-Styles */
a {
  color: var(--bs-primary) !important;
  text-decoration: none;
}
a:hover {
  color: var(--bs-primary-hover) !important;
  text-decoration: underline;
}

/* ----------------------------------
   3. Navbar & Header / Footer Styles
   ---------------------------------- */
.navbar, .footer {
  background-color: var(--bs-secondary-bg) !important;
  color:            var(--bs-body-color) !important;
}
.navbar .navbar-brand,
.footer .text-light {
  color: var(--bs-body-color) !important;
}

/* -------------------------
   4. Karten (Bootstrap Card)
   ------------------------- */
.card {
  background-color: var(--bs-card-bg) !important;
  color:            var(--bs-body-color) !important;
  border:           1px solid var(--bs-border-color) !important;
  border-radius:    0.5rem !important;
  box-shadow:       0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------
   5. Formular-Elemente (Input)
   -------------------------- */
.form-control,
.form-select,
textarea.form-control {
  background-color: var(--bs-light-bg) !important;
  color:            var(--bs-body-color) !important;
  border:           1px solid var(--bs-border-color) !important;
  border-radius:    0.25rem !important;
  transition:       border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control::placeholder,
textarea::placeholder {
  color: var(--bs-muted-color) !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background-color: var(--bs-light-bg) !important;
  color:            var(--bs-body-color) !important;
  border-color:     var(--bs-primary) !important;
  box-shadow:       0 0 0 0.2rem rgba(79, 93, 255, 0.3) !important;
  outline:          none !important;
}

/* ------------------
   6. Button-Anpassung
   ------------------ */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color:     var(--bs-primary) !important;
  color:            #ffffff !important;
  font-weight:      500;
  transition:       background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-hover) !important;
  border-color:     var(--bs-primary-hover) !important;
  color:            #ffffff !important;
  box-shadow:       0 0 0 0.2rem rgba(79, 93, 255, 0.4) !important;
}

/* Active / Klick: leichter "press"-Effekt wie bei vielen Buttons */
.btn-primary:active,
.btn-primary.active {
  transform: translateY(1px) scale(.997);
  box-shadow: 0 6px 14px rgba(10,10,15,0.25) !important;
}

.btn-success {
  background-color: var(--bs-success) !important;
  border-color:     var(--bs-success) !important;
  color:            #ffffff !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #3cb256 !important;    /* dein vorhandenes Hover-Farbset */
  border-color:     #3cb256 !important;
  color:            #ffffff !important;
  box-shadow:       0 0 0 0.2rem rgba(79, 93, 255, 0.4) !important;
  outline: none !important;
}

/* Active / Klick: leichter "press"-Effekt wie bei vielen Buttons */
.btn-success:active,
.btn-success.active {
  transform: translateY(1px) scale(.997);
  box-shadow: 0 6px 14px rgba(10,10,15,0.25) !important;
}

.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color:     var(--bs-danger) !important;
  color:            #ffffff !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #e55361 !important;
  border-color:     #e55361 !important;
  color:            #ffffff !important;
}

.btn-outline-light {
  color:            var(--bs-body-color) !important;
  border-color:     var(--bs-border-color) !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: var(--bs-border-color) !important;
  color:            var(--bs-body-color) !important;
}

/* -------------------------
   7. Alert-Boxen (Bootstrap)
   ------------------------- */
.alert {
  background-color: var(--bs-secondary-bg) !important;
  color:            var(--bs-body-color) !important;
  border:           1px solid var(--bs-border-color) !important;
  border-radius:    0.25rem !important;
}

/* -----------------------------
   8. Tabellen (Bootstrap Table)
   ----------------------------- */
.table {
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

.table-dark {
  background-color: var(--bs-card-bg) !important;
}

.table thead {
  background-color: var(--bs-table-head-bg) !important;
}

.table th,
.table td {
  border: 1px solid var(--bs-border-color) !important;
  padding: 0.75rem 1rem;
}

/* -------------------------------
   9. Scrollbar (optional Styling)
   ------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--bs-secondary-bg);
}
::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background-color: var(--bs-secondary-bg);
}

/* -------------------------
   10. Zusätzliche Anpassungen
   ------------------------- */

/* Headings leicht kontrastreicher */
h1, h2, h3, h4, h5, h6 {
  color: var(--bs-body-color) !important;
  font-weight: 600;
}

/* Links in Tabellen und Karten */
.card a,
.table a {
  color: var(--bs-primary) !important;
}
.card a:hover,
.table a:hover {
  color: var(--bs-primary-hover) !important;
  text-decoration: underline;
}

/* Formular-Titel und Labels */
.form-label {
  color: var(--bs-body-color) !important;
  font-weight: 500;
}

/* Footer-Link (Impressum) */
.footer a {
  color: var(--bs-muted-color) !important;
}
.footer a:hover {
  color: var(--bs-body-color) !important;
  text-decoration: none;
}

/* -----------------------------------------
*/
/* 11. Hintergrund und Glasskacheln
*/

/* Body: statischer, subtiler Verlauf basierend auf dem vorhandenen Dunkelton */
body {
background: linear-gradient(120deg,
var(--bs-body-bg) 0%,
rgba(34,36,48,0.88) 45%,
rgba(79,93,255,0.03) 100%
);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}

/* Benefits: zentrierter Block mit linksbündigen Bullet-Points */
.benefits-wrap {
  text-align: center;        /* zentriert den Block innerhalb der Kachel */
  margin-top: 0.5rem;
}

.benefits {
  display: inline-block;     /* macht die Liste zu einem zentrierten Block */
  text-align: left;          /* aber die Items bleiben linksbündig */
  margin: 0.5rem 0 0 0;      /* Abstand oben */
  padding-left: 1.2rem;      /* Platz für Bullets */
  max-width: 56ch;           /* verhindert sehr breite Zeilen, optional */
  line-height: 1.45;
}

/* Optional: kleinere, dezente Bullet-Style für Konsistenz mit Dark-Theme */
.benefits li {
  margin-bottom: 0.45rem;
  color: var(--bs-body-color); /* nutzt deine bestehende Textfarbe */
  font-size: 0.98rem;
}


/* Header & Footer explizit solid halten */
.navbar, .footer {
background-color: var(--bs-secondary-bg) !important;
}


/* Main: keine display-Override mehr – Bootstrap-Klassen im HTML regeln das Layout. */
main {
padding: 3.5rem 0; /* etwas Abstand oben/unten für die Landing-Section */
}


/* Responsive: Buttons nebeneinander auf mittleren+ Bildschirmen, gestapelt auf kleinen */
@media (min-width: 768px) {
main .d-flex.flex-column.gap-3.align-items-center {
flex-direction: row !important;
gap: 1.25rem !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
}
.btn-landing { width: auto; min-width: 220px; }
}


@media (max-width: 767.98px) {
main .d-flex.flex-column.gap-3.align-items-center {
flex-direction: column !important;
gap: .75rem !important;
}
}

@media (max-width: 420px) {
  main > .text-center {
    padding-bottom: 4.6rem; /* mehr Platz auf sehr kleinen Geräten */
  }
}


/* Leichter innerer Kontrast, damit Text / Buttons auf allen Stellen gut lesbar bleiben */
main > .text-center {
  /* Frosted / milky glass look */
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 30px rgba(12,12,20,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  padding: 1.25rem;
  padding-bottom: 3.6rem; /* <-- HIER ändern */
  border-radius: 0.5rem;
  transition: box-shadow 180ms ease, transform 180ms ease;
  position: relative;
}


/* Price hint im Fluss, mittig und dezent */
.price-hint {
  display: inline-block;
  margin: 1.0rem auto 0;            /* Abstand über dem Hinweis */
  font-size: 0.88rem;
  color: rgba(224,224,224,0.62);
  background: rgba(255,255,255,0.02);
  padding: 0.22rem 0.6rem;
  border-radius: 0.35rem;
  pointer-events: none;
  user-select: none;
  -webkit-backdrop-filter: blur(3px) saturate(105%);
  backdrop-filter: blur(3px) saturate(105%);
}



/* --- Glass cards: große Karte + drei kleine darunter (korrekt getrennte Regeln) --- */

/* --- Fix: entferne globale seitliche Margins, setze Ränder nur für die große Kachel --- */
.invofox-glass-card {
  /* keine seitlichen Margins hier, damit small-cards die gesamte Spaltenbreite nutzen */
  margin: 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 50px rgba(10,10,15,0.6), inset 0 1px 0 rgba(255,255,255,0.02);

  opacity: 0;
  transform: translateY(14px) scale(0.995);
  transition: transform 520ms cubic-bezier(.2,.9,.16,1), opacity 480ms ease-out;
  will-change: transform, opacity;
  pointer-events: none;
  position: relative;
  z-index: 1000;
}
.invofox-glass-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}


/* --- Layout-Fix: große Kachel oben, drei kleine darunter --- */
/* --- Layout: große Platzhalter-Kachel (mit 10% Rändern) + 3 gleichverteilte kleine Kacheln --- */

.invofox-glass-wrap {
  display: flex;
  flex-direction: column;    /* große Kachel oben, row darunter */
  align-items: stretch;      /* Karten dehnen sich entlang der Breite (mit Seitenrändern) */
  gap: 2.5rem;
  padding: 6.5rem 0;
  box-sizing: border-box;
}

/* Obere große Platzhalter-Kachel: explizite 10vw Ränder */
.invofox-glass-wrap > .invofox-glass-card:first-of-type {
  margin-left: 10vw;
  margin-right: 10vw;
  width: calc(100% - 20vw);
  max-width: none;
  box-sizing: border-box;
  text-align: center;    /* zentriert h3, p, etc. */
  align-items: center;   /* sorgt dafür, dass Flex-Children (Buttons) horizontal zentriert sind */
}

/* --- Grid für drei kleine Kacheln: außen 10vw Padding, drei gleich-verteilte Spalten --- */
.invofox-card-row {
  width: 100%;
  padding: 0 10vw; /* jeweils 10% Außenabstand */
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr)); /* jede Spalte mindestens 240px, sonst gleich verteilt */
  gap: 3.5vw; /* Abstand zwischen den Karten, skaliert mit Viewport-Breite */
  box-sizing: border-box;
  margin: 0 auto;
}

/* Small-cards: füllen die Grid-Cell komplett */
.small-card {
  width: 100%;
  box-sizing: border-box;
  min-height: 260px; /* optional: sorgt für ansprechende Höhe — anpassen bei Bedarf */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* ---- Farben für die drei kleinen Kacheln (nur diese ändern) ---- */

#invoCard1 {
  /* Grün: #349C55 */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), /* milchglas oben */
    linear-gradient(180deg, #349C55 0%, #2f8f4d 100%);                        /* reine Farbe darunter */
  border-color: rgba(52,156,85,0.12) !important;
  color: #ffffff; /* Weißer Text auf grün */
  text-align: center;    /* zentriert h3, p, etc. */
  align-items: center;   /* sorgt dafür, dass Flex-Children (Buttons) horizontal zentriert sind */
}

#invoCard2 {
  /* Blau: #1668BD */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #1668BD 0%, #135aa3 100%);
  border-color: rgba(22,104,189,0.12) !important;
  color: #ffffff; /* Weißer Text auf blau */
  text-align: center;    /* zentriert h3, p, etc. */
  align-items: center;   /* sorgt dafür, dass Flex-Children (Buttons) horizontal zentriert sind */
}

#invoCard3 {
  /* Orange: #FFB318 */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #FFB318 0%, #e69e12 100%);
  border-color: rgba(255,179,24,0.12) !important;
  color: #ffffff; 
  text-align: center;    /* zentriert h3, p, etc. */
  align-items: center;   /* sorgt dafür, dass Flex-Children (Buttons) horizontal zentriert sind */
}

/* Kleine Ergänzung: Buttons / Links innerhalb der farbigen Kacheln
   behalten gute Kontraste – überschreibt nur innerhalb der drei Kacheln. */
#invoCard1 .btn,
#invoCard2 .btn,
#invoCard3 .btn {
  color: inherit !important;
  border-color: rgba(255,255,255,0.14) !important;
  background-clip: padding-box;
}

/* dezentes Info-Icon in Kreis */
.info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  font-size:12px;
  font-weight:600;
  color: rgba(224,224,224,0.95);
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: help;
  line-height:1;
}

/* leicht gräulicher Hover-Effect */
.info-icon:hover,
.info-icon:focus {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.98);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,93,255,0.07);
}

/* Inhalt „i“ */
.info-icon::after { content: "i"; display:block; }

/* Tooltip - dunkler Hintergrund, sehr heller Text für guten Kontrast */
.tooltip {
  max-width: 260px; /* optional, damit längere Texte umbrechen */
}

.tooltip .tooltip-inner {
  background-color: rgba(0,0,0,0.86) !important; /* dunkle Box */
  color: rgba(255,255,255,0.95) !important;       /* deutlich hellere Schrift */
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.2;
  padding: .45rem .6rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Pfeil farblich an die Box anpassen */
.tooltip .tooltip-arrow::before {
  background-color: rgba(0,0,0,0.86) !important;
}

/* Optional: bei sehr kurzen Tooltips weniger Breite */
.tooltip .tooltip-inner.short {
  padding-left: .45rem;
  padding-right: .45rem;
}



/* Responsive: bei schmalen Viewports auf 1 Spalte / 2 Spalten umschalten */
@media (max-width: 1100px) {
  .invofox-card-row {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 4vw;
    padding: 0 6vw;
  }
}

@media (max-width: 767.98px) {
  .invofox-card-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 6%;
  }
  .invofox-glass-wrap > .invofox-glass-card:first-of-type {
    margin-left: 6%;
    margin-right: 6%;
    width: calc(100% - 12%);
  }
  .small-card { min-height: auto; }
}