/*---------------------------------
    CSS-Variablen für Farben & Abstände
  ---------------------------------*/
  :root {
  --color-text: #000;
  --color-bg: #fff;
  /* Akzentfarben */
  --color-primary: rgba(251, 176, 59, 0.1);      /* #fbb03b */
  --color-primary-light: rgba(251, 176, 59, 0.05);
  --color-primary-hover: rgba(251, 176, 59, 0.15);
  --color-secondary: rgba(247, 147, 30, 0.2);    /* #f7931e */
  --color-secondary-hover: rgba(247, 147, 30, 0.3);
  --color-accent: rgba(241, 90, 36, 0.75);       /* #f15a24 */
  --border-color: #ccc;
  --border-radius-pill: 999px;
  --spacing-sm: 5px;
  --spacing-md: 12px;
  --spacing-lg: 18px;
  }

  /*---------------------------------
    FONTS
  ---------------------------------*/
@font-face {
  font-family: 'bbiv';
  src: url('/fonts/bbiv-light.woff2') format('woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'bbiv';
  src: url('/fonts/bbiv-regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'bbiv';
  src: url('/fonts/bbiv-medium.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'bbiv';
  src: url('/fonts/bbiv-bold.woff2') format('woff2');
  font-weight: 700;
}

p.teaser {
  font-family: 'bbiv', sans-serif;
  font-weight: 500;
  margin: var(--spacing-lg) 0;
  line-height: 1.2;
  font-size: 1.8em;
}

/*---------------------------------
  RESET & BASE
---------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Nur das HTML-Element scrollt */
html {
  height: 100%;           /* volle Höhe, damit Scroll-Container */
  overflow-y: auto;       /* vertikaler Scrollbalken */
  overflow-x: hidden;     /* kein horizontaler Scrollbalken */
}

body {
  width: 100%;
  min-height: 100vh;      /* mindestens Viewport-Höhe */
  overflow: visible;      /* kein eigener Scroll */
  font-family: 'bbiv', Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

  /*---------------------------------
    HEADINGS & TEXT
  ---------------------------------*/
  h1, h2, h3, h4, h5 {
    margin: var(--spacing-lg) 0;
    line-height: 1.2;
    font-family: 'bbiv', Arial, sans-serif;
    font-weight: 700;
    color: var(--color-text);
  }
  h1 { font-size: 2.1em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.6em; }
  h4 { font-size: 1.35em; }
  h5 { font-size: 1.2em; }

  p, li, span {
    font-family: 'bbiv', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.05em;
    color: var(--color-text);
  }

  label {
    font-family: 'bbiv', Arial, sans-serif;
    font-weight: 500;
    font-size: 1.05em;
    color: var(--color-text);
  }

  /*---------------------------------
    LAYOUT CONTAINER
  ---------------------------------*/
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    background-color: var(--color-bg);
  }

  /*---------------------------------
    LOGO & COVER
  ---------------------------------*/
  .site-logo {
    text-align: center;
    margin-top: 26px;
  }
  .site-logo img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }
  @media (max-width: 600px) {
    .site-logo img {
      max-width: 80%;
    }
  }
  .cover-svg {
    display: block;
    width: 100%;
    max-width: 876px;
    margin: 26px auto 52px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /*---------------------------------
    BOXEN & FLEX
  ---------------------------------*/
  .box {
    padding: 26px 0;
    border-bottom: 2px solid rgba(251, 176, 59, 0.2);
    background-color: var(--color-bg);
  }
  .last-box { border-bottom: none; }
  .box-inner-light {
    background-color: var(--color-primary-light);
    padding: var(--spacing-lg);
    border-radius: 4px;
  }
  .book-ebooks-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin: 14px 0;
  }
  .book-ebooks-wrapper .box-inner-light {
    flex: 1 1 300px;
  }

.box-inner-light a,
form label a {
  color: #000 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(241, 90, 36, 0.4);
  transition: text-decoration-color 0.18s;
}

.box-inner-light a:hover,
.box-inner-light a:focus,
form label a:hover,
form label a:focus {
  color: #000 !important;
  text-decoration-color: rgba(241, 90, 36, 0.6);
}
    
.kundenart-fieldset {
  border: none;
  margin: 0 0 14px;
  padding: 0;
}

.kundenart-fieldset legend {
  /* Sichtbar machen */
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  margin-bottom: 8px;
  font-family: 'bbiv';
  font-weight: 500;
  font-size: 1.05em;
  color: var(--color-text);
}

.kundenart-option {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  font-family: 'bbiv', Arial, sans-serif;
  font-weight: 400;
  cursor: pointer;
}

.kundenart-option input[type="radio"] {
  margin-right: 8px;
  accent-color: rgba(241, 90, 36, 0.75);
}

  /*---------------------------------
    SCHATTEN
  ---------------------------------*/
.toggle-header,
.toggle-content,
.box-inner-light,
.ansprechperson-box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

  /*---------------------------------
    PILLBOXES
  ---------------------------------*/
  .pillbox {
    display: inline-block;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-pill);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    font-family: 'bbiv', Arial, sans-serif;
    font-weight: 500;
    font-size: 1.05em;
  }
  .link-pillbox { background-color: rgba(241, 90, 36, 0.1); }
  .link-pillbox:hover { background-color: rgba(241, 90, 36, 0.2); }
  .price-pillbox { background-color: var(--color-secondary); }

  /*---------------------------------
    ANSPRECHPERSON
  ---------------------------------*/
.ansprechperson-box {
  background: var(--color-primary-light);
  border-radius: 4px;
  margin: 48px auto 32px;
  padding: 32px 24px 28px 24px;
  max-width: 400px;
  border: none;
}
@media (max-width: 600px) {
  .ansprechperson-box { max-width: 100%; }
}

.ansprechperson-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ansprechperson-img {
  width: 168px; /* größer */
  height: 168px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(251,176,59,0.10);
  margin-bottom: 20px;
  background: #fff;
}

.ansprechperson-titel {
  font-family: 'bbiv', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.02em;
  margin-bottom: 18px;
  color: #333;
}

  /*---------------------------------
    ACCORDION (TOGGLE)
  ---------------------------------*/
  .toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary-light);
    padding: 10px 14px;
    margin-top: var(--spacing-lg);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .toggle-header:hover {
    background-color: var(--color-primary-hover);
  }
  .toggle-icon {
    font-size: 1.1em;
    margin-left: 18px;
    color: rgba(241, 90, 36, 0.5);
    transition: color 0.2s, transform 0.3s;
  }
  .toggle-content {
    display: none;
    padding: 14px 24px;
    background-color: var(--color-primary-light);
    border-radius: 4px;
    margin-bottom: var(--spacing-lg);
  }
