/* ===================== Scandinavian Clean CSS for AltstadtTraum Reisen ===================== */ /********************* * CSS RESET & NORMALIZE *********************/ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; box-sizing: border-box; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1.6; background-color: #efede5; min-height: 100vh; font-family: 'Open Sans', Arial, sans-serif; color: #16475e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video { max-width: 100%; display: block; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; transition: color .15s; } a:focus { outline: 2px solid #f8b400; outline-offset: 2px; } button, input, select, textarea { font: inherit; } button { background: none; border: none; cursor: pointer; } /********************* * FONT IMPORT (*not required in this CSS, to be linked in HTML *). * Fallbacks included in font-family. *********************/ /********************* * ROOT VARIABLES *********************/ :root { --color-primary: #16475e; --color-secondary: #f8b400; --color-accent: #efede5; --color-background: #fffdfa; --color-grey: #dedbcf; --color-dark: #183341; --color-card-bg: #fff; --color-border: #e2e1d6; --color-shadow: 0 2px 24px 0 rgba(17, 38, 56, .09); --color-shadow-hover: 0 4px 24px 0 rgba(17, 38, 56, .15); --radius-l: 20px; --radius-m: 12px; --radius-s: 7px; --font-display: 'Lora', serif; --font-body: 'Open Sans', Arial, sans-serif; --transition-fast: .17s cubic-bezier(.72,.09,.33,1.03); --transition-medium: .3s cubic-bezier(.72,.09,.33,1.03); --transition-slow: .6s cubic-bezier(.46,0,.13,1); } /********************* * LAYOUT CONTAINERS *********************/ .container { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .content-wrapper { display: flex; flex-direction: column; gap: 28px; } @media (max-width: 768px) { .container { padding-left: 14px; padding-right: 14px; } .content-wrapper { gap: 20px; } } /********************* * HEADER & NAV *********************/ header { width: 100%; background: var(--color-card-bg); box-shadow: var(--color-shadow); position: relative; z-index: 15; } header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; } .logo-link img { height: 42px; width: auto; display: block; } .main-nav { display: flex; gap: 28px; align-items: center; } .main-nav a { font-family: var(--font-body); font-size: 16px; color: var(--color-dark); padding: 7px 0; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .main-nav a:hover, .main-nav a:focus { color: var(--color-primary); border-bottom: 2px solid var(--color-secondary); } .cta-primary { display: inline-block; background: var(--color-secondary); color: var(--color-primary); font-family: var(--font-display); font-weight: 600; font-size: 17px; padding: 12px 30px; border-radius: var(--radius-m); box-shadow: var(--color-shadow); letter-spacing: 0.02em; border: none; text-align: center; margin-left: 10px; transition: background var(--transition-medium), color var(--transition-medium), box-shadow var(--transition-fast); } .cta-primary:hover, .cta-primary:focus { background: var(--color-primary); color: var(--color-secondary); box-shadow: 0 3px 18px 0 rgba(17,38,56,.17); } .mobile-menu-toggle { display: none; font-size: 32px; background: var(--color-accent); color: var(--color-primary); border-radius: var(--radius-s); padding: 4px 14px; border: 1.5px solid var(--color-border); transition: background .2s; } .mobile-menu-toggle:hover, .mobile-menu-toggle:focus { background: var(--color-secondary); color: var(--color-dark); } /******************** * MOBILE NAV! ********************/ @media (max-width: 980px) { .main-nav { display: none; } .cta-primary { display: none; } .mobile-menu-toggle { display: block; } } .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-card-bg); z-index: 101; transform: translateX(-100%); transition: transform var(--transition-medium), box-shadow var(--transition-medium); box-shadow: 0 0 0 rgba(0,0,0,0); display: flex; flex-direction: column; align-items: flex-start; padding: 32px 22px 24px 22px; gap: 32px; } .mobile-menu.open { transform: translateX(0); box-shadow: 0 3px 32px 0 rgba(22,71,94, .24); } .mobile-menu-close { font-size: 30px; align-self: flex-end; background: none; border: none; color: var(--color-primary); margin-bottom: 18px; transition: color .16s; border-radius: var(--radius-s); padding: 5px 12px; } .mobile-menu-close:hover, .mobile-menu-close:focus { background: var(--color-secondary); color: var(--color-dark); } .mobile-nav { display: flex; flex-direction: column; gap: 18px; width: 100vw; max-width: 360px; } .mobile-nav a { font-size: 18px; color: var(--color-primary); padding: 11px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s, background .15s; border-radius: var(--radius-s); font-family: var(--font-display); letter-spacing: 0.01em; } .mobile-nav a:hover, .mobile-nav a:focus { color: var(--color-secondary); background: var(--color-accent); border-bottom: 2px solid var(--color-secondary); } /******************** * HERO SECTION ********************/ .hero { width: 100%; min-height: 310px; background: var(--color-accent); border-bottom: 2px solid var(--color-border); display: flex; align-items: center; margin-bottom: 60px; padding: 40px 0 0 0; } .hero .container { display: flex; flex-direction: column; align-items: flex-start; } .hero h1 { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--color-primary); margin-bottom: 14px; line-height: 1.13; } .hero .subheadline { font-size: 1.1rem; color: var(--color-dark); font-family: var(--font-body); margin-bottom: 22px; opacity: 0.92; } @media (max-width: 768px) { .hero { min-height: unset; padding: 26px 0 0 0; margin-bottom: 38px; } .hero h1 { font-size: 1.27rem; margin-bottom: 8px; } .hero .subheadline { font-size: .99rem; margin-bottom: 15px; } } /******************** * GENERAL TYPOGRAPHY ********************/ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); line-height: 1.13; } h1 { font-size: 2.3rem; margin-bottom: 12px; } h2 { font-size: 1.6rem; margin-bottom: 9px; } h3 { font-size: 1.19rem; margin-bottom: 5px; } h4 { font-size: 1.05rem; } p, ul li, ol li, address { font-family: var(--font-body); font-size: 16px; color: var(--color-dark); } .text-section h2,h3,h4 { margin-top: 22px; } @media (max-width:768px){ h1{ font-size: 1.27rem; } h2{ font-size: 1.075rem; } h3{ font-size: .995rem; } p, ul li, ol li, address{ font-size: 15px; } } /************************ * MANDATORY SPACING & PATTERNS ************************/ .section { margin-bottom: 60px; padding: 40px 20px; background: none; } .card-container { display: flex; flex-wrap: wrap; gap: 24px; } .card { margin-bottom: 20px; position: relative; background: var(--color-card-bg); box-shadow: var(--color-shadow); border-radius: var(--radius-m); padding: 30px 22px; transition: box-shadow .16s; } .card:hover { box-shadow: var(--color-shadow-hover); } .content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } .text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .testimonial-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--color-card-bg); border-radius: var(--radius-m); box-shadow: var(--color-shadow); padding: 20px; margin-bottom: 20px; border-left: 5px solid var(--color-secondary); max-width: 560px; transition: box-shadow .19s, border-color .18s; } .testimonial-card:hover { box-shadow: var(--color-shadow-hover); border-color: var(--color-primary); } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } @media (max-width:768px){ .section { padding: 24px 7px; margin-bottom: 36px; } .card-container { gap: 13px; } .card { padding: 17px 9px; margin-bottom: 12px; } .content-grid, .text-image-section { gap:14px; } .testimonial-card { padding: 13px; gap: 13px; max-width: 95vw; } .feature-item { gap: 8px; } } /*********************** * FEATURES SECTION (list) ***********************/ .features { margin-bottom: 60px; padding: 40px 0; background: var(--color-background); } .features h2 { margin-bottom: 18px; } .feature-list { display: flex; gap: 26px; flex-wrap: wrap; justify-content: flex-start; } .feature-list li { flex: 1 1 220px; min-width: 180px; background: var(--color-card-bg); border-radius: var(--radius-m); box-shadow: var(--color-shadow); padding: 24px 16px; margin-bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; transition: box-shadow var(--transition-fast); } .feature-list li:hover, .feature-list li:focus-within { box-shadow: var(--color-shadow-hover); } .feature-list img { height: 42px; width: 42px; margin-bottom: 11px; } .feature-list h3 { font-size: 18px; margin: 0 0 6px 0; } .feature-list p { color: var(--color-dark); font-size: 15px; } @media (max-width:920px){ .feature-list { gap: 15px; } } @media (max-width:768px){ .features { padding: 22px 0; margin-bottom: 35px; } .feature-list { flex-direction: column; gap: 8px; } .feature-list li { min-width: 0; padding: 18px 7px; } } /************************ * SERVICES & TOUR LISTING ************************/ .services { margin-bottom: 60px; padding: 40px 0; background: none; } .services h2, .services h3 { margin-bottom: 10px; } .service-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; } .service-list li { background: var(--color-card-bg); border-radius: var(--radius-m); box-shadow: var(--color-shadow); padding: 22px 18px; margin-bottom: 20px; min-width: 230px; flex: 1 1 250px; transition: box-shadow var(--transition-fast), transform var(--transition-fast); display: flex; flex-direction: column; gap: 7px; border-left: 4px solid var(--color-primary); } .service-list li:hover { box-shadow: var(--color-shadow-hover); transform: translateY(-2px) scale(1.015); border-left: 4px solid var(--color-secondary); } .service-list h3 { font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; } .service-list h3 span { font-size: 14px; color: var(--color-secondary); font-weight: 500; margin-left: 10px; } @media (max-width:768px) { .service-list { flex-direction: column; gap: 8px; } .service-list li { min-width:0; padding: 14px 7px; } } /************************ * PRICING TABLE & INCLUDED SERVICES ************************/ .pricing-table { width: 100%; overflow-x: auto; margin-bottom: 28px; } .pricing-table table { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--color-card-bg); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--color-shadow); } .pricing-table th, .pricing-table td { padding: 16px 18px; border-bottom: 1px solid var(--color-border); text-align: left; } .pricing-table th { background: var(--color-accent); color: var(--color-primary); font-family: var(--font-display); font-weight: 600; } .pricing-table tr:last-child td { border-bottom: none; } @media(max-width:768px){ .pricing-table table, .pricing-table th, .pricing-table td { font-size: 14.5px; padding: 9px 7px; } } .included-services { background: var(--color-accent); border-radius: var(--radius-s); padding: 18px 16px; margin-bottom: 22px; box-shadow: 0 1px 10px 0 rgba(22,71,94, .04); } .included-services h3 { font-size: 1.1rem; margin-bottom: 7px; } .included-services ul li { font-size: 15px; color: var(--color-primary); margin-bottom: 4px; } /************************ * THEMATISCHE & FAQ ************************/ .thematic-overview, .faq-list { background: var(--color-card-bg); border-radius: var(--radius-s); padding: 19px 16px; box-shadow: var(--color-shadow); } .thematic-overview h3{ font-size: 1.07rem; color: var(--color-primary); margin-bottom: 5px; } .faq-list h3{ font-size: 16px; color: var(--color-secondary); font-family: var(--font-display); margin-top: 16px; margin-bottom: 5px; } .faq-list p, .faq-list ul li{ color: var(--color-dark); font-size: 15px; margin-bottom: 0; } /************************ * CARDS & HIGHLIGHTS ************************/ .card-content { display: flex; flex-direction: column; justify-content: center; gap: 13px; } .highlighted-tours { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 34px; } .story-snippets { background: var(--color-accent); padding: 18px 15px; border-radius: var(--radius-m); box-shadow: 0 2px 12px 0 rgba(17,38,56,.08); min-width: 220px; flex: 1 1 260px; } @media(max-width:768px){ .highlighted-tours{ flex-direction:column; gap:13px; } .story-snippets{ min-width:0; } } /************************ * TESTIMONIALS & RATING ************************/ .testimonials { margin-bottom: 60px; padding: 28px 0 0 0; } .testimonials h2 { margin-bottom: 18px; } .testimonial-card { color: #183341; background: #fff;; border-left: 5px solid var(--color-secondary); box-shadow: var(--color-shadow); font-family: var(--font-body); font-size: 1rem; margin-bottom: 20px; padding: 20px; border-radius: var(--radius-m); } .testimonial-card p { font-style: italic; color: #1f2d38; margin-bottom: 6px; font-family: var(--font-display); font-size: 1.05em; } .testimonial-card span { display: block; font-size: 14px; color: var(--color-primary); font-family: var(--font-body); } .star-rating { display: flex; align-items: center; gap: 7px; margin-top: 8px; } .star-rating img { height: 22px; width: 22px; filter: brightness(1) saturate(1.4); } @media (max-width: 768px) { .testimonials { margin-bottom: 30px; padding-top: 8px; } .testimonial-card { padding: 13px 8px; margin-bottom: 14px; font-size: .96rem; } .star-rating img { height:19px; width:19px; } } /************************ * CONTACT & ADDRESS ************************/ .contact .cta-primary, .features .cta-primary { margin-top: 13px; } .contact-details { font-size: 16px; color: var(--color-primary); margin-bottom: 18px; } .map-snippet { margin-top: 8px; background: var(--color-accent); padding: 10px 16px; border-radius: var(--radius-s); font-size: 14px; color: var(--color-primary); font-style: italic; } /************************ * FOOTER ************************/ footer { background: var(--color-primary); color: #fffefa; padding: 40px 0 24px 0; margin-top: 60px; } footer .container { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; justify-content: space-between; } .footer-logo img { height: 48px; margin-bottom: 11px; filter: grayscale(.14); } .footer-nav { display: flex; flex-direction: column; gap: 8px; } .footer-nav a { color: #fff; font-family: var(--font-body); font-size: 15px; transition: color .15s; } .footer-nav a:hover, .footer-nav a:focus { color: var(--color-secondary); } .footer-contact { font-family: var(--font-body); font-size: 15px; color: #e9f0f3; display: flex; flex-direction: column; gap: 4px; } .footer-contact a { color: var(--color-secondary); text-decoration: underline dotted; } .footer-copy { font-size: 13px; color: #e4f5f5; margin-top: 21px; width: 100%; text-align: right; } @media(max-width:768px){ footer .container{ flex-direction: column; gap: 14px; align-items: flex-start; } .footer-logo img{ height:36px; } .footer-copy{ text-align:left;margin-top:10px; } } /************************ * LEGAL/TEXT SECTIONS ************************/ .legal{ background: var(--color-background); margin-bottom: 48px; padding: 40px 0; } .legal .content-wrapper{ gap: 18px; } .text-section{ margin-bottom: 20px; } .text-section ul{ margin-left: 19px; margin-top: 12px; list-style: disc inside; } .text-section ul li{ color: var(--color-dark); font-size: 15px; margin-bottom: 7px; } .text-section h2{ margin-bottom:7px; } @media(max-width:768px){ .legal{padding: 17px 0;} .text-section ul{ margin-left:10px; } } /************************* * THANK YOU PAGE *************************/ .thankyou-section .cta-primary{ margin-top: 25px; } /************************* * OTHER MISC. CLASSES *************************/ .featured-fact { background: var(--color-secondary); color: var(--color-primary); font-family: var(--font-body); border-radius: var(--radius-s); box-shadow: 0 1px 10px 0 rgba(22,71,94, .07); padding: 13px 18px; font-size: 1rem; margin-top: 8px; margin-bottom: 14px; } @media(max-width:768px){ .featured-fact{ font-size:.97em; padding:8px 8px; } } /************************* * BUTTONS & LINKS *************************/ button, .cta-primary { cursor: pointer; outline: none; border: none; } /************************* * HOVER/FOCUS TRANSITIONS *************************/ a, button, .cta-primary, .main-nav a, .mobile-nav a { transition: color .15s, background .18s, border-color .18s, box-shadow .16s; } /************************* * RESPONSIVENESS *************************/ @media (max-width: 1200px) { .container{ max-width: 100%; } } @media (max-width: 900px) { .feature-list li, .service-list li { flex: 1 1 100%; } .footer-copy{ font-size:12px; } } @media (max-width: 600px) { .footer-copy,.footer-contact,.footer-nav,.footer-logo{ font-size:12px; } .card,.service-list li,.feature-list li, .testimonial-card { padding: 10px 3px; } } /************************* * SCROLLBAR *************************/ body, .mobile-menu, .pricing-table table{ scrollbar-color: var(--color-secondary) var(--color-accent); scrollbar-width: thin; } body::-webkit-scrollbar { width: 8px; background: var(--color-accent); } body::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 5px; } /************************* * MICRO-INTERACTIONS *************************/ .card, .feature-list li, .service-list li, .testimonial-card { transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); } .card:hover, .service-list li:hover, .feature-list li:hover, .testimonial-card:hover { box-shadow: var(--color-shadow-hover); transform: translateY(-3px) scale(1.01); } /************************* * COOKIE CONSENT BANNER *************************/ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; width: 100vw; display: flex; align-items: flex-start; justify-content: center; padding: 0; } .cookie-banner__inner { background: #fffdfa; color: var(--color-dark); border: 1.5px solid var(--color-border); box-shadow: 0 -3px 24px 0 rgba(17,38,56, .09); padding: 18px 20px 19px 22px; border-radius: var(--radius-m) var(--radius-m) 0 0; margin-bottom: 0; display: flex; flex-direction: column; max-width: 510px; min-width: 0; gap: 18px; font-size: 15px; animation: cookiefadein var(--transition-slow); } @media (max-width: 600px) { .cookie-banner__inner { padding: 13px 9px 13px 9px; font-size: 14px; } } @keyframes cookiefadein { 0% { opacity: 0; transform: translateY(60px); } 60% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .cookie-btn { font-family: var(--font-display); font-size: 15px; font-weight: 600; border: none; border-radius: var(--radius-s); padding: 8px 26px; cursor: pointer; box-shadow: 0 1px 8px 0 rgba(22,71,94,.08); margin-right: 3px; transition: background .16s, color .16s, box-shadow .18s; } .cookie-btn.accept { background: var(--color-secondary); color: var(--color-primary); } .cookie-btn.accept:hover, .cookie-btn.accept:focus { background: var(--color-primary); color: var(--color-secondary); } .cookie-btn.reject { background: #e1e1e1; color: var(--color-dark); } .cookie-btn.reject:hover, .cookie-btn.reject:focus { background: #cfcece; color: var(--color-primary); } .cookie-btn.settings { background: none; color: var(--color-primary); border: 1.5px solid var(--color-secondary); } .cookie-btn.settings:hover, .cookie-btn.settings:focus { background: var(--color-secondary); color: var(--color-primary); } /************************* * COOKIE MODAL POPUP *************************/ .cookie-modal { position: fixed; bottom: 0; left: 0; right: 0; top: 0; background: rgba(42,49,52,0.25); z-index: 201; display: flex; align-items: center; justify-content: center; animation: cookiemodalfadein var(--transition-medium); } @keyframes cookiemodalfadein { 0% { opacity: 0; } 100% { opacity: 1; } } .cookie-modal__box { background: #fffdfa; border-radius: var(--radius-m); box-shadow: 0 2px 26px 0 rgba(17,38,56,.14); max-width: 446px; min-width: 0; padding: 34px 28px 28px 28px; display: flex; flex-direction: column; gap: 25px; animation: cookiefadein var(--transition-slow); } @media (max-width:520px) { .cookie-modal__box { padding: 17px 7px 18px 7px; } } .cookie-category { display: flex; align-items: center; justify-content: space-between; background: var(--color-accent); border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 8px; gap: 12px; } .cookie-category:last-child{ margin-bottom:0; } .cookie-category label { font-size: 15px; color: var(--color-primary); font-family: var(--font-display); font-weight: 600; } .cookie-category .switch { position: relative; display: inline-block; width: 38px; height: 23px; } .cookie-category .switch input { opacity: 0; width: 0; height: 0; } .cookie-category .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #e6e6e6; border-radius: 23px; transition: background .18s; } .cookie-category .switch input:checked + .slider { background: var(--color-secondary); } .cookie-category .slider:before { position: absolute; content: ''; height: 17px; width: 17px; left: 3.5px; bottom: 3px; background: var(--color-primary); border-radius: 50%; transition: transform .18s, background .18s; } .cookie-category .switch input:checked + .slider:before { transform: translateX(13px); background: var(--color-primary); } .cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .cookie-modal__close { align-self: flex-end; font-size: 25px; background: none; color: var(--color-primary); border: none; border-radius: var(--radius-s); padding: 5px 11px; margin-bottom: 10px; transition: background .12s, color .1s; } .cookie-modal__close:hover, .cookie-modal__close:focus { background: var(--color-secondary); color: var(--color-dark); } /************************* * ACCESSIBILITY FOCUS *************************/ :focus-visible, .focused { outline: 2px solid var(--color-secondary) !important; outline-offset: 1px; } /************************* * UTILITY & HELPER *************************/ .mt-20{ margin-top:20px; } .mb-20{ margin-bottom:20px !important; } .mt-32{ margin-top:32px; } /************************* * Z-INDEX SAFETY *************************/ header, .mobile-menu, .cookie-banner, .cookie-modal { z-index: 100; } /************************* * PRINT STYLES *************************/ @media print { header, footer, .cookie-banner, .cookie-modal, .mobile-menu { display: none !important; } .container { padding: 0; } section, .section { box-shadow: none !important; background: #fff !important; } }