/*
 * Bausteine des Design-Systems (docs/design-system.md, Bausteine).
 * Wo eine Regel aus dem Contao-Theme den Baustein im Inhaltsbereich erreicht
 * (.ce_text a, input[type=…] aus Foundation), trägt der Selektor so viel
 * Gewicht, dass der Baustein gewinnt; belegt mit make design-bausteine.
 * Media Queries können keine Variablen lesen; ihre Werte müssen einem Token
 * unter breite entsprechen (BausteinCssTest).
 * Nur Tokens aus tokens.css, keine festen Werte für Farbe, Schatten, Rundung
 * oder Schrift. Klassen ui-<baustein>, Teile __<teil>, Varianten --<variante>.
 */

/* Layout: Inhaltsbreite und Seitenrand wie das Foundation-Raster */
.ui-container {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--abstand-s);
}

/* Bausteinkatalog (/bausteine) */
.ui-katalog {
  padding-block: var(--abstand-l);
  font-family: var(--schrift-basis);
  color: var(--farbe-text);
}
.ui-katalog__titel { font-size: var(--text-titel); }
/* Überschriften des Katalogs gehören nicht zum Design der Seite: Textfarbe statt Hausgrün */
.ui-katalog h1,
.ui-katalog h2,
.ui-katalog h3 { color: var(--farbe-text); }
.ui-katalog__abschnitt {
  margin-top: var(--abstand-xl);
  padding-bottom: var(--abstand-xs);
  border-bottom: var(--linie-kraeftig) solid var(--farbe-marke);
}
.ui-katalog__gruppe { margin-top: var(--abstand-l); }
.ui-katalog__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--baustein-katalog-spalte), 1fr));
  gap: var(--abstand-m);
}
.ui-katalog__token { margin: 0; }
.ui-katalog__probe {
  min-height: var(--baustein-katalog-probe);
  margin-bottom: var(--abstand-xs);
  background: var(--farbe-grund);
  border: var(--linie-duenn) solid var(--farbe-grau-hell);
}
.ui-katalog__token--abstand .ui-katalog__probe,
.ui-katalog__token--breite .ui-katalog__probe {
  min-height: var(--abstand-s);
  max-width: 100%;
  background: var(--farbe-marke);
}
.ui-katalog__token--radius .ui-katalog__probe { background: var(--farbe-marke-flaeche); }
.ui-katalog__wert,
.ui-katalog__beschreibung { font-size: var(--text-klein); color: var(--farbe-grau-dunkel); }
.ui-katalog__baustein { margin-top: var(--abstand-l); }
.ui-katalog__variante { margin-top: var(--abstand-m); }
.ui-katalog__variante-titel { font-weight: var(--gewicht-halbfett); }
.ui-katalog__buehne {
  padding: var(--abstand-m);
  border: var(--linie-duenn) dashed var(--farbe-grau);
}
.ui-katalog__code {
  margin-top: var(--abstand-xs);
  padding: var(--abstand-xs) var(--abstand-s);
  background: var(--farbe-grau-hell);
  font-size: var(--text-klein);
  white-space: pre-wrap;
}

/* Knopf (Includes/Ui/Button.ss), 1:1 wie .button1 aus dem Contao-Theme */
a.ui-button,
button.ui-button {
  display: inline-block;
  margin-bottom: var(--baustein-knopf-abstand-unten);
  padding: var(--baustein-knopf-innen);
  border: 0;
  border-radius: var(--radius-knopf);
  background: var(--farbe-aktion);
  color: var(--farbe-grund);
  font-family: var(--schrift-basis);
  font-size: var(--baustein-knopf-schrift);
  font-weight: var(--gewicht-normal);
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  transition: all var(--baustein-knopf-dauer) ease-in-out;
}
a.ui-button::after,
button.ui-button::after {
  content: "\f105";
  margin-left: var(--baustein-knopf-pfeil-abstand);
  font-family: var(--schrift-icons);
}
a.ui-button:hover,
button.ui-button:hover,
a.ui-button:focus-visible,
button.ui-button:focus-visible {
  background-color: var(--farbe-aktion-hover);
  color: var(--farbe-grund);
  text-decoration: none;
  transform: scale(var(--baustein-knopf-zoom));
}
.ui-button.ui-button--klein {
  padding: var(--baustein-knopf-innen-klein);
  font-size: var(--baustein-knopf-schrift-klein);
}
.ui-button.ui-button--schwarz { background: var(--farbe-kontrast); }
@media screen and (max-width: 768px) {
  .ui-button:not(.ui-button--klein) { padding: var(--baustein-knopf-innen-handy); }
}

