/*
Theme Name:   Einfachmaldurchatmen Child
Theme URI:    https://wordpress.org/themes/einfachmaldurchatmen/
Description:  Child theme für einfachmaldurchatmen.de
Author:       Schlierf.IT GmbH
Author URI:   https://wordpress.org/
Template:     palmeria
Version:      1.0.0
Text Domain:  einfachmaldurchatmen
*/
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-R.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

/* Optional: wenn du mehrere Schriftschnitte hast, z.B. Bold */
@font-face {
    font-family: 'Ubuntu Bold';
    src: url('fonts/Ubuntu-B.ttf') format('ttf'); 
    font-weight: bold;
    font-style: normal;
}

/* Standard Desktop-Ansicht */
#search-form {
    display: flex;
    flex-wrap: nowrap; /* Keine Zeilenumbrüche */
    gap: 10px; /* Abstände zwischen den Feldern */
    align-items: flex-end; /* Vertikale Ausrichtung */
    justify-content: center;
}

#search-form .form-group {
    display: flex;
    flex-direction: column; /* Label über dem Input */
	align-items: flex-start;
    justify-content: flex-end; /* Input wandert nach unten */
    min-height: 60px; /* Genug Platz, damit Label oben und Input unten Platz haben */
    min-width: 120px; /* Einheitliche Mindestbreite */
    flex: 0 1 auto; /* Elemente bleiben flexibel in ihrer Breite */
}

/* Eingabefelder */
#search-form input,
#search-form select {
    width: 100%; /* Maximale Breite innerhalb der form-group */
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 38px; /* Einheitliche Höhe */
    box-sizing: border-box; /* Padding zählt zur Breite */
}

/* Einheitliche Felder */
#search-form select {
    width: 100%;
    padding: 5px 35px 5px 5px; /* Platz für Pfeil rechts reservieren */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 38px; /* Gleiche Höhe wie andere Felder */
    box-sizing: border-box;
    appearance: none; /* Native Pfeile entfernen */
    background: white url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"%3E%3Cpath fill="none" stroke="%23000000" stroke-width=".75" d="M0 0l2 2 2-2"/%3E%3C/svg%3E') no-repeat right 10px center;
    background-size: 8px 8px; /* Pfeilgröße anpassen */
}

/* Alternative für besseren visuellen Effekt */
#search-form select:hover {
    border-color: #0073aa; /* Rahmenfarbe bei Hover */
}

/* Optional: Für ältere Browser */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    #search-form select {
        appearance: none; /* Browser-spezifische Native-Stile */
    }
}

/* Suchen-Button */
.search-form  button {
    height: 38px; /* Gleiche Höhe wie die Input-Felder */
    line-height: 38px; /* Vertikale Zentrierung des Textes */
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #174F2A;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 15px; /* Horizontaler Abstand, aber kein vertikales Padding */
    display: inline-flex;
    align-items: center; /* Text vertikal mittig ausrichten */
    justify-content: center;
}
 
.search-form button:hover {
    background-color: #377E47;
}

/* Mobile Ansicht */
@media (max-width: 768px) {
    #search-form {
        display: flex;
        flex-wrap: wrap; /* Zeilenumbruch aktivieren */
        gap: 15px; /* Abstand zwischen den Feldern */
    }

    #search-form .form-group {
        flex: 1 1 100%; /* Volle Breite für jedes Element */
        align-items: stretch; /* Elemente füllen die Breite */
        margin-bottom: 10px; /* Abstände zwischen den Gruppen */
    }

    #search-form input,
    #search-form select {
        width: 100%; /* Volle Breite innerhalb der form-group */
        height: 38px; /* Einheitliche Höhe */
        padding: 5px;
        font-size: 14px;
    }

    #search-form button {
        flex: 1 1 100%; /* Button über gesamte Breite */
        text-align: center; /* Zentrierung des Texts */
        height: 38px; /* Gleiche Höhe wie Felder */
    }
}


.search_results_container {
  display: flex;
  width: 100%; /* Damit es sich ausdehnen kann */
  /*justify-content: center; /* Zentriert horizontal */
  /*align-items: center; /* oder center, wenn du es auch vertikal mittig willst */
  /* ggf. Höhe oder min-height definieren */
 /* border: 1px dashed blue; /* um zu sehen, wo der Container ist */
}
/*
#search_results {
  display: flex;
  justify-content: center; /* Zentriert horizontal */
  /*align-items: flex-start; /* oder center, wenn du es auch vertikal mittig willst */
  /*width: 100%; /* Damit es sich ausdehnen kann */
  /* ggf. Höhe oder min-height definieren */
  /*border: 1px dashed red; /* um zu sehen, wo der Container ist */
/*}*/

/* The Instagram footer element */
.insta-footer {
	width: 50px;
	height: 50px;
	background-size: cover;
	background-position: center;
	display: inline-block;
	//border-radius: 50%; /* Makes the image circular */
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	position: relative; /* Critical for tooltip positioning */
	background-image: url('/wp-content/uploads/2024/12/logo_instagram-footer.png');
}

.buchung {
	white-space: nowrap;
}

.schraeg-durchgestrichen {
    position: relative;      /* Damit das pseudo-Element relativ zum Text positioniert werden kann */
    /*color: red;              /* Rote Schrift */
    display: inline-block;   /* Macht die Positionierung einfacher */
}

