/**
 * Kleins-eigene CSS-Overrides, die im Live-Contao-Setup implicit greifen,
 * bei uns aber explizit gesetzt werden müssen.
 */

/* .button-folge ist per Contao-CSS position:absolute + bottom:0.
   Ohne relative-Parent rutschen die Buttons zum Viewport-Boden. */
.head-folge {
  position: relative;
}

/* News-Card: Abstand zwischen Description und „Weiterlesen"-Button. */
.mod_newslist .news-item-text .ce_text.block + .more,
.mod_newslist .news-item-text .more {
  margin-top: 1rem;
}

/* "Zur Karte"-Lightbox (Colorbox-Ersatz) */
.karte-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; cursor: zoom-out; }
.karte-lightbox img { max-width: 100%; max-height: 100%; background: #fff; padding: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: default; }
.karte-lightbox__close { position: absolute; top: 16px; right: 20px; font-size: 2.5rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; }
body.karte-lightbox-open { overflow: hidden; }

/* ==========================================================================
   Kundenportal — Kleins-Design-Sprache:
   Boxen mit der Ecke aus --border1 (seit 29.10.2026 eckig),
   weiche Schatten, Grün-Töne aus den Site-Tokens.
   ========================================================================== */

.kundenportal { --portal-radius: var(--border1); }

/* --- Kopf: Navigation als Pills + Nutzer-Zeile --- */
.kundenportal .portal-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--green-light, #81ba1c); }
.kundenportal .portal-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.kundenportal .portal-nav a { padding: 12px 26px; background: #f4f6f2; color: inherit; text-decoration: none; font-weight: 700; border-radius: var(--portal-radius); transition: background .2s ease, color .2s ease; }
.kundenportal .portal-nav a:hover { background: var(--green, #009237); color: #fff; }
.kundenportal .portal-nutzer { margin: 0; font-size: .9rem; color: #666; }
.kundenportal .portal-nutzer a { font-weight: 700; }

/* --- Karten: weißer Grund, Abrundung unten rechts, sanfter Schatten --- */
.kundenportal .portal-buchung-card,
.kundenportal .portal-daten-card {
  background: #fff;
  border: 0;
  border-radius: var(--portal-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  padding: 28px 32px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.kundenportal .portal-buchung-card:hover { box-shadow: 0 10px 32px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.kundenportal .portal-buchung-card { display: flex; flex-direction: column; }
.kundenportal .portal-buchung-card h3 { margin: 0 0 10px; color: var(--green, #009237); }
.kundenportal .portal-buchung-card p:first-of-type { flex: 1 1 auto; }
.kundenportal .portal-buchung-card p:last-child { margin-bottom: 0; }
.kundenportal .portal-daten-card { margin-bottom: 30px; }
.kundenportal .portal-daten-card h2 { margin-top: 0; color: var(--green, #009237); font-size: 1.35rem; }

.kundenportal .portal-buchungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; margin: 28px 0 40px; }

/* --- Hinweise (Erfolg/Fehler) im Karten-Stil --- */
.kundenportal .portal-hinweis { padding: 18px 24px; margin: 24px 0; border-left: 5px solid var(--green, #009237); background: #f2f8ee; border-radius: var(--portal-radius); }
.kundenportal .portal-hinweis--fehler { border-left-color: #c0392b; background: #fbeeec; }
.kundenportal .portal-hinweis h2 { margin-top: 0; }
.kundenportal .portal-hinweis p:last-child { margin-bottom: 0; }

/* --- Formulare --- */
.kundenportal label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: #555; }
.kundenportal input.text,
.kundenportal select,
.kundenportal textarea { width: 100%; padding: 10px 14px; border: 1px solid #d5d5d5; border-radius: var(--radius-feld); background: #fff; transition: border-color .2s ease; }
.kundenportal input.text:focus,
.kundenportal select:focus,
.kundenportal textarea:focus { border-color: var(--green-light, #81ba1c); outline: none; }
.kundenportal .widget-text { margin-bottom: 16px; }
.kundenportal .portal-login-form { max-width: 480px; }

.kundenportal fieldset.portal-teilnehmer,
.kundenportal fieldset.portal-person { border: 1px solid #e6e6e6; border-radius: var(--portal-radius); padding: 18px 22px 8px; margin: 0 0 20px; background: #fafbf9; }
.kundenportal fieldset legend { font-weight: 700; padding: 0 10px; color: var(--green, #009237); }

/* --- Tabellen (Reiseunterlagen) --- */
.kundenportal .portal-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0 30px; background: #fff; border-radius: var(--portal-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); overflow: hidden; }
.kundenportal .portal-tabelle th { text-align: left; padding: 14px 18px; background: var(--green, #009237); color: #fff; }
.kundenportal .portal-tabelle td { text-align: left; padding: 12px 18px; border-bottom: 1px solid #eee; }
.kundenportal .portal-tabelle tr:last-child td { border-bottom: 0; }
.kundenportal .portal-tabelle tr:hover td { background: #f6f9f3; }

/* --- Listen (Mitreisende, Zusatzleistungen) --- */
.kundenportal .portal-liste { list-style: none; margin: 0; padding: 0; }
.kundenportal .portal-liste li { padding: 10px 0; border-bottom: 1px solid #eee; }
.kundenportal .portal-liste li:last-child { border-bottom: 0; }

/* --- Zahlungsstatus-Badges --- */
.kundenportal .portal-status { display: inline-block; padding: 4px 14px; border-radius: var(--radius-plakette); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.kundenportal .status-bezahlt { background: #e3f2e3; color: #2e7d32; }
.kundenportal .status-offen { background: #fdecea; color: #c0392b; }
.kundenportal .status-teilbezahlt { background: #fff4d6; color: #b07d10; }
.kundenportal .portal-zahlung { border-bottom: 1px solid #eee; padding-bottom: 14px; }
.kundenportal .portal-zahlung:last-child { border-bottom: 0; padding-bottom: 0; }

/* --- Kleinkram --- */
.kundenportal .portal-kundennummer { color: #666; margin-top: -6px; }
.kundenportal .portal-hinweis-klein { font-size: .85rem; color: #777; }
.kundenportal .mt30 { margin-top: 30px; }
.kundenportal h1 { margin-bottom: 20px; }

@media screen and (max-width: 640px) {
  .kundenportal .portal-buchungen { grid-template-columns: 1fr; }
  .kundenportal .portal-kopf { flex-direction: column; align-items: flex-start; }
  .kundenportal .portal-buchung-card, .kundenportal .portal-daten-card { padding: 20px 22px; }
}

/* Portal-Nav: aktiver Tab */
.kundenportal .portal-nav a.aktiv { background: var(--green, #009237); color: #fff; }
.kundenportal .portal-login-card { max-width: 560px; }
.kundenportal .portal-nav a.portal-nav-merkliste { background: #fff; border: 2px solid var(--green-light, #81ba1c); }
.kundenportal .portal-nav a.portal-nav-merkliste:hover { background: var(--green-light, #81ba1c); color: #fff; }
.kundenportal .portal-nav .portal-nav-count { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center; background: var(--red, #c0392b); color: #fff; border-radius: 50%; font-size: .75rem; margin-left: 4px; vertical-align: 1px; }
.kundenportal .portal-nav a.portal-nav-merkliste:hover .portal-nav-count { background: #fff; color: var(--green, #009237); }

/* Header: Portal-Login-Link neben der Merkliste */
.portal-login-link { margin-left: 16px; }
.portal-login-link a { font-weight: 700; text-decoration: none; }

/* Suche: Filter-Box auch inline auf der Ergebnisseite, so hoch wie ihr Inhalt
   (sonst ragt sie aus 100vh über Brotkrumen und Treffer) */
.search-teaser-position--inline { position: static; height: auto; margin: 0 0 40px; }
.search-teaser-position--inline .ce_reisesuche { position: static; transform: none; }
.suche-seiten { margin-top: 40px; }

/* Social-Leiste: Kundenportal-Icon — exakt der Button-Look von Facebook/Instagram
   (rote Pill links abgerundet, weißes Icon, Scale-Hover) */
.social-container .portal-konto {
  display: block; margin-bottom: 15px; text-decoration: none;
  background-color: var(--red); color: var(--white);
  padding: 5px 15px; border-radius: 5px 0 0 5px;
  -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
  -webkit-appearance: none;
}
.social-container .portal-konto:hover { transform: scale(1.05); }
.social-container .portal-konto:before { font-family: var(--icons2); content: "\f007"; font-size: 2rem; }

/* Reise-Detail: Landesflagge im Kreis-Badge */
.pano-image img.landesflagge { max-width: 90px; width: 90px; height: 80px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
@media screen and (max-width: 500px) {
  .pano-image img.landesflagge { width: 45px; height: 40px; max-width: 45px; }
}

/* Reise-Cards: sichtbarer "Zur Reise"-Button (span, weil Card komplett verlinkt ist) */
.teaser--reise .reise-button { display: inline-block; margin: 4px 20px 20px; }

/* Text-Block (ElementContent): altes Contao-Markup mit .cell.large-6 (z. B.
   Impressum zweispaltig) nebeneinander rendern — das Alt-HTML bringt keine
   grid-x-Wrapper mit. :has() greift nur, wenn wirklich cells drin sind. */
.content-block .ce_text:has(> .cell) { display: flex; flex-wrap: wrap; gap: 0 44px; }
.content-block .ce_text > .cell.large-6 { width: calc(50% - 22px); }
@media (max-width: 63.9375em) {
  .content-block .ce_text > .cell.large-6 { width: 100%; }
}

/* Servicetelefon im Header: Text statt eingebrannter SVG — Optik der alten
   Grafik nachgebaut (Kleins-Grün, Telefonhörer-Icon, Label klein + Nummer fett) */
.servicetelefon { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green); line-height: 1.15; min-height: 44px; }
.servicetelefon:hover { text-decoration: none; opacity: .8; }
.servicetelefon:before { font-family: var(--icons2); content: "\f095"; font-size: 1.9rem; }
.servicetelefon__label { display: block; font-size: .95rem; }
.servicetelefon__nummer { display: block; font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.servicetelefon__label, .servicetelefon__nummer { color: var(--green); }
.servicetelefon > span { display: block; }
.servicetelefon__label + .servicetelefon__nummer { margin-top: 1px; }

/* ==========================================================================
   Buchungsstrecke — Schrittleiste, Formularbloecke, Sidebar.
   Design-Sprache wie das Kundenportal (Abrundung unten rechts, weiche
   Schatten, Gruen-Toene aus den Site-Tokens).
   ========================================================================== */

.buchung { --buchung-radius: var(--border1, 0 0 40px 0); }

/* --- Fortschrittsleiste --- */
.buchung-schritte { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 34px; padding: 0; counter-reset: none; }
.buchung-schritt { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #f4f6f2; color: #777; border-radius: var(--buchung-radius); font-weight: 700; }
.buchung-schritt a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.buchung-schritt__nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #fff; color: inherit; }
.buchung-schritt.is-erledigt { background: #e3f2e3; color: #2e7d32; }
.buchung-schritt.is-aktuell { background: var(--green, #009237); color: #fff; }
.buchung-schritt.is-aktuell .buchung-schritt__nr { background: #fff; color: var(--green, #009237); }

/* --- Formularbloecke --- */
.buchung-block { border: 0; margin: 0 0 34px; padding: 0; }
.buchung-block > legend { display: block; width: 100%; padding: 0; }
.buchung-block h2 { margin: 0 0 6px; color: var(--green, #009237); font-size: 1.35rem; }
.buchung-block h3 { margin: 0 0 6px; font-size: 1.05rem; }
.buchung label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: #555; }
.buchung input.text,
.buchung select,
.buchung textarea { width: 100%; padding: 10px 14px; border: 1px solid #d5d5d5; border-radius: var(--radius-feld); background: #fff; transition: border-color .2s ease; }
.buchung input.text:focus,
.buchung select:focus,
.buchung textarea:focus { border-color: var(--green-light, #81ba1c); outline: none; }
.buchung .widget-text, .buchung .widget-select, .buchung .widget-textarea { margin-bottom: 16px; }
.buchung .widget-checkbox label { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; font-weight: 400; color: inherit; }
.buchung .widget-checkbox input { flex: 0 0 auto; margin-top: 3px; }
.buchung-pflichtfelder { font-size: .85rem; color: #777; }

/* --- Zimmerwahl: je Zimmer ein Block mit seinen Teilnehmern --- */
.buchung-zimmer { background: #fff; border-radius: var(--buchung-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 22px 26px; margin-bottom: 22px; }
.buchung-zimmer__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 2px solid #eef2ea; }
.buchung-zimmer__kopf h3 { flex: 1 0 100%; margin: 0; color: var(--green, #009237); }
.buchung-zimmer__auswahl { flex: 1 1 280px; margin-bottom: 0; }
/* Entfernen ist die Nebenaktion — dezent, damit "Zimmer hinzufuegen" fuehrt.
   !important, weil das minifizierte Theme-Stylesheet die Button-Farbe als
   Longhand nachzieht und den Shorthand hier sonst ueberschreibt. */
.buchung-zimmer .buchung-zimmer__entfernen.button1 {
  flex: 0 0 auto;
  background: transparent !important;
  background-color: transparent !important;
  color: #8a8a8a !important;
  border: 1px solid #d5d5d5;
  box-shadow: none;
}
.buchung-zimmer .buchung-zimmer__entfernen.button1:hover {
  background-color: #fbeeec !important;
  border-color: #c0392b;
  color: #c0392b !important;
}
.buchung-zimmer .buchung-zimmer__entfernen.button1::after { display: none; }
.buchung-zimmer-hinzufuegen { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 10px; }

/* --- Teilnehmerzeilen innerhalb eines Zimmers --- */
.buchung-teilnehmer { border: 1px solid #e6e6e6; border-radius: var(--buchung-radius); padding: 16px 20px 2px; margin: 0 0 14px; background: #fafbf9; }
.buchung-teilnehmer:last-child { margin-bottom: 0; }
.buchung-teilnehmer h4 { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--green, #009237); }
.buchung-teilnehmer__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.buchung-teilnehmer__kopf h4 { margin: 0; }

/* --- Hinweise / Fehler --- */
.buchung .portal-hinweis { padding: 18px 24px; margin: 24px 0; border-left: 5px solid var(--green, #009237); background: #f2f8ee; border-radius: var(--buchung-radius); }
.buchung .portal-hinweis--fehler { border-left-color: #c0392b; background: #fbeeec; }
.buchung .portal-hinweis h1, .buchung .portal-hinweis h2 { margin-top: 0; }
.buchung .portal-hinweis p:last-child, .buchung .portal-hinweis ul:last-child { margin-bottom: 0; }

/* --- Karten in Schritt 0 --- */
.buchung-karte { background: #fff; border-radius: var(--buchung-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 26px 30px; margin-bottom: 22px; }
.buchung-karte h2 { margin-top: 0; }
.buchung-karte p:last-child { margin-bottom: 0; }

/* --- Aktionen --- */
.buchung-aktionen { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }

/* --- Uebersicht + Preistabellen --- */
.buchung-uebersicht { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 10px; background: #fff; border-radius: var(--buchung-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); overflow: hidden; }
.buchung-uebersicht th, .buchung-uebersicht td { text-align: left; padding: 12px 18px; border-bottom: 1px solid #eee; vertical-align: top; }
.buchung-uebersicht thead th { background: var(--green, #009237); color: #fff; }
.buchung-uebersicht tbody th { width: 34%; color: #555; font-weight: 600; }
.buchung-uebersicht tr:last-child th, .buchung-uebersicht tr:last-child td { border-bottom: 0; }
.buchung-uebersicht tfoot th, .buchung-uebersicht tfoot td { background: #f2f8ee; font-weight: 700; }
.buchung-uebersicht--teilnehmer tbody th { width: auto; }
.buchung-uebersicht--preis tbody th, .buchung-uebersicht--preis tfoot th { width: auto; }
.buchung-uebersicht--preis td { text-align: right; white-space: nowrap; }

/* --- Sidebar --- */
.buchung-sidebar { position: sticky; top: 100px; background: #fff; border-radius: var(--buchung-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 26px 28px; }
.buchung-sidebar h2 { margin-top: 0; font-size: 1.2rem; color: var(--green, #009237); }
.buchung-sidebar h3 { margin: 22px 0 8px; font-size: 1rem; }
.buchung-sidebar__code { font-size: .85rem; color: #777; margin-bottom: 4px; }
.buchung-sidebar__untertitel { font-size: .92rem; color: #666; }
.buchung-sidebar__leer { font-size: .9rem; color: #777; }
.buchung-preistabelle { width: 100%; border-collapse: collapse; }
.buchung-preistabelle th, .buchung-preistabelle td { text-align: left; padding: 8px 0; border-bottom: 1px solid #eee; font-weight: 400; }
.buchung-preistabelle td { text-align: right; white-space: nowrap; }
.buchung-preistabelle__detail { font-size: .82rem; color: #777; }
.buchung-preistabelle tfoot th, .buchung-preistabelle tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--green-light, #81ba1c); padding-top: 12px; }

@media screen and (max-width: 63.9375em) {
  .buchung-sidebar { position: static; margin-top: 30px; }
}

/* ============================================================
   Reise-Filter (Merkmal-Filter) + Paginierung der Übersicht
   ============================================================ */
.reise-filter { margin: 0 0 28px; background: #f7f9f4; border: 1px solid var(--lightgray, #e8e8e8); border-radius: 8px; }
.reise-filter__summary { display: flex; align-items: center; gap: 10px; padding: 16px 22px; cursor: pointer; font-weight: 700; font-size: 18px; color: var(--darkgray, #3e3d40); list-style: none; user-select: none; }
.reise-filter__summary::-webkit-details-marker { display: none; }
.reise-filter__summary-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; background: var(--green, #009237); color: #fff; border-radius: 999px; font-size: 13px; }
.reise-filter__summary-icon { margin-left: auto; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.reise-filter[open] > .reise-filter__summary .reise-filter__summary-icon { transform: rotate(-135deg); }
.reise-filter__inhalt { padding: 0 22px 20px; }
.reise-filter__gruppen { display: block; }
.reise-filter__gruppe { border-top: 1px solid var(--lightgray, #e8e8e8); padding: 6px 0; }

.reise-filter__aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--lightgray, #e8e8e8); }
.reise-filter__aktiv-label { font-weight: 700; margin-right: 4px; }
.reise-filter__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--green, #009237); color: #fff; border-radius: 999px; font-size: 14px; line-height: 1; text-decoration: none; }
.reise-filter__chip:hover { background: #007a2e; color: #fff; }
.reise-filter__chip-x { font-size: 16px; font-weight: 700; }
.reise-filter__reset { margin-left: 4px; font-size: 14px; color: var(--middle-gray, #9a9a9a); text-decoration: underline; }
.reise-filter__reset:hover { color: var(--green, #009237); }

.reise-filter__titel { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 4px; font-size: 16px; font-weight: 700; color: var(--darkgray, #3e3d40); cursor: pointer; list-style: none; user-select: none; }
.reise-filter__titel::-webkit-details-marker { display: none; }
.reise-filter__titel-icon { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.reise-filter__gruppe[open] > .reise-filter__titel .reise-filter__titel-icon { transform: rotate(-135deg); }
.reise-filter__optionen { list-style: none; margin: 0 0 12px; padding: 0; }
.reise-filter__option { margin: 0; }
.reise-filter__option a { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--darkgray, #3e3d40); text-decoration: none; border-radius: 4px; }
.reise-filter__option a:hover { background: #eef4e5; }
.reise-filter__box { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--green, #009237); border-radius: 4px; background: #fff; position: relative; }
.reise-filter__name { flex: 1 1 auto; }
.reise-filter__count { flex: 0 0 auto; min-width: 26px; padding: 1px 7px; background: var(--lightgray, #e8e8e8); color: #555; border-radius: 999px; font-size: 12px; text-align: center; }
.reise-filter__option.is-selected .reise-filter__box { background: var(--green, #009237); }
.reise-filter__option.is-selected .reise-filter__box::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.reise-filter__option.is-selected .reise-filter__name { font-weight: 700; color: var(--green, #009237); }
.reise-filter__option.is-selected .reise-filter__count { background: var(--green, #009237); color: #fff; }

/* Paginierung */
.reise-pagination { margin: 32px 0 8px; text-align: center; }
.reise-pagination .pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.reise-pagination .pagination li { margin: 0; }
.reise-pagination .pagination a,
.reise-pagination .pagination .current,
.reise-pagination .pagination .disabled { display: inline-block; min-width: 40px; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-weight: 700; }
.reise-pagination .pagination a { background: #fff; color: var(--darkgray, #3e3d40); border: 1px solid var(--lightgray, #e8e8e8); }
.reise-pagination .pagination a:hover { background: #eef4e5; border-color: var(--green, #009237); color: var(--green, #009237); }
.reise-pagination .pagination .current { background: var(--green, #009237); color: #fff; }
.reise-pagination .pagination .disabled { color: var(--middle-gray, #9a9a9a); }
.reise-pagination .pagination .ellipsis { min-width: 0; padding: 8px 4px; }
.reise-pagination .pagination .ellipsis::after { content: "…"; color: var(--middle-gray, #9a9a9a); }

@media screen and (max-width: 39.9375em) {
  .reise-filter__gruppe { margin-bottom: 8px; }
  .reise-pagination .pagination a,
  .reise-pagination .pagination .current { min-width: 34px; padding: 7px 9px; }
}

/* =========================================================================
   Moderner Hero-Slider (Startseite) — überschreibt die Contao-Legacy-Optik.
   Vollflächiges Bild (object-fit:cover), Gradient-Scrim für Lesbarkeit,
   Textblock unten-links mit klarer Hierarchie + Button. Slider-Mechanik
   (Cross-Fade/Dots/Pfeile) aktiviert kleins-hero.js erst ab 2 Slides.
   ========================================================================= */
.hero-modern { position: relative; }
.hero-modern__viewport { position: relative; overflow: hidden; }
.hero-modern__track { position: relative; }

.hero-slide { position: relative; height: clamp(460px, 86vh, 860px); overflow: hidden; margin: 0; }
.hero-slide__media { position: absolute; inset: 0; margin: 0; padding: 0; z-index: 1; }
.hero-slide__media picture, .hero-slide__media img { display: block; width: 100%; height: 100%; }
.hero-slide__media img { object-fit: cover; object-position: center; }

/* Scrim: unten kräftig, von links dezent — hält weißen Text über jedem Bild lesbar */
.hero-slide__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,0) 60%),
    linear-gradient(to right, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 55%);
}

.hero-slide__overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; }
.hero-slide__content { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 48px 84px; box-sizing: border-box; }
.hero-slide__content > * { max-width: 680px; }

.hero-slide__title {
  color: #fff; font-weight: 800; line-height: 1.06; margin: 0 0 .32em;
  font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hero-slide__subtitle {
  color: rgba(255,255,255,.95); font-weight: 500; line-height: 1.3; margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem); text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.hero-slide__cta {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 1.6em;
  background: var(--farbe-knopf-marke); color: var(--farbe-grund); font-weight: 700; font-size: 1.05rem;
  padding: .85em 1.6em; border-radius: 999px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hero-slide__cta:hover, .hero-slide__cta:focus-visible {
  background: var(--farbe-knopf-marke-hover); color: var(--farbe-grund); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
.hero-slide__cta-arrow { transition: transform .18s ease; }
.hero-slide__cta:hover .hero-slide__cta-arrow { transform: translateX(3px); }
.hero-slide__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- Slider aktiv (>=2 Slides): Slides stapeln, Cross-Fade --- */
.hero-modern__track.is-slider { height: clamp(460px, 86vh, 860px); }
.hero-modern__track.is-slider .hero-slide {
  position: absolute; inset: 0; height: 100%; z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity var(--hero-fade, 900ms) ease, visibility 0s linear var(--hero-fade, 900ms);
}
.hero-modern__track.is-slider .hero-slide.is-active {
  opacity: 1; visibility: visible; z-index: 2;
  transition: opacity var(--hero-fade, 900ms) ease, visibility 0s;
}

/* --- Dots --- */
.hero-dots { position: absolute; z-index: 5; left: 0; right: 0; bottom: 22px;
  display: flex; gap: 0; justify-content: center; padding: 0; margin: 0; list-style: none; }
/* Klickfläche 24 × 24 px (WCAG 2.2, Zielgröße), sichtbar bleibt der Punkt */
.hero-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-dots button::before { content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: background .18s, transform .18s; }
.hero-dots button:hover::before { background: rgba(255,255,255,.85); }
.hero-dots button[aria-current="true"]::before { background: #fff; transform: scale(1.25); }
.hero-dots button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- Pfeile --- */
.hero-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.32); color: #fff; transition: background .18s, transform .18s; }
.hero-arrow:hover { background: rgba(0,0,0,.5); }
.hero-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-arrow--prev { left: 18px; } .hero-arrow--next { right: 18px; }
.hero-arrow svg { width: 24px; height: 24px; }

/* --- Responsiv --- */
@media (max-width: 63.9375em) {
  .hero-slide, .hero-modern__track.is-slider { height: clamp(420px, 72vh, 620px); }
  .hero-slide__content { padding: 0 24px 64px; }
  .hero-arrow { display: none; }
}
@media (max-width: 39.9375em) {
  .hero-slide__content { padding: 0 18px 54px; }
  .hero-slide__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* --- Reduzierte Bewegung --- */
@media (prefers-reduced-motion: reduce) {
  .hero-modern__track.is-slider .hero-slide { transition: opacity 0s; }
  .hero-slide__cta, .hero-slide__cta-arrow { transition: none; }
}

/* === 100vh Video-Hero (BackgroundVideoURL gesetzt) ===================== */
/* Der ganze Bereich (Hero + grüne Category-Buttons) füllt exakt 100vh, die
   Buttons sind als letzte Flex-Zeile unten am Viewport-Rand „angeheftet". */
.hero-100--video { height: 100vh; min-height: 520px; display: flex; flex-direction: column; }
.hero-100--video .hero-modern--video { position: relative; flex: 1 1 auto; overflow: hidden; margin: 0; }
.hero-100__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #14361f; }

/* Video im Seitenkopf (Includes/SubHero.ss): liegt über dem Bild, das Standbild
   und Ersatz bleibt; bei reduzierter Bewegung nur das Bild. */
.head-folge .kopf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.head-folge .kopf-video--allein { position: static; display: block; width: 100vw; height: 40vh; }
@media (prefers-reduced-motion: reduce) {
  .head-folge .kopf-video:not(.kopf-video--allein) { display: none; }
}
.hero-100--video .hero-100__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.05) 70%, rgba(0,0,0,.25) 100%); }
.hero-100--video .hero-100__overlay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 8%;
  display: flex; justify-content: center; padding: 0 6vw; }
.hero-100--video .hero-100__overlay .hero-slide__content { width: 100%; max-width: 1100px; color: #fff; }
/* Buttons als unterste Zeile im 100vh-Bereich (am Handy; ab Tablet auf dem Video, siehe unten) */
.hero-100--video .button-home-slider { flex: 0 0 auto; margin: 0; position: relative; z-index: 3; }
/* Scroll-Indicator im Video-Hero etwas höher, damit er nicht in den Buttons klebt */
.hero-100--video .slider-scroll-to { z-index: 3; }

/* Button-Leisten auf Startseite und Unterseiten: Laschen übereinander wie die
   Reiter im Kundenportal, ab Tablet quer (darunter Liste, kleins-main.css).
   Beim Video-Hero liegen sie auf der Unterkante des Videos statt darunter
   (docs/design-system.md, Bewusste Abweichungen). */
/* Kontrast nach WCAG AA: große fette Schrift (ab 18,66 px fett reichen 3 : 1,
   weiß auf Grün hat 4,06 : 1), auf Hellgrün dunkle statt weißer Schrift. */
.button-home-slider a,
.button-folge a { font-size: var(--text-mittel); font-weight: var(--gewicht-fett); }
.button-home-slider .url2 a, .button-home-slider .url4 a,
.button-folge .url2 a, .button-folge .url4 a { color: var(--farbe-grau-dunkel); }
@media screen and (min-width: 991px) {
  .button-home-slider .inner > div,
  .button-folge .inner > div { position: relative; }
  .button-home-slider .inner > div + div,
  .button-folge .inner > div + div { margin-left: calc(-1 * var(--baustein-reiter-ueberlappung)); }
  .button-home-slider .inner > div + div a,
  .button-folge .inner > div + div a { padding-left: calc(50px + var(--baustein-reiter-ueberlappung)); }
  .button-home-slider .inner > div:nth-child(1), .button-folge .inner > div:nth-child(1) { z-index: 6; }
  .button-home-slider .inner > div:nth-child(2), .button-folge .inner > div:nth-child(2) { z-index: 5; }
  .button-home-slider .inner > div:nth-child(3), .button-folge .inner > div:nth-child(3) { z-index: 4; }
  .button-home-slider .inner > div:nth-child(4), .button-folge .inner > div:nth-child(4) { z-index: 3; }
  .button-home-slider .inner > div:nth-child(5), .button-folge .inner > div:nth-child(5) { z-index: 2; }
  .button-home-slider .inner > div:nth-child(6), .button-folge .inner > div:nth-child(6) { z-index: 1; }
  .button-home-slider .inner [class^="url"],
  .button-folge .inner [class^="url"] { border-radius: var(--radius-lasche); box-shadow: var(--baustein-reiter-schatten); }

  .hero-100--video { position: relative; }
  .hero-100--video .button-home-slider { position: absolute; left: 0; bottom: 0; padding-top: 0; }
  .hero-100--video .hero-100__overlay { bottom: calc(8% + 100px); }
}

@media (max-width: 640px) {
  .hero-100--video { height: 100svh; }
  .hero-100--video .hero-100__overlay { bottom: 4%; padding: 0 5vw; }
}

/* === Reise-Teaser: gleiche Höhe, aufgeräumt, Merkmale + Icons ========== */
/* Listenansicht (kein Slider) als CSS-Grid statt Float -> gleich hohe Reihen. */
.teaser-wrapper:not([data-slider]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 30px 24px; margin: 0 0 10px; }
.teaser-wrapper:not([data-slider]):before,
.teaser-wrapper:not([data-slider]):after { content: none; display: none; }
.teaser-wrapper:not([data-slider]) .teaser { float: none; width: auto; margin: 0; padding: 0; }

/* Karte: Flex-Spalte, Fußzeile unten bündig -> gleiche Höhe je Reihe. */
.teaser--reise { display: flex; height: 100%; }
.teaser--reise .teaser_inside { position: relative; display: flex; width: 100%; }
.teaser__link { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border-radius: var(--radius-blatt); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.08); text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.teaser__link:hover { box-shadow: 0 10px 30px rgba(0,0,0,.15); transform: translateY(-3px); }

.teaser__media { position: relative; aspect-ratio: 45 / 32; overflow: hidden; background: #eef2ea; flex: 0 0 auto; }
.teaser__media figure, .teaser__media picture, .teaser__media img { display: block; width: 100%; height: 100%; margin: 0; }
.teaser__media img { object-fit: cover; }

.teaser__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.teaser__title { margin: 0 0 6px; font-size: 19px; line-height: 1.25; color: var(--darkgray, #3e3d40); }
.teaser__subtitle { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #6b6b6b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.teaser__merkmale { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.teaser__merkmal { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #555; }
.teaser__merkmal .merkmal-icon { flex: 0 0 auto; color: var(--green, #009237); }
.teaser__merkmal-text { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.teaser__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid #eef0ec; }
.teaser__preis { font-weight: 700; color: var(--green, #009237); font-size: 18px; white-space: nowrap; }
.teaser__preis-ab { font-weight: 400; color: #8a8a8a; font-size: 13px; }
/* Weiß auf dunklem Hausgrün (WCAG AA); die Contao-Regel für alles in der Reisekarte setzt sonst Grau */
.teaser__button, .teaser--reise .teaser_inside--linked .teaser__button { flex: 0 0 auto; padding: 8px 16px; background: var(--farbe-knopf-marke); color: var(--farbe-grund); border-radius: 999px; font-size: 13px; font-weight: 700; transition: background .2s ease; }
.teaser__link:hover .teaser__button, .teaser--reise .teaser__link:hover .teaser__button { background: var(--farbe-knopf-marke-hover); }

@media (max-width: 480px) {
  .teaser-wrapper:not([data-slider]) { grid-template-columns: 1fr; }
}

/* Video-Hero: kompakte Button-Leiste — die grünen Buttons sitzen direkt unter
   dem Video am Viewport-Rand (statt der 100px Weißraum-Leiste des Bild-Heros). */
.hero-100--video .button-home-slider { padding-top: 24px; }

/* Cookie-Banner (vanilla-cookieconsent) in Kleins-Farben + Platzhalter für
   externe Medien, bis „Externe Medien" erlaubt ist (kleins-consent.js). */
#cc-main {
  --cc-font-family: var(--open-sans), sans-serif;
  --cc-btn-primary-bg: var(--button);
  --cc-btn-primary-border-color: var(--button);
  --cc-btn-primary-hover-bg: var(--button-hover);
  --cc-btn-primary-hover-border-color: var(--button-hover);
  --cc-toggle-on-bg: var(--button);
  --cc-btn-border-radius: 25px;
}
.consent-platzhalter { padding: 2rem; background: #f3f1ec; text-align: center; border-radius: 8px; }
.consent-platzhalter[hidden] { display: none; }
.consent-platzhalter p { max-width: 36rem; margin: 0 auto 1rem; }

/* Video-Block (Kleins/Bloecke/VideoElement.ss): 16:9, Platzhalter mit eigenem Vorschaubild */
.video-block__medium { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--farbe-kontrast); }
.video-block__medium[hidden] { display: none; }
.video-block__vorschau { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1rem; }
.video-block__text { margin-top: 1rem; }

/* Reise-Detail: Ansprechpartner (Betreuer aus Tour32) unter „Zur Karte". */
.reisedetail_ansprechpartner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 30px;
  padding: 20px;
  border-radius: var(--border1);
  background-color: var(--green-light-light);
}
.reisedetail_ansprechpartner .ansprechpartner-bild {
  flex: 0 0 120px;
  margin: 0;
}
.reisedetail_ansprechpartner .ansprechpartner-bild img {
  border-radius: 50%;
  display: block;
}
.reisedetail_ansprechpartner h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.reisedetail_ansprechpartner p {
  margin-bottom: 5px;
}
@media (max-width: 639px) {
  .reisedetail_ansprechpartner { flex-direction: column; }
}

/* Kundenportal: Änderungsübersicht beim Double-Opt-in (bisher → neu). */
.kundenportal .portal-aenderungen { width: 100%; border-collapse: collapse; }
.kundenportal .portal-aenderungen th,
.kundenportal .portal-aenderungen td { padding: 8px 10px; border-bottom: 1px solid var(--lightgray); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.kundenportal .portal-aenderungen th { border-bottom: 2px solid var(--green); }

/* Varianten: Spaltenbeschriftungen dunkel statt Grün auf Hellgrün (3,74 : 1),
   damit der Kontrast nach WCAG AA reicht. */
.reise-detail_termine .-row p { color: var(--farbe-grau-dunkel); }
/* Hinweise der Reise (Schwierigkeit, Wanderart, Strecke) als Liste ohne Lücken. */
.reise-hinweise { list-style: none; margin: 0; padding: 0; }
.reise-hinweise li { margin: 0 0 4px; }
/* Suchfilter: Beschriftungen auf Hellgrün dunkel statt weiß (2,34 : 1), wie
   bei den Button-Leisten; Kästchen groß genug zum Tippen (WCAG 2.5.8). */
.ce_reisesuche .search-box label { color: var(--farbe-grau-dunkel); }
.ce_reisesuche .search-box .checkbox_container > span { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.ce_reisesuche .search-box .checkbox { flex: none; width: 24px; height: 24px; margin: 0; }

/* --- Reisegalerie wie Contao: Hauptbild nach der Breite (20:9, bis 990 px 990:800)
   statt fester 60vh; Vorschaubilder 2:1 (docs/plans/2026-11-11-galerie-wie-contao.md) --- */
.reisedetail_reise_bilder_slider { min-height: 0; }
.reisedetail_reise_bilder_slider .slick-slider--main li.slick-active { min-height: 0; aspect-ratio: 20 / 9; }
.reisedetail_reise_bilder_slider .slick-slider--nav .image_container img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@media screen and (max-width: 990px) {
  .reisedetail_reise_bilder_slider .slick-slider--main li.slick-active { aspect-ratio: 99 / 80; }
}

/* Köderfeld der Portal-Formulare wie im Kontaktformular außerhalb des Bilds (docs/plans/2026-11-11-portal-spamschutz.md) */
.ui-form .anfrage-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Titel der News-Liste: auf dem Handy ist die Schrift klein, das Hausgrün erreicht auf Weiß nur 4,1:1 (WCAG AA) */
.news-headline a, .news-headline .news-headline-inner { color: var(--farbe-marke-schrift); }