/* Hinweis (Includes/Ui/Notice.ss), 1:1 wie .portal-hinweis im Kundenportal */
.ui-notice {
  margin: var(--baustein-hinweis-aussen);
  padding: var(--baustein-hinweis-innen);
  border-left: var(--baustein-hinweis-linie) solid var(--farbe-marke);
  border-radius: var(--radius-blatt);
  background: var(--farbe-erfolg-flaeche);
}
.ui-notice--fehler {
  border-left-color: var(--farbe-fehler);
  background: var(--farbe-fehler-flaeche);
}
.ui-notice__titel { margin-top: 0; }
.ui-notice__text:last-child { margin-bottom: 0; }

/* Ansprechpartner-Karte (Includes/Ui/ContactCard.ss), 1:1 wie .reisedetail_ansprechpartner */
.ui-contact-card {
  display: flex;
  gap: var(--baustein-kontakt-abstand);
  align-items: flex-start;
  margin-top: var(--baustein-kontakt-oben);
  padding: var(--baustein-kontakt-innen);
  border-radius: var(--radius-blatt);
  background-color: var(--farbe-marke-flaeche);
}
.ui-contact-card__bild {
  flex: 0 0 var(--baustein-kontakt-bild);
  margin: 0;
}
.ui-contact-card__bild img {
  display: block;
  border-radius: 50%;
}
.ui-contact-card__titel {
  margin-bottom: var(--baustein-kontakt-titel-unten);
  font-size: var(--baustein-kontakt-titel);
}
.ui-contact-card__zeile { margin-bottom: var(--baustein-kontakt-zeile-unten); }
@media (max-width: 639px) {
  .ui-contact-card { flex-direction: column; }
}

/* Kopfleiste (Ui/Includes/ToolbarAnfang.ss): Reiter unten auf der grünen Linie, Nutzerzeile darüber.
   Weicht seit dem 27.10.2026 bewusst vom Contao-Vorbild .portal-kopf ab (docs/design-system.md). */
.ui-toolbar {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--baustein-kopfleiste-abstand);
  margin-bottom: var(--baustein-kopfleiste-unten);
  border-bottom: var(--linie-kraeftig) solid var(--farbe-marke);
}
.ui-toolbar > p {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--baustein-kopfleiste-nutzer-abstand);
  margin: 0;
  font-size: var(--baustein-kopfleiste-nutzer-schrift);
  color: var(--farbe-text-leise);
}
.ui-toolbar > p a { font-weight: var(--gewicht-fett); }
@media screen and (max-width: 640px) {
  .ui-toolbar > p { justify-content: flex-start; }
}

/* Reiter (Ui/Includes/TabsAnfang.ss, Tab.ss): Laschen übereinander wie ein Register. Jeder Reiter liegt über
   dem nächsten, seine Rundung oben rechts bleibt sichtbar und wirft einen Schatten auf ihn; der aktive liegt
   ganz oben und wächst aus der Linie. Bleiben in einer Zeile; werden es mehr, lassen sie sich wischen. */