/* Pseudo-Element für den Strich */
.schraeg-durchgestrichen::after {
    content: "";
    position: absolute;
    top: 50%;                /* Vertikal zentrieren */
    left: 0;
    width: 100%;             /* Die ganze Breite des Elements bedecken */
    height: 1px;             /* Dicke des Strichs */
    background: red;         /* Farbe des Strichs */
    transform: rotate(-5deg) translateY(-50%);
    /* rotate(-5deg): Leicht schräg gestellt
       translateY(-50%): Damit der Strich genau durch die Mitte des Textes verläuft */
}

.hidden {
	display: none;
}

.buchen {
	cursor: pointer;
}

.search-result-container {
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center;     /* Zentriert vertikal, wenn Höhe definiert */
    height: 100%;           /* z. B. um vertikale Zentrierung sichtbar zu machen */
}

  .booking-form {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px 0;
    padding: 20px;
    max-width: 800px; /* ggf. anpassen */
    background: #f9f9f9;
  }
  .booking-form-column {
    flex: 1 1 50%;
    padding: 10px;
    min-width: 250px;
    box-sizing: border-box;
  }
  /* Trennlinie zwischen den beiden Spalten (nur auf großen Screens) */
  .booking-form-column:not(:last-child) {
    border-right: 1px solid #ccc;
  }

  /* Überschriften, Texte usw. */
  .booking-form h2, .booking-form h3, .booking-form p {
    margin-top: 0;
    margin-bottom: 10px;
  }

  /* Labels und Felder */
  .booking-form label {
    display: block;
    margin-top: 10px;
    //font-weight: bold;
  }
  .booking-form input,
  .booking-form select,
  .booking-form textarea {
    width: 100%;
    padding: 6px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  /* Checkbox-Gruppen */
  .checkbox-group {
    margin-top: 15px;
  }
  .checkbox-group input {
    margin-right: 5px;
  }

  /* Wichtige Werte (z. B. zu zahlender Betrag) */
  .important {
    font-weight: bold;
  }

  /* Button */
  .booking-form button {
    margin-top: 20px;
    padding: 10px 15px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #174F2A;
    color: #fff;
  }
  .booking-form button:hover { 
    background-color: #377E47;
  }

  /* Responsive: Spalten untereinander auf kleineren Geräten */
  @media (max-width: 768px) {
    .booking-form {
      flex-direction: column;
    }
    .booking-form-column:not(:last-child) {
      border-right: none;
      border-bottom: 1px solid #ccc;
    }
    .booking-form-column:last-child {
      border-bottom: none;
    }
  }
  
/* Custom Styles for jQuery UI Autocomplete */
.ui-autocomplete {
    background-color: #ffffff; /* Fester Hintergrund */
    border: 1px solid #ccc;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ui-menu-item {
    padding: 10px;
    color: #333;
    cursor: pointer;
}

.ui-menu-item:hover {
    background-color: #f0f0f0;
}

.details {
    display: flex;
    flex-direction: column; /* Zeilen untereinander */
    gap: 10px; /* Abstand zwischen den Zeilen */
}

.detail-row {
    display: flex; /* Horizontale Anordnung */
    justify-content: space-between; /* Beschriftung links, Wert rechts */
    align-items: flex-start; /* Vertikale Ausrichtung oben */
    font-size: 16px; /* Einheitliche Schriftgröße */
}

.detail-row .label {
    text-align: left; /* Links ausgerichtet */
    font-weight: normal; /* Standard-Gewicht */
    flex: 0 0 10%; /* Nimmt 10% des Platzes ein */
    white-space: nowrap; /* Kein Umbruch bei langen Beschriftungen */
    align-self: flex-start; /* Stellt sicher, dass das Label oben ausgerichtet ist */
}

.detail-row .value {
    text-align: right; /* Rechts ausgerichtet */
    font-weight: bold; /* Optional: Werte hervorheben */
    flex: 1; /* Nimmt den restlichen Platz ein */
    white-space: pre-wrap; /* Zeilenumbrüche im Text erlauben */
    /*overflow: hidden; /* Schneidet überfließenden Text ab */
    /*text-overflow: ellipsis; /* Fügt "..." hinzu, wenn der Text abgeschnitten wird */
    align-self: flex-start; /* Stellt sicher, dass der Wert oben ausgerichtet ist */
}

.detail-row.important .value { 
    font-size: 18px; /* Größerer Text für wichtige Werte */
    color: #174F2A; /* Optional: Hervorhebung */
}

.checkbox {
    display: flex;
    flex-direction: column; /* Zeilen untereinander */
    gap: 10px; /* Abstand zwischen den Zeilen */
}

.checkbox-row {
    display: flex; /* Horizontale Anordnung */
    justify-content: space-between; /* Beschriftung links, Wert rechts */
    align-items: flex-start; /* Vertikale Ausrichtung oben */
    font-size: 16px; /* Einheitliche Schriftgröße */
}

.checkbox-row .label {
    text-align: center; /* Links ausgerichtet */
    font-weight: normal; /* Standard-Gewicht */
    flex: 0 0 15%; /* Nimmt 5% des Platzes ein */
    align-self: flex-start; /* Stellt sicher, dass das Label oben ausgerichtet ist */
}

.textlink {
    color: #174F2A !important;
}