.toggle-content p {
  margin-bottom: 1.2em;
  margin-top: 0.2em;
}
  .toggle-content.no-margin { margin-bottom: 0; }
  .toggle-content ol { margin-left: 30px; }
  .toggle-content ul { margin-left: 5px; list-style: disc inside; }

  /*---------------------------------
    FORMULAR (Grid)
  ---------------------------------*/
  form {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--spacing-lg);
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }
  .form-grid .full-width { grid-column: 1 / -1; }
  @media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
  }
  .select-wrapper { max-width: 575px; }

  label {
    margin: 10px 0 6px;
    font-family: 'bbiv', Arial, sans-serif;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select {
    width: 100%;
    padding: 10px;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'bbiv', Arial, sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover {
  border-color: rgba(241, 90, 36, 0.4);
  box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.10);
}
/* --- Alle Text-/E-Mail-/Tel-/Select-Felder: Fokusrahmen orange, Outline weg --- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(241, 90, 36, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.17);
  outline: none !important;
}

/* --- Checkboxen: Akzentfarbe Orange in allen Zuständen, Haken bleibt orange-weiß --- */
input[type="checkbox"] {
  accent-color: rgba(241, 90, 36, 0.75);
  border-radius: 3px;
  transition: accent-color 0.2s, box-shadow 0.2s;
}
input[type="checkbox"]:hover {
  accent-color: rgba(241, 90, 36, 1);
  box-shadow: 0 0 0 2px rgba(241, 90, 36, 0.15);
}
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  accent-color: rgba(241, 90, 36, 1);
  border-color: rgba(241, 90, 36, 0.6);
  box-shadow: 0 0 0 2px rgba(241, 90, 36, 0.22);
}
  .checkbox-description {
    margin: 4px 0 12px 0;
    font-size: 0.95em;
    font-family: 'bbiv', Arial, sans-serif;
  }
    
input[type="text"],
input[type="email"],
input[type="tel"],
select {
  font-size: 1.05em !important;
  line-height: 1.6;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
  font-size: 1.05em !important;
  font-family: 'bbiv', Arial, sans-serif;
  opacity: 0.65;
}
select {
  font-size: 1.05em !important;
}

select,
select option,
select optgroup {
  font-family: 'bbiv', Arial, sans-serif !important;
  font-size: 1.05em !important;
  color: #000 !important;
  font-weight: 400;
  opacity: 1;
}