.ui-tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--baustein-reiter-abstand);
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tabs > .ui-tabs__tab {
  position: relative;
  flex: none;
  padding: var(--baustein-reiter-oben) var(--baustein-reiter-seite) var(--baustein-reiter-unten);
  border-radius: var(--radius-lasche);
  background: var(--farbe-flaeche-hell);
  color: var(--farbe-text);
  font-weight: var(--gewicht-fett);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--baustein-reiter-schatten);
  transition: background var(--baustein-reiter-dauer) ease, color var(--baustein-reiter-dauer) ease;
}
.ui-tabs > .ui-tabs__tab + .ui-tabs__tab {
  margin-left: calc(-1 * var(--baustein-reiter-ueberlappung));
  padding-left: calc(var(--baustein-reiter-seite) + var(--baustein-reiter-ueberlappung));
}
/* Frühere Reiter liegen über späteren; mehr als sechs hat kein Bereich */
.ui-tabs > .ui-tabs__tab:nth-child(1) { z-index: 6; }
.ui-tabs > .ui-tabs__tab:nth-child(2) { z-index: 5; }
.ui-tabs > .ui-tabs__tab:nth-child(3) { z-index: 4; }
.ui-tabs > .ui-tabs__tab:nth-child(4) { z-index: 3; }
.ui-tabs > .ui-tabs__tab:nth-child(5) { z-index: 2; }
.ui-tabs > .ui-tabs__tab:nth-child(6) { z-index: 1; }
.ui-tabs > .ui-tabs__tab:hover {
  background: var(--farbe-marke-flaeche);
  color: var(--farbe-text);
}
.ui-tabs > .ui-tabs__tab--aktiv,
.ui-tabs > .ui-tabs__tab--aktiv:hover {
  z-index: 7;
  padding-top: calc(var(--baustein-reiter-oben) + var(--baustein-reiter-aktiv-hoeher));
  background: var(--farbe-marke);
  color: var(--farbe-grund);
}
.ui-tabs__zahl {
  display: inline-block;
  min-width: var(--baustein-reiter-zahl);
  height: var(--baustein-reiter-zahl);
  margin-left: var(--baustein-reiter-zahl-links);
  border-radius: var(--radius-kreis);
  background: var(--farbe-signal);
  color: var(--farbe-grund);
  font-size: var(--baustein-reiter-zahl-schrift);
  line-height: var(--baustein-reiter-zahl);
  text-align: center;
  vertical-align: var(--baustein-reiter-zahl-lage);
}

/* Symbol-Link (Ui/Includes/IconLink.ss): Link mit Symbol davor und optionaler Zahl, etwa die Merkliste */
a.ui-icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--baustein-symbollink-abstand);
  color: var(--farbe-text);
  font-weight: var(--gewicht-fett);
}
a.ui-icon-link::before {
  font-family: var(--schrift-icons);
  color: var(--farbe-marke);
}
a.ui-icon-link--lesezeichen::before { content: "\f02e"; }
.ui-icon-link__zahl {
  display: inline-block;
  min-width: var(--baustein-reiter-zahl);
  height: var(--baustein-reiter-zahl);
  border-radius: var(--radius-kreis);
  background: var(--farbe-signal);
  color: var(--farbe-grund);
  font-size: var(--baustein-reiter-zahl-schrift);
  line-height: var(--baustein-reiter-zahl);
  text-align: center;
}

