@font-face {
  font-display: swap;
  font-family: 'Magilio';
  font-style: normal;
  font-weight: 700;
  src: url('http://campingaigen.com.dedi1326.your-server.de/files/theme/fonts/magilio-webfont.woff2') format('woff2');
}
 



/*
  ============================================================
  Camping Aigen – Custom Stylesheet für GastManager Buchungsportal
  Version 5 – bereinigt & Mobile-Fixes

  Design-Tokens:
    Dunkelgrün:  #253324
    Beige:       #F0E7D4
    Orange:      #FF9119
    Hellgrün:    #96B78F
    Weiß:        #FFFFFF
  ============================================================
*/

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design-Tokens ── */
:root {
  --ca-green-dark:  #253324;
  --ca-beige:       #F0E7D4;
  --ca-orange:      #FF9119;
  --ca-green-light: #96B78F;
  --ca-white:       #FFFFFF;
  --ca-text:        #3a3a2e;
  --ca-text-muted:  #6b7560;
  --ca-border:      #d6ccb8;
  --ca-radius:      12px;
  --ca-shadow:      0 2px 10px rgba(37,51,36,0.08);
}


/* ============================================================
   1. GLOBAL
   ============================================================ */

html, body {
  background-color: var(--ca-beige) !important;
  color: var(--ca-text) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body, button, input, optgroup, select, textarea,
.button, .input, .select select, .textarea,
.label, .help, .content, .notification,
.navbar-item, .navbar-link, td, th {
  font-family: 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle,
.card-header-title {
  font-family: 'Magilio', 'Open Sans', serif !important;
  color: var(--ca-green-dark) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

h1, .title.is-1 { font-size: 2.2rem !important; }
h2, .title.is-2 { font-size: 1.8rem !important; margin-bottom: 0.75rem !important; }
h3, .title.is-3 { font-size: 1.4rem !important; }
h4, .title.is-4 { font-size: 1.2rem !important; }

a {
  color: var(--ca-orange) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
a:hover { color: var(--ca-green-dark) !important; }

strong, b { color: var(--ca-green-dark) !important; font-weight: 700 !important; }

hr {
  background-color: var(--ca-border) !important;
  height: 1px !important;
  margin: 2rem 0 !important;
}


/* ============================================================
   2. LAYOUT
   ============================================================ */

.container, .section, #app, #booking-app {
  background-color: var(--ca-beige) !important;
}

.box {
  background-color: var(--ca-white) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: var(--ca-shadow) !important;
}


/* ============================================================
   3. BUTTONS
   ============================================================ */

.button {
  background-color: var(--ca-green-light) !important;
  border: 1px solid var(--ca-green-light) !important;
  color: var(--ca-white) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border-radius: 30px !important;
  letter-spacing: 0.02em !important;
  transition: background-color 0.2s, border-color 0.2s !important;
  cursor: pointer !important;
}
.button:hover, .button.is-hovered {
  background-color: var(--ca-green-dark) !important;
  border-color: var(--ca-green-dark) !important;
  color: var(--ca-white) !important;
}
.button:focus, .button.is-focused {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,145,25,0.3) !important;
}

.button.is-primary,
.button.is-success,
.button.is-link,
.button.is-info,
button[type="submit"],
input[type="submit"] {
  background-color: var(--ca-orange) !important;
  border-color: var(--ca-orange) !important;
  color: var(--ca-white) !important;
  font-weight: 700 !important;
}
.button.is-primary:hover, .button.is-success:hover,
.button.is-link:hover, .button.is-info:hover,
button[type="submit"]:hover {
  background-color: #e07d10 !important;
  border-color: #e07d10 !important;
  color: var(--ca-white) !important;
}

.button.is-light, .button.is-outlined {
  background-color: transparent !important;
  border: 2px solid var(--ca-green-light) !important;
  color: var(--ca-green-dark) !important;
  font-weight: 600 !important;
}
.button.is-light:hover, .button.is-outlined:hover {
  background-color: var(--ca-green-light) !important;
  color: var(--ca-white) !important;
}

.button[disabled], fieldset[disabled] .button {
  background-color: #c5c5b8 !important;
  border-color: #c5c5b8 !important;
  color: #888 !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}


/* ============================================================
   4. FORMULARE
   ============================================================ */

.label {
  color: var(--ca-green-dark) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 0.35rem !important;
}

.input, .textarea {
  background-color: var(--ca-white) !important;
  border: 1.5px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  color: var(--ca-text) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.input::placeholder, .textarea::placeholder { color: #aaa49a !important; }
.input:hover, .textarea:hover { border-color: var(--ca-green-light) !important; }
.input:focus, .input.is-focused, .input:active,
.textarea:focus, .textarea.is-focused {
  border-color: var(--ca-green-dark) !important;
  box-shadow: 0 0 0 3px rgba(37,51,36,0.12) !important;
  outline: none !important;
}

.select select {
  background-color: var(--ca-white) !important;
  border: 1.5px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  color: var(--ca-text) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.select select:hover { border-color: var(--ca-green-light) !important; }
.select select:focus {
  border-color: var(--ca-green-dark) !important;
  box-shadow: 0 0 0 3px rgba(37,51,36,0.12) !important;
  outline: none !important;
}
.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--ca-green-dark) !important;
}

.checkbox, .radio {
  color: var(--ca-text) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.9rem !important;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--ca-green-dark) !important;
}

.help { color: var(--ca-text-muted) !important; font-size: 0.8rem !important; }
.help.is-danger { color: #c0392b !important; }
.input.is-danger, .select.is-danger select { border-color: #c0392b !important; }




/* ============================================================
   5. TABELLE (Preisübersicht)
   ============================================================ */

.table {
  background-color: var(--ca-white) !important;
  color: var(--ca-text) !important;
  border-radius: var(--ca-radius) !important;
  width: 100% !important;
  border: 1px solid var(--ca-border) !important;
}

.table thead td,
.table thead th {
  background-color: var(--ca-green-dark) !important;
  color: var(--ca-beige) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-color: rgba(240,231,212,0.2) !important;
  padding: 0.75rem 1rem !important;
}

.table td, .table th {
  border-color: var(--ca-border) !important;
  padding: 0.65rem 1rem !important;
  vertical-align: middle !important;
  font-size: 0.9rem !important;
}

.table tfoot td, .table tfoot th,
.table tbody tr:last-child td,
.table tbody tr:last-child th {
  font-weight: 700 !important;
  color: var(--ca-green-dark) !important;
  border-top: 2px solid var(--ca-border) !important;
}

.table tfoot td:last-child,
.table tbody tr:last-child td:last-child {
  color: var(--ca-orange) !important;
  font-size: 1.05rem !important;
}

.table tbody tr:hover {
  background-color: rgba(240,231,212,0.35) !important;
}


/* ============================================================
   6. BADGES / TAGS
   ============================================================ */

.tag {
  background-color: var(--ca-green-dark) !important;
  color: var(--ca-white) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 0.25em 0.65em !important;
  margin-left: 0.25em !important;
}
.tag.is-success, .tag.is-primary {
  background-color: var(--ca-green-light) !important;
  color: var(--ca-white) !important;
}
.tag.is-warning {
  background-color: var(--ca-orange) !important;
  color: var(--ca-white) !important;
}
.tag.is-danger {
  background-color: #c0392b !important;
  color: var(--ca-white) !important;
}


/* ============================================================
   7. BENACHRICHTIGUNGEN
   ============================================================ */

.notification {
  background-color: rgba(150,183,143,0.12) !important;
  border-left: 4px solid var(--ca-green-light) !important;
  border-radius: var(--ca-radius) !important;
  color: var(--ca-text) !important;
  font-family: 'Open Sans', sans-serif !important;
}
.notification.is-success { border-left-color: var(--ca-green-light) !important; }
.notification.is-warning {
  border-left-color: var(--ca-orange) !important;
  background-color: rgba(255,145,25,0.08) !important;
}
.notification.is-danger {
  border-left-color: #c0392b !important;
  background-color: rgba(192,57,43,0.08) !important;
}
.notification.is-info, .notification.is-primary {
  border-left-color: var(--ca-green-dark) !important;
  background-color: rgba(37,51,36,0.06) !important;
}


/* ============================================================
   8. MODAL
   ============================================================ */

.modal-card-head {
  background-color: var(--ca-green-dark) !important;
  border-bottom: none !important;
  border-radius: var(--ca-radius) var(--ca-radius) 0 0 !important;
}
.modal-card-title {
  color: var(--ca-beige) !important;
  font-family: 'Magilio', 'Open Sans', serif !important;
}
.modal-card-body { background-color: var(--ca-beige) !important; }
.modal-card-foot {
  background-color: var(--ca-beige) !important;
  border-top: 1px solid var(--ca-border) !important;
}


/* ============================================================
   9. STICKY FOOTER / GASTMANAGER OVERLAY
   ============================================================ */

.gastmanager-overlay {
  background-color: var(--ca-green-dark) !important;
  background: var(--ca-green-dark) !important;
  border-top: 2px solid rgba(240,231,212,0.2) !important;
  box-shadow: 0 -4px 16px rgba(37,51,36,0.25) !important;
}

.gastmanager-overlay .gastmanager,
.gastmanager-overlay .container,
.gastmanager-overlay .is-max-desktop {
  background-color: transparent !important;
  background: transparent !important;
}

.gastmanager-overlay *:not(button):not(.button) {
  color: var(--ca-beige) !important;
}

.gastmanager-overlay .button,
.gastmanager-overlay button {
  background: var(--ca-orange) !important;
  background-color: var(--ca-orange) !important;
  border-color: var(--ca-orange) !important;
  color: var(--ca-white) !important;
  font-weight: 700 !important;
}

.gastmanager-overlay .button:hover,
.gastmanager-overlay button:hover {
  background: var(--ca-green-light) !important;
  background-color: var(--ca-green-light) !important;
  border-color: var(--ca-green-light) !important;
  color: var(--ca-white) !important;
}


/* ============================================================
   11. DATEPICKER – Divider
   ============================================================ */

#date-selection .divider,
.field.has-dates .divider,
.divider {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}


/* ============================================================
   12. VEHICLES-TABLE
   ============================================================ */


.vehicles-table {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.vehicles-table .table.is-fullwidth {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.vehicles-table .table tbody tr.header th {
  background-color: transparent !important;
  color: var(--ca-text) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0 0 0.15rem 0 !important;
  border: none !important;
}

.vehicles-table .table tbody tr td {
  background-color: transparent !important;
  border: none !important;
  padding: 0.15rem 0.5rem 0.15rem 0 !important;
  vertical-align: middle !important;
}

.vehicles-table .table tbody tr:last-child td {
  background-color: transparent !important;
  border: none !important;
  font-weight: 400 !important;
}


/* ============================================================
   13. SECTION HEADLINES
   ============================================================ */

div.title.is-4 {
  font-size: 2rem !important;
  text-align: center !important;
  margin-bottom: 1.25rem !important;
}


/* ============================================================
   14. ZAHLUNGSOPTIONEN
   ============================================================ */

.column.payment-modality .box,
.column.payment-modality .notification {
  background-color: var(--ca-white) !important;
  border: 2px solid var(--ca-border) !important;
  border-left: 2px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: var(--ca-shadow) !important;
  color: var(--ca-text) !important;
}

.column.payment-modality .box.notification.is-info {
  background-color: var(--ca-white) !important;
  border: 2px solid var(--ca-border) !important;
  border-left: 2px solid var(--ca-border) !important;
}

.column.payment-modality.is-selected .box,
.column.payment-modality.is-selected .notification,
.column.payment-modality.is-selected .box.notification.is-info {
  background-color: var(--ca-green-dark) !important;
  border: 2px solid var(--ca-green-dark) !important;
  border-left: 2px solid var(--ca-green-dark) !important;
  color: var(--ca-beige) !important;
}

.column.payment-modality .box *,
.column.payment-modality .notification * {
  color: var(--ca-text) !important;
}

.column.payment-modality.is-selected .box *,
.column.payment-modality.is-selected .notification * {
  color: var(--ca-beige) !important;
}

.column.payment-modality .box .title,
.column.payment-modality .notification .title {
  font-size: 2rem !important;
  color: var(--ca-green-dark) !important;
}
.column.payment-modality.is-selected .box .title,
.column.payment-modality.is-selected .notification .title {
  color: var(--ca-beige) !important;
}

.column.payment-modality .box.notification .checkbox {
  border: 2px solid var(--ca-border) !important;
  border-radius: 50% !important;
  background-color: transparent !important;
}

.column.payment-modality.is-selected .box.notification .checkbox {
  background-color: var(--ca-orange) !important;
  border-color: var(--ca-orange) !important;
}

.column.payment-modality:not(.is-selected) .checkbox svg path {
  fill: transparent !important;
}

.column.payment-modality.is-selected .checkbox svg path {
  fill: var(--ca-white) !important;
}

div.columns:has(> .column.payment-modality) {
  margin-top: 2rem !important;
}


/* ============================================================
   15. KONTAKTDATEN MITREISENDE
   ============================================================ */

div#block-490,
div#block-490 form {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

div#block-490 .table.is-fullwidth {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

div#block-490 .table tbody tr.header th {
  background-color: transparent !important;
  color: var(--ca-text) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0 0 0.15rem 0 !important;
  border: none !important;
}

div#block-490 .table tbody tr td {
  background-color: transparent !important;
  border: none !important;
  padding: 0.15rem 0.5rem 0.15rem 0 !important;
  vertical-align: middle !important;
}

div#block-490 .table tbody tr:last-child td {
  background-color: transparent !important;
  border: none !important;
  font-weight: 400 !important;
}


/* ============================================================
   20. MOBILE FIXES
   ============================================================ */

@media screen and (max-width: 768px) {

  h1, .title.is-1 { font-size: 1.7rem !important; }
  h2, .title.is-2 { font-size: 1.4rem !important; }
  h3, .title.is-3 { font-size: 1.2rem !important; }
  .button { font-size: 0.85rem !important; }
  .table thead th, .table thead td {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.6rem !important;
  }
  .table td, .table th {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.6rem !important;
  }
}

@media screen and (max-width: 480px) {
  body { font-size: 14px !important; }
  button[type="submit"] {
    font-size: 1rem !important;
    padding: 0.8em 1em !important;
  }
}


@media screen and (max-width: 768px) {

  /* Personen + Zusatzleistungen: alle Felder volle Breite untereinander */
  .field.people,
  .field.is-grouped.people {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }

  .field.people > .control {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

  }

  .field.people > .control .select,
  .field.people > .control .select select,
  .field.people > .control .input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* has-product (Hund, Strom etc.) */
  .field.people > .control > div.has-product {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .field.people > .control > div.has-product form {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .field.people > .control > div.has-product .select,
  .field.people > .control > div.has-product .select select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bulma .is-grouped margin entfernen */
  .field.is-grouped > .control {
    margin-left: 0 !important;
  }

  /* Vehicles-table: Spalten untereinander + volle Breite wie .section */
  .section-fahrzeug .vehicles-table,
  .section-fahrzeug .field .vehicles-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Vehicles-table Labels ausblenden auf Mobile */
  .section-fahrzeug .vehicles-table .table tbody tr.header {
    display: none !important;
  }

  .vehicles-table .table.is-fullwidth,
  .vehicles-table .table tbody,
  .vehicles-table .table tbody tr {
    display: block !important;
    width: 100% !important;
  }

  .vehicles-table .table tbody tr td {
    display: block !important;
    width: 100% !important;
    padding: 0.4rem 0 !important;
  }

  .vehicles-table .table tbody tr td div.select,
  .vehicles-table .table tbody tr td div.select select,
  .vehicles-table .table tbody tr td .input {
    width: 100% !important;
  }

  /* Stellplatz-Layout: untereinander */
  div.media[id*="block"] {
    flex-direction: column !important;
  }

  /* Foto: Abstand unten ohne Verlust des Border-Radius */
  .bild {
    margin-bottom: 0.75rem !important;
    border-radius: var(--ca-radius) !important;
    overflow: hidden !important;
    display: block !important;
  }

  .bild img {
    border-radius: var(--ca-radius) !important;
    display: block !important;
    width: 100% !important;
  }

  /* Fallback falls Bild direkt in media-left */
  div.el.media-left {
    margin-bottom: 0.75rem !important;
  }

  div.el.media-left img {
    border-radius: var(--ca-radius) !important;
    display: block !important;
  }

  /* Abstand oben Stellplatz-Beschreibung */
  div.el.media-content .content {
    margin-top: 0.9rem !important;
  }

  /* section.box – Abstand zum Rand */
  .section.box {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    box-sizing: border-box !important;
  }

  /* section.has-text-centered.pb-0 – keine Border */
  .section.has-text-centered.pb-0 {
    border: none !important;
    box-shadow: none !important;
  }

/* Mehr Abstand vor "Womit reisen Sie an?" */
  .section-fahrzeug {
    margin-top: 2.5rem !important;
    padding-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    padding-bottom: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
  }

/* Native Label im kind-Feld ausblenden (wird durch ::before ersetzt) */
  .kind label {
    display: none !important;
  }

  /* Eigenes Label via ::before nur auf Mobile */
  .kind::before {
    content: "KIND (3-15)" !important;
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--ca-green-dark) !important;
    margin-bottom: 0.35rem !important;
  }

}
/* ============================================================
   21. DESKTOP – Abstand nach section-fahrzeug
   ============================================================ */

section.section-fahrzeug + section.box {
  margin-top: 3rem !important;

}

/* ============================================================
   22. DESKTOP – Abstand nach .field.people
   ============================================================ */

@media screen and (min-width: 769px) {
  .field.is-grouped.is-grouped-centered.is-grouped-multiline.people {
    margin-bottom: 2rem !important;
  }
}


/* ============================================================
   23. BILDER – Border-Radius global (Desktop + Mobile)
   ============================================================ */

div.el.media-left {
  overflow: hidden !important;
  border-radius: var(--ca-radius) !important;
}

div.el.media-left img {
  border-radius: var(--ca-radius) !important;
  display: block !important;
}

.bild {
  overflow: hidden !important;
  border-radius: var(--ca-radius) !important;
}

.bild img {
  border-radius: var(--ca-radius) !important;
  display: block !important;
}