/* Madame Dakar Reisen – Design der bisherigen Seite auf Basis von Bootstrap 5 */
:root {
  --mdr-red: #DD3B0C;
  --mdr-red-dark: #C0340A;
  --mdr-green: #83A164;
  --mdr-green-light: #ACBE99;
  --mdr-green-pale: #C5D2B8;
  --mdr-orange: #F5A623;
  --mdr-yellow: #FFFF00;

  --bs-body-font-family: 'Cantarell', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-color: #000;
  --bs-link-color: #DD3B0C;
  --bs-link-color-rgb: 221, 59, 12;
  --bs-link-hover-color: #a82c08;
  --bs-link-hover-color-rgb: 168, 44, 8;
  --bs-link-decoration: none;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn, .nav-tabs, .topbar { font-family: 'Josefin Sans', sans-serif; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { hyphens: manual; }
body { overflow-x: hidden; }
.container { max-width: 980px; }

/* ---------- Kopfbereich ---------- */
.topbar { background: var(--mdr-red); color: #fff; font-weight: 300; padding: 1.1rem 0 1rem; }
.topbar a { color: #fff; }
.topbar .top-menu .nav-link { color: #fff; padding: 0 .9rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
.topbar .top-menu .nav-link:hover { text-decoration: underline; }
.topbar-claim { font-size: 1.5rem; font-weight: 700; text-align: right; line-height: 1.1; max-width: 12ch; }
@media (max-width: 575px) { .topbar-claim { font-size: 1.2rem; max-width: none; } }

.hero { position: relative; background: #ddd; }
.hero-img { display: block; width: 100%; height: 560px; object-fit: cover; }
@media (max-width: 991px) { .hero-img { height: 380px; } }
@media (max-width: 575px) { .hero-img { height: 260px; } }
.hero .carousel-item { transition: opacity 1.2s ease; }

.brandbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: rgba(245, 166, 35, .92); padding: .8rem 0; }
.brandbar *, .brandbar a { color: var(--mdr-yellow); }
.brand { text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-name { font-family: 'Architects Daughter', cursive; font-size: 2rem; line-height: 1.1; }
@media (min-width: 992px) { .brand-name { font-size: 3.1rem; } }
.contact-us { display: flex; align-items: center; gap: .6rem; font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 1.15rem; text-align: right; line-height: 1.15; }
.contact-us .bi { font-size: 2.2rem; }
.contact-us a:hover { text-decoration: underline; }
@media (max-width: 575px) { .contact-us { font-size: .95rem; margin-top: .3rem; } }

.hero-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.hero-nav .container { position: relative; }
.nav-panel { background: rgba(221, 59, 12, .85); color: #fff; padding: 1.1rem 1.25rem .9rem; }
.nav-panel-title { display: block; font-family: 'Josefin Sans', sans-serif; font-size: 1.7rem; line-height: 1.1; }
.nav-panel-title::after { content: ""; display: block; width: 80px; height: 2px; background: #fff; margin: .35rem 0 .9rem; }
.nav-panel-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 1.2rem; }
.nav-panel-links a { color: #fff; }
.nav-panel-links a:hover { text-decoration: underline; }
.menu-toggle { background: var(--mdr-red); color: #fff; border: 0; font-family: 'Josefin Sans', sans-serif; font-size: 1.1rem; padding: .5rem 1rem; display: block; margin-left: auto; }
@media (max-width: 991px) {
  .hero-nav { position: static; background: var(--mdr-red); }
  .hero-nav .container { padding: 0; }
  .nav-panel { background: var(--mdr-red); border-top: 1px solid rgba(255,255,255,.35); }
  .nav-panel-title { font-size: 1.4rem; }
  .brandbar { position: static; }
  .hero { display: flex; flex-direction: column; }
  .hero .brandbar { order: -1; background: var(--mdr-orange); }
}
@media (min-width: 992px) { .hero-nav .row { --bs-gutter-x: 1.1rem; } .hero-nav .col-lg-6:first-child { padding-left: 0; } }

/* ---------- Überschriften ---------- */
.page-title, .section-title { font-size: 1.7rem; margin-bottom: 1.4rem; }
.page-title { color: var(--mdr-green); }
.section-title { color: var(--mdr-red); }
.page-title::after, .section-title::after { content: ""; display: block; width: 80px; height: 2px; margin-top: .3rem; background: currentColor; }
.page-subtitle { font-size: 1.4rem; color: #000; text-transform: uppercase; margin-bottom: 1.6rem; }
.tab-heading { color: var(--mdr-green); font-size: 1.3rem; margin-top: 1.5rem; }
.destination-badge { background: var(--mdr-green-pale); color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: 1rem; font-weight: 400; border-radius: 0; padding: .15rem .3rem; }
.footer-title { font-family: 'Josefin Sans', sans-serif; color: var(--mdr-red); font-size: 1.4rem; }
.footer-title::after { content: ""; display: block; width: 80px; height: 2px; margin: .3rem 0 1.2rem; background: var(--mdr-red); }

/* ---------- Buttons ---------- */
.btn-brand, .btn-green { color: #fff; font-size: 1.5rem; border-radius: 0; padding: .9rem 1rem .6rem; border: 0; }
.btn-brand { background: var(--mdr-red); }
.btn-green { background: var(--mdr-green-light); }
.btn-brand:hover, .btn-brand:focus, .btn-green:hover, .btn-green:focus { color: #fff; filter: brightness(.92); text-decoration: none; }
.btn-outline-brand { border: 2px solid var(--mdr-red); color: var(--mdr-red); font-size: 1.3rem; border-radius: 0; }
.btn-outline-brand:hover { background: var(--mdr-red); color: #fff; }
.btn i { float: right; }
.btn-light { border-radius: 0; font-size: .9rem; }

/* ---------- Panels ---------- */
.panel-orange { background: var(--mdr-orange); color: #fff; padding: 1.2rem 1.4rem; }
.panel-orange a { color: #fff; }
.panel-orange-title { color: #fff; font-size: 1.7rem; margin-bottom: 1rem; }
.section-panel-header { background: transparent; border: 0; padding: 0 0 .8rem; }
.section-panel-header h2 { display: inline-block; background: #fff; color: var(--mdr-orange); font-size: 1.4rem; padding: .25rem .3rem 0; margin: 0; }
.guide-card, .similar-card, .report-card { border-radius: 0; background: var(--mdr-green-light); color: #fff; padding: 0; }
.similar-card, .report-card { padding: 1.1rem 1.1rem .6rem; }
.similar-card .list-group-item { background: transparent; color: #fff; border: 0; padding: .5rem 2.2rem .8rem 0; position: relative; }
.similar-card .list-group-item small { font-style: italic; text-transform: none; }
.similar-card .list-group-item::after { content: "\F285"; font-family: bootstrap-icons; position: absolute; right: 0; top: .7rem; background: #fff; color: var(--mdr-orange); width: 30px; height: 30px; line-height: 30px; text-align: center; }
.similar-card .list-group-item:hover { background: transparent; text-decoration: underline; }
.guide-card .card-img-top { border-radius: 0; }
.guide-card .card-body { padding: 1.3rem 1.2rem; }
.guide-card h2 { display: inline-block; background: #fff; color: var(--mdr-orange); font-size: 1.4rem; padding: .25rem .3rem 0; text-transform: none; }
.guide-card h3 { color: #fff; font-size: 1.6rem; }
.guide-card h3::after { content: ""; display: block; width: 80px; height: 2px; margin: .3rem 0 1.2rem; background: #fff; }
.guide-card .btn-light { background: transparent; border: 0; color: var(--mdr-red); padding: 0; font-family: 'Cantarell', sans-serif; font-size: 1rem; }
.guide-card .btn-light::before { content: "> "; }
.report-card .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: rgba(255,255,255,.4); --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-btn-color: #fff; --bs-accordion-active-color: #fff; --bs-accordion-btn-padding-x: 0; --bs-accordion-body-padding-x: 0; }
.report-card .accordion-button { color: #fff; box-shadow: none; font-size: 1rem; }
.report-card .accordion-body { color: #fff; }

/* ---------- Reise-Kacheln ---------- */
.travel-card, .travel-row { border-radius: 0; overflow: hidden; color: #fff; }
.travel-card-body { background: var(--mdr-red); color: #fff; padding: 1.2rem 1.2rem 1rem; }
.travel-card-body .small { display: inline-block; background: #fff; color: var(--mdr-orange); font-family: 'Josefin Sans', sans-serif; font-size: 1.3rem; text-transform: none; padding: .1rem .25rem 0; margin-bottom: .7rem; }
.travel-card-body .card-title { color: #fff; font-size: 1.4rem; line-height: 1.15; margin-bottom: 1rem; }
.travel-card-body .card-title::after { content: ""; display: block; width: 80px; height: 2px; background: #fff; margin-top: .4rem; }
.travel-card-body p { text-transform: uppercase; font-family: 'Josefin Sans', sans-serif; font-size: 1rem; }
.col-md-4:nth-child(even) > .travel-card .travel-card-body, .travel-row:nth-of-type(even) .travel-card-body { background: var(--mdr-green-light); }
.travel-card:hover, .travel-row:hover { text-decoration: none; }
.travel-card .card-img-top { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.travel-row p { text-transform: none; }
.info-card-header { background: var(--mdr-orange); border-radius: 0; color: #fff; }
.info-card-header h2 { font-size: 1.4rem; }
.info-card { border-radius: 0; background: #fff; }
.team-card { border-radius: 0; }
.team-even { background: var(--mdr-orange); color: #fff; }
.team-odd { background: var(--mdr-green-light); color: #fff; }
.team-card h2 { color: #fff; }
.team-card h2::after { content: ""; display: block; width: 80px; height: 2px; background: #fff; margin-top: .3rem; }
.team-card img { max-height: 420px; }
.team-card .btn-light { background: transparent; border: 0; color: #fff; padding: 0; text-decoration: underline; }

/* ---------- Reiseseite ---------- */
.gallery-carousel { margin-bottom: .6rem !important; }
.gallery-carousel img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 1.6rem; }
.gallery-thumbs button { border: 0; padding: 0; background: none; opacity: .8; }
.gallery-thumbs button:hover, .gallery-thumbs button.active { opacity: 1; outline: 2px solid var(--mdr-red); }
.gallery-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.travel-tabs { border: 0; gap: 2px; margin-bottom: 1rem; flex-wrap: wrap; }
.travel-tabs .nav-link { background: var(--mdr-orange); color: #fff; font-size: 1.25rem; border: 0; border-radius: 0; padding: .45rem .7rem .3rem; }
.travel-tabs .nav-link.active, .travel-tabs .nav-link:hover { background: var(--mdr-red); color: #fff; }
.tab-pane ul, .static-content ul, .info-card ul { list-style: none; padding-left: 0; }
.tab-pane ul li, .static-content ul li, .info-card ul li, .check-list li { position: relative; padding-left: 1.1rem; margin-bottom: .3rem; }
.tab-pane ul li::before, .static-content ul li::before, .info-card ul li::before, .check-list li::before { content: "\F285"; font-family: bootstrap-icons; position: absolute; left: 0; top: .1rem; font-size: .8rem; color: var(--mdr-orange); }
.check-list { padding-left: 0; }
.price-table th { background: var(--mdr-orange); color: #fff; font-family: 'Josefin Sans', sans-serif; font-weight: 400; }
.table > :not(caption) > * > * { background-color: transparent; }

/* ---------- Fließtext ---------- */
.static-content img, .tab-pane img { max-width: 100%; height: auto; }
.lead-text { font-size: 1.1rem; }
main { min-height: 40vh; }

/* ---------- Fußbereich ---------- */
#footer .footer-columns { background: #F2F2F2; border-top: 40px solid var(--mdr-green-light); padding: 2.5rem 0 1.5rem; }
#footer .footer-menu { background: #F2F2F2; padding: 0 0 2.5rem; font-family: 'Josefin Sans', sans-serif; }
#footer .footer-menu .container { border-top: 1px solid #ccc; padding-top: 1rem; }
#footer .footer-menu .nav { justify-content: center; }
#footer .footer-menu .nav-item + .nav-item::before { content: "|"; color: #000; position: absolute; left: -.2rem; }
#footer .footer-menu .nav-item { position: relative; margin-left: 1.1rem; }
#footer .footer-menu .nav-item:first-child { margin-left: 0; }
#footer .footer-menu .nav-link { color: var(--mdr-red); padding: 0 0 0 1.1rem; }
#footer .footer-menu .nav-item:first-child .nav-link { padding-left: 0; }
.nav-panel-links a.current { color: #000; }
#footer address { margin: 0; }

@media print {
  .topbar, .hero-nav, .brandbar, .hero, #footer .footer-menu, .carousel-control-prev, .carousel-control-next, .gallery-thumbs { display: none !important; }
  .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }
}

.tab-pane li p, .info-card li p { margin-bottom: 0; }

/* Reiseliste: Dauer und Preis rechts im roten Kasten */
.travel-box { position: relative; padding-bottom: 3.6rem; }
.travel-badge, .travel-price { position: absolute; right: 0; font-family: 'Josefin Sans', sans-serif; line-height: 1.2; }
.travel-badge { top: 1.2rem; right: 1.2rem; color: #fff; text-transform: uppercase; font-size: 1.1rem; }
.travel-price { bottom: 1rem; right: .6rem; background: #fff; color: var(--mdr-orange); font-size: 1.25rem; padding: .25rem .6rem; }
/* Kopf: Claim fetter, orange Leiste transparenter, Navi-Panels zentriert */
.topbar-claim { font-weight: 700; }
.brandbar { background: rgba(245, 166, 35, .95); }
.hero-nav .row { justify-content: center; }
.nav-panel-links { justify-content: flex-start; }

/* Reisekalender */
.panel-calendar { display: block; background: var(--mdr-red); color: #fff; text-decoration: none; }
.panel-calendar:hover { color: #fff; filter: brightness(.92); }
.panel-calendar-title { display: flex; justify-content: space-between; align-items: center; font-family: 'Josefin Sans', sans-serif; color: #fff; font-size: 1.4rem; padding: .7rem 1rem; }
.cal-filter .form-select { max-width: 280px; border-radius: 0; color: #999; }
.cal-submit { background: none; border: 0; color: #fff; text-transform: uppercase; padding: 0; font-family: 'Josefin Sans', sans-serif; }
.cal-submit .bi { background: #fff; color: var(--mdr-orange); padding: .15rem .3rem; margin-left: .3rem; }
.cal-month { margin-bottom: 2.5rem; }
.cal-month[hidden] { display: none; }
.cal-month-title { color: var(--mdr-orange); font-size: 1.5rem; margin-bottom: .8rem; }
.cal-month-title::after { content: ""; display: block; width: 80px; height: 2px; background: currentColor; margin-top: .3rem; }
.cal-table { width: 100%; text-align: center; border-collapse: collapse; }
.cal-table th { font-family: 'Josefin Sans', sans-serif; font-weight: 700; color: #000; padding: .2rem .5rem; border-bottom: 1px solid var(--mdr-orange); }
.cal-table td { padding: .55rem .5rem; border-bottom: 1px solid #eee; }
.cal-table tr:nth-child(even) td { background: #f2f2f2; }
.cal-table a { color: var(--mdr-red); }
.cal-land { background: var(--mdr-green-pale); color: #fff; font-family: 'Josefin Sans', sans-serif; padding: 0 .35rem; }
.cal-ok { color: var(--mdr-green-light); font-size: 1.3rem; }

/* Tabs der Reiseseite: eine Zeile, weniger Innenabstand */
.travel-tabs { flex-wrap: nowrap; overflow: visible; gap: 2px; }
.travel-tabs .nav-item { flex: 0 0 auto; }
.travel-tabs .nav-link { white-space: nowrap; font-size: 1.1rem; padding: .45rem .5rem .3rem; }
/* Handy: Tabs untereinander, jeweils volle Breite */
@media (max-width: 767px) {
  .travel-tabs { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .travel-tabs .nav-item { width: 100%; }
  .travel-tabs .nav-link { width: 100%; text-align: left; font-size: 1.25rem; padding: .45rem .7rem .3rem; }
}

/* Verlauf: Tagesüberschriften grün und fett wie im Original */
.tab-pane h3.tab-heading { color: var(--mdr-green); font-weight: 700; }

/* Termine & Preise: Kopfzeile sichtbar (die Regel für .table machte den Hintergrund transparent) */
.table.price-table > thead > tr > th { background-color: var(--mdr-orange); color: #fff; white-space: nowrap; }

/* Reise anfragen: Icon rechts im Button wie im Original */
.btn-inquiry { background-image: url("../images/icons/feedback.svg"); background-repeat: no-repeat; background-size: 30px 30px; background-position: right 15px center; padding-right: 3.5rem; }

/* Reisekarte vergrößern */
a.zoom-map { display: block; cursor: zoom-in; }
.map-close { position: absolute; top: .6rem; right: .6rem; z-index: 2; background-color: #fff; opacity: 1; padding: .6rem; }

/* Buttons (Länderinformationen, Reise anfragen): Hover = gleiche Farbe, etwas abgeschwächt, nie weiß */
.btn-brand:hover, .btn-brand:focus, .btn-brand:active { background-color: var(--mdr-red); color: #fff; opacity: .85; filter: none; }
.btn-green:hover, .btn-green:focus, .btn-green:active { background-color: var(--mdr-green-light); color: #fff; opacity: .85; filter: none; }

/* Kopfbereich etwas höher */
.topbar { padding: 1.5rem 0 1.4rem; }
.brandbar { padding: 1.25rem 0; }

/* Hamburger-Menü in der roten Leiste (Handy/Tablet) */
.topbar .menu-toggle { margin-left: 0; padding: .2rem .5rem; font-size: 1.8rem; line-height: 1; background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; }
.topbar .menu-toggle .bi { display: block; }
/* Termine & Preise auf dem Handy: Felder untereinander statt nebeneinander */
@media (max-width: 767px) {
  .price-table thead { display: none; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table tr { margin-bottom: .6rem; border: 1px solid var(--mdr-orange); }
  .price-table td[data-label] { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .75rem; border: 0; border-bottom: 1px solid #eee; text-align: right; }
  .price-table td[data-label]::before { content: attr(data-label); font-family: 'Josefin Sans', sans-serif; font-weight: 700; color: var(--mdr-orange); text-align: left; }
  .price-table td[colspan] { padding: .35rem .75rem; background: #f8f8f8; }
}

/* Titel der Navi-Panels ist ein Button (Aufklappen auf dem Handy), am Desktop wie bisher */
button.nav-panel-title { background: none; border: 0; padding: 0; color: inherit; text-align: left; width: 100%; font-weight: 400; }

/* Handy-Menü nach Vorlage: orange Zeilen mit Pfeil, darunter weiße Linkliste */
@media (max-width: 991px) {
  .hero-nav { background: #fff; }
  .hero-nav .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .hero-nav .nav-panel { background: #F09C34; border-top: 0; border-bottom: 1px solid #C97F22; padding: 0; }
  button.nav-panel-title { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; font-size: 1.6rem; line-height: 1.2; }
  .nav-panel-title::after { content: "\F285"; font-family: "bootstrap-icons"; width: auto; height: auto; background: none; margin: 0; font-size: 1rem; color: #A9631A; transition: transform .2s; }
  .nav-panel-title[aria-expanded="true"]::after { transform: rotate(90deg); }
  .hero-nav .nav-panel > .collapse, .hero-nav .nav-panel > .collapsing { background: #D98A2B; }
  .hero-nav .nav-panel > div .nav-panel-links { flex-direction: column; gap: 0; padding: .4rem 1rem .6rem; font-size: 1.2rem; }
  .hero-nav .nav-panel > div .nav-panel-links a { display: block; padding: .35rem 0; }
  .hero-nav .nav-panel-extra { background: #fff; border: 0; padding: 2.5rem 0 3rem; }
  .hero-nav .nav-panel-extra .nav-panel-links { flex-direction: column; gap: 0; padding: 0; font-family: 'Cantarell', sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: .03em; }
  .hero-nav .nav-panel-extra .nav-panel-links li { border-bottom: 1px solid #ddd; margin-left: 1rem; }
  .hero-nav .nav-panel-extra .nav-panel-links a { display: block; color: #555; padding: .95rem 0; }
  .hero-nav .nav-panel-extra .nav-panel-links a:hover { color: var(--mdr-red); text-decoration: none; }
}

/* Handy-Menü fährt von rechts herein (Offcanvas) */
@media (max-width: 991px) {
  #mainmenu { --bs-offcanvas-width: min(88vw, 420px); background: #fff; }
  #mainmenu .offcanvas-header { background: #F09C34; justify-content: flex-end; padding: .6rem 1rem; }
  #mainmenu .offcanvas-body { overflow-y: auto; }
  .hero-nav { position: static; height: 0; }
}