/* ========================================= Bungalows Zinnowitz – Main Stylesheet Farben: #09637E · #088395 · #E37434 · #EBF4F6 · #EDEDCE Bungalow 17: #1a5c8c (Ozeanblau, AAA) · Bungalow 18: #3a7d7d (Teal, AA) Schriften: Playfair Display, Open Sans ========================================= */ /* === Schriften – lokal gehostet (DSGVO-konform) ========================= */ /* Open Sans (variable font – deckt weights 300/400/600 ab) */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 600; font-stretch: 100%; font-display: swap; src: url('../fonts/open-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 600; font-stretch: 100%; font-display: swap; src: url('../fonts/open-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Playfair Display (variable font – deckt weights 400/700 ab) */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/playfair-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* === Reset & Basis === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === CSS-Variablen === */ :root { --blue: #09637E; /* Text / Links / Badges → 6.0:1 auf Weiß ✓ */ --blue-dark: #064e65; /* Hover / Fokus → ~8.7:1 auf Weiß ✓ */ --blue-light: #EBF4F6; /* Hintergründe → nie als Textfarbe */ --green: #088395; /* Icons / Akzente / Borders → dekorativ */ --green-dark: #066573; /* Hover / Fokus → 6.7:1 auf Weiß ✓ */ --accent: #E37434; /* CTAs / Buttons → Orange */ --accent-dark: #c45e1e; /* CTA-Hover / dunkler */ --sand: #EDEDCE; /* Sektionshintergrund → nie als Textfarbe */ --white: #FFFFFF; --text-dark: #2C3E50; --text-mid: #546E7A; --shadow: 0 4px 20px rgba(0,0,0,0.10); --radius: 8px; } /* === Bungalow-Farbidentitäten (Scope via CSS Custom Properties) === Elemente innerhalb .bu17 / .bu18 erben var(--bungalow) automatisch. Auf Seiten ohne Scope greifen die var(--blue)-Fallbacks. ================================================================= */ .bu17 { --bungalow: #1a5c8c; /* Ozeanblau → 7.1:1 auf Weiß ✓ AAA */ --bungalow-dark: #103a58; /* dunkler → 11.9:1 auf Weiß ✓ AAA */ --bungalow-light: #e5eef5; /* Hintergrund */ } .bu18 { --bungalow: #3a7d7d; /* Teal → 4.8:1 auf Weiß ✓ AA */ --bungalow-dark: #275353; /* dunkler → 8.6:1 auf Weiß ✓ AAA */ --bungalow-light: #e7f4f4; /* Hintergrund */ } /* === Zweisprachigkeit (CSS-only via Radio-Buttons) === Die Radio-Inputs und müssen als erste Kindelemente von stehen. ===================================================== */ .lang-input { display: none; } /* Standard: Englisch ausblenden */ .lang-en { display: none; } /* Wenn EN gewählt: DE ausblenden, EN einblenden */ #lang-en:checked ~ header .lang-de, #lang-en:checked ~ main .lang-de, #lang-en:checked ~ footer .lang-de { display: none; } #lang-en:checked ~ header .lang-en, #lang-en:checked ~ main .lang-en, #lang-en:checked ~ footer .lang-en { display: inline; } /* Block-Elemente mit .lang-en korrekt als Block anzeigen */ #lang-en:checked ~ main ul.lang-en, #lang-en:checked ~ main ol.lang-en, #lang-en:checked ~ main div.lang-en, #lang-en:checked ~ main p.lang-en { display: block; } /* Aktive Sprache hervorheben – Header */ #lang-de:checked ~ header label[for="lang-de"], #lang-en:checked ~ header label[for="lang-en"] { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--blue); padding-bottom: 2px; } /* Aktive Sprache hervorheben – Footer (Mobile) */ #lang-de:checked ~ footer label[for="lang-de"], #lang-en:checked ~ footer label[for="lang-en"] { color: var(--white); font-weight: 700; border-bottom: 2px solid var(--white); padding-bottom: 2px; } /* === Basis-Typografie === */ body { font-family: 'Open Sans', sans-serif; background-color: var(--sand); color: var(--text-dark); line-height: 1.7; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.3; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-dark); text-decoration: underline; } /* === Header / Navigation === */ header { background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .logo { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--blue); text-decoration: none; font-weight: 700; white-space: nowrap; } .logo span { color: var(--green); } nav ul { list-style: none; display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; } nav ul a { text-decoration: none; color: var(--text-dark); font-size: 0.9rem; font-weight: 600; transition: color 0.2s; white-space: nowrap; } nav ul a:hover { color: var(--blue); } nav ul a.active { color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 2px; } .lang-switch { display: flex; align-items: center; gap: 0.4rem; } .lang-switch label { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text-mid); padding: 0.2rem 0.4rem; border-radius: 4px; transition: all 0.2s; border-bottom: 2px solid transparent; } .lang-switch label:hover { color: var(--blue); } .lang-switch .divider { color: #ccc; font-size: 0.85rem; } /* === Hero === */ .hero { position: relative; height: 70vh; min-height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(9,99,126,0.65) 0%, rgba(8,131,149,0.45) 100%); } .hero-content { position: relative; color: var(--white); padding: 2rem; max-width: 800px; } .hero-content h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0.4rem; text-shadow: 0 2px 12px rgba(0,0,0,0.35); } .hero-tagline { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1rem, 2.2vw, 1.35rem); letter-spacing: 0.04em; opacity: 0.88; margin-bottom: 1.25rem !important; } .hero-content p { font-size: clamp(1rem, 2vw, 1.2rem); margin-bottom: 2rem; opacity: 0.95; max-width: 600px; margin-left: auto; margin-right: auto; } /* === Page-Header (Unterseiten) === */ .page-header { background: linear-gradient(135deg, var(--bungalow, var(--blue)) 0%, var(--bungalow-dark, var(--blue-dark)) 100%); color: var(--white); padding: 4rem 2rem; text-align: center; } .page-header h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.75rem; } .page-header p { font-size: 1.05rem; opacity: 0.9; max-width: 600px; margin: 0 auto; } /* === Usedom Inselkarte (zinnowitz.html page-header) === */ .usedom-map { margin: 2rem auto 0; max-width: 320px; width: 100%; opacity: 0.82; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); } .usedom-island { fill: rgba(255,255,255,0.18); stroke: rgba(255,255,255,0.70); stroke-width: 1.5; stroke-linejoin: round; } .usedom-pin { fill: var(--accent); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.40)); } .usedom-pin-label { fill: var(--white); font-family: 'Playfair Display', serif; font-size: 11px; font-weight: 700; text-anchor: middle; letter-spacing: 0.05em; } .usedom-geo-label { fill: rgba(255,255,255,0.60); font-family: 'Open Sans', sans-serif; font-size: 9px; font-style: italic; text-anchor: middle; letter-spacing: 0.06em; } .usedom-border-label { fill: rgba(255,255,255,0.45); font-size: 8px; } /* === Gästebrief Welcome Banner === */ .welcome-banner { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color: var(--white); padding: 4rem 2rem; text-align: center; } .welcome-banner h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.75rem; } .welcome-banner p { opacity: 0.92; } /* === Buttons === */ .btn { display: inline-block; padding: 0.875rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.25s; cursor: pointer; border: none; font-family: 'Open Sans', sans-serif; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 4px 15px rgba(227,116,52,0.35); } .btn-primary:hover { background: var(--accent-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(227,116,52,0.45); } .btn-secondary { background: var(--blue); color: var(--white); box-shadow: 0 4px 15px rgba(9,99,126,0.35); } .btn-secondary:hover { background: var(--blue-dark); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(9,99,126,0.45); } /* Bungalow-spezifischer Button: Farbe kommt aus --bungalow des Scope */ .btn-bungalow { background: var(--bungalow, var(--blue)); color: var(--white); box-shadow: 0 4px 15px rgba(0,0,0,0.12); } .btn-bungalow:hover { background: var(--bungalow-dark, var(--blue-dark)); color: var(--white); text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.18); } /* Farbiger oberer Rand für Bungalow-Karten */ .bungalow-card.bu17, .bungalow-card.bu18, .booking-card.bu17, .booking-card.bu18 { border-top: 4px solid var(--bungalow); } .btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); } .btn-outline:hover { background: var(--blue); color: var(--white); text-decoration: none; transform: translateY(-2px); } .btn-white { background: var(--white); color: var(--bungalow, var(--blue)); box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .btn-white:hover { background: var(--bungalow-light, var(--blue-light)); color: var(--bungalow, var(--blue)); text-decoration: none; transform: translateY(-2px); } /* === Layout-Helfer === */ .container { max-width: 1200px; margin: 0 auto; } .text-center { text-align: center; } /* === Utility-Klassen (aus Inline-Styles extrahiert) ===================== */ /* Container-Breiten */ .container--narrow { max-width: 800px; } .container--form { max-width: 700px; } .container--insta { max-width: 900px; text-align: center; } .prose-wrap { max-width: 860px; margin: 0 auto; } /* Abstände oben */ .mt-xs { margin-top: 0.5rem; } .mt-sm { margin-top: 0.75rem; } .mt-md { margin-top: 1.5rem; } .mt-lg { margin-top: 2rem; } .mt-xl { margin-top: 2.5rem; } /* Abstände unten */ .mb-xs { margin-bottom: 0.25rem; } .mb-sm { margin-bottom: 1rem; } .mb-p { margin-bottom: 1.25rem; } .mb-mid { margin-bottom: 1.5rem; } .mb-md { margin-bottom: 2rem; } /* Abstände vertikal */ .my-lg { margin: 2.5rem 0; } /* Textfarbe */ .text-mid { color: var(--text-mid); } .text-note { color: var(--text-mid); font-size: 0.85rem; } .text-note--mt { margin-top: 2rem; } /* Layout */ .btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Bungalow-Inhaltsbereich */ .intro-text { color: var(--text-mid); margin-bottom: 2rem; font-size: 1.05rem; line-height: 1.8; } .section-h3 { font-family: 'Playfair Display', serif; color: var(--text-dark); margin-bottom: 1rem; } /* Bungalow-Komponenten */ .photo-strip--tall { height: 40vh; } .info-box--green { border-left-color: var(--green); } .info-box--green h4 { color: var(--green); } .cta-strip--green { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); } .btn--white { border-color: white; color: white; } /* Datenschutz / Impressum */ .section-title--left { text-align: left; font-size: 1.5rem; } .section-divider--left { margin-left: 0; } /* Gästebrief */ .gast-text { color: var(--text-mid); font-size: 1.05rem; line-height: 1.9; } .text-sig { font-style: italic; color: var(--text-dark); font-size: 1.1rem; } .price-note--center { text-align: center; margin-top: 1.5rem; } .tipp-heading { list-style: none; font-size: 0.78rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.15rem; } .tipp-heading--later { margin-top: 0.65rem; } .faq-ul { margin: 0.5rem 0 0.75rem 1.25rem; line-height: 1.9; color: var(--text-mid); } .faq-ul-last { margin: 0.5rem 0 0 1.25rem; line-height: 1.9; color: var(--text-mid); } section { padding: 4rem 2rem; } .bg-white { background: var(--white); } .bg-sand { background: var(--sand); } .bg-blue { background: var(--blue); color: var(--white); } .bg-blue-light { background: var(--blue-light); } /* === Section-Titel === */ .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); text-align: center; margin-bottom: 0.5rem; color: var(--text-dark); } .section-subtitle { text-align: center; color: var(--text-mid); margin-bottom: 1rem; font-size: 1.05rem; max-width: 700px; margin-left: auto; margin-right: auto; } .section-divider { width: 60px; height: 4px; background: linear-gradient(to right, var(--bungalow, var(--blue)), var(--accent)); margin: 0 auto 2.5rem; border-radius: 2px; } /* === Bungalow-Karten (Startseite) === */ .bungalow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .bungalow-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .bungalow-card:hover { transform: translateY(-5px); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } .card-img { width: 100%; height: 240px; object-fit: cover; } /* === Karussell (Bungalow-Karten Startseite) === */ .card-carousel { position: relative; width: 100%; height: 240px; overflow: hidden; background: var(--sand); } .carousel-track { position: relative; width: 100%; height: 100%; } .carousel-track img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; user-select: none; } .carousel-track img.active { opacity: 1; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background 0.2s, opacity 0.2s; padding: 0; opacity: 0; } .card-carousel:hover .carousel-btn { opacity: 1; } .carousel-btn:hover { background: rgba(0,0,0,0.62); } .carousel-prev { left: 8px; } .carousel-next { right: 8px; } .carousel-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; padding: 0; cursor: pointer; transition: background 0.2s, transform 0.2s; } .carousel-dot.active { background: #fff; transform: scale(1.25); } /* =============================================== */ .card-body { padding: 1.5rem; } .card-body h3 { font-size: 1.4rem; margin-bottom: 0.75rem; } .card-body p { color: var(--text-mid); margin-bottom: 1.25rem; } .badge { display: inline-block; background: var(--bungalow, var(--blue)); color: var(--white); padding: 0.25rem 0.8rem; border-radius: 50px; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.75rem; letter-spacing: 0.03em; } .badge.green { background: var(--green-dark); } /* === Features-Liste === */ .features { list-style: none; margin-bottom: 1.5rem; } .features li { padding: 0.3rem 0; color: var(--text-mid); display: flex; align-items: flex-start; gap: 0.6rem; } .features li::before { content: '✓'; color: var(--bungalow, var(--green)); font-weight: 700; flex-shrink: 0; } /* === Bildergalerie === */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; } .gallery img { width: 100%; height: 250px; object-fit: cover; border-radius: var(--radius); transition: transform 0.3s, box-shadow 0.3s; display: block; } .gallery img { cursor: zoom-in; } .gallery img:hover { transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.18); } /* === Preistabelle === */ .price-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 2rem; } .price-table { width: 100%; border-collapse: collapse; background: var(--white); min-width: 400px; } .price-table thead { background: var(--bungalow, var(--blue)); color: var(--white); } .price-table th, .price-table td { padding: 1rem 1.5rem; text-align: left; } .price-table th { font-weight: 600; } .price-table tbody tr { border-bottom: 1px solid #e0e0e0; transition: background 0.2s; } .price-table tbody tr:last-child { border-bottom: none; } .price-table tbody tr:hover { background: var(--bungalow-light, var(--blue-light)); } .price { font-weight: 700; color: var(--bungalow, var(--blue)); font-size: 1.05rem; } /* Jahres-Trennzeile in Preistabellen */ .price-table .year-row td { background: var(--bungalow-light, var(--blue-light)); color: var(--bungalow-dark, var(--blue-dark)); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.5rem 1.5rem; border-bottom: none; } .price-note { font-size: 0.85rem; color: var(--text-mid); margin-top: 0.5rem; } /* === FAQ-Kategorielabel === */ /* === FAQ-Akkordeon (auf buchung.html – kein Bungalow-Scope) === */ .faq-group { border: none; margin: 0; padding: 0; } .faq-group + .faq-group { border-top: 1px solid rgba(0,0,0,0.07); } .faq-cat { font-size: 1rem; font-weight: 700; color: var(--blue); margin: 0; padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; gap: 0.75rem; } /* Standard-Dreieck ausblenden */ .faq-cat::-webkit-details-marker { display: none; } .faq-cat::marker { display: none; } /* +/− Indikator */ .faq-cat::after { content: '+'; font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--blue); flex-shrink: 0; transition: transform 0.2s ease; } .faq-group[open] > .faq-cat::after { content: '−'; } .faq-cat:hover { color: var(--blue-dark, var(--blue)); opacity: 0.8; } /* Abstand der Info-Boxen innerhalb des geöffneten Blocks */ .faq-group .info-box:first-of-type { margin-top: 0.5rem; } .faq-group .info-box:last-of-type { margin-bottom: 1rem; } /* Erste Gruppe etwas mehr Abstand nach oben */ .faq-group:first-of-type { margin-top: 0.5rem; } /* === Info-Box === */ .info-box { background: var(--bungalow-light, var(--blue-light)); border-left: 4px solid var(--bungalow, var(--blue)); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; } .info-box h4 { color: var(--bungalow, var(--blue)); margin-bottom: 0.4rem; font-size: 1rem; } .info-box p { color: var(--text-mid); font-size: 0.95rem; } /* === USP / Tipp-Karten === */ .tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } /* 4-Spalten-Variante (z.B. 4 Tipp-Karten auf Erleben-Seite) */ .tips-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 800px) { .tips-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .tips-grid { grid-template-columns: 1fr; } } @media (max-width: 500px) { .tips-grid-4 { grid-template-columns: 1fr; } } .tip-card { background: var(--white); padding: 1.75rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--green); } .tip-number { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--green); opacity: 0.25; line-height: 1; margin-bottom: 0.5rem; } .tip-card h4 { margin-bottom: 0.5rem; font-size: 1.1rem; } .tip-card p { color: var(--text-mid); font-size: 0.93rem; } /* === Buchungsoptionen === */ .booking-options { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .booking-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; text-align: center; flex: 1; min-width: 240px; max-width: 360px; } .booking-card h3 { margin-bottom: 0.75rem; color: var(--text-dark); } .booking-card p { color: var(--text-mid); margin-bottom: 1.5rem; font-size: 0.95rem; } /* === Feedback-Formular === */ .feedback-form { background: var(--white); padding: 2.5rem; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 700px; margin: 0 auto; } .form-group { margin-bottom: 2rem; } .form-group label, .form-question { display: block; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-dark); font-size: 0.95rem; } /* ── Emoji-Skala ── */ .emoji-scale { display: flex; gap: 1rem; justify-content: center; padding: 0.5rem 0 0.25rem; flex-wrap: wrap; } .emoji-option { display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; } .emoji-option input[type="radio"] { display: none; } .emoji-icon { font-size: 2.5rem; opacity: 0.3; transition: opacity 0.2s, transform 0.2s; line-height: 1; } .emoji-option.active .emoji-icon, .emoji-option:hover .emoji-icon { opacity: 1; transform: scale(1.2); } /* ── Checkboxen ── */ .checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; } .checkbox-option { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; font-size: 0.93rem; color: var(--text-dark); padding: 0.3rem 0; } .checkbox-option input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; } .freetext-input { margin-top: 0.4rem; width: 100%; padding: 0.625rem 0.875rem; border: 2px solid #e0e0e0; border-radius: var(--radius); font-family: 'Open Sans', sans-serif; font-size: 0.9rem; background: var(--sand); transition: border-color 0.2s; } .freetext-input:focus { border-color: var(--blue); background: var(--white); } .freetext-input:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; } /* ── Stern-Bewertungen ── */ .star-rows { background: var(--sand); border-radius: var(--radius); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .star-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .star-label { min-width: 210px; font-size: 0.93rem; color: var(--text-dark); } .star-rating { display: flex; gap: 0.15rem; } .star { font-size: 1.75rem; color: #ddd; cursor: pointer; transition: color 0.12s, transform 0.12s; line-height: 1; user-select: none; } .star.active { color: #f5a623; } .star:hover { transform: scale(1.15); } /* ── Danke-Nachricht ── */ .feedback-thanks { text-align: center; padding: 3rem 2rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 700px; margin: 0 auto; } .feedback-thanks .thanks-icon { font-size: 3rem; margin-bottom: 1rem; } .feedback-thanks h3 { color: var(--green); font-size: 1.5rem; margin-bottom: 1rem; } .feedback-thanks p { color: var(--text-mid); font-size: 1.05rem; line-height: 1.7; } @media (max-width: 600px) { .star-label { min-width: 120px; font-size: 0.88rem; } .star { font-size: 1.5rem; } .emoji-icon { font-size: 2rem; } .feedback-form { padding: 1.5rem 1rem; } } .form-group textarea, .form-group input[type="text"], .form-group input[type="email"] { width: 100%; padding: 0.875rem 1rem; border: 2px solid #e0e0e0; border-radius: var(--radius); font-family: 'Open Sans', sans-serif; font-size: 0.95rem; transition: border-color 0.2s; background: var(--sand); } .form-group textarea { resize: vertical; min-height: 100px; } .form-group textarea:focus, .form-group input:focus { border-color: var(--blue); background: var(--white); } .form-group textarea:focus-visible, .form-group input:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; } .form-submit { text-align: center; margin-top: 0.5rem; } .privacy-note { font-size: 0.8rem; color: var(--text-mid); margin-top: 1rem; text-align: center; } /* === Gästebrief-Hinweis === */ .hidden-notice { background: #FFF8E1; border: 1px solid #FFD54F; border-radius: var(--radius); padding: 0.75rem 1.25rem; text-align: center; font-size: 0.85rem; color: #795548; margin-bottom: 1rem; } /* === CTA-Streifen === */ .cta-strip { background: linear-gradient(135deg, var(--bungalow, var(--blue)) 0%, var(--bungalow-dark, var(--blue-dark)) 100%); color: var(--white); padding: 3.5rem 2rem; text-align: center; } .cta-strip h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 0.75rem; } .cta-strip p { opacity: 0.9; margin-bottom: 2rem; font-size: 1.05rem; } /* === Karte === */ .map-wrap { border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; } .map-wrap iframe { width: 100%; height: 460px; border: none; display: block; } .map-credit { background: var(--sand); padding: 0.5rem 1rem; font-size: 0.78rem; color: var(--text-mid); text-align: right; } @media (max-width: 600px) { .map-wrap iframe { height: 260px; } } /* === Preisdetail-Link (Buchungsseite) === */ .price-detail-link { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--bungalow, var(--blue)); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; } .price-detail-link:hover { color: var(--bungalow-dark, var(--blue-dark)); border-bottom-color: var(--bungalow-dark, var(--blue-dark)); text-decoration: none; } /* === Instagram === */ .instagram-widget-wrap { margin-top: 1.5rem; margin-bottom: 2rem; } .instagram-follow-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0; } /* === Footer === */ footer { background: var(--text-dark); color: var(--white); padding: 3rem 2rem; text-align: center; } .footer-inner { max-width: 900px; margin: 0 auto; } footer .logo { display: block; margin-bottom: 1rem; font-size: 1.6rem; color: var(--white); } footer .logo span { color: var(--green); } footer p { color: rgba(255,255,255,0.65); margin-bottom: 0.4rem; font-size: 0.9rem; } footer a { color: var(--blue); text-decoration: none; } footer a:hover { text-decoration: underline; } .footer-links { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; } .footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; } .footer-links a:hover { color: var(--white); } .footer-legal { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; align-items: center; } .footer-legal a { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 0.82rem; transition: color 0.2s; } .footer-legal a:hover { color: var(--white); } /* Sprachumschalter im Footer (nur Mobile sichtbar) */ .footer-lang-switch { display: none; align-items: center; gap: 0.4rem; } .footer-lang-switch label { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.55); padding: 0.2rem 0.4rem; border-radius: 4px; transition: all 0.2s; border-bottom: 2px solid transparent; } .footer-lang-switch label:hover { color: var(--white); } .footer-lang-divider { color: rgba(255,255,255,0.25); font-size: 0.85rem; } .footer-copy { margin-top: 1.5rem; font-size: 0.8rem; opacity: 0.4; } /* === Usedom Zufalls-Fotostreifen === */ .photo-strip { position: relative; height: 55vh; min-height: 360px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } .usedom-random-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 8s ease; } .photo-strip:hover .usedom-random-bg { transform: scale(1.04); } .photo-strip-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100% ); } .photo-strip-caption { position: relative; z-index: 2; margin-bottom: 2.5rem; text-align: center; } .photo-strip-caption p { display: inline-block; color: rgba(255,255,255,0.92); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(0,0,0,0.35); padding: 0.4rem 1.25rem; border-radius: 50px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Dreier-Raster auf Startseite */ .photo-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 42vh; min-height: 260px; } .photo-trio .usedom-random-bg { position: relative; height: 100%; transition: transform 0.5s ease; cursor: default; } .photo-trio .usedom-random-bg:hover { transform: scale(1.02); z-index: 1; } @media (max-width: 600px) { .photo-trio { grid-template-columns: 1fr; height: auto; } .photo-trio .usedom-random-bg { height: 35vw; min-height: 160px; } .photo-strip { height: 45vh; } } /* === Inhaltsanker / TOC (Gästebrief) === */ .toc-nav { background: var(--blue-light); border-top: 1px solid rgba(9,99,126,.12); border-bottom: 1px solid rgba(9,99,126,.12); padding: 1.25rem 0; } .toc-list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .toc-link { display: inline-block; padding: .4rem 1.1rem; background: #fff; border: 1.5px solid var(--blue); border-radius: 2rem; color: var(--blue); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .toc-link:hover, .toc-link:focus-visible { background: var(--blue); color: #fff; outline: none; } /* === Lokale Tipps (Gästebrief) === */ .local-tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .local-tip-card { background: var(--sand); border-radius: var(--radius); padding: 1.5rem; border-top: 4px solid var(--green); box-shadow: var(--shadow); } .local-tip-card h4 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--text-dark); margin-bottom: 1rem; } .local-tip-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; } .local-tip-card li { font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; padding-left: 0.75rem; border-left: 2px solid var(--green); } .local-tip-card li strong { color: var(--text-dark); display: block; } .local-tip-card a { color: var(--blue); text-decoration: none; font-size: 0.88rem; } .local-tip-card a:hover { text-decoration: underline; } .local-dist { font-size: 0.8rem; color: var(--green-dark); font-weight: 600; background: rgba(8,131,149,0.15); padding: 0.1rem 0.4rem; border-radius: 50px; margin-left: 0.25rem; } /* === Zinnowitz-Seite: Attraktionskarten === */ /* 9 Items → 3 Spalten (3×3). Kein 2-Spalten-Zwischenschritt (9÷2 = ungrade). */ .attraction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } @media (max-width: 700px) { .attraction-grid { grid-template-columns: 1fr; } } /* 4 Items (Weitere Orte) → 4→2→1 Spalten */ .destination-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; } @media (max-width: 900px) { .destination-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .destination-grid { grid-template-columns: 1fr; } } .attraction-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem 1.5rem; border-top: 4px solid var(--blue); display: flex; flex-direction: column; gap: 0.4rem; transition: transform 0.3s, box-shadow 0.3s; } .attraction-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.13); } .attraction-card.green-top { border-top-color: var(--green); } .attraction-card h4 { font-size: 1.05rem; color: var(--text-dark); margin-bottom: 0.1rem; } .attraction-card p { color: var(--text-mid); font-size: 0.92rem; flex: 1; line-height: 1.65; } .attraction-link { font-size: 0.83rem; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: 0.4rem; display: inline-block; } .attraction-link:hover { color: var(--blue-dark); text-decoration: underline; } /* === Zinnowitz-Seite: Saisonkalender === */ /* 3 Items → 3 Spalten (1×3). Kein 2-Spalten-Zwischenschritt (3÷2 = ungrade). */ .season-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; } @media (max-width: 700px) { .season-grid { grid-template-columns: 1fr; } } .season-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .season-card-header { padding: 1.25rem 1rem 1rem; color: var(--white); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; /* Gleiche Höhe für alle Saison-Karten (auch ohne Badge) */ min-height: 9rem; justify-content: center; } .season-card-header.spring { background: linear-gradient(135deg, #5CAB7D 0%, #91C6BC 100%); } .season-card-header.summer { background: linear-gradient(135deg, #088395 0%, #066573 100%); } .season-card-header.autumn { background: linear-gradient(135deg, #E37434 0%, #c45e1e 100%); } .season-card-header.winter { background: linear-gradient(135deg, #7B9BB0 0%, #546E7A 100%); } .season-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; display: block; } .season-months { font-size: 0.82rem; opacity: 0.88; display: block; margin-top: 0.1rem; } .season-offseason-badge { display: inline-block; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.45); border-radius: 50px; padding: 0.18rem 0.65rem; font-size: 0.7rem; font-weight: 600; margin-top: 0.5rem; letter-spacing: 0.02em; } .season-card-body { padding: 1.25rem; } .season-events-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .season-events-list li { font-size: 0.87rem; color: var(--text-mid); padding-left: 1rem; position: relative; line-height: 1.55; } .season-events-list li::before { content: '›'; position: absolute; left: 0; color: var(--blue); font-weight: 700; } .season-events-list li strong { color: var(--text-dark); display: block; font-size: 0.88rem; } .season-events-list li.event-highlight::before { color: var(--accent); } .season-events-list li.event-highlight strong { color: var(--accent-dark); } /* === Zinnowitz-Seite: Externe Links === */ /* 8 Items → 4→2→1 Spalten (8÷4=2, 8÷2=4 – immer gerade). */ .ext-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; } @media (max-width: 800px) { .ext-links-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ext-links-grid { grid-template-columns: 1fr; } } .ext-link-card { background: var(--sand); border-radius: var(--radius); padding: 1.25rem 1.5rem; border-left: 4px solid var(--blue); display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: var(--shadow); } .ext-link-card:hover { background: var(--blue-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(9,99,126,0.2); text-decoration: none; } .ext-link-icon { font-size: 1.4rem; line-height: 1; margin-bottom: 0.1rem; } .ext-link-name { font-weight: 700; font-size: 0.95rem; color: var(--text-dark); } .ext-link-desc { font-size: 0.82rem; color: var(--text-mid); line-height: 1.4; } .ext-link-url { font-size: 0.78rem; color: var(--blue); margin-top: 0.2rem; } /* === Gästebrief: Kultur-Empfehlungen === */ /* 9 Items → 3→1 Spalten (9÷3=3 – gerade; 2-Spalten-Zwischenschritt entfällt). */ .kultur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; } @media (max-width: 700px) { .kultur-grid { grid-template-columns: 1fr; } } .kultur-card { background: var(--sand); border-radius: var(--radius); padding: 1.35rem 1.25rem; border-top: 4px solid var(--blue); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.4rem; } .kultur-card h4 { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--text-dark); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; line-height: 1.3; } .kultur-card p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; flex: 1; } .kultur-card a { font-size: 0.83rem; font-weight: 600; color: var(--blue); text-decoration: none; } .kultur-card a:hover { text-decoration: underline; } .kultur-meta { font-size: 0.78rem; color: var(--text-mid); border-top: 1px solid rgba(44, 62, 80, 0.1); padding-top: 0.55rem; margin-top: 0.25rem; line-height: 1.65; } /* === Strand-Abenteuer Spiel === */ .game-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1.5rem; } #beach-game-canvas { width: 100%; max-width: 640px; height: auto; border-radius: var(--radius); box-shadow: 0 4px 24px rgba(9,99,126,0.18); display: block; cursor: pointer; touch-action: manipulation; } .game-controls { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .game-hint { font-size: 0.82rem; color: var(--text-mid); text-align: center; margin: 0; } /* === Responsive === */ @media (max-width: 768px) { .lang-switch { display: none; } .footer-lang-switch { display: flex; } .nav-container { padding: 0.875rem 1rem; } nav ul { gap: 1rem; } nav ul a { font-size: 0.85rem; } section { padding: 3rem 1rem; } .hero { height: 60vh; } .gallery { grid-template-columns: 1fr; } .booking-options { flex-direction: column; align-items: center; } .booking-card { max-width: 100%; } .feedback-form { padding: 1.5rem 1rem; } .price-table th, .price-table td { padding: 0.75rem 1rem; } } @media (max-width: 480px) { .logo { font-size: 1.15rem; } nav ul a { font-size: 0.8rem; } nav ul { gap: 0.75rem; } .hero-content h1 { font-size: 1.75rem; } } /* ══════════════════════════════════════════════ LIGHTBOX / KARUSSELL ══════════════════════════════════════════════ */ /* Scroll-Lock wenn Lightbox offen */ body.lb-scroll-lock { overflow: hidden; } #lightbox { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.92); align-items: center; justify-content: center; gap: 1rem; padding: 1rem; } #lightbox.lb-open { display: flex; } /* Bild-Container */ .lb-img-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; max-height: 90vh; } .lb-img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,0.6); display: block; user-select: none; } /* Navigations-Buttons (Prev / Next) */ .lb-prev, .lb-next { flex: 0 0 auto; background: rgba(255,255,255,0.12); border: none; color: var(--white); font-size: 1.75rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.25); } /* Schließen-Button */ .lb-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,0.12); border: none; color: var(--white); font-size: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; } .lb-close:hover { background: rgba(255,255,255,0.25); } /* Zähler */ .lb-counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-family: 'Open Sans', sans-serif; font-size: 0.85rem; pointer-events: none; } /* Tastatur-Fokus */ .lb-prev:focus-visible, .lb-next:focus-visible, .lb-close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; } /* Schmale Bildschirme: Buttons kleiner */ @media (max-width: 480px) { .lb-prev, .lb-next { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; } } /* ══════════════════════════════════════════════ BARRIEREFREIHEIT / ACCESSIBILITY ══════════════════════════════════════════════ */ /* Screen-reader-only (WCAG-konform, nicht sichtbar, aber für Screenreader zugänglich) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip-Link: unsichtbar, wird bei Fokus (Tab) eingeblendet */ .skip-link { position: fixed; top: 0; left: 1rem; z-index: 9999; background: var(--blue); color: var(--white); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius); font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 0.95rem; text-decoration: none; transform: translateY(-110%); transition: transform 0.15s; } .skip-link:focus { transform: translateY(0); } /* Sichtbare Fokus-Indikatoren für Tastaturnavigation */ a:focus-visible, button:focus-visible, .btn:focus-visible, .lang-switch label:focus-visible, .footer-lang-switch label:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }