/* ========================================== CSS-Variablen (reduziert und vereinheitlicht)========================================== */:root { /* Farben */ --color-text: #1f2937; --color-bg: #fafafa; --color-light: #fafafa; /* identisch mit --color-bg */ --color-primary-dark: #0d446e; --color-primary-red: #f2811d; --color-aktiv-red: #dd0000; --color-accent: #ff6900; --color-highlight: #ffe033; --color-white: #fff; --color-danger: #f00; --color-border: #1f3855; --color-border-light: #e0e0e0; /* vorher --border und --color-border-light vereint */ --color-border-mid: #c0c0c0; /* bleibt für mögliche spätere Nutzung */ /* Layout */ --content-width: 1140px; --header-height: 60px; --radius: 8px; --transition: .1s ease; /* Schatten */ --shadow-dropdown: 5px 5px 6px 1px rgb(0 0 0 / 18%); --shadow-box: 0 6px 14px rgb(0 0 0 / 25%); --shadow: 0 4px 20px rgb(0 0 0 / 8%); /* FAQ */ --text-light: #666; --primary: #006994; /* Links */ --external-link-color: var(--color-text); --external-link-color-footer: var(--color-light); --external-link-size: 15px; --external-link-gap: 5px; --surface: #ffffff; --surface-soft: #f0f5fb;}/* ========================================== Reset & Grundtypografie========================================== */*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; appearance: none;}html,body { font-size: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Verdana, sans-serif; line-height: 1.7; color: var(--color-text); background: var(--color-bg);}/* ========================================== Layout (Grid)========================================== */body { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto;}#form { min-height: 210px; position: relative; margin: 0 auto; box-shadow: rgba(0,0,0,0.19) 0px 10px 20px,rgba(0,0,0,0.23) 0px 6px 6px; background: rgba(255,255,255,0.6); border: 1px solid #1F3855; z-index: 1; backdrop-filter: blur(3px); border-radius: 8px; /* Responsive Breite */ width: 100%; /* Auf schmalen Bildschirmen volle Breite (abzgl. Padding) */ max-width: 1140px; /* Auf breiten Bildschirmen maximal 1140px */ text-align: center;}/* Gemeinsame Container */section,.container,h1,#bread { width: min(100%, var(--content-width)); margin-inline: auto; padding-inline: 20px; position: relative; height: inherit;}/* Header & Navigation (Basis) */header { position: relative; height: var(--header-height); border-bottom: 2px solid var(--color-primary-red);}nav#navH { position: absolute; bottom: 0; width: 100%; margin: 0 auto; z-index: 3; appearance: none;}main { grid-row: 3;}footer { grid-row: 4;}/* ========================================== Typografie & Abstände========================================== */h1 { font-size: 1.75rem;}h2 { font-size: 1.375rem; display: block; margin: 10px 0;}h3 { font-size: 1.125rem;}main p { padding: 5px 0;}main ul { margin-left: 15px;}section#buchen, section.faq { width: 100%;}/* ========================================== Headerbild (Startseite)========================================== */#buchen { grid-row: 2; min-height: 450px; background-size: cover; background-position: center; box-shadow: rgb(0 0 0 / 19%) 0 10px 20px, rgb(0 0 0 / 23%) 0 6px 6px; margin-bottom: 25px; display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertikal */}@media (max-width: 600px) { #buchen { background-color: #218df9; }}@media (min-width: 601px) { #buchen { background-image: url("/img/panorama/P1-800.webp"); }}@media (min-width: 801px) { #buchen { background-image: url("/img/panorama/P1-1300.webp"); }}@media (min-width: 1301px) { #buchen { background-image: url("/img/panorama/P1-3000.webp"); }}/* ========================================== Bilder & Bildunterschriften========================================== */figure img { max-width: 100%; height: auto; border: 1px solid var(--color-light); border-radius: var(--radius);}/* Gemeinsame Basis für Image-Klassen */.image,.imageR,.imagebreit { position: relative; margin-bottom: 10px; border: 4px solid var(--color-light); outline: thin solid var(--color-border); border-radius: var(--radius);}.image { float: left; margin-right: 20px; margin-top: 10px;}.imageR { float: right; margin-left: 20px; margin-top: 10px; z-index: 1;}.imagebreit { margin-top: 20px; max-width: var(--content-width); overflow: hidden;}figcaption { position: absolute; bottom: 0; width: 100%; padding: 7px 5px; text-align: left; font-size: 0.9em; font-style: italic; background: rgba(255, 255, 255, 0.8);}/* ========================================== Home-Icon========================================== */.home { mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI0NjAuMjk4IiBoZWlnaHQ9IjQ2MC4yOTciPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIzMC4xNDkgMTIwLjkzOSA2NS45ODYgMjU2LjI3NGMwIC4xOTEtLjA0OC40NzItLjE0NC44NTUtLjA5NC4zOC0uMTQ0LjY1Ni0uMTQ0Ljg1MnYxMzcuMDQxYzAgNC45NDggMS44MDkgOS4yMzYgNS40MjYgMTIuODQ3IDMuNjE2IDMuNjEzIDcuODk4IDUuNDMxIDEyLjg0NyA1LjQzMWgxMDkuNjNWMzAzLjY2NGg3My4wOTd2MTA5LjY0aDEwOS42MjljNC45NDggMCA5LjIzNi0xLjgxNCAxMi44NDctNS40MzUgMy42MTctMy42MDcgNS40MzItNy44OTggNS40MzItMTIuODQ3VjI1Ny45ODFjMC0uNzYtLjEwNC0xLjMzNC0uMjg4LTEuNzA3eiIvPjxwYXRoIGQ9Ik00NTcuMTIyIDIyNS40MzggMzk0LjYgMTczLjQ3NlY1Ni45ODlxLjAwMS0zLjk5NS0yLjU3NC02LjU2Ny0yLjU1OC0yLjU2OC02LjU2My0yLjU2OGgtNTQuODE2cS0zLjk5OCAwLTYuNTcgMi41NjgtMi41NjYgMi41NzMtMi41NjYgNi41Njd2NTUuNjczbC02OS42NjItNTguMjQ1Yy02LjA4NC00Ljk0OS0xMy4zMTgtNy40MjMtMjEuNjk0LTcuNDIzcS0xMi41NjMgMC0yMS42OTggNy40MjNMMy4xNzIgMjI1LjQzOGMtMS45MDMgMS41Mi0yLjk0NiAzLjU2Ni0zLjE0IDYuMTM2LS4xOTMgMi41NjguNDcyIDQuODExIDEuOTk3IDYuNzEzbDE3LjcwMSAyMS4xMjhjMS41MjUgMS43MTIgMy41MjEgMi43NTkgNS45OTYgMy4xNDJxMy40MjguMjg2IDYuODU1LTEuOTk4TDIzMC4xNDkgOTUuODE3bDE5Ny41NyAxNjQuNzQxYzEuNTI2IDEuMzI4IDMuNTIxIDEuOTkxIDUuOTk2IDEuOTkxaC44NThjMi40NzEtLjM3NiA0LjQ2My0xLjQzIDUuOTk2LTMuMTM4bDE3LjcwMy0yMS4xMjVjMS41MjItMS45MDYgMi4xODktNC4xNDUgMS45OTEtNi43MTZxLS4yOTMtMy44NDYtMy4xNDEtNi4xMzIiLz48L3N2Zz4="); mask-repeat: no-repeat; mask-size: contain; position: absolute; width: 25px; height: 25px; background: #000;}.home:is(:hover, .aktiv) { background: var(--color-danger);}/* ========================================== Navigation (Desktop & Mobile)========================================== *//* ---------- Desktop-Navigation (zweite Ebene) ---------- */li#home { padding-right: 0;}nav#navH ul { margin-left: -8px; list-style: none;}nav#navH ul li { float: left; padding: 0 25px 0 0;}nav#navH li { position: relative; display: block; float: left; width: auto; height: 2em; margin-top: 8px; margin-left: 6px; padding-right: 18px;}nav#navH li a { display: block; padding: 0 0 0 20px; font-size: 1.1em; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text);}nav#navH li a.aktiv { color: var(--color-aktiv-red);}nav#navH li a:hover { color: var(--color-accent); text-decoration: underline;}nav#navH ul li a.activ { text-decoration: underline;}/* Dropdown */nav#navH ul ul { display: none; position: absolute; top: 1.7em; left: 7px; background: var(--color-light); box-shadow: var(--shadow-dropdown);}nav#navH ul li:hover > ul,nav#navH ul li:checked > ul { display: inherit; height: auto;}nav#navH ul ul li { position: relative; display: list-item; float: none; width: 240px; white-space: nowrap;}nav#navH ul ul li:first-child { margin: 13px 5px;}nav#navH ul ul li:last-child { border-bottom: 0;}nav#navH ul ul ul { position: absolute; top: -13px; left: 253px; border-left: 1px solid var(--color-border-mid); box-shadow: var(--shadow-dropdown);}/* Dropdown-Pfeil */[id^="tmc"] { position: absolute; top: 0; right: 0; display: inline; width: 0; height: 0;}[id^="tmc"]::after { content: "\203A"; position: absolute; top: 0; right: 0; font-size: 200%; text-align: center; cursor: pointer; transform: rotate(90deg);}ul li ul li [id^="tmc"]::after { top: -11px; color: var(--color-text);}/* ---------- Mobile Navigation ---------- */@media (width <= 820px) {#logo {right: initial;} #tm { display: block; position: absolute;right: 20px; bottom: 25px; width: 20px; height: 20px; } #tm::after { content: "\2261"; font-size: 250%; } #tm:checked::after { content: "\00D7"; position: absolute; top: 8px; font-size: 200%; color: var(--color-danger); } #tm:checked ~ nav { display: inline-table; } /* Pfeil im mobilen Menü */ [id^="tmc"]::after { top: -13px; right: 20px; font-size: 2.5em; text-align: center; color: var(--color-text); } [id^="tmc"]:checked::after { transform: rotate(90deg); } /* Navigation als Overlay */ nav#navH { display: none; top: var(--header-height); bottom: auto; left: 0; width: 100%; max-width: none; height: auto; line-height: 3em; background: var(--color-light); box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.3); transform: none; } nav#navH a { display: block; padding-left: 10px; line-height: 2em; } nav#navH ul { display: inline-block; width: 100%; margin-left: 0; box-shadow: none; } nav#navH ul li { float: none; padding: 5px 0; } nav#navH ul ul, nav#navH ul ul ul, nav#navH ul ul ul ul { position: initial; margin: 0; box-shadow: none; border-bottom: 0; } nav#navH ul ul { border-bottom: 2px solid var(--color-accent); } nav#navH li { position: relative; float: none; width: 100%; height: auto; margin-top: 0; margin-left: 0; padding-right: 0; } nav#navH li a { width: 90%; padding-left: 20px; color: var(--color-text); } nav#navH ul ul li:first-child { margin: 0; } nav#navH ul ul li { width: 95%; margin: 5px 0; padding-left: 20px; } nav#navH ul ul ul li { width: 100%; margin: 5px 0; } /* Pfeil in der mobilen Unterebene */ ul li ul li [id^="tmc"]::after { top: -5px; right: 0; font-size: 2.5em; text-align: center; } nav#navH ul li:checked > ul { display: contents; } .image, .imageR { width: 100%; margin: 0; } .imagebreit { max-width: var(--content-width); height: 300px; } .imagebreit img { width: 100%; height: 100%; object-fit: cover; }}/* alternative Content-Navigation (falls vorhanden) */main nav .main-nav ul { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none;}main nav .main-nav a { font-size: 0.96rem;}/* ========================================== Breadcrumb========================================== */.breadcrumb { display: flex; margin: 0; padding: 0; list-style: none;}.breadcrumb a { color: inherit; text-decoration: none;}.breadcrumb a:hover { text-decoration: underline;}.breadcrumb li:not(:last-child)::after { content: "|"; margin-inline: 0.5em;}.breadcrumb li[aria-current="page"],a[aria-current="page"] { font-weight: 600;}/* ========================================== Accessibility========================================== */.skip-link { position: fixed; top: -100px; left: 1rem;}.skip-link:focus { top: 1rem;}.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0;}/* ========================================== FAQ========================================== */section.faq { width: 100%; margin: 40px 0; border-top: 1px solid var(--color-primary-red); border-bottom: 1px solid var(--color-primary-red);}.faq details { margin-bottom: 12px; background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius); transition: var(--transition);}.faq details[open] { border-color: var(--primary); box-shadow: var(--shadow);}.faq summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px; font-weight: 700; color: var(--color-text); list-style: none; cursor: pointer; transition: var(--transition);}.faq summary::-webkit-details-marker { display: none;}.faq summary::after { content: "+"; margin-left: 12px; font-size: 1.4rem; color: var(--primary); transition: var(--transition);}.faq details[open] summary { color: var(--color-primary-dark);}.faq details[open] summary::after { content: "-"; color: var(--color-accent);}.faq .faq-answer { padding: 0 24px 20px; color: var(--text-light); line-height: 1.6;}.faq .faq-answer p { margin-bottom: 8px;}/* FAQ allgemein */.faq summary + p,.faq ul { font-style: italic;}.faq summary + p { padding: 0 10px;}.faq ul { padding-left: 35px;}.faq h2 { margin-top: 15px; padding-bottom: 10px;}/* ========================================== Footer========================================== */footer { padding: 20px; font-size: 0.9em; color: var(--color-light); background: var(--color-primary-dark); border-top: 2px solid var(--color-primary-red);}footer .container { display: flex; flex-wrap: wrap;}footer :is(a, p, h2),.p50,.p100 { color: var(--color-light);}footer a { text-decoration: none;}.p100 { width: 100%; margin-bottom: 20px;}.p50 { flex: 1 1 50%;}.rechts { text-align: right;}@media (max-width: 600px) { footer .container { display: block; text-align: center; } .p50, .p100, .rechts { text-align: center; width: 100%; }}/* ========================================== Externe Links (Icon)========================================== */a[rel~="external"]::after { content: ""; display: inline-block; width: var(--external-link-size); height: var(--external-link-size); margin-left: var(--external-link-gap); vertical-align: -2px; background-color: var(--external-link-color); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath fill='black' d='M3 2C2.45 2 2 2.45 2 3v9c0 .55.45 1 1 1h9c.55 0 1-.45 1-1V8.5c0-.28-.22-.5-.5-.5s-.5.22-.5.5V12H3V3h3.5c.28 0 .5-.22.5-.5S6.78 2 6.5 2H3zm9.85.15c.1.1.15.22.15.35V5.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V3.7L6.85 8.85a.5.5 0 0 1-.7-.7L11.3 3H9.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h2.5c.13 0 .26.05.35.15z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; }footer a[rel~="external"]::after { background-color: var(--external-link-color-footer);}/* ========================================== Grid-Komponente========================================== */[class^="grid-"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 10px; margin: 25px 0; padding: 0; list-style: none;}[class^="grid-"] > * { padding: 20px; background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius); box-shadow: 0 4px 20px rgb(0 0 0 / 10%);}/* ========================================== Logo========================================== */#logo { position: absolute; top: 10px; z-index: 2; height: 45px; width: auto; right: 0; }@media (width <= 1000px) and (width > 600px) { .image { width: 50%; margin-right: 20px; } #logo {right: initial;}}@media (width < 600px) {#logo {right: initial;}}/* Ajax */.ziel-select { position: relative; width: 100%; max-width: 370px; float: left; padding: 20px;}#ziel_suche { width: 100%; box-sizing: border-box; padding: 12px 15px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;}#ziel_liste { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #ddd; border-radius: 6px; max-height: 350px; overflow-y: auto; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.12);}#ziel_liste li { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0;}#ziel_liste li:last-child { border-bottom: 0;}#ziel_liste li:hover { background: #f5f5f5;}#ziel_liste li.active { background: #eef5ff;}#ziel_liste .headline { cursor: default; text-align: initial; border-bottom: 2px solid var(--color-primary-red); }#ziel_liste.open { display: block;}#ziel_liste li.active { background: #e8f0fe;}.small { display: block; font-size: 11px; color: #777; margin-top: 2px;}/* Booking */ .booking-box { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .booking-title { margin: 0 0 18px; font-size: 1.5rem; color: var(--primary-dark); } .booking-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; } .booking-field { position: relative; width: 100%; max-width: 370px; float: left; padding: 20px; } .booking-submit-wrap { grid-column: 1 / -1; } .booking-label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--color-primary-dark); } .booking-input, .booking-select, .booking-trigger, .duration-select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; /* font-weight: 700;*/ } .booking-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; } .booking-input:hover, .booking-input:focus-visible, .booking-select:hover, .booking-select:focus-visible, .booking-trigger:hover, .booking-trigger:focus-visible, .duration-select:hover, .duration-select:focus-visible { border-color: var(--primary); outline: none; } .booking-icon { color: var(--muted); } .booking-submit { width: 100%; min-height: 56px; padding: 14px 22px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 1.08rem; font-weight: 800; cursor: pointer; } .booking-submit:hover, .booking-submit:focus-visible { background: var(--accent-dark); outline: none; } /* ========== DATEPICKER & TRAVELLERS ========== */ .datepicker-popover, .travellers-popover { position: absolute; top: calc(100% + 10px); left: 0; z-index: 100; display: none; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .datepicker-popover { width: min(720px, calc(100vw - 32px)); } .travellers-popover { width: min(420px, calc(100vw - 32px)); } .booking-field.is-open .datepicker-popover, .booking-field.is-open .travellers-popover { display: block; } .datepicker-head { display: grid; grid-template-columns: 42px 1fr 42px; gap: 10px; align-items: center; margin-bottom: 14px; } .datepicker-title, .datepicker-month-title { text-align: center; font-weight: 800; color: var(--primary-dark); } .datepicker-month-title { margin-bottom: 10px; } .datepicker-nav { width: 42px; height: 42px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-soft); color: var(--primary-dark); font-size: 1.6rem; line-height: 1; cursor: pointer; } .datepicker-weekdays, .datepicker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .datepicker-weekdays { margin-bottom: 8px; color: var(--muted); font-size: 0.82rem; font-weight: 800; text-align: center; } .datepicker-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .datepicker-day { min-height: 40px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; /* font-weight: 700;*/ cursor: pointer; } .datepicker-day:hover, .datepicker-day:focus-visible, .datepicker-nav:hover, .datepicker-nav:focus-visible { background: var(--surface-soft); outline: none; } .datepicker-day.is-empty { pointer-events: none; visibility: hidden; } .datepicker-day.is-disabled { color: #b4c1cc; cursor: not-allowed; text-decoration: line-through; } .datepicker-day.is-disabled:hover { background: transparent; } .datepicker-day.is-start, .datepicker-day.is-end { background: var(--primary); color: #fff; } .datepicker-day.is-in-range { background: rgba(0, 119, 182, 0.12); color: var(--primary-dark); } .datepicker-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); } .duration-options { display: none; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .booking-field.has-date-range .duration-options { display: block; } .duration-options-title { display: block; margin-bottom: 10px; color: var(--primary-dark); font-weight: 800; } .datepicker-footer, .travellers-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .datepicker-clear, .datepicker-apply, .travellers-clear, .travellers-apply { min-height: 44px; padding: 10px 16px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; } .datepicker-clear, .travellers-clear { border: 1px solid var(--line-soft); background: #fff; color: var(--primary-dark); } .datepicker-apply, .travellers-apply { border: 1px solid var(--accent); background: var(--accent); /* color: #fff;*/ } .travellers-head { display: grid; gap: 3px; margin-bottom: 14px; } .travellers-head strong { font-size: 1.1rem; color: var(--text); } .travellers-head span, .travellers-row span { color: var(--muted); font-size: 0.92rem; } .travellers-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); } .travellers-row strong { display: block; margin-bottom: 2px; } .travellers-counter { display: grid; grid-template-columns: 38px 34px 38px; align-items: center; gap: 8px; } .travellers-counter-btn { width: 38px; height: 38px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface-soft); color: var(--primary-dark); font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; } .travellers-counter-btn:hover, .travellers-counter-btn:focus-visible { border-color: var(--primary); outline: none; } .travellers-counter-btn:disabled { opacity: 0.45; cursor: not-allowed; } .travellers-count { text-align: center; font-weight: 800; } .child-ages { display: grid; gap: 10px; margin-top: 4px; } .child-age-row { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-soft); } .child-age-row label { color: var(--text); font-weight: 700; } .child-age-row select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; color: var(--text); font: inherit; font-weight: 700; } .child-age-row select:focus-visible { border-color: var(--primary); outline: none; }