input::placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
input::-ms-input-placeholder,
input::-moz-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder,
textarea::-ms-input-placeholder,
textarea::-moz-placeholder {
  font-family: 'bbiv', Arial, sans-serif !important;
  color: rgba(0,0,0,0.75) !important;
  opacity: 1 !important; /* immer sichtbar, nicht ausgegraut */
}

input,
textarea,
select {
  font-family: 'bbiv', Arial, sans-serif !important;
  color: #000 !important;
}

  /*---------------------------------
    BUTTONS & FOOTER
  ---------------------------------*/
button.cta, a.cta {
  display: block;
  margin: var(--spacing-lg) auto;
  padding: 16px 48px;
  background-color: var(--color-secondary);
  font-family: 'bbiv', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15em;
  border: none;
  border-radius: var(--border-radius-pill);
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.18s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  letter-spacing: 0.01em;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

button.cta:hover, a.cta:hover {
  background-color: var(--color-secondary-hover);
  box-shadow: 0 3px 18px rgba(0,0,0,0.10);
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

button.cta:active, button.cta:focus, button.cta:visited,
button.cta[type="submit"]:active, button.cta[type="submit"]:focus, button.cta[type="submit"]:visited,
input[type="submit"].cta:active, input[type="submit"].cta:focus, input[type="submit"].cta:visited {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

  footer p {
    text-align: center;
    font-family: 'bbiv', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.05em;
    padding-bottom: 16px;
  }
  .footer-menu {
    text-align: center;
    padding-bottom: 16px;
  }
  .footer-menu .pillbox { margin: 5px 8px; }

/* Sichtbarkeits-Effekt für animiertes Einblenden */
.fade-in-when-visible {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(.7,.3,0,1), transform 0.7s cubic-bezier(.7,.3,0,1);
  will-change: opacity, transform;
}
.fade-in-when-visible.visible {
  opacity: 1;
  transform: translateY(0);
}
.isbn, .isbn * {
  pointer-events: none;
  text-decoration: none !important;
  color: inherit !important;
  cursor: default !important;
}

.flash-message {
  padding: 16px;
  margin: 16px auto;
  max-width: 800px;
  border-radius: 4px;
  font-family: 'bbiv', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1em;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.flash-success {
  background-color: rgba(241, 90, 36, 0.1);
  border: 1px solid rgba(241, 90, 36, 0.3);
  color: #000;
}

.flash-error {
  background-color: rgba(241, 90, 36, 0.1);
  border: 1px solid rgba(241, 90, 36, 0.6);
  color: #900;
}

/* button.cta bleibt eigenständig */
button.cta {
  display: block;               /* volle Breite-Box */
  margin: var(--spacing-lg) auto; /* zentrieren */
  padding: 16px 48px;           /* wieder Deine großen Abstände */
  /* … alle anderen styles, die Du vorher hattest … */
}

/* Checkbox-Labels (inkl. Teilnahmebescheinigung, AGB, Datenschutz) als großes Touch-Target */
form .form-grid label {
  display: flex;                       /* Checkbox + Text/Link nebeneinander */
  align-items: center;                 /* vertikal zentriert */
  gap: var(--spacing-md);              /* Abstand zwischen Checkbox und Text/Link */
  padding: calc((44px - 1em) / 2) 0;   /* so viel oben/unten, dass min. 44px erreicht werden */
  min-height: 44px;                    /* Lighthouse-Best Practice */
  cursor: pointer;
}

/* Checkbox selbst in der Größe fixieren */
form .form-grid label input[type="checkbox"] {
  flex: none;
  margin: 0;
  width: 1em;      /* entspricht etwa 16px – passt zur Font-Size */
  height: 1em;
}

/* 1. Fieldset als Flex-Container, damit die Labels nebeneinander stehen */
.kundenart-fieldset {
  display: flex;
  gap: var(--spacing-lg); /* Abstand zwischen Privat- und Firmenkunde */
}

/* 2. Labels wieder inline-flex, damit Icon+Text schön sitzen */
.kundenart-fieldset .kundenart-option {
  display: inline-flex !important;
  margin: 0; /* kannst du anpassen, wenn du extra Abstand brauchst */
}

/* Pillbox-Icons in Pillboxes */
.pillbox-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pillbox.link-pillbox a {
  display: flex;
  align-items: center;
}

.pillbox-icon {
  width: 17px;
  height: 17px;
  margin-right: 7px;
}

.pillbox--telefon {
  display: flex;
  align-items: center; /* sorgt für mittige Ausrichtung */
  /* Optional: Schriftstil oder Abstand speziell anpassen */
}
.pillbox--telefon .pillbox-icon {
  margin-right: 7px;
  /* Optional: vertical-align rausnehmen, falls gesetzt */
}

.pillbox--telefon .pillbox-inner {
  display: flex;
  align-items: center;
}

.ansprechperson-pillbox-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ansprechperson-pillbox-list .pillbox {
  flex: 0 0 auto;
  min-width: 0;
}

.pillbox span {
  font-weight: 500;
}

.pillbox-icon {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  margin-right: 7px !important;
  flex: none;
  box-sizing: content-box;
}

.pillbox-icon svg,
.pillbox-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 600px) {
  .pillbox-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
}

.buch-section-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-md, 12px);
  width: 64px;
  height: 64px;
}
@media (max-width: 600px) {
  .buch-section-icon {
    width: 42px;
    max-width: 64px;
  }
}

/* Header-Menü-Pillen zentrieren */
header nav#box2 {
  display: flex;
  justify-content: center;   /* horizontal zentrieren */
  flex-wrap: wrap;           /* umbrechen bei Bedarf */
  gap: 8px;                  /* Abstand zwischen den Pillen */
}

