:root {
  --kn-red: #c8102e;        /* Kuoni Rot – Preise, Herz-Icon, Links im Hover */
  --kn-red-dark: #a10d25;   /* dunkleres Rot – Hover-/Fokus-Zustand */
  --kn-black: #000000;      /* Haupttextfarbe, Primär-Buttons */
  --kn-white: #ffffff;
  --kn-gray: #f1f1f1;       /* Filter-/Navigationshintergrund */
}

/* Header */
.rf_head {
  background-color: var(--kn-white) !important;
}

/* Header darf beim Scrollen nicht transparent werden und sich
   mit den Angeboten vermischen -> deckend weiss + über allem liegend */
header,
.header,
.rf_head,
.sticky-header,
.navbar,
.navbar-fixed-top {
  background-color: var(--kn-white) !important;
  opacity: 1 !important;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* leichte Trennung vom Inhalt */
}

/* Hauptcontainer */
.angcont,
.ppccont {
  background-color: var(--kn-white) !important;
  border: 2px solid black; /* <-- Schwarze Kontur */
}

/* Primäre Buttons – schwarz, Hover in Rot (wie "ZUM ANGEBOT") */
.btn-primary {
  background-color: var(--kn-black);
  border: 1px solid var(--kn-black) !important;
  color: var(--kn-white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--kn-red) !important;
  border-color: var(--kn-red) !important;
}

/* BUCHEN-Button: schwarz gefüllt statt transparent */
.btn-buchen,
.btn-book,
.btn-buy,
button[type="submit"] {
  background-color: var(--kn-black) !important;
  border: 1px solid var(--kn-black) !important;
  color: var(--kn-white) !important;
  opacity: 1 !important;
}
.btn-buchen:hover,
.btn-book:hover,
.btn-buy:hover,
button[type="submit"]:hover {
  background-color: var(--kn-red) !important;
  border-color: var(--kn-red) !important;
}

/* Sekundäre Buttons – schwarze Kontur, Hover in Rot */
.btn-default {
  border: 1px solid var(--kn-black);
  color: var(--kn-black);
}
.btn-default:hover,
.btn-default:focus {
  background-color: transparent !important;
  border-color: var(--kn-red) !important;
  color: var(--kn-red) !important;
}

/* Success Buttons – in Rot (zweite Akzentfarbe) */
.btn-success {
  background-color: var(--kn-red);
  color: var(--kn-white);
}
.btn-success:hover,
.btn-success:focus {
  background-color: var(--kn-red-dark) !important;
}

/* Dropdown aktiv */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: var(--kn-red) !important;
  color: var(--kn-white) !important;
}

/* Sondermarkierung */
.rf_dis {
  background-color: var(--kn-red) !important;
  color: var(--kn-white) !important;
  border: 1px solid var(--kn-white) !important;
}

/* Navigation */
.rf_pnav {
  background-color: var(--kn-gray) !important;
  color: var(--kn-black) !important;
}
.rf_summary {
  background-color: var(--kn-black) !important;
  color: var(--kn-white) !important;
}

/* Preis */
.rf_price {
  color: var(--kn-red) !important;
}

/* Headlines */
h1 {
  color: var(--kn-black) !important;
}
h2, h3 {
  color: var(--kn-black) !important;
}

/* Links */
a {
  color: var(--kn-black);
}
a:hover,
a:focus {
  color: var(--kn-red);
}

/* Info-Boxen */
.alert-info {
  background-color: var(--kn-black) !important;
  color: var(--kn-white) !important;
  border: 1px solid var(--kn-black) !important;
}

/* Trennlinie */
.rf_hrspacer {
  border-top: 1px solid var(--kn-red);
}

/* Flash Effekt */
.flash {
  animation: flash 0.5s ease-out 1;
}
@keyframes flash {
  0%,100% { background-color: transparent; }
  50% { background-color: var(--kn-red); }
}

.blau {
  color: #FFFFFF !important;
  background-color: var(--kn-black);
}

.alert-warning {
  color: #000000 !important;
  background-color: #FFFFFF !important;
  border-color: var(--kn-red) !important;
}

* {
  border-radius: 8px !important;
}