:root {
--cassiopeia-color-primary: #B10034;
--cassiopeia-color-link: #B10034;
--cassiopeia-color-hover: #E0B636;
--link-hover-color:  #E0B636;
--link-active-color:  #ccc;
}

/* Home etwas höher */
.p-2 {
    padding-top: 0rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
}
/* Basis-Schrift (für body) */
@font-face {
  font-family: 'TradeGothic';
  src: url('../fonts/TradeGothicLTCom.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'TradeGothic';
  src: url('../fonts/TradeGothicLTCom-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Bold 2 */
@font-face {
  font-family: 'TradeGothic';
  src: url('../fonts/TradeGothicLTCom-Bd2.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Condensed 18 */
@font-face {
  font-family: 'TradeGothicCn';
  src: url('../fonts/TradeGothicLTCom-Cn18.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Bold Condensed 20 */
@font-face {
  font-family: 'TradeGothicCn';
  src: url('../fonts/TradeGothicLTCom-BdCn20.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Standard Body */
body {
  font-family: 'TradeGothic', Arial, sans-serif;
  line-height: 1.25;
  font-size: 1.15em;
  letter-spacing: .03em;
}

/* Bold Condensed 20 nur für h6 */
@font-face {
  font-family: 'TradeGothicBdCn20';
  src: url('../fonts/TradeGothicLTCom-BdCn20.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* h6 Styling */
h6 {
  font-family: 'TradeGothicBdCn20', 'TradeGothic', Arial, sans-serif;
  font-weight: 700; /* sicherstellen, dass die Bold-Variante genommen wird */
  text-transform: uppercase;
  line-height: 1.3;
  font-size: 1.5em;
}

/* h1 Styling */
h1 {
  font-family: 'TradeGothicBdCn20', 'TradeGothic', Arial, sans-serif;
  font-weight: 700; /* sicherstellen, dass die Bold-Variante genommen wird */
  text-transform: uppercase;
  line-height: 1.1;
  font-size: 2.4em;
  color: #B10034;

}
/* H2  */
h2 {
  font-family: 'TradeGothic', 'TradeGothic', Arial, sans-serif;
  font-weight: 700; /* sicherstellen, dass die Bold-Variante genommen wird */
  line-height: 1.1;
  font-size: 2em;
  color: #B10034;

}
/* Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst diese also mit .header an */

.header {
	background: #B10034;
  	box-shadow: 0rem 0.1rem 0.9rem rgba(0, 0, 0, 0.7) !important;
    margin-bottom: 2em;                   /* Abstand header zu inhalt */
}

.card-header {
	background: #ffffff;
    border-bottom: 0px;
}

/* Module sind auf verschiedenen Modulpositionen im Cassiopeia Template bekommen dann die Module zusätzlich zu card auch die Position als Klassennamen, zum Beispiel main-top - wenn du also alle Module auf Main Top ändern möchtest, nimmst du .main-top.card */





/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an */

.footer {
	background: #B10034;
}

/* weblinks-Titel 
----------------------------------------------------------- */
a.category {
    font-size: 1.6em !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    text-decoration: none;

}



strong { 
	font-weight: bold !important;
	color: #000000 !important;
	}

a{
        text-decoration: none !important;
          color: #B10034;
}





/* Checkbox Abstand
----------------------------------------------------------- */
.form-check-label {
	padding-right: 30px !important;
		padding-left: 15px !important;

}




.btn:hover {
    color: #B10034;
    text-decoration: none;
    background-color: #FFCE44;
    background-position: 0 -15px;
}

.btn.btn-success{
      background-color: #669966 !important;
}

.btn {
  font-family: 'TradeGothicCn';
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  letter-spacing: .05em;
  }


   /* Kontaktformular
----------------------------------------------------------- */

#visformcontainer [class*="col-"] {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

#form1namelbl, #form1vornamelbl, #form1e-maillbl, #form1mitteilunglbl{
    display: none;
}
#form1viscaptcha_response{
      width: 100% !important;
}

   /* offcanvas menue
----------------------------------------------------------- */
.offcanvas.show {
    background-color: rgb(177, 0, 35, 0.8);
}
@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
      font-size: 20px;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: #fff;
    }
}
.offcanvas-header > *:only-child {
    margin-left: auto;
 }

/* ================================
   Offcanvas-Menü Schriftgestaltung
   ================================ */

/* Allgemeine Links im Offcanvas-Menü */
.offcanvas .mod-menu.nav.menu__home a {
  font-family: 'TradeGothicBdCn20', 'TradeGothic', Arial, sans-serif;    
  font-size: 1.4em !important;
    font-weight: 500;                   /* 400 = normal, 700 = fett */
    color: #fff;                        /* Textfarbe (weiß auf dunklem Hintergrund) */
    text-decoration: none;              /* Unterstreichung entfernen */
    text-transform: uppercase;
    display: block;                     /* Klickfläche vergrößern */
    padding: 0.4rem 0;                  /* vertikaler Abstand */
   letter-spacing: 0.1em;
}
/* Icon grösser machen */
.navbar-toggler-icon {
  width: 2rem;   /* Standard ist ca. 1.5rem */
  height: 2rem;  /* gleich breit und hoch */
}

/* Umrandung des Buttons entfernen */
.navbar-toggler {
  border: none;         /* Rahmen weg */
  box-shadow: none;     /* falls Bootstrap einen Schatten setzt */
}

/* Optional: bei Klick (Fokus) auch keinen Rahmen */
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Hover- und Fokus-Effekte */
.offcanvas .mod-menu.nav.menu__home a:hover,
.offcanvas .mod-menu.nav.menu__home a:focus {
    color: #E0B636;                        /* Farbe beim Hover */
}

/* Aktiver Menüpunkt */
.offcanvas .mod-menu.nav.menu__home li.active > a {
    font-weight: 700;                   /* Fett für aktive Seite */
    color: #cccccc;                     /* grau für aktive Seite */
}


.container-header .mod-menu>li:after {
        display: none !important;
    }

   /* Formular Buchung
----------------------------------------------------------- */

#jform_name-lbl, #jform_email-lbl, #jform_email2-lbl, #jform_phone-lbl, #jform_date-lbl, #jform_people-lbl, #jform_notes-lbl{
  font-weight: 700;
}

/* Logo in Desktopansicht größer skalieren  */
@media (min-width: 992px) {
#mod-custom132 > p > img{
width: 20rem;
}
  }

/* Icon grösser machen */
.navbar-toggler-icon {
  width: 2rem;   /* Standard ist ca. 1.5rem */
  height: 2rem;  /* gleich breit und hoch */
}

/* Umrandung des Buttons entfernen */
.navbar-toggler {
  border: none;         /* Rahmen weg */
  box-shadow: none;     /* falls Bootstrap einen Schatten setzt */
}

/* Optional: bei Klick (Fokus) auch keinen Rahmen */
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* --- Button: Rahmen/Schatten weg, etwas größerer Schrift-Context (hilft Icon-Fonts + em-basierten SVGs) --- */
.navbar .navbar-toggler {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.35rem 0.5rem !important;
  font-size: 2.1rem !important;   /* ↑ hier die Icon-Grösse anpassen */
  line-height: 1 !important;
}

/* --- Icon selbst (covers: icon-fonts, background-image, pseudo-elements) --- */
.navbar .navbar-toggler .icon-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.1rem !important;           /* passt zur font-size; alternativ px (z.B. 28px) */
  height: 1.9rem !important;
  font-size: inherit !important;      /* für icon-fonts oder :before content */
  line-height: 1 !important;
  vertical-align: middle !important;
  background-size: contain !important;/* falls Hintergrundbild verwendet wird */
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform-origin: center !important;
}



/* Fokus: kein Browser-Rahmen, optional ein dezenter eigener Fokus für Zugänglichkeit */
.navbar .navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* besser für Tastaturnutzer — sichtbarer, aber dezent */
.navbar .navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.15) !important;
}

/* offcanvas Rand verkleinern */
#navbar1 > div.offcanvas-body > ul{
  margin-left: 18px !important;
}
/* suchfeld im Menue ausblenden für grosse */
@media (min-width: 768px) {
  .offcanvas-search { display: none; }
}

/* Desktop-Suche im Navbar */
@media (min-width: 992px) {
    /* Container für das Modul */
    .navbar .ms-auto > .moduletable {
        margin-left: 35px; /* Abstand zum letzten Menüpunkt */
        width: 120px;       /* gewünschte Breite */
    }

    /* Input-Feld im Suchmodul */
    .navbar .ms-auto .moduletable input[type="search"],
    .navbar .ms-auto .moduletable input[type="text"] {
        height: 32px;        /* weniger hoch */
        padding: 0 0.5rem;   /* innen Padding */
        font-size: 0.9rem;   /* Schrift etwas kleiner */
    }

    /* Optional: Button/Lupe im Modul anpassen */
    .navbar .ms-auto .moduletable button {
        height: 32px;        /* gleiche Höhe wie Input */
        padding: 0 0.5rem;
        font-size: 0.9rem;
    }
}

/* Desktop-Menü (≥992px) */
@media (min-width: 992px) {

    /* Menüeinträge wie Offcanvas */
    .navbar .mod-menu.nav.menu__home a {
        font-family: 'TradeGothicBdCn20', 'TradeGothic', Arial, sans-serif;
        font-size: 1.4em !important;
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        display: block;
        padding: 0.4rem 0;
        letter-spacing: 0.05em;
    }

    .navbar .mod-menu.nav.menu__home a:hover {
        color: #ffd700; /* optional: Hover-Farbe */
    }


}
    /* Suchmodul rechts im Navbar Desktop*/
    .navbar .ms-auto > .moduletable {
        margin-left: 30px;    /* Abstand zum letzten Menüpunkt */
        width: 120px;          /* kompakte Breite */
    }

    .navbar .ms-auto .moduletable input[type="search"],
    .navbar .ms-auto .moduletable input[type="text"] {
        height: 30px;          /* weniger hoch */
        padding: 0 0.5rem;
        font-size: 0.9rem;
    }

    .navbar .ms-auto .moduletable button {
        height: 32px;          /* gleiche Höhe wie Input */
        padding: 0 0.5rem;
        font-size: 0.9rem;
    }

    /* Optional: vertikale Zentrierung Input + Button mit Menü */
    .navbar .collapse.navbar-collapse.d-lg-flex {
        align-items: center;
    }
/* Abstand Desktop-Menü vom oberen Rand */
@media (min-width: 992px) {
    .navbar.navbar-expand-lg {
        padding-top: 1rem;   /* Abstand oben, nach Bedarf anpassen */
        padding-bottom: 0.2rem; /* optional, falls etwas mehr Höhe unten gewünscht */
    }
}

/* Desktop-Menü: aktive Links */
@media (min-width: 992px) {
    .navbar .mod-menu.nav.menu__home .active > a,
    .navbar .mod-menu.nav.menu__home a.active {
        color: #ccc !important;  /* aktive Links in hellgrau */
    }
}

.mod-idee, mod-idee.header{
    box-shadow: 0rem 0.1rem 0.9rem rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 2em;                   /* Abstand Modul zu inhalt */
  border-radius: 3px;
}


#jform_people{
  width: 30%; /* Breite des Form Buchungen  ein */
}


#mod-custom132 > p > img{
  padding-left: 20px;
}

#navbar1 > div.offcanvas-body.d-lg-none > div.mb-3 > a > img{
  width: 250px;
      text-align: left; /* Text links ausrichten */
  margin-top: -15px;
    margin-left: 15px;
    margin-bottom: 20px;
}