/* ========================================================================== Vermietung Nord — Design Tokens Palette: Wattenmeer-Blau, Sand, Seegras, Treibholz-Orange ========================================================================== */ /* Google Fonts werden performant im von index.html/buchen.html geladen (preconnect + display=swap) */ :root{ --deep: #203846; /* Navy aus dem Koog-Hostel-Logo */ --deep-2: #16262F; --sand: #EFE9DC; /* helles Sand, dezent wärmer als reines Weiß */ --sand-2: #E3D8BE; --seagrass: #7FA69B; /* Seegras/Salzwiese */ --driftwood: #B69656; /* Gold-Akzent aus dem Logo ("01.08."), für Flächen/Linien */ --driftwood-text: #8A6A3D; /* dunklere Variante für Text auf hellem Grund (Kontrast) */ --ink: #1C2B30; --paper: #FBFBF9; --display: 'Fraunces', serif; --body: 'Work Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', monospace; --maxw: 1180px; --radius: 2px; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } body{ font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } button{ font-family:inherit; cursor:pointer; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } .eyebrow{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--driftwood-text); } h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.08; color:var(--deep-2); } h1{ font-size:clamp(2.4rem, 5.5vw, 4.6rem); font-weight:500; } h2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); } h3{ font-size:1.25rem; } p.lede{ font-size:1.1rem; color:#3c4a48; max-width:46ch; } .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border:1px solid var(--ink); border-radius:var(--radius); font-family:var(--mono); font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; background:transparent; color:var(--ink); transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease; } .btn:hover{ background:var(--ink); color:var(--paper); } .btn:focus-visible{ outline:2px solid var(--driftwood); outline-offset:3px; } .btn.primary{ background:var(--driftwood); border-color:var(--driftwood); color:var(--ink); font-weight:600; } .btn.primary:hover{ background:var(--deep-2); border-color:var(--deep-2); color:var(--paper); transform:translateY(-1px); } /* ---------- Header ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(251,249,243,0.92); backdrop-filter:blur(6px); border-bottom:1px solid rgba(22,34,31,0.08); } .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; } .logo{ font-family:var(--display); font-size:1.3rem; font-weight:600; color:var(--deep-2); display:flex; align-items:center; gap:10px; } .logo span{ color:var(--driftwood-text); } .logo img{ height:80px; width:auto; display:block; } footer .logo img{ height:96px; } .nav-links{ display:flex; gap:28px; font-size:0.92rem; font-weight:500; } .nav-links a{ position:relative; } .nav-links a::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--driftwood); transition:width 0.2s ease; } .nav-links a:hover::after{ width:100%; } .nav-cta{ display:flex; align-items:center; gap:18px; } .burger{ display:none; background:none; border:none; } @media (max-width:820px){ .nav-links{ display:none; } .burger{ display:block; } } /* ---------- Hero ---------- */ .hero{ position:relative; padding:72px 0 0; background:var(--sand); } .hero-inner{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; } .hero-text .eyebrow{ margin-bottom:18px; } .hero-text p.lede{ margin:20px 0 30px; color:var(--deep-2); } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } /* Filigrane Wellenlinie statt vollflächigem Balken */ .hero-wave{ margin-top:60px; line-height:0; } .hero-wave svg{ width:100%; height:32px; display:block; } .hero-wave path{ fill:none; stroke:var(--deep); stroke-width:1.3; opacity:0.32; animation:tide 9s ease-in-out infinite alternate; } @keyframes tide{ 0%{ d:path('M0,16 C 200,4 400,28 600,16 C 800,4 1000,28 1200,16'); } 100%{ d:path('M0,16 C 200,28 400,4 600,16 C 800,28 1000,4 1200,16'); } } .hero-figure{ display:flex; flex-direction:column; } .hero-photo-frame{ border:1px solid rgba(32,56,70,0.16); background:var(--paper); padding:8px; } .hero-photo-frame img{ width:100%; height:320px; object-fit:cover; display:block; } .hero-photo-caption{ margin-top:12px; display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color:#5c6b68; } /* Quick-search teaser bar */ .search-teaser{ position:relative; z-index:3; background:var(--paper); border:1px solid rgba(22,34,31,0.1); padding:22px 26px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:18px; margin:-26px auto 0; max-width:var(--maxw); box-shadow:0 20px 40px rgba(15,30,28,0.1); } .search-teaser .field{ display:flex; flex-direction:column; gap:6px; } .search-teaser label{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:#5c6b68; } .search-teaser input, .search-teaser select{ border:none; border-bottom:1px solid rgba(22,34,31,0.25); font-family:var(--body); font-size:0.95rem; padding:6px 2px; background:transparent; } .search-teaser input:focus, .search-teaser select:focus{ outline:none; border-bottom-color:var(--driftwood); } @media (max-width:820px){ .hero-inner{ grid-template-columns:1fr; } .hero-figure{ display:none; } .search-teaser{ grid-template-columns:1fr; margin-top:20px; } } /* ---------- Sections shared ---------- */ section{ padding:100px 0; } .section-head{ max-width:640px; margin-bottom:56px; } .section-head .eyebrow{ margin-bottom:14px; } /* ---------- Unterkünfte Grid ---------- */ .stay-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:rgba(22,34,31,0.12); border:1px solid rgba(22,34,31,0.12); } .stay-card{ background:var(--paper); padding:32px 26px 30px; display:flex; flex-direction:column; gap:14px; min-height:360px; } .stay-card .tag{ font-family:var(--mono); font-size:0.7rem; color:var(--driftwood-text); letter-spacing:0.08em; text-transform:uppercase; } .stay-card .thumb{ height:150px; background:var(--sand-2); display:flex; align-items:center; justify-content:center; color:#6b6250; font-family:var(--mono); font-size:0.72rem; text-align:center; padding:10px; border:1px dashed rgba(22,34,31,0.25); } .stay-card p{ font-size:0.92rem; color:#42504d; flex-grow:1; } .stay-card .price{ font-family:var(--mono); font-size:0.95rem; color:var(--deep-2); } @media (max-width:980px){ .stay-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ .stay-grid{ grid-template-columns:1fr; } } /* ---------- Feature icon grid (Warum bei uns) ---------- */ .features{ background:var(--deep); color:var(--sand); } .features .section-head h2, .features .eyebrow{ color:var(--sand); } .features .eyebrow{ color:#c9a06e; } .feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; } .feature-item{ display:flex; flex-direction:column; gap:12px; } .feature-item svg{ width:30px; height:30px; color:var(--driftwood); } .feature-item h3{ color:var(--sand); font-size:1.05rem; } .feature-item p{ font-size:0.88rem; color:#c7d3cf; } @media (max-width:980px){ .feature-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } } /* ---------- Gallery ---------- */ .gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:140px; gap:8px; } .gallery-grid .g-item{ background:var(--sand-2); border:1px dashed rgba(22,34,31,0.25); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.7rem; color:#6b6250; text-align:center; } .gallery-grid .g-item.big{ grid-row:span 2; grid-column:span 2; } .gallery-grid-4{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:180px; } @media (max-width:820px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } .gallery-grid .g-item.big{ grid-column:span 2; grid-row:span 1; } .gallery-grid-4{ grid-template-columns:repeat(2,1fr); } } /* ---------- FAQ ---------- */ .faq-item{ border-top:1px solid rgba(22,34,31,0.15); } .faq-item:last-child{ border-bottom:1px solid rgba(22,34,31,0.15); } .faq-q{ width:100%; background:none; border:none; text-align:left; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-size:1.05rem; color:var(--deep-2); } .faq-q .icon{ font-family:var(--mono); transition:transform 0.2s ease; } .faq-item.open .faq-q .icon{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height 0.25s ease; } .faq-item.open .faq-a{ max-height:240px; } .faq-a p{ padding:0 4px 22px; color:#42504d; font-size:0.94rem; max-width:60ch; } /* ---------- Kontakt ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; } .contact-info h3{ margin-bottom:8px; } .contact-info .block{ margin-bottom:26px; } .contact-info .block .label{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; color:var(--driftwood-text); letter-spacing:0.08em; margin-bottom:6px; } .map-embed{ position:relative; background:var(--sand-2); min-height:340px; border:1px solid rgba(22,34,31,0.12); overflow:hidden; } .map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; } .map-consent{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:24px; background:var(--sand-2); } .map-consent p{ max-width:36ch; font-size:0.9rem; color:#42504d; } .map-consent p strong{ font-family:var(--display); font-size:1.1rem; color:var(--deep-2); } @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } } /* ---------- Footer ---------- */ footer{ background:var(--deep-2); color:#c7d3cf; padding:50px 0 30px; font-size:0.85rem; } .footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:30px; } footer a:hover{ color:var(--driftwood); } .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:0.72rem; color:#8fa19d; } /* ---------- Buchen page ---------- */ .booking-hero{ background:var(--deep); color:var(--sand); padding:70px 0 50px; } .booking-hero .eyebrow{ color:#c9a06e; } .booking-hero h1{ color:var(--sand); font-size:clamp(2rem,4vw,3rem); } .booking-frame-wrap{ padding:0 0 100px; } .booking-frame-wrap .wrap{ max-width:960px; } .booking-note{ display:flex; gap:12px; align-items:flex-start; background:#F3ECDA; border:1px solid rgba(22,34,31,0.12); padding:16px 18px; margin-bottom:24px; font-size:0.88rem; color:#4a4230; } iframe.booking-embed{ width:100%; min-height:1400px; border:1px solid rgba(22,34,31,0.15); background:var(--paper); } .booking-fallback{ margin-top:18px; font-size:0.88rem; color:#5c6b68; }