/* Karte (Ui/Includes/CardAnfang.ss), 1:1 wie .portal-daten-card und .portal-buchung-card */
.ui-card {
  margin-bottom: var(--baustein-karte-unten);
  padding: var(--baustein-karte-innen);
  border: 0;
  border-radius: var(--radius-blatt);
  background: var(--farbe-grund);
  box-shadow: var(--schatten-karte);
  transition: box-shadow var(--baustein-karte-dauer) ease, transform var(--baustein-karte-dauer) ease;
}
.ui-card__titel {
  margin-top: 0;
  color: var(--farbe-marke);
}
h2.ui-card__titel { font-size: var(--baustein-karte-titel); }
.ui-card--liste {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.ui-card--liste:hover {
  box-shadow: var(--schatten-karte-hover);
  transform: translateY(var(--baustein-karte-heben));
}
.ui-card--liste .ui-card__titel { margin: 0 0 var(--baustein-karte-titel-unten); }
.ui-card--liste > p:first-of-type { flex: 1 1 auto; }
.ui-card--liste > p:last-child { margin-bottom: 0; }
.ui-card--schmal { max-width: var(--baustein-karte-schmal); }
.ui-card--abstand-oben { margin-top: var(--baustein-karte-oben); }
@media screen and (max-width: 640px) {
  .ui-card { padding: var(--baustein-karte-innen-schmal); }
}

/* Raster für Karten (Ui/Includes/GridAnfang.ss), 1:1 wie .portal-buchungen */
.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--baustein-raster-spalte), 1fr));
  gap: var(--baustein-raster-abstand);
  margin: var(--baustein-raster-aussen);
}
@media screen and (max-width: 640px) {
  .ui-grid { grid-template-columns: 1fr; }
}

/* Eingabefeld und Auswahl (Ui/Includes/Field.ss, SelectAnfang.ss), 1:1 wie im Kundenportal */
.ui-field { margin-bottom: var(--baustein-feld-unten); }
.ui-field.ui-field--eng { margin-bottom: 0; }
.ui-field__label {
  display: block;
  margin-bottom: var(--baustein-feld-label-unten);
  color: var(--farbe-text-label);
  font-size: var(--baustein-feld-label-schrift);
  font-weight: var(--gewicht-halbfett);
}
.ui-field .ui-field__eingabe {
  width: 100%;
  padding: var(--baustein-feld-innen);
  border: var(--linie-duenn) solid var(--farbe-rahmen);
  border-radius: var(--radius-feld);
  background: var(--farbe-grund);
  transition: border-color var(--baustein-feld-dauer) ease;
}
.ui-field .ui-field__eingabe:focus {
  border-color: var(--farbe-marke-hell);
  outline: none;
}

/* Feldgruppe (Ui/Includes/FieldsetAnfang.ss), 1:1 wie .portal-person */
.ui-fieldset {
  margin: 0 0 var(--baustein-feldgruppe-unten);
  padding: var(--baustein-feldgruppe-innen);
  border: var(--linie-duenn) solid var(--farbe-rahmen-leise);
  border-radius: var(--radius-blatt);
  background: var(--farbe-flaeche-leise);
}
.ui-fieldset__legende {
  padding: var(--baustein-feldgruppe-legende-innen);
  color: var(--farbe-marke);
  font-weight: var(--gewicht-fett);
}

