/* ============================================================
   Typgraphy
   ============================================================ */

strong, b {font-weight: 600;}

/* Caption bei Cards*/
.lead { font-size: 1rem; font-weight: 400;}

/* Überschriften*/
@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 2.4rem;
    }
}

.h3, h3 {
    font-size: calc(1.0rem + .6vw);
}

/* Zitate*/
blockquote, .blockquote-footer {
	font-style: italic;
    padding-left: 1.2rem;
}
/* Tastenkappen – global (Rich-Text, Markdown, überall) */
body kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  font-family: var(--bs-font-monospace);
  font-size: 0.875em;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-secondary-color);
  border-radius: 0.25rem;
  box-shadow: 0 2px 0 var(--bs-secondary-color);
}

/* Fenced code blocks – nur im Markdown 
.md-content pre {
  padding: 1rem;
  background: var(--bs-tertiary-bg);
  border-radius: 0.375rem;
  overflow-x: auto;
}
.md-content pre code {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.md-content pre:has(kbd) {
  line-height: 1.8;
}
.md-content pre kbd {
  line-height: 1;
}*/

/* ============================================================
   Links
   ============================================================ */

a       { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
a { text-underline-offset: var(--link-underline-offset);}


/* ==========================================================
   Button-Styling
   ========================================================== */

.btn.btn-primary:has(svg.pulse-scale) {
  padding: .8rem;
}
.btn {
  margin: 0 0 2rem 0;
}

.btn-fix {
    width: clamp(160px, 15vw, 220px);
}

/* ==========================================================
   Accordion
   ========================================================== */

.accordion-button {
  font-weight: 600;
}

/* Details/Summary als Accordion */
details.accordion-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
}
details.accordion-item > summary::-webkit-details-marker {
  display: none;
}

details.accordion-item > summary .accordion-button {
  width: 100%;
  pointer-events: none; /* Klick geht auf summary */
}
details.accordion-item[open] > summary .accordion-button {
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
    var(--bs-accordion-border-color);
}
details.accordion-item[open] > summary .accordion-button.collapsed {
  /* open-State: collapsed-Klasse via JS entfernen oder per CSS überschreiben */
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
}
details.accordion-item[open] > summary .accordion-button::after {
  transform: var(--bs-accordion-btn-icon-transform);
}

/* ==========================================================
   Layout
   ========================================================== */
   

/*Sticky menu*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px; 
}

/*Rechte Spalte auf Mobilgeräten zentrieren*/
@media (max-width: 767px) {
  .crx-grid .col-md-4 .block-html {
    align-items: center !important;
    justify-content: center !important;
  }
  .crx-grid .col-md-4 .btn {
    margin-top: 2rem;
    margin-bottom: -1rem; 
    text-align: center;
  }
}

.img-fluid {
    padding: 2rem;
}

/* ==========================================================
   .glow – Leuchtende Spalten 
   ========================================================== */
   
.crx-grid [class*="col-"].glow {
  background-color: var(--bs-info-bg-subtle);
  background-clip: border-box;
  border: .5px solid var(--bs-primary);
  border-radius: var(--bs-border-radius);
  box-shadow:
    0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color),
    0 0 16px 4px rgba(var(--bs-primary-rgb), 0.30);
  padding: 1rem;
  margin-top: 1rem;
  margin-left: calc(var(--bs-gutter-x) * 0.5);
}

/* ==========================================================
   Navbar 
   ========================================================== */
   
.navbar form[role="search"] {
  align-items: center;
}
#navbar .btn {
  margin-bottom: 0;
}

/* Letzter Navbar-Eintrag als CTA-Button */
.navbar-nav .nav-item:last-child .nav-link {
  font-weight: 600;
  color: white !important;
  background-color: var(--bs-primary);
  border-radius: var(--bs-border-radius);
  display: inline-block;
  padding-inline: 0.5rem;
  margin: 0 0.5rem 0 0.5rem;
}

.navbar-nav .nav-item:last-child .nav-link:hover {
  background-color: var(--bs-info);
}

.navbar-nav .nav-item:last-child .nav-link.active {
  background-color: #6EBCBC;
}

.navbar-nav .nav-link:hover {
  background-color: var(--bs-info);
}
.navbar-nav .nav-link.active {
  font-weight: 600;
  color: white;
  background-color: #6EBCBC;
  border-radius:  var(--bs-border-radius);
  display: inline-block;
  padding-inline: 0.5rem;
}
.navbar-toggler:focus{
  box-shadow: none;
}
  @media (max-width: 991px) {
  .navbar-nav {
    align-items: center;
  }
    #navbar form[role="search"] {
    justify-content: center;
    width: 100%;
  }
  }

/* ==========================================================
   Footer
   ========================================================== */ 
   
footer {
  color: #fff;
  margin-top: 2rem;
}

footer a {
  color: #fff;
}

footer .crx-grid [class*="col-"]:has(> p, > h2, > h3, > h4, > ul, > ol, > table) {
  background-color: transparent;
  padding: 0;
  border-left: none;
  border-radius: 0;
  background-clip: unset;
}
footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 {
  color: #fff;
}
footer .container-fluid.crx-grid {
  padding: 2rem;
}

/* ==========================================================
   Animationen
   ========================================================== */ 


