/* Böhm Reisen – eine Standardvorlage, alle Content-Layouts rein in CSS.
 * IMPORTANT: Kein PHP analysiert oder splittet CKEditor-Inhalte.
 * Original-Editorial main.css wird unverändert darüber geladen.
 */

/* Editorial nutzt row-reverse, weil die Sidebar normalerweise im Quelltext NACH
   dem Inhalt folgt. Wir platzieren sie davor und drehen nur die Flex-Richtung.
   Bei beschädigtem Content bleibt der Navigationsbereich eigenständig. */
#wrapper.boehm-shell { flex-direction: row; }
#wrapper.boehm-shell #main { min-width: 0; width: 0; flex: 1 1 auto; }
#wrapper.boehm-shell #main > .inner { min-width: 0; }
#wrapper.boehm-shell .boehm-page,
#wrapper.boehm-shell .boehm-content,
#wrapper.boehm-shell .boehm-content > * { min-width: 0; max-width: 100%; }
#wrapper.boehm-shell .boehm-content { overflow-wrap: anywhere; }
#wrapper.boehm-shell .boehm-content img,
#wrapper.boehm-shell .boehm-sidebar-body img {
  max-width: 100% !important;
  height: auto;
}
#wrapper.boehm-shell .boehm-content iframe,
#wrapper.boehm-shell .boehm-content video { max-width: 100%; }
#wrapper.boehm-shell .boehm-content p { max-width: 100%; }

/* Der freie Inhalt der Startseite besitzt bereits zwei CKEditor-Container:
   .boehm-einleitung und .boehm-bannerbild. Wird einer geloescht oder verschoben,
   erscheint der verbleibende Content normal untereinander, OHNE die Sidebar
   oder den Rest der Webseite zu beeinflussen. Keine Text-/Jahreszahlerkennung. */
@supports selector(.boehm-page:has(> .boehm-content > .boehm-bannerbild)) {
  .boehm-page:has(> .boehm-content > .boehm-einleitung):has(> .boehm-content > .boehm-bannerbild) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4em;
    align-items: start;
  }
  .boehm-page:has(> .boehm-content > .boehm-einleitung):has(> .boehm-content > .boehm-bannerbild) > .boehm-content { display: contents; }
  .boehm-page:has(> .boehm-content > .boehm-einleitung):has(> .boehm-content > .boehm-bannerbild) > .boehm-page-title { grid-column: 1; grid-row: 1; }
  .boehm-page > .boehm-content > .boehm-einleitung { grid-column: 1; grid-row: 2; }
  .boehm-page > .boehm-content > .boehm-bannerbild {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 18em;
    margin: 0 0 2em;
  }
  .boehm-page > .boehm-content > .boehm-bannerbild img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    max-width: none;
  }
  .boehm-page:has(> .boehm-content > .boehm-einleitung):has(> .boehm-content > .boehm-bannerbild) > .boehm-content > :not(.boehm-einleitung):not(.boehm-bannerbild),
  .boehm-page:has(> .boehm-content > .boehm-einleitung):has(> .boehm-content > .boehm-bannerbild) > .boehm-footer-content {
    grid-column: 1 / -1;
  }
}
/* Andere Seiten sind ganz normale Seiten: keine spezielle CSS-Positionierung. */
.boehm-page > .boehm-content > .boehm-bannerbild:not(:has(img)) { display: none; }
.boehm-content > .boehm-einleitung::after { content: ''; display: block; clear: both; }
.boehm-page-title { min-width: 0; }
.boehm-page-title h1 { overflow-wrap: anywhere; }
.boehm-footer-content { min-width: 0; margin-top: 3em; }

/* ALLE Tabellen – auch neu angelegte – niemals breiter als der Seitenbereich. */
.boehm-content table { max-width: 100% !important; height: auto !important; }
.boehm-content table.reise-tabelle {
  width: 100% !important;
  height: auto !important;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.boehm-content table.reise-tabelle td, .boehm-content table.reise-tabelle th {
  vertical-align: top;
  overflow-wrap: anywhere;
}
.boehm-content table.reise-tabelle td {
  border: 1px solid rgba(210,215,217,.75);
  border-top: 0;
  border-left: 0;
}
.boehm-content table.reise-tabelle td:first-child { border-left-width: 1px; }
.boehm-content table.reise-tabelle tbody tr:first-child td { border-top-width: 1px; }

/* Leistungen sind eine normale CKEditor-Liste. Aus beliebig vielen Eintraegen
   macht CSS das originale Rautenlayout. */
.boehm-content ul.leistungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 3em; row-gap: 2em;
  list-style: none; padding: 0; margin: 1.75em 0 4em;
}
.boehm-content ul.leistungen li {
  position: relative; display: flex; align-items: center;
  min-height: 8em; min-width: 0; margin: 0;
  padding: 0 0 0 9.5em;
  font: 700 1em/1.5 'Roboto Slab', Georgia, serif;
}
.boehm-content ul.leistungen li::before {
  content: ''; display: block; width: 5.75em; height: 5.75em;
  border: 2px solid rgba(210,215,217,.75); border-radius: .25em;
  transform: translateY(-50%) rotate(45deg);
  position: absolute; top: 50%; left: 1.4em;
}
.boehm-content ul.leistungen li::after {
  content: '\f219'; color: #006C39; font: 2em FontAwesome;
  position: absolute; left: 2.15em; top: 50%; transform: translate(-50%, -50%);
}