/* Tabelle (Ui/Includes/TableAnfang.ss), 1:1 wie .portal-tabelle und .portal-aenderungen */
.ui-table {
  width: 100%;
  margin: var(--baustein-tabelle-aussen);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-blatt);
  background: var(--farbe-grund);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
}
.ui-table th {
  padding: var(--baustein-tabelle-kopf-innen);
  background: var(--farbe-marke);
  color: var(--farbe-grund);
  text-align: left;
}
.ui-table td {
  padding: var(--baustein-tabelle-zelle-innen);
  border-bottom: var(--linie-duenn) solid var(--farbe-trenner);
  text-align: left;
}
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table tr:hover td { background: var(--farbe-flaeche-zeile); }
.ui-table--knapp {
  margin: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.ui-table--knapp th,
.ui-table--knapp td {
  padding: var(--baustein-tabelle-knapp-innen);
  border-bottom: var(--linie-duenn) solid var(--farbe-grau-hell);
  background: none;
  color: inherit;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.ui-table--knapp th { border-bottom: var(--linie-mittel) solid var(--farbe-marke); }
.ui-table--knapp tr:last-child td { border-bottom: var(--linie-duenn) solid var(--farbe-grau-hell); }
.ui-table--knapp tr:hover td { background: none; }

/* Liste mit Trennlinien (Ui/Includes/ListAnfang.ss), 1:1 wie .portal-liste */
.ui-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-list > li {
  padding: var(--baustein-liste-zeile-innen);
  border-bottom: var(--linie-duenn) solid var(--farbe-trenner);
}
.ui-list > li:last-child { border-bottom: 0; }

/* Plakette (Ui/Includes/Badge.ss), 1:1 wie .portal-status */
.ui-badge {
  display: inline-block;
  margin-bottom: var(--baustein-plakette-unten);
  padding: var(--baustein-plakette-innen);
  border-radius: var(--radius-plakette);
  font-size: var(--baustein-plakette-schrift);
  font-weight: var(--gewicht-fett);
  letter-spacing: var(--baustein-plakette-sperrung);
  text-transform: uppercase;
}
.ui-badge--bezahlt { background: var(--farbe-status-bezahlt-flaeche); color: var(--farbe-status-bezahlt); }
.ui-badge--offen { background: var(--farbe-status-offen-flaeche); color: var(--farbe-fehler); }
.ui-badge--teilbezahlt { background: var(--farbe-status-teilbezahlt-flaeche); color: var(--farbe-status-teilbezahlt); }

/* Kleingedrucktes (Ui/Includes/SmallPrint.ss), 1:1 wie .portal-hinweis-klein */
.ui-small-print {
  color: var(--farbe-text-klein);
  font-size: var(--baustein-kleingedruckt-schrift);
}

.ui-small-print--abstand-oben { margin-top: var(--baustein-karte-oben); }

/* Aktionszeile (Ui/Includes/ActionsAnfang.ss), 1:1 wie .widget-button.mt30 */
.ui-actions { margin-top: var(--baustein-aktionen-oben); }

/* Seitentitel (Ui/Includes/PageTitle.ss), 1:1 wie h1 im Kundenportal */
.ui-page-title { margin-bottom: var(--baustein-seitentitel-unten); }

/* Einleitung (Ui/Includes/Lead.ss), neu, ohne Vorbild */
p.ui-lead {
  font-size: var(--text-mittel);
  color: var(--farbe-text);
}

/* Formular (Ui/Includes/FormAnfang.ss), 1:1 wie .portal-login-form */
.ui-form--schmal { max-width: var(--baustein-formular-schmal); }

/* Metazeile (Ui/Includes/MetaLine.ss), 1:1 wie .portal-kundennummer */
.ui-meta-line {
  margin-top: var(--baustein-metazeile-oben);
  color: var(--farbe-text-leise);
}

/*
 * Spaltenzeile und Spalte (Ui/Includes/ColumnsAnfang.ss, ColumnAnfang.ss), 1:1 wie das Foundation-Raster
 * (grid-x, cell, small-/medium-/large-N, grid-margin-x, grid-padding-x, align-middle, align-bottom).
 * Die Breite rechnet sich aus dem Anteil je Breakpoint und --baustein-spalten-anzahl; der Spaltenabstand
 * steht nur in den Tokens --baustein-spalten-rinne-klein und -gross.
 */
.ui-columns {
  --spalten-rinne: var(--baustein-spalten-ohne);
  display: flex;
  flex-flow: row wrap;
}
.ui-columns--mitte { align-items: center; }
.ui-columns--unten { align-items: flex-end; }
.ui-columns__spalte {
  /* Anteile erben sonst aus einer äußeren Spalte; die Klassen darunter setzen sie neu */
  --spalten-klein: initial;
  --spalten-mittel: initial;
  --spalten-gross: initial;
  --spalten-anteil: var(--spalten-klein, var(--baustein-spalten-anzahl));
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  width: calc(100% * var(--spalten-anteil) / var(--baustein-spalten-anzahl) - 2 * var(--spalten-rinne));
}
.ui-columns--aussen,
.ui-columns--innen { --spalten-rinne: var(--baustein-spalten-rinne-klein); }
.ui-columns--aussen {
  margin-left: calc(-1 * var(--spalten-rinne));
  margin-right: calc(-1 * var(--spalten-rinne));
}
.ui-columns--aussen > .ui-columns__spalte {
  margin-left: var(--spalten-rinne);
  margin-right: var(--spalten-rinne);
}
.ui-columns--innen > .ui-columns__spalte {
  width: calc(100% * var(--spalten-anteil) / var(--baustein-spalten-anzahl));
  padding-left: var(--spalten-rinne);
  padding-right: var(--spalten-rinne);
}
.ui-columns__spalte--klein-1 { --spalten-klein: 1; }
.ui-columns__spalte--klein-2 { --spalten-klein: 2; }
.ui-columns__spalte--klein-3 { --spalten-klein: 3; }
.ui-columns__spalte--klein-4 { --spalten-klein: 4; }
.ui-columns__spalte--klein-5 { --spalten-klein: 5; }
.ui-columns__spalte--klein-6 { --spalten-klein: 6; }
.ui-columns__spalte--klein-7 { --spalten-klein: 7; }
.ui-columns__spalte--klein-8 { --spalten-klein: 8; }
.ui-columns__spalte--klein-9 { --spalten-klein: 9; }
.ui-columns__spalte--klein-10 { --spalten-klein: 10; }
.ui-columns__spalte--klein-11 { --spalten-klein: 11; }
.ui-columns__spalte--klein-12 { --spalten-klein: 12; }
.ui-columns__spalte--mittel-1 { --spalten-mittel: 1; }
.ui-columns__spalte--mittel-2 { --spalten-mittel: 2; }
.ui-columns__spalte--mittel-3 { --spalten-mittel: 3; }
.ui-columns__spalte--mittel-4 { --spalten-mittel: 4; }
.ui-columns__spalte--mittel-5 { --spalten-mittel: 5; }
.ui-columns__spalte--mittel-6 { --spalten-mittel: 6; }
.ui-columns__spalte--mittel-7 { --spalten-mittel: 7; }
.ui-columns__spalte--mittel-8 { --spalten-mittel: 8; }
.ui-columns__spalte--mittel-9 { --spalten-mittel: 9; }
.ui-columns__spalte--mittel-10 { --spalten-mittel: 10; }
.ui-columns__spalte--mittel-11 { --spalten-mittel: 11; }
.ui-columns__spalte--mittel-12 { --spalten-mittel: 12; }
.ui-columns__spalte--gross-1 { --spalten-gross: 1; }
.ui-columns__spalte--gross-2 { --spalten-gross: 2; }
.ui-columns__spalte--gross-3 { --spalten-gross: 3; }
.ui-columns__spalte--gross-4 { --spalten-gross: 4; }
.ui-columns__spalte--gross-5 { --spalten-gross: 5; }
.ui-columns__spalte--gross-6 { --spalten-gross: 6; }
.ui-columns__spalte--gross-7 { --spalten-gross: 7; }
.ui-columns__spalte--gross-8 { --spalten-gross: 8; }
.ui-columns__spalte--gross-9 { --spalten-gross: 9; }
.ui-columns__spalte--gross-10 { --spalten-gross: 10; }
.ui-columns__spalte--gross-11 { --spalten-gross: 11; }
.ui-columns__spalte--gross-12 { --spalten-gross: 12; }
@media print, screen and (min-width: 40em) {
  .ui-columns--aussen,
  .ui-columns--innen { --spalten-rinne: var(--baustein-spalten-rinne-gross); }
  .ui-columns__spalte { --spalten-anteil: var(--spalten-mittel, var(--spalten-klein, var(--baustein-spalten-anzahl))); }
}
@media print, screen and (min-width: 64em) {
  .ui-columns__spalte { --spalten-anteil: var(--spalten-gross, var(--spalten-mittel, var(--spalten-klein, var(--baustein-spalten-anzahl)))); }
}