.pulse-scale {
  animation: pulse-scale 1.4s ease-in-out infinite;
  transform-origin: center;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ==========================================================
   Hero 
   ========================================================== */ 
   
.hero-fg {
    padding: 6% 0 6%;
}
/* Hintergünde für Hero, Filter ausschließen*/
.hero-fg .hero-title,
#content form:not(#filter) {
  background-color: rgba(255, 255, 255, 0.78);
  padding: 1rem;
  border-radius: var(--bs-border-radius);
}
#filter {
  padding: 1rem 0;
}
/* Schriftfarbe statt blassem lead */
.hero-caption {
  color: var(--bs-body-color);
  font-size: 1.25rem;
}
.hero-bg.parallax {
	margin-bottom: 1.4rem;
}

/* ==========================================================
   Forms
   ========================================================== */

/* Pflichtfeld-Sternchen – alle Forms */
.row:has([required]) .col-form-label::after {
  content: " *";
  color: var(--bs-danger);
}
.form-check:has([required]) .form-check-label::before {
  content: "* ";
  color: var(--bs-danger);
}

/* Eingabefelder BG */
.form-control {
  background-color: var(--bs-info-bg-subtle);
  border-color: var(--bs-secondary);
}

/* Mobile: Labels über Feldern */
form[id^="crx-form-"] .row {
  flex-direction: column;
}

/* Button-Zeile immer als row – muss NACH .row stehen */
form[id^="crx-form-"] .row:last-of-type {
  flex-direction: row;
  justify-content: flex-end;
}

form[id^="crx-form-"] [type="submit"] {
  display: block;
  margin: 0;
}

form[id^="crx-form-"] .col-form-label,
form[id^="crx-form-"] .col-sm-10 {
  width: 100%;
  max-width: 100%;
}

/* Desktop (ab 768px) – Bestellformular */
@media (min-width: 768px) {
  form#crx-form-17 {
    max-width: 66.6%;
  }
  form#crx-form-17 .row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
form#crx-form-17 .col-form-label {
    width: 40%;
    min-width: 40%;
    max-width: 40%;
    white-space: nowrap;
  }
  form#crx-form-17 .col-sm-10 {
    flex: 1;
    width: auto;
    max-width: none;
  }
  form#crx-form-17 .col-sm-10:has(
    #id_anzahl_lizenzen_professional,
    #id_anzahl_lizenzen_professional_plus
	) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  form#crx-form-17 #id_anzahl_lizenzen_professional,
  form#crx-form-17 #id_anzahl_lizenzen_professional_plus,
  form#crx-form-17 #id_anzahl_zusatzliche_jahre_support_und_updateservice  {
    width: 62%;
    flex: none;
  }
}

/* Tablet (456px–767px) */
@media (min-width: 456px) and (max-width: 767px) {
  form[id^="crx-form-"] .row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  form[id^="crx-form-"] .col-form-label {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    white-space: nowrap;
  }
  form[id^="crx-form-"] .col-sm-10 {
    width: 100%;
    max-width: 100%;
    flex: 1;
  }
}

/* Desktop (ab 768px)*/
@media (min-width: 768px) {
  form[id^="crx-form-"] {
    max-width: 66.6%;
  }
  form[id^="crx-form-"] .row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  form[id^="crx-form-"] .col-form-label {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    white-space: nowrap;
  }
  form[id^="crx-form-"] .col-sm-10 {
    width: 100%;
    max-width: 100%;
    flex: 1;
  }
}
/* ============================================================
  Bootstrap */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Eingabefelder BG – auch Selects, im Ruhezustand */
.form-control,
.form-select {
  background-color: var(--bs-info-bg-subtle);
  border-color: var(--bs-secondary);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color:     var(--bs-primary);
}

.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb     { background-color: var(--bs-primary); }

/* ==========================================================
   Grids
   ========================================================== */ 
/* Adds a bit of spacing to "Responsive Grid Row" blocks. */
.crx-grid {
  padding-top: .3rem;
  padding-bottom:.3rem;
}
.crx-grid .crx-grid {
  padding-top: 0;
  padding-bottom: 0;
}
/* Vertikaler Abstand zwischen den gestapelten weissen Content-Spalten. */
#content .crx-grid [class*="col-"]:has(> p, > h2, > h3, > h4, > ul, > ol, > table) {
  margin-bottom: 1rem;
}

/* ==========================================================
   Transparente .84 weiss Hintergründe
   ========================================================== */

/* Hintergünde für Textelemente*/
.crx-grid [class*="col-"]:has(> p, > h2, > h3, > h4, > ul, > ol, > table) {
  background-color: rgba(255, 255, 255, 0.84);
  padding: 1rem;
  border: calc(var(--bs-gutter-x) * 0.5) solid transparent;  
  background-clip: padding-box;
  border-radius: calc(var(--bs-border-radius) + var(--bs-gutter-x) * 0.5);  
}

/* letztes Element in der Karte: kein überschüssiges margin-bottom */
.crx-grid [class*="col-"]:has(> p, > h2, > h3, > h4, > ul, > ol, > table) > :last-child {
  margin-bottom: 0;
}

/* Tabellenhintergründe auch */
.crx-grid table tbody td,
.crx-grid table tbody th {
  background-color: transparent !important;
}

/* Aufzählung einrücken, wegen Aufzählungzeichen am Rand */
#content ul,
#content ol {
  padding-left: 2rem;
}