/* ==== Allgemeines Layout ==== */
body.site {
  background-color: #fae287; /* Sandgelb */
  color: #111;
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.05rem; /* etwas größer */
}


.container-header,
.header {
    background: url('/images/banner.jpg') no-repeat center center;
    background-size: cover;
    height: 300px;
}

/* Ränder der Cassiopeia-Inhaltsbreite anpassen */
.container,
.container-fluid {
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}


/* ==== Brand & Logo ==== */
.brand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}

.brand img {
    max-height: 150px;
}

/* ==== Überschriften ==== */
h1, h2, h3, h4 {
    color: #111;
    font-weight: bold;
    text-transform: none;
}

/* ==== Navigation Menü ==== */
.com-content .nav-pills > li > a,
.navbar-nav > li > a {
    background-color: #fcd900;
    color: #000;
    font-weight: bold;
    border-radius: 0;
    padding: 10px 16px;
}

.com-content .nav-pills > li > a:hover,
.navbar-nav > li > a:hover {
    background-color: #ffe533;
    color: #111;
}

/* ==== Footer (falls aktiviert) ==== */
footer {
    background-color: #fcd900;
    color: #000;
    padding: 20px;
    text-align: center;
}

/* ==== Login-Formular Styling ==== */
.com-users-login label,
.com-users-login input {
    font-size: 1rem;
}

.com-users-login .btn {
    background-color: #fcd900;
    border: none;
    font-weight: bold;
    color: #000;
}

/* 🛠️ Logo nicht über das Menü schweben lassen */
.brand-logo img {
    max-width: 200px;
    height: auto;
    z-index: 1;
    position: relative;
}

/* 🔧 Sprachumschalter "anklickbar" machen */
.lang-switcher,
.lang-switcher a {
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
  .brand-logo img {
    max-height: 70px;
  }
}

.navbar-brand {
    text-align: center;
    margin-bottom: 1rem;
}

/* Labels im Frontend fett darstellen */
/*.uxm-label,*/
label.uxm-label {
  color: #912B3B;
  font-size: 1.3rem !important;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

label.cck_label_text {
    color: #1A374D;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 2px;
    display: block;
}

label.cck_label_select_dynamic {
    color: #1A374D;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 2px;
    display: block;
}

.uxm-banner {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.uxm-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.uxm-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    padding: 1rem;
}

.uxm-title {
    font-size: 2.5rem;
    margin: 0;
    font-family: 'Fira Sans', sans-serif;
}

.uxm-subtitle {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    letter-spacing: 0.5px;
}

.uxm-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.uxm-logo {
    max-width: 120px;
}

.uxm-logo img {
    width: 100%;
    height: auto;
}

.uxm-textblock {
    text-align: left;
    max-width: 500px;
}

@media (max-width: 768px) {
    .uxm-flex {
        flex-direction: column;
        text-align: center;
    }

    .uxm-textblock {
        text-align: center;
    }
}

.uxm-subcenter {
    text-align: center;
    margin-top: 0.5rem;
}

/* Footer-Menü waagerecht und gelb */
ul.mod-menu.footer-menu.horizontal {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding-left: 0;
  margin: 0;
}


ul.mod-menu.footer-menu.horizontal > li {
  margin: 0 1.2em;
  white-space: nowrap;
}

ul.mod-menu.footer-menu.horizontal > li > a {
  color: #F7DA73 !important;
  text-decoration: none;
  font-size: 0.85em;
}

ul.mod-menu.footer-menu.horizontal > li > a:hover {
  text-decoration: underline;
}

/* Footer-Menü Copyrigt waagerecht und gelb */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.5em;
}

#copyright-de {
  color: #F7DA73;
  font-size: 0.85em;
  text-align: center;
  margin: 0;
}

