/* -------------------------------------------------------------- */ /* CSS RESET & NORMALIZE */ /* -------------------------------------------------------------- */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,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-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section { display: block; } body { line-height: 1.5; background: #fff; color: #191919; } ol,ul { list-style: none; } a { text-decoration: none; color: inherit; background-color: transparent; } img { max-width: 100%; border-style: none; display: block; } table { border-collapse: collapse; border-spacing: 0; } button { background: none; border: none; font: inherit; cursor: pointer; outline: none; } /* -------------------------------------------------------------- */ /* BRAND FONTS (Google Fonts ideally included in HTML ) */ /* -------------------------------------------------------------- */ :root { --brand-primary: #191919; /* Near black for text/headings */ --brand-secondary: #efb93f; /* Warm gold accent */ --brand-accent: #f7f7f7; /* Soft off-white background */ --mono-white: #ffffff; --mono-black: #101010; --mono-gray-100: #f7f7f7; --mono-gray-200: #ececec; --mono-gray-300: #dddddd; --mono-gray-400: #bbbbbb; --mono-gray-600: #6e6e6e; --mono-gray-800: #232323; --shadow-high: 0 6px 32px rgba(23,23,23,0.17); --shadow-card: 0 2px 12px rgba(40,40,40,0.08); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --transition: 0.22s cubic-bezier(.15, .85, .39, 1.07); --font-display: 'Montserrat', Arial, Helvetica, sans-serif; --font-body: 'Roboto', Arial, Helvetica, sans-serif; } body { font-family: var(--font-body); font-size: 16px; font-weight: 400; background: var(--mono-white); color: var(--brand-primary); letter-spacing: 0.01em; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: var(--brand-primary); margin-bottom: 16px; letter-spacing: 0.01em; } h1 { font-size: 2.75rem; line-height: 1.16; margin-bottom: 24px; } h2 { font-size: 2rem; line-height: 1.22; margin-bottom: 18px; } h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 12px; } h4, h5, h6 { font-size: 1.09rem; } p, li { font-family: var(--font-body); font-size: 1rem; color: var(--brand-primary); line-height: 1.65; margin-bottom: 10px; } strong { font-weight: 700; color: var(--brand-primary); } .container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } .content-wrapper { width: 100%; max-width: 870px; margin: 0 auto; padding: 0; } .section { margin-bottom: 60px; padding: 40px 20px; } @media (max-width: 991px) { .section { padding: 32px 10px; margin-bottom: 40px; } } @media (max-width: 600px) { .section { padding: 24px 5px; } .container { padding-left: 10px; padding-right: 10px; } } /* Header ----------------------------------------------------- */ header { background: var(--mono-white); border-bottom: 1px solid var(--mono-gray-200); padding: 0; } header .container { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 0 20px; } header nav { display: flex; gap: 24px; align-items: center; font-family: var(--font-display); font-size: 1rem; } header nav a { color: var(--brand-primary); font-weight: 500; padding: 10px 2px; border-radius: 4px; transition: color var(--transition), background var(--transition); } header nav a:hover, header nav a:focus { color: var(--brand-secondary); background: var(--mono-gray-100); } header a.cta-btn, .cta-btn { margin-left: 16px; } /* Logo sizing in header */ header img[alt="Carbon Gleam Reisen"] { max-height: 40px; margin-right: 12px; } /* Mobile Menu Button */ .mobile-menu-toggle { display: none; background: var(--brand-secondary); color: var(--mono-black); border: none; font-size: 1.7rem; padding: 6px 16px; border-radius: var(--radius-md); transition: background var(--transition), color var(--transition); margin-left: 20px; z-index: 1500; } .mobile-menu-toggle:hover, .mobile-menu-toggle:focus { background: var(--mono-black); color: var(--brand-secondary); } /* MOBILE MENU ------------------------------------------------ */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(32,32,32,0.97); color: var(--mono-white); z-index: 2000; display: flex; flex-direction: column; align-items: flex-start; transform: translateX(-100vw); transition: transform 0.34s cubic-bezier(.55, 0, .2, 1); overflow-y: auto; box-shadow: 0 0 24px 8px rgba(0,0,0,.15); } .mobile-menu.open { transform: translateX(0); } .mobile-menu-close { align-self: flex-end; margin: 24px 24px 8px 0; font-size: 2.2rem; background: none; color: var(--brand-secondary); border: none; cursor: pointer; z-index: 2100; transition: color var(--transition); } .mobile-menu-close:focus, .mobile-menu-close:hover { color: var(--mono-white); } .mobile-nav { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 100%; margin-top: 24px; margin-left: 32px; } .mobile-nav a { color: var(--mono-white); font-size: 1.28rem; font-family: var(--font-display); font-weight: 500; padding: 12px 10px; border-radius: 6px; transition: background var(--transition), color var(--transition); } .mobile-nav a:focus, .mobile-nav a:hover { background: var(--brand-secondary); color: var(--mono-black); } /* Show burger, hide nav on mobile */ @media (max-width: 991px) { header nav { display: none; } .mobile-menu-toggle { display: block; } } @media (min-width: 992px) { .mobile-menu { display: none !important; } } /* Hero Section ----------------------------------------------- */ .hero { min-height: 340px; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, var(--mono-white) 70%, var(--mono-gray-100) 100%); border-bottom: 1px solid var(--mono-gray-200); } .hero .container { display: flex; flex-direction: column; align-items: center; } .hero .content-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero h1 { color: var(--mono-black); font-size: 2.6rem; font-weight: 700; } .hero p { color: var(--mono-gray-800); margin-bottom: 22px; } @media (max-width: 768px) { .hero { min-height: 220px; } .hero h1 { font-size: 2rem; } } /* CTA BUTTONS ------------------------------------------------ */ .cta-btn { padding: 13px 34px; border-radius: var(--radius-md); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; border: none; outline: none; box-shadow: 0 3px 12px rgba(33, 33, 33, 0.08); transition: background var(--transition), color var(--transition), box-shadow var(--transition), border var(--transition); display: inline-block; cursor: pointer; margin-top: 8px; } .cta-btn.primary { background: var(--mono-black); color: var(--brand-secondary); } .cta-btn.secondary { background: var(--brand-secondary); color: var(--mono-black); } .cta-btn.primary:hover, .cta-btn.primary:focus { background: var(--mono-gray-800); color: var(--brand-accent); box-shadow: 0 4px 20px rgba(0,0,0,0.14); } .cta-btn.secondary:hover, .cta-btn.secondary:focus { background: var(--mono-white); color: var(--mono-black); border: 1.5px solid var(--brand-secondary); } /* FLEX LAYOUTS (MANDATORY) ----------------------------------- */ .card-container { display: flex; flex-wrap: wrap; gap: 24px; } .card { margin-bottom: 20px; position: relative; flex: 1 1 250px; background: var(--mono-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: box-shadow var(--transition), transform var(--transition); padding: 24px 18px; } .card:hover { box-shadow: 0 6px 32px rgba(32,32,32,0.12); transform: translateY(-3px) scale(1.017); } .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; } @media (max-width: 768px) { .text-image-section, .content-grid, .card-container { flex-direction: column; gap: 18px; } } /* Feature Grid and Feature Item ------------------------------ */ .feature-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; margin-top: 10px; margin-bottom: 20px; } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; background: var(--mono-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px 20px 18px; flex: 1 1 250px; min-width: 235px; max-width: 300px; margin-bottom: 20px; transition: transform var(--transition), box-shadow var(--transition); } .feature-item img { width: 34px; height: 34px; margin-bottom: 8px; filter: grayscale(0.95) contrast(1.1); } .feature-item:hover { box-shadow: var(--shadow-high); transform: translateY(-6px) scale(1.022); } .feature-item h3 { margin-bottom: 6px; margin-top: 2px; color: var(--mono-black); } @media(max-width: 991px) { .feature-grid { gap: 20px; } .feature-item { max-width: 100%; min-width: 170px; } } /* Destination Cards ----------------------------------------- */ .destination-cards { display: flex; flex-wrap: wrap; gap: 28px; margin: 14px 0 28px 0; } .destination-card { background: var(--mono-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px 20px 20px; flex: 1 1 230px; max-width: 295px; transition: box-shadow var(--transition), transform var(--transition); margin-bottom: 20px; border: 1px solid var(--mono-gray-200); } .destination-card h3 { color: var(--brand-primary); margin-bottom: 8px; font-size: 1.22rem; font-weight: 600; } .destination-card:hover { box-shadow: var(--shadow-high); transform: translateY(-4px) scale(1.014); } @media (max-width: 991px) { .destination-cards { gap: 16px; } .destination-card{ max-width: 100%; } } /* Service List (Angebote) ----------------------------------- */ .service-list { display: flex; flex-wrap: wrap; gap: 28px; margin: 10px 0 28px 0; } .service-item { background: var(--mono-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px 20px 20px; flex: 1 1 230px; max-width: 295px; transition: box-shadow var(--transition), transform var(--transition); margin-bottom: 20px; border: 1px solid var(--mono-gray-200); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .service-item img { width: 36px; height: 36px; filter: grayscale(0.95) contrast(1.1); margin-bottom: 5px; } .service-item:hover { box-shadow: var(--shadow-high); transform: translateY(-4px) scale(1.016); } @media (max-width: 991px) { .service-list { gap: 16px; } .service-item { max-width: 100%; } } /* Testimonials ---------------------------------------------- */ .testimonial-slider, .testimonial-list { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 16px; } .testimonial-card { background: var(--mono-white); color: var(--mono-black); box-shadow: var(--shadow-card); border-radius: var(--radius-md); padding: 20px 28px 17px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; border: 1.5px solid var(--mono-gray-200); min-width: 220px; max-width: 410px; transition: box-shadow var(--transition), transform var(--transition); font-size: 1.05rem; line-height: 1.6; position: relative; } .testimonial-card span { font-family: var(--font-display); font-size: 0.97rem; font-weight: 510; color: var(--mono-gray-600); margin-left: 12px; } .testimonial-card:hover { box-shadow: 0 8px 36px rgba(13,13,13,0.17); transform: scale(1.013); } @media (max-width: 991px) { .testimonial-slider, .testimonial-list { gap: 12px; flex-direction: column; align-items: flex-start; } .testimonial-card { width: 100%; max-width: 100%; min-width: 0; } } /* FAQ Accordion --------------------------------------------- */ .faq-accordion { display: flex; flex-direction: column; gap: 22px; margin-bottom: 34px; } .faq-item { background: var(--mono-white); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 22px 22px 13px 22px; border: 1px solid var(--mono-gray-200); transition: box-shadow var(--transition), border var(--transition); } .faq-item h3 { font-size: 1.13rem; margin-bottom: 8px; color: var(--mono-black); } .faq-item:hover { box-shadow: 0 6px 26px rgba(23,23,23,0.12); border-color: var(--brand-secondary); } .contact-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 22px; } /* Team / Bio Section ---------------------------------------- */ .team-bios { display: flex; flex-wrap: wrap; gap: 26px; margin: 14px 0 24px 0; } .bio { background: var(--mono-white); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 17px 18px 13px 18px; flex: 1 1 220px; min-width: 170px; max-width: 300px; margin-bottom: 20px; border: 1.5px solid var(--mono-gray-200); transition: box-shadow var(--transition), border var(--transition); } .bio h3 { margin-bottom: 7px; font-size: 1.14rem; font-weight: 600; color: var(--mono-black); } .bio:hover { border-color: var(--brand-secondary); box-shadow: var(--shadow-high); } @media (max-width: 991px) { .team-bios { gap: 12px; } .bio { max-width: 100%; } } /* VALUES (About) -------------------------------------------- */ .values-list { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; } .values-list li { display: flex; align-items: flex-start; gap: 16px; font-size: 1.01rem; } .values-list img { width: 28px; height: 28px; filter: grayscale(0.92) contrast(1.13); } /* Destination Categories List -------------------------------- */ .destination-categories ul { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; } .destination-categories li { background: var(--mono-gray-200); color: var(--mono-black); padding: 7px 17px; border-radius: 18px; font-size: 1rem; font-family: var(--font-body); font-weight: 500; box-shadow: 0 1px 5px rgba(32,32,32,0.05); margin-bottom: 8px; transition: background var(--transition); } .destination-categories li:hover { background: var(--brand-secondary); color: var(--mono-black); } /* Kontakt Details ------------------------------------------- */ .contact-details { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .contact-details img { width: 19px; height: 19px; vertical-align: middle; margin-bottom: 3px; margin-right: 7px; filter: grayscale(0.8); } .info-text { margin-top: 8px; } /* THANK YOU ----------------------------------------------- */ .thank-you-message { font-size: 1.13rem; font-weight: 500; margin-bottom: 22px; } /* LEGAL TEXT ----------------------------------------------- */ .legal-text { font-size: 1.01rem; color: var(--mono-gray-800); background: var(--mono-gray-100); border-radius: var(--radius-md); padding: 24px 24px 20px 24px; margin-bottom: 22px; box-shadow: 0 1px 6px rgba(18,18,18,0.04); } .legal-text h2{ padding-top:24px; margin-bottom:10px; } /* FOOTER --------------------------------------------------- */ footer { background: var(--mono-black); color: var(--mono-white); font-family: var(--font-body); padding: 34px 0 18px 0; } footer .container { display: flex; flex-direction: column; gap: 18px; align-items: stretch; } footer nav { display: flex; flex-wrap: wrap; gap: 19px; margin-bottom: 12px; } footer nav a { color: var(--mono-gray-300); font-size: 1rem; font-weight: 400; transition: color var(--transition); } footer nav a:hover,footer nav a:focus{color:var(--brand-secondary);} .footer-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 1.04rem; color: var(--brand-secondary); } .footer-brand img { width: 30px; height: 30px; filter: grayscale(1) brightness(1.13); } .contact-footer { font-size: 0.98rem; color: var(--mono-gray-300); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top:4px; } .contact-footer img{ width: 17px; height: 17px; margin-right: 5px; filter:grayscale(.85);vertical-align:middle; } @media (max-width:600px){ footer .container{gap:8px;} .contact-footer{font-size:0.92rem;} } /* Cookie Consent Banner ------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100vw; background: var(--mono-white); color: var(--mono-black); box-shadow: 0 -2px 28px 0 rgba(30,30,30,0.11); display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 22px 32px 16px 24px; font-size: 1rem; z-index: 3500; transition: transform var(--transition), opacity var(--transition); transform: translateY(0); opacity: 1; } .cookie-banner.hide { transform: translateY(120%); opacity: 0; pointer-events: none; } .cookie-banner .cookie-btns { display: flex; gap: 14px; } .cookie-banner button { padding: 9px 21px; border-radius: var(--radius-sm); border: none; font-family: var(--font-display); font-size: 1.01rem; font-weight: 600; color: var(--mono-black); background: var(--mono-gray-200); cursor: pointer; transition: background var(--transition), color var(--transition); } .cookie-banner button.cookie-accept { background: var(--brand-secondary); color: var(--mono-black); } .cookie-banner button.cookie-accept:hover, .cookie-banner button.cookie-accept:focus { background: var(--mono-black); color: var(--brand-secondary); } .cookie-banner button.cookie-reject { background: var(--mono-gray-400); color: var(--mono-black); } .cookie-banner button.cookie-reject:hover { background: var(--mono-black); color: var(--mono-white) } .cookie-banner button.cookie-settings { background: var(--mono-gray-200); color: var(--brand-primary); } .cookie-banner button.cookie-settings:hover { background: var(--brand-secondary); color: var(--mono-black); } @media (max-width:700px){ .cookie-banner { flex-direction: column; align-items: flex-start; padding:16px 8px 6px 8px; gap:13px; font-size:0.97rem; } } /* Cookie Modal --------------------------------------------- */ .cookie-modal { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(23,23,23,0.74); z-index: 3600; display: flex; align-items: center; justify-content: center; transition: opacity .19s cubic-bezier(.56,.13,.73,.96); opacity: 1; pointer-events: all; } .cookie-modal.hide { opacity: 0; pointer-events: none; } .cookie-modal-inner { background: var(--mono-white); color: var(--mono-black); border-radius: var(--radius-lg); padding: 38px 28px 22px 28px; box-shadow: 0 10px 44px 0 rgba(24,24,24,0.15); width: 100%; max-width: 388px; position: relative; display: flex; flex-direction: column; gap: 16px; } .cookie-modal-close { position: absolute; top: 18px; right: 20px; font-size: 1.5rem; background: none; border: none; color: var(--brand-secondary); cursor: pointer; } .cookie-modal-inner h2{ font-size:1.3rem;font-family:var(--font-display);font-weight:700;margin-bottom:8px; } .cookie-modal-category { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; } .cookie-modal-category label { font-size: 1rem; color: var(--brand-primary); } .cookie-modal-toggle { appearance: none; width: 38px; height: 22px; background: var(--mono-gray-300); border-radius: 16px; position: relative; outline: none; cursor: pointer; transition: background .2s; } .cookie-modal-toggle:checked { background: var(--brand-secondary); } .cookie-modal-toggle::before { content: ''; display: block; width: 18px; height: 18px; background: var(--mono-white); border-radius: 50%; position: absolute; top: 2px; left: 3px; transition: transform .18s cubic-bezier(.57,.17,.53,1); box-shadow: 0 1px 4px rgba(10,10,10,0.17); } .cookie-modal-toggle:checked::before { transform: translateX(15px); } .cookie-modal-footer { display:flex;gap:12px;justify-content:flex-end;margin-top:18px; } .cookie-modal-footer button { padding: 8px 22px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: 1rem; border: none; cursor: pointer; background: var(--mono-gray-200); color: var(--mono-black); transition: background var(--transition), color var(--transition); } .cookie-modal-footer button.cookie-save { background: var(--brand-secondary); color: var(--mono-black); } .cookie-modal-footer button.cookie-save:hover{ background: var(--mono-black); color: var(--brand-secondary); } /* Animations & Transitions --------------------------------- */ .card, .feature-item, .destination-card, .service-item, .testimonial-card,.bio,.faq-item { transition: box-shadow var(--transition), transform var(--transition), border var(--transition); } a, button, .cta-btn, .cookie-banner button, .cookie-modal-footer button { transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition), transform var(--transition); } /* General Form Styling (for Kontakt etc.) ------------------- */ input, textarea, select { font-family: var(--font-body); font-size:1rem; border: 1.5px solid var(--mono-gray-300); border-radius: var(--radius-sm); background: var(--mono-white); padding: 9px 15px; outline: none; transition: border var(--transition), box-shadow var(--transition); margin-bottom: 14px; color: var(--brand-primary); } input:focus, textarea:focus, select:focus { border-color: var(--brand-secondary); box-shadow: 0 1px 7px rgba(32,32,32,0.07); } label { font-family: var(--font-display); color: var(--brand-primary); font-size:1rem; font-weight: 500; margin-bottom: 4px; display: inline-block; } /* Utility Spacing Classes ----------------------------------- */ .mt-24 { margin-top:24px; } .mb-20 { margin-bottom:20px; } .mb-28 { margin-bottom:28px; } .pt-28{padding-top:28px;} /* RESPONSIVE FINE TUNING ------------------------------------ */ @media (max-width: 991px) { .container, .content-wrapper { max-width: 98vw; } } @media (max-width: 600px) { h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; } .feature-grid, .destination-cards, .service-list, .team-bios, .card-container { gap: 9px; } } /* Accessibility Focus ------------------------------------- */ a:focus, .cta-btn:focus, button:focus, .mobile-menu-toggle:focus, .mobile-menu-close:focus { outline: 2px solid var(--brand-secondary); outline-offset: 2px; box-shadow: 0 2px 12px 0 var(--brand-secondary); }