/* Vorhandenes 3x3-Reiseziele-Raster, aber beliebig viele Zellen moeglich.
   Die Zellen werden nur per CSS als Karten ausgegeben. */
.boehm-content table.reiseziele,
.boehm-content table.reiseziele tbody {
  display: block; width: 100% !important; height: auto !important;
  border: 0; margin: 0;
}
.boehm-content table.reiseziele tbody {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  column-gap: 2em; row-gap: 3em; margin: 1.5em 0 3em;
}
.boehm-content table.reiseziele tr { display: contents; }
.boehm-content table.reiseziele td {
  display: block; min-width: 0; border: 0; padding: 0;
  background: transparent; overflow-wrap: anywhere;
}
.boehm-content table.reiseziele td p { margin: 0 0 .85em; }
.boehm-content table.reiseziele td img {
  display: block; width: 100%; height: auto !important; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: .35em;
}

/* Zusaetzliche DIV-Bildkarten, falls der CKEditor solche Container erzeugt. */
.boehm-content .bildkarten {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2em;
}
.boehm-content .bildkarten > * { min-width: 0; }
.boehm-content .bildkarten img {
  display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover;
}

/* Einfache Spaltenblöcke fuer neue Inhaltsbereiche auf jeder Seite. */
.boehm-content .zwei-spalten { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2em; align-items: start; }
.boehm-content .zwei-spalten > * { min-width: 0; }

/* Redaktionelle Kapitelueberschriften. Klassennamen statt fester Texte. */
.boehm-content h2 { clear: both; }
.boehm-content h2:has(+ ul.leistungen),
.boehm-content h2:has(+ table.reiseziele) {
  margin-top: 2em; padding-top: 2em; border-top: 1px solid rgba(210,215,217,.75);
}
.boehm-content h2:has(+ ul.leistungen)::after,
.boehm-content h2:has(+ table.reiseziele)::after {
  content: ''; display: block; margin-top: .65em; width: 8em; border-bottom: 3px solid #006C39;
}

/* Sidebar: eingebundener Seiteninhalt ohne PHP-Zerlegung. */
#sidebar .boehm-sidebar-body { min-width: 0; overflow-wrap: anywhere; }
#sidebar .boehm-sidebar-body > h2 {
  width: fit-content; max-width: 100%; padding-bottom: .65em;
  border-bottom: 3px solid #006C39; font-size: 1.38889em; margin: 0 0 1.5em;
}
#sidebar .boehm-sidebar-body > h2:not(:first-child) { margin-top: 2em; }
#sidebar .boehm-sidebar-body img {
  display: block; width: 100%; height: auto !important; border-radius: .35em;
}
#sidebar .boehm-sidebar-body > p:has(> img) { margin: 2em 0 1em; }
#sidebar .boehm-sidebar-body ul.contact { padding-left: 0; }

@media screen and (max-width: 1100px) {
 .boehm-content ul.leistungen { grid-template-columns: 1fr; }
}
@media screen and (max-width: 980px) {
 .boehm-content table.reiseziele tbody, .boehm-content .bildkarten { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .boehm-page:has(> .boehm-content > .boehm-einleitung):has(> .boehm-content > .boehm-bannerbild) { grid-template-columns: 1fr; }
 .boehm-page > .boehm-content > .boehm-einleitung, .boehm-page > .boehm-content > .boehm-bannerbild,
 .boehm-page > .boehm-page-title { grid-column: 1; grid-row: auto; }
}
@media screen and (max-width: 736px) {
 .boehm-content .zwei-spalten, .boehm-content .bildkarten,
 .boehm-content table.reiseziele tbody { grid-template-columns: 1fr; }
 .boehm-content table:not(.reiseziele) { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .boehm-content ul.leistungen { grid-template-columns: 1fr; }
 .boehm-content ul.leistungen li { min-height: 6em; padding-left: 7em; }
 .boehm-content ul.leistungen li::before { width: 4em; height: 4em; left: 1em; }
 .boehm-content ul.leistungen li::after { font-size: 1.6em; left: 2.0em; }
}