header nav#box2 .pillbox {
  margin: 5px;               /* individueller Außenabstand */
}

/* Header-Menü-Pillen mobil */
@media (max-width: 600px) {
  .box#box1 .pill--2nd {
    display: none !important;
  }
  .box#box1 .pill--1st .pillbox-label,
  .box#box1 .pill--3rd .pillbox-label {
    display: none !important;
  }
}

/* Pillboxes: Einheitliche Höhe und Breite auch ohne Text */
.pillbox {
  min-width: 48px;         /* oder 44px, für ein Minimum */
  min-height: 44px;        /* Minimum für Touch, siehe Lighthouse */
  display: inline-flex;    /* Icon mittig */
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Header-Pillboxen: Extra Abstand auf Mobil */
@media (max-width: 600px) {
  .box#box1 .pillbox {
    margin: 6px 12px 6px 0 !important; /* Links/rechts mehr Platz */
    min-width: 48px;
    min-height: 48px;
    padding: 0 10px !important;        /* Weniger Innenabstand, damit es quadratischer ist */
    justify-content: center;
  }
  .box#box1 .pillbox a {
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 32px;
    min-height: 32px;
    padding: 0 !important;
    text-align: center;
  }
  /* Optional: Mach das Icon etwas größer auf Mobil */
  .box#box1 .pillbox-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Icon-only Pillboxen Desktop und Mobil: Immer min-height */
.pillbox .pillbox-icon:only-child,
.pillbox:empty {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* Gleiches Padding auf Desktop für alle Pillen */
.box#box1 .pillbox {
  padding: 7px 18px; /* identisch für alle */
}

/* Optional für Barrierefreiheit: Fokus-Ring auf Mobil */
@media (max-width: 600px) {
  .box#box1 .pillbox:focus-within {
    outline: 2px solid var(--color-accent, orange);
    outline-offset: 2px;
  }
}
@media (max-width: 600px) {
  .box#box1 .pillbox--telefon > .pillbox-icon {
    margin-right: 12px !important;
  }
}
@media (max-width: 600px) {
  .box#box1 .pillbox--telefon {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Hamburger-Button nur mobil sichtbar */
.hamburger-pillbox { display: none; }
@media (max-width: 600px) {
  .hamburger-pillbox {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 26px auto 0 auto !important;
    border-radius: 50%;
    background: rgba(241,90,36,0.08);
    cursor: pointer;
  }
  .hamburger-pillbox .pillbox-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }
}

/* Menü-Pillen mobil ausblenden */
@media (max-width: 600px) {
  .nav-inner {
    display: none;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }
  .nav-inner.menu-open {
    display: flex !important;
  }
}

.rabatt-pille {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}
.rabatt-pille a {
  color: #fff !important;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.rabatt-pille a:hover,
.rabatt-pille a:focus {
  color: #fff;
  background: #111;
  border-radius: inherit;
}
/* Instagram‑Pillbox: Abstand nach rechts entfernen */
.pillbox-icon[src$="bbiv-berufsbildungsverlag-icon-instagram.svg"] {
  margin-right: 0 !important;
}

.toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Text links, Kreise + Pfeil rechts */
}

.capacity-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  background: #ccc;
}

.capacity-circle.green  { background: #2ecc71; }
.capacity-circle.yellow { background: #f1c40f; }
.capacity-circle.red    { background: #e74c3c; }

.toggle-right {
  display: flex;
  align-items: center;
}