/* Kein Backgroung in Modul und gelb */
.no-bg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.moduletable.no-bg {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Social Media Icons  */
.social-icons {
  display: flex;
  justify-content: center;    /* Zentriert horizontal */
  align-items: center;        /* Zentriert vertikal (falls nötig) */
  gap: 1rem;                  /* Abstand zwischen Icons */
  padding: 1rem 0;            /* Etwas Innenabstand oben/unten */
}

.social-icons a {
  text-decoration: none;       /* Unterstreichung entfernen */
  margin-right: 1rem;          /* Abstand zwischen Icons */
  display: inline-block;       /* Macht margin verlässlich */
}

.social-icons a i {
  font-size: 2rem;             /* Größe der Icons */
  color: #1a374d;              /* Basisfarbe */
  transition: color 0.3s ease;
}

.social-icons a:hover i {
  color: #8c1c2e;              /* Hover-Farbe */
}

/* === Sidebar-Menü Container === */
.mod-no-bg.mod-sidebar-only {
  border-top: 5px solid #8c1c2e;       /* Bordeauxroter Balken */
  padding: 2rem 1.5rem;
  background-color: transparent;
}

/* === Hauptmenü-Links (Startseite, Über uns etc.) === */
div.card-body ul.mod-menu.mod-list.nav > li > a {
  color: #1a374d;                      /* Dunkelblau */
  font-size: 1.5rem !important;        /* Große Schriftgröße */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

div.card-body ul.mod-menu.mod-list.nav > li > a:hover {
  color: #8c1c2e;                      /* Bordeauxrot beim Hover */
  text-decoration: none;
}

/* === Untermenüs einrücken === */
div.card-body ul.mod-menu.mod-list.nav ul.mod-menu__sub {
  margin-left: 1.5rem;
}

/* === Untermenü-Links (z. B. Impressum unter „Über uns“) === */
div.card-body ul.mod-menu.mod-list.nav ul.mod-menu__sub li a {
  color: #1a374d;
  font-size: 1.3rem !important;          /* Etwas kleiner als Hauptlinks */
  text-decoration: none;
}

div.card-body ul.mod-menu.mod-list.nav ul.mod-menu__sub li a:hover {
  color: #8c1c2e;
  text-decoration: none;
}

/* === Font Awesome Icons im Menü === */
.mod-no-bg.mod-sidebar-only i {
  font-size: 1.4rem;
  color: inherit;
}

/* Optischer Block je SEBLOD Gruppe */
.seblod-group-box {
  background-color: #fef6d8;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 0 1px #f1e9b2 inset;
}

/* Gruppenüberschrift */
.seblod-group-box .cck_label {
  font-size: 1.2rem;
  font-weight: bold;
  color: #7a1c33;
  margin-bottom: 0.75rem;
}

/* Einzelne Felder */
.seblod-group-box .uxm-value {
  display: block;
  margin-left: 0.5rem;
  font-size: 0.95rem;
  color: #111;
  margin-bottom: 0.4rem;
}

.seblod-group-box {
  background-color: red !important;
}

.seblod-group-box + .seblod-group-box {
  margin-top: 1.5rem;
}

.seblod-group-box .uxm-label {
  font-weight: normal;
  color: #444;
  font-size: 0.95rem;
}
.responsive-map {
  width: 100% !important;
  max-width: 100%;
  height: auto;
}

.responsive-map iframe,
.responsive-map div,
.responsive-map .zhopenstreetmap {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .responsive-map {
    height: 300px !important; /* Optional für Mobilansicht */
  }
}

/* Globale Regel für alle eingebetteten zhOpenStreetMap-Karten */
.zhom-map-default {
  width: 100% !important;
  min-height: 400px !important;
  height: auto !important;
  max-width: 100% !important;
}


/* Optional: Mindesthöhe für kleine Geräte */
@media (max-width: 768px) {
  .zhom-map-default {
    height: 300px !important;
  }
}

/* Buttons für Strand */
.uxm-strand-btn {
  display: inline-block;
  color: #fff;
  background-color: #7f1d1d; /* Bordeaux */
  border: 2px solid #7f1d1d;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.uxm-strand-btn:hover {
  background-color: #fff3b0; /* Hellgelb wie dein Website-Hintergrund */
  color: #7f1d1d;
  border-color: #7f1d1d;
}

.category-desc {
    margin-bottom: 3rem;
}

.beach-heading {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 2px solid #b02a37; /* Bordeaux */
    color: #b02a37;
}

/* Nur für die Kategorie-Übersichtskarte auf der Strand-Seite */
.uxm-map-wrapper .zhom-map-default {
  height: 800px !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Akkordeon-Menü – nur für Sidebar-Menü */
.uxm-accordion ul.mod-menu ul {
  display: none;
  padding-left: 1rem;
}

.uxm-accordion ul.mod-menu li.active > ul,
.uxm-accordion ul.mod-menu li:hover > ul {
  display: block;
}

/* Optional: Pfeile (Font Awesome) */
.uxm-accordion ul.mod-menu li > a::before {
  content: "›";
  color: #912B3B;
  margin-right: 0.5rem;
  display: inline-block;
  transition: transform 0.2s ease;
}

.uxm-accordion ul.mod-menu li.active > a::before {
  transform: rotate(90deg);
}
.uxm-row.uxm-bottom-area {
  align-items: flex-start;
}
.affiliate-hinweis {
	font-size: 0.85rem;
	color: #111;
}
.leaflet-marker-icon[src*="marker-shadow.png"] {
  display: none !important;
}
.infobox {
  background-color: #f8f9fa;   /* hellgrau, neutral */
  border: 1px solid #ddd;      /* dezenter Rahmen */
  border-radius: 6px;          /* leicht abgerundet */
  padding: 1rem;
  margin-bottom: 1rem;
}
.infobox strong {
  font-weight: 600;
}
/* Einheitliche Typografie für Spalte 2–(letzte), außer Badge-Spalte (1) */
.uxm-cs-table td:not(:first-child) {
  font-size: 0.9rem;
  color: #222;
  font-weight: 400; /* Basis: normal */
}

/* Name CS (Spalte 2) fett */
.uxm-cs-table td:nth-child(2) {
  font-weight: 600;
}

/* Link-Spalte fett – nur wenn vorhanden (markiert mit .is-link-col) */
.uxm-cs-table td.is-link-col,
.uxm-cs-table th.is-link-col {
  font-weight: 600;
}
.uxm-cs-table td.is-link-col a {
  color: #222;
  text-decoration: none;
}
.uxm-cs-table td.is-link-col a:hover {
  text-decoration: underline;
}

/* Badges (Spalte 1) */
.badge-pac,
.badge-suap {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 400;
  display: inline-block;
}
.badge-pac  { background: #4caf50; color: #fff; }
.badge-suap { background: #3f51b5; color: #fff; }