.htgc-ziel-suche-wrap {
max-width: 640px;
margin: 0 auto 1.5em auto;
font-family: inherit;
}
.htgc-ziel-suche-form {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
align-items: stretch;
}
.htgc-ziel-suche-eingabe {
flex: 1 1 240px;
min-width: 0;
padding: 0.6em 0.9em;
font-size: 1em;
border: 1.5px solid #a3a3a3;
border-radius: 4px;
box-sizing: border-box;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); height: 54px !important;
min-height: 54px !important;
max-height: 54px !important;
line-height: normal !important;
-webkit-appearance: none;
appearance: none;
}
.htgc-ziel-suche-eingabe:focus {
border-color: #FFCC00;
outline: 2px solid #FFCC00;
outline-offset: 1px;
} .htgc-ziel-suche-personen {
flex: 0 0 128px;
min-width: 0;
padding: 0.6em 0.8em;
font-size: 1em;
border: 1.5px solid #a3a3a3;
border-radius: 4px;
box-sizing: border-box;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); height: 54px !important;
min-height: 54px !important;
max-height: 54px !important;
line-height: normal !important;
-webkit-appearance: none;
appearance: textfield;
} .htgc-ziel-suche-personen::-webkit-inner-spin-button,
.htgc-ziel-suche-personen::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.htgc-ziel-suche-personen:focus {
border-color: #FFCC00;
outline: 2px solid #FFCC00;
outline-offset: 1px;
} .htgc-ziel-suche-knopf {
flex: 0 0 auto;
padding: 0 22px;
font-size: 1em;
font-weight: 600;
color: #1a1a1a;
background: #FFCC00;
border: none;
border-radius: 5px;
cursor: pointer; height: 54px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.htgc-ziel-suche-knopf:hover,
.htgc-ziel-suche-knopf:focus {
background: #e6b800;
color: #1a1a1a;
}
.htgc-ziel-suche-fehler {
margin: 0 0 0.6em;
padding: 0.6em 0.9em;
font-size: 0.95em;
color: #7a5b00;
background: #fff8e5;
border: 1px solid #e6c66b;
border-radius: 4px;
}
.htgc-ziel-suche-redakteur-hinweis {
margin: 0 0 0.6em;
padding: 0.6em 0.9em;
font-size: 0.85em;
color: #7a1f1f;
background: #fdecec;
border: 1px dashed #d98c8c;
border-radius: 4px;
}
.htgc-ziel-suche-label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
margin-top: 0.6em;
font-size: 0.85em;
color: #555;
}
.htgc-ziel-suche-label-logo {
height: 22px;
width: auto;
vertical-align: middle;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} @media (max-width: 480px) {
.htgc-ziel-suche-form {
flex-direction: column;
}
.htgc-ziel-suche-personen {
flex: 1 1 auto;
width: 100%;
}
.htgc-ziel-suche-knopf {
width: 100%;
}
}.htgc-grid {
--htgc-spalten: 3;
display: grid;
grid-template-columns: repeat(var(--htgc-spalten), minmax(0, 1fr));
gap: 16px;
margin: 0 0 16px;
}
@media (max-width: 900px) {
.htgc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.htgc-grid {
grid-template-columns: 1fr;
}
}
.htgc-kachel {
display: flex;
flex-direction: column;
border: 1px solid #e2e0d8;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.htgc-kachel-bild {
aspect-ratio: 16 / 10;
background: #e8e6df;
overflow: hidden;
}
.htgc-kachel-bild img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.htgc-kachel-body {
display: flex;
flex-direction: column;
gap: 0;
padding: 12px 14px 14px;
}
.htgc-kachel-titel {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
margin: 0 0 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 900px) {
.htgc-kachel-titel {
font-size: 18px;
}
}
.htgc-kachel-ort {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
color: #333;
margin: 0 0 2px;
}
.htgc-kachel-ort .htgc-pin {
flex: 0 0 auto;
color: #777;
} .htgc-kachel-ort-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.htgc-kachel-eckdaten {
font-size: 14px;
color: #333;
margin: 0 0 4px;
}
.htgc-kachel-preis {
font-size: 16px;
margin: 0 0 2px;
}
.htgc-kachel-preis-degradiert {
color: #7a5b00;
font-size: 14px;
}
.htgc-sterne {
position: relative;
display: inline-block;
font-size: 15px;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.htgc-sterne-hg {
color: #ddd;
}
.htgc-sterne-fg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #FFCC00;
white-space: nowrap;
}
.htgc-sterne-zahl {
font-size: 13px;
color: #555;
vertical-align: middle;
}
.htgc-kachel-sterne {
margin: 0 0 6px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.htgc-kachel-sterne > * {
flex: 0 0 auto;
}
.htgc-bewertungshinweis {
display: inline-block !important;
vertical-align: middle;
} .htgc-bewertungshinweis[open] {
flex-basis: 100%;
}
.htgc-bewertungshinweis summary {
list-style: none;
cursor: pointer;
color: #888;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
padding: 0 !important;
}
.htgc-bewertungshinweis summary::-webkit-details-marker {
display: none;
}
.htgc-bewertungshinweis span {
display: block;
margin-top: 6px;
background: #f7f6f2;
border-radius: 6px;
padding: 8px 10px;
font-size: 11px;
color: #555;
line-height: 1.4;
}
.htgc-kachel-icons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 6px;
padding-top: 6px;
border-top: 1px solid #eee;
}
.htgc-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
color: #333;
}
.htgc-icon {
color: #3a3a3a;
} .htgc-icon-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.htgc-kachel-attribution {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 5px !important;
margin: 0 0 8px;
font-size: 12px;
color: #666;
}
.htgc-kachel-attribution > * {
flex: 0 0 auto;
margin: 0 !important;
}
.htgc-kachel-attribution-label {
white-space: nowrap;
}
.htgc-kachel-attribution-logo {
height: 22px;
width: auto;
max-width: 90px;
object-fit: contain;
flex-shrink: 0;
}
.htgc-kachel-button {
display: inline-block;
margin-top: 0;
padding: 9px 16px;
background: #FFCC00;
color: #1a1a1a;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
text-align: center;
}
.htgc-kachel-button:hover {
background: #e6b800;
color: #1a1a1a;
}
.htgc-preisstand {
font-size: 12px;
color: #666;
margin: 4px 0 0;
line-height: 1.5;
}
.htgc-grid-leer {
font-size: 14px;
color: #666;
margin: 0 0 16px;
padding: 20px;
text-align: center;
background: #f7f6f2;
border-radius: 8px;
}  .htgc-grid .htgc-kachel[hidden] {
display: none;
}
.htgc-filter-wrap {
margin: 0 0 16px;
} .htgc-filter-ergebnis-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
} .htgc-filter-info {
position: relative;
display: inline-flex;
align-items: center;
}
.htgc-filter-info-btn {
display: inline-flex;
align-items: center;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: #888;
line-height: 0;
} .htgc-filter-info-popover {
position: absolute;
top: 100%;
right: 0;
left: auto;
z-index: 5;
width: max-content;
max-width: min(320px, 90vw);
margin-top: 6px;
background: #f7f6f2;
border: 1px solid #e3e1da;
border-radius: 6px;
padding: 8px 10px;
font-size: 12px;
color: #555;
line-height: 1.4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.htgc-filter-info-popover[hidden] {
display: none;
}
.htgc-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 0 0 14px;
padding: 10px 14px;
background: #f7f6f2;
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
} .htgc-filter-stepper {
display: flex;
align-items: center;
gap: 8px;
}
.htgc-filter-stepper-label {
color: #555;
}
.htgc-filter-stepper-btn {
width: 26px;
height: 26px;
line-height: 24px;
padding: 0;
border: 1px solid #ccc;
border-radius: 50%;
background: #fff;
color: #1a1a1a;
font-size: 16px;
cursor: pointer;
text-align: center;
}
.htgc-filter-stepper-btn:hover {
background: #eee;
}
.htgc-filter-stepper-value {
min-width: 64px;
text-align: center;
font-weight: 600;
} .htgc-filter-price {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 180px;
}
.htgc-filter-price-label {
color: #555;
white-space: nowrap;
}
.htgc-filter-price-track {
position: relative;
height: 26px;
}
.htgc-filter-price-track::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
margin-top: -2px;
background: #ddd;
border-radius: 2px;
}
.htgc-filter-price-range {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 26px;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
}
.htgc-filter-price-range::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: transparent;
height: 26px;
}
.htgc-filter-price-range::-moz-range-track {
background: transparent;
height: 26px;
}
.htgc-filter-price-range::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 18px;
height: 18px;
margin-top: 4px;
border-radius: 50%;
background: #FFCC00;
border: 2px solid #1a1a1a;
cursor: pointer;
}
.htgc-filter-price-range::-moz-range-thumb {
pointer-events: auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: #FFCC00;
border: 2px solid #1a1a1a;
cursor: pointer;
} .htgc-filter-alle-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid #1a1a1a;
border-radius: 5px;
background: #fff;
color: #1a1a1a;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.htgc-filter-alle-btn:hover {
background: #f0f0f0;
}
.htgc-filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #FFCC00;
color: #1a1a1a;
font-size: 11px;
font-weight: 700;
}
.htgc-filter-ergebnis {
margin-left: auto;
color: #555;
white-space: nowrap;
}
.htgc-filter-reset-btn,
.htgc-filter-inline-reset {
padding: 7px 12px;
border: none;
background: transparent;
color: #a00;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
@media (max-width: 560px) {
.htgc-filter-bar {
gap: 10px;
} .htgc-filter-ergebnis-wrap {
margin-left: 0;
flex-basis: 100%;
order: 10;
}
.htgc-filter-price {
flex: 1 1 100%;
}
} .htgc-filter-dialog {
padding: 0;
border: none;
border-radius: 10px;
max-width: 560px;
width: min(92vw, 560px);
max-height: 85vh;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.htgc-filter-dialog::backdrop {
background: rgba(0, 0, 0, 0.45);
}
.htgc-filter-dialog-inner {
display: flex;
flex-direction: column;
max-height: 85vh;
}
.htgc-filter-dialog-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #eee;
}
.htgc-filter-dialog-head h3 {
margin: 0;
font-size: 17px;
}
.htgc-filter-dialog-close {
width: 30px;
height: 30px;
border: none;
background: transparent;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: #555;
}
.htgc-filter-dialog-body {
padding: 14px 16px;
overflow-y: auto;
}
.htgc-filter-group {
border: none;
padding: 0 0 16px;
margin: 0 0 16px;
border-bottom: 1px solid #eee;
}
.htgc-filter-group:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.htgc-filter-group legend {
padding: 0 0 8px;
font-weight: 700;
font-size: 14px;
}
.htgc-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.htgc-filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 16px;
font-size: 13px;
cursor: pointer;
background: #fff;
}
.htgc-filter-chip:has(input:checked) {
background: #fff6d9;
border-color: #FFCC00;
}
.htgc-filter-chip input {
margin: 0;
}
.htgc-filter-chip-count {
color: #888;
}
.htgc-filter-chips .htgc-filter-chip[hidden] {
display: none;
}
.htgc-filter-mehr-btn {
margin-top: 8px;
padding: 4px 0;
border: none;
background: transparent;
color: #1a1a1a;
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
.htgc-filter-dialog-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid #eee;
}
.htgc-filter-apply-btn {
padding: 10px 18px;
border: none;
border-radius: 5px;
background: #FFCC00;
color: #1a1a1a;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
.htgc-filter-apply-btn:hover {
background: #e6b800;
} .htgc-grid-mehr-btn {
display: block;
margin: 4px auto 16px;
padding: 10px 20px;
border: 1px solid #1a1a1a;
border-radius: 5px;
background: #fff;
color: #1a1a1a;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.htgc-grid-mehr-btn:hover {
background: #f0f0f0;
}
.htgc-grid-leer-client button {
margin-left: 6px;
} .htgc-teaser-wrap {
margin: 20px 0;
}
.htgc-teaser-kennzeichnung {
font-size: 12px;
color: #666;
margin: 0 0 8px;
}
.htgc-teaser-grid {
margin: 0 0 8px;
} .htgc-kachel-teaser .htgc-kachel-titel {
margin-bottom: 6px;
}
.htgc-teaser-kachel-anbieter {
font-size: 12px;
color: #666;
margin: 0 0 8px;
}
.htgc-teaser-alle-link {
font-size: 14px;
margin: 8px 0 0;
}