/* ==========================================================================
   HWP Touristik · custom.css
   Ablage: wp-content/themes/yootheme-child/css/custom.css
   --------------------------------------------------------------------------
   Hier steht nur, was NICHT ins Element-CSS des Builders gehört:

   a) Regeln auf Markup, das ich selbst geschrieben habe (Suchmaske, Footer).
      Diese Klassen stehen im HTML, weil ich sie im Inhalt gesetzt habe — nicht
      über das Builder-Feld "Erweitert → CSS-Klasse". Sie kommen also auch dann
      an, wenn dieses Feld in der Installation nicht durchgereicht wird.
   b) Regeln auf UIkit-Klassen, die YOOtheme immer ausgibt.

   Was ein einzelnes Builder-Element betrifft, steht im css-Feld dieses
   Elements mit .el-element — dort greift es garantiert.

   Alle Farben ausgeschrieben, keine CSS-Variablen: die Werte müssen sich mit
   Suchen-Ersetzen finden lassen, wenn sie später verteilt angepasst werden.

   Kontraste (gerechnet, nicht geschätzt):
     #3E3C36 auf #FFFAE6 ....... 10,5:1
     #6B6964 auf #FFFAE6 .......  5,24:1
     #8A6A1E auf #FFFAE6 .......  4,82:1
     #FFFFFF auf #8A6A1E .......  5,05:1
     #FFFFFF auf #6B6964 .......  5,48:1
     #FFFFFF auf #59564C .......  7,34:1
   Alle über WCAG AA (4,5:1).
   ========================================================================== */


/* ==========================================================================
   1 · TITELSCHRIFT
   Prata gibt es bei Google Fonts nur in einem Schnitt (400) — es existiert
   kein Bold. Die Kontur legt eine feine Linie in Textfarbe auf die Glyphen
   und lässt sie halbfett wirken. Über etwa 0.8px ziehen sich die feinen
   Serifen der Didone zu und die Schrift verliert genau den Kontrast, der sie
   ausmacht. Wert an dieser einen Stelle ändern.
   ========================================================================== */
h1, h2,
.uk-h1, .uk-h2,
.uk-heading-medium, .uk-heading-large, .uk-heading-xlarge {
  -webkit-text-stroke: .5px currentColor;
  paint-order: stroke fill;
}

/* Versalien nur für H1 — spiegelt die Wortmarke im Logo. */
h1, .uk-h1 {
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ==========================================================================
   2 · KOPFBEREICH
   Der transparente Header über der Slideshow wird im Customizer eingestellt
   (Header → Transparent), nicht hier erzwungen — sonst kämpft das CSS gegen
   die Theme-Logik. Hier steht nur der Telefonbutton und eine Absicherung für
   die Schriftfarbe im transparenten Zustand.
   ========================================================================== */
.tm-header .uk-navbar-item .uk-button,
.tm-header .uk-navbar-right .uk-button {
  background-color: #8A6A1E;
  color: #ffffff;
  padding: 12px 20px;
  line-height: 1.2;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
}
.tm-header .uk-navbar-item .uk-button:hover,
.tm-header .uk-navbar-right .uk-button:hover {
  background-color: #6E5416;
  color: #ffffff;
}

/* Auf dem Handy nur noch das Hörersymbol — die Nummer sprengt sonst die
   Leiste. Das Symbol setzt du im Button-Element des Customizers als Icon
   "receiver"; der Text wird hier ausgeblendet, der tel:-Link bleibt aktiv. */
@media (max-width: 639px) {
  .tm-header .uk-navbar-item .uk-button span:not([uk-icon]):not([class*="uk-icon"]),
  .tm-header .uk-navbar-right .uk-button span:not([uk-icon]):not([class*="uk-icon"]) {
    display: none;
  }
  .tm-header .uk-navbar-item .uk-button,
  .tm-header .uk-navbar-right .uk-button { padding: 12px; }
}

/* Absicherung: im transparenten Header muss die Navigation hell sein.
   Greift nur, wenn YOOtheme die Transparent-Klasse setzt — sonst wirkungslos
   und damit harmlos. */
.tm-header-transparent .uk-navbar-nav > li > a,
.tm-header-transparent .uk-navbar-toggle {
  color: #ffffff;
}
.tm-header-transparent .uk-navbar-nav > li > a:hover {
  color: #E4CE94;
}


/* ==========================================================================
   3 · SUCHMASKE
   Eigenes Markup aus dem html-Element der Sektion "Finden Sie Ihre Traumreise".

   Die Datumsfelder sind native <input type="date">: der Kalender kommt vom
   Browser bzw. Betriebssystem. Für die Zielgruppe die sicherste Variante —
   gewohnte Bedienung, auf dem Handy das Systemrad, kein zusätzliches Skript.
   Die Darstellung unterscheidet sich zwischen den Browsern; das lässt sich
   nur mit einem eigenen JS-Kalender vereinheitlichen, was den Nutzen nicht
   aufwiegt.

   Die Beschriftungen stehen sichtbar über den Feldern statt als Platzhalter
   darin — sonst ist nach dem Ausfüllen nicht mehr erkennbar, welches Feld
   welches ist.
   ========================================================================== */
.hwp-suche {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
  margin: 0;
}
.hwp-suche__feld {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  margin: 0;
}
.hwp-suche__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff;              /* 5,48:1 auf #6B6964 */
}
.hwp-suche__box {
  display: flex;
  background-color: #ffffff;
  min-height: 60px;
  position: relative;
}
.hwp-suche__symbol {
  width: 58px;
  flex: none;
  background-color: #8A6A1E;
  color: #ffffff;
  display: grid;
  place-items: center;
}
.hwp-suche__symbol svg { width: 23px; height: 23px; }

.hwp-suche select,
.hwp-suche input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #59564C;
  padding: 0 18px;
  height: auto;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.hwp-suche select:focus,
.hwp-suche input[type="date"]:focus {
  outline: 2px solid #8A6A1E;
  outline-offset: -2px;
  background: transparent;
}

/* Eigener Auswahlpfeil: das Systemdreieck sitzt je nach Browser woanders. */
.hwp-suche__box--wahl::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  pointer-events: none;
  border-right: 2px solid #59564C;
  border-bottom: 2px solid #59564C;
  transform: rotate(45deg);
}
.hwp-suche__box--wahl select { padding-right: 46px; }

/* Kalendersymbol vergrößern und deutlich anklickbar machen. Den Pseudo-
   selektor kennt nur WebKit/Blink; Firefox zeigt sein eigenes Symbol — das
   Feld bleibt auch ohne diese Regel voll bedienbar. */
.hwp-suche input[type="date"] { padding-right: 14px; cursor: pointer; }
.hwp-suche input[type="date"]::-webkit-calendar-picker-indicator {
  width: 26px;
  height: 26px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s ease;
}
.hwp-suche input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.hwp-suche__knopf {
  min-height: 60px;
  padding: 0 44px;
  border: 0;
  background-color: #8A6A1E;
  color: #ffffff;              /* 5,05:1 */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease;
}
.hwp-suche__knopf:hover { background-color: #6E5416; }
.hwp-suche__knopf:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

@media (max-width: 1200px) {
  .hwp-suche { grid-template-columns: 1fr 1fr; }
  .hwp-suche__knopf { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .hwp-suche { grid-template-columns: 1fr; }
}


/* ==========================================================================
   4 · FOOTER
   Eigenes Markup aus den text-Elementen der Fußsektion.
   ========================================================================== */
.hwp-fuss__titel {
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 18px;
  -webkit-text-stroke: 0;      /* Kontur aus Block 1 hier zurücknehmen */
}
.hwp-fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hwp-fuss__liste li { margin-bottom: 10px; }
.hwp-fuss__liste a,
.hwp-fuss__text {
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.hwp-fuss__liste a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.hwp-fuss__text { max-width: 38ch; }

.hwp-fuss__unten {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: .87rem;
  color: rgba(255,255,255,.62);
}
.hwp-fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.hwp-fuss__unten a {
  color: rgba(255,255,255,.62);
  text-decoration: none;
}
.hwp-fuss__unten a:hover { color: #ffffff; text-decoration: underline; }


/* ==========================================================================
   5 · ABSICHERUNG HELLE SCHRIFT AUF VOLLFARBE
   Steht Schrift auf einer Vollfläche, zieht UIkit sie ohne color-mode:"light"
   dunkel ein. Im Preset ist der Modus gesetzt; das hier fängt Elemente ab,
   die daran vorbeirutschen.
   ========================================================================== */
.uk-section-secondary,
.uk-section-secondary h1, .uk-section-secondary h2,
.uk-section-secondary h3, .uk-section-secondary h4,
.uk-section-primary,
.uk-section-primary h1, .uk-section-primary h2,
.uk-section-primary h3, .uk-section-primary h4 {
  color: #ffffff;
}


/* ==========================================================================
   6 · BEWEGUNG ABSCHALTBAR
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt keine.
   Bei einer überwiegend älteren Zielgruppe ist das Bedienbarkeit, nicht Kür.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}