:root { --ink:#17221d; --paper:#f4f1e8; --acid:#d8ec55; --rust:#dd6d43; --line:rgba(23,34,29,.22); --serif:"Instrument Serif", Georgia, serif; --sans:Manrope, Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; } a { color:inherit; text-decoration:none; } a:focus-visible, button:focus-visible { outline:3px solid var(--rust); outline-offset:4px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:fixed; z-index:100; top:0; left:1rem; padding:.7rem 1rem; background:var(--acid); transform:translateY(-120%); } .skip-link:focus { transform:translateY(0); }
.site-header { width:min(100% - 4rem, 1440px); margin:auto; min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--line); position:relative; z-index:5; } .wordmark { font-size:1.55rem; font-weight:700; letter-spacing:-.09em; } .wordmark span { color:var(--rust); } .main-nav { display:flex; gap:clamp(1rem,2.5vw,2.8rem); font-size:.77rem; font-weight:600; letter-spacing:.02em; } .main-nav a, .back-link { transition:color .2s ease; } .main-nav a:hover, .back-link:hover { color:var(--rust); } .menu-toggle { display:none; }
.hero, .feature-section, .culture-section, .photo-section, .travel-section, .about-section, .archive, .legal { padding-left:max(2rem, calc((100vw - 1440px)/2 + 2rem)); padding-right:max(2rem, calc((100vw - 1440px)/2 + 2rem)); } .hero { min-height:calc(100vh - 94px); padding-top:clamp(6rem,14vh,10rem); padding-bottom:3rem; position:relative; overflow:hidden; } .eyebrow, .card-meta, .item-type, .item-number { margin:0; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; line-height:.96; } h1 { position:relative; z-index:1; max-width:1000px; margin:1.75rem 0; font-family:var(--serif); font-weight:400; font-size:clamp(4.4rem,10vw,10rem); } h1 em,h2 em { font-weight:400; color:var(--rust); } .hero-bottom { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:end; max-width:980px; gap:2rem; margin-top:clamp(4rem,12vh,10rem); } .hero-bottom p { max-width:290px; font-size:.9rem; } .text-link { display:inline-flex; gap:.7rem; align-items:center; padding-bottom:.3rem; border-bottom:1px solid var(--ink); font-size:.76rem; font-weight:700; white-space:nowrap; } .text-link span { font-size:1.1rem; transition:transform .2s; } .text-link:hover span { transform:translate(.2rem,.1rem); } .hero-shape { position:absolute; border-radius:50%; filter:blur(1px); } .shape-one { width:34vw; height:34vw; min-width:280px; min-height:280px; right:-6vw; top:12%; background:var(--acid); } .shape-two { width:17vw; height:17vw; min-width:160px; min-height:160px; right:22vw; bottom:-7vw; background:#9fd4d8; }
.section-grid { display:grid; grid-template-columns:1fr 1.18fr; min-height:740px; } .section-intro { padding:clamp(4rem,9vw,9rem) 4rem 4rem 0; border-top:1px solid var(--line); } h2 { margin:1.75rem 0 3.2rem; font-family:var(--serif); font-size:clamp(3.4rem,6.3vw,6.8rem); font-weight:400; } .feature-card { position:relative; padding:clamp(2rem,4vw,4rem); overflow:hidden; background:var(--ink); color:var(--paper); } .music-card { margin-top:5rem; min-height:520px; background:linear-gradient(145deg,#242d1d 0%,#1b2824 45%,#dd6d43 150%); } .music-card:before { content:""; position:absolute; width:500px; height:500px; border-radius:50%; left:23%; bottom:-260px; background:var(--acid); opacity:.9; } .music-card h3,.culture-item h3 { position:relative; z-index:1; margin:clamp(5rem,11vw,11rem) 0 1.2rem; font:400 clamp(2.6rem,4.4vw,5rem)/.93 var(--serif); } .music-card > p:not(.card-meta) { position:relative; z-index:1; max-width:270px; font-size:.85rem; } .card-index { position:absolute; right:2.5rem; bottom:1.5rem; font:400 6rem/.8 var(--serif); color:rgba(244,241,232,.55); }
.culture-section { padding-top:8rem; padding-bottom:8rem; background:#e8ded1; } .section-heading { display:flex; justify-content:space-between; align-items:start; gap:3rem; } .section-heading h2 { margin-top:1.5rem; }.culture-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:2rem; border-top:1px solid var(--line); }.culture-item { min-height:360px; padding:1.5rem 2.2rem 2rem 0; border-bottom:1px solid var(--line); position:relative; }.culture-item-highlight { padding-left:2.2rem; padding-right:0; border-left:1px solid var(--line); }.culture-item h3 { margin-top:5rem; }.culture-item p:last-child { max-width:300px; font-size:.83rem; }.culture-more { grid-column:2; justify-self:end; padding:1.5rem 0; font-size:.8rem; font-weight:700; }.culture-more:hover { color:var(--rust); }
.photo-section { padding-top:8rem; padding-bottom:8rem; background:var(--ink); color:var(--paper); }.photo-heading h2 { margin-bottom:1.3rem; }.photo-heading > p:last-child { max-width:245px; margin-top:1.8rem; font-size:.85rem; }.photo-grid { display:grid; grid-template-columns:1.3fr .9fr 1.1fr; gap:1.4rem; align-items:end; margin-top:4rem; }.photo { margin:0; }.photo div { overflow:hidden; position:relative; }.photo div:after { content:""; position:absolute; inset:0; mix-blend-mode:overlay; opacity:.33; background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.15) 3px); }.photo-a div { height:400px; background:radial-gradient(circle at 66% 30%,#f89157 0 10%,transparent 11%),linear-gradient(135deg,#153741 20%,#286e91 45%,#e1d350 100%); }.photo-b div { height:285px; background:radial-gradient(ellipse at 42% 70%,#ecddba 0 16%,transparent 17%),linear-gradient(45deg,#416958,#a8bb6d); }.photo-c div { height:350px; background:radial-gradient(circle at 75% 15%,#de7691 0 15%,transparent 16%),linear-gradient(150deg,#261c31 0 41%,#bd496c 42% 65%,#e3b353 66%); }.photo figcaption { margin-top:.7rem; font:400 .63rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }.photo-link { margin-top:3rem; border-color:var(--paper); }
.travel-section { display:grid; grid-template-columns:1fr 1fr; min-height:700px; background:#bbd8d1; }.travel-visual { position:relative; overflow:hidden; background:#a8c8c5; }.sun { position:absolute; width:36%; aspect-ratio:1; top:16%; left:27%; border-radius:50%; background:#f1ad72; }.hill { position:absolute; bottom:-10%; border-radius:50% 50% 0 0; }.hill-one { width:120%; height:45%; left:-35%; background:#43695d; transform:rotate(10deg); }.hill-two { width:100%; height:50%; right:-35%; background:#25493f; transform:rotate(-12deg); }.travel-copy { padding:clamp(4rem,9vw,9rem) clamp(2rem,6vw,7rem); }.travel-copy h2 { margin-bottom:2rem; }.travel-copy > p:not(.eyebrow) { max-width:390px; font-size:.9rem; margin-bottom:2.5rem; }
.about-section { padding-top:8rem; padding-bottom:5rem; }.about-section h2 { max-width:950px; margin-bottom:4rem; }.about-bottom { display:flex; justify-content:space-between; align-items:end; gap:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }.about-bottom p { max-width:440px; font-size:.9rem; }.button-link { padding:.85rem 1.1rem; background:var(--acid); font-size:.76rem; font-weight:700; }.button-link:hover { background:var(--rust); color:white; }.site-footer { padding:2rem max(2rem, calc((100vw - 1440px)/2 + 2rem)); display:flex; align-items:center; justify-content:space-between; gap:2rem; background:var(--ink); color:var(--paper); }.site-footer p,.site-footer a:not(.wordmark) { margin:0; font-size:.7rem; }.site-footer a:not(.wordmark):hover { color:var(--acid); }
.archive,.legal { min-height:calc(100vh - 94px); padding-top:8rem; padding-bottom:8rem; }.archive h1,.legal h1 { font-size:clamp(4rem,8vw,8rem); }.archive-intro,.legal-note { max-width:530px; font-size:1.1rem; }.archive-list { margin-top:7rem; max-width:880px; border-top:1px solid var(--line); }.archive-list section { display:grid; grid-template-columns:1fr 2fr; align-items:baseline; padding:1.2rem 0; border-bottom:1px solid var(--line); }.archive-list h2 { margin:0; font-size:2.5rem; }.archive-list p { margin:0; font-size:.85rem; }.legal { max-width:1100px; }.legal section { max-width:550px; padding-top:2rem; margin-top:3rem; border-top:1px solid var(--line); }.legal section h2 { font-size:2.5rem; margin:0 0 1rem; }.legal section p { font-size:.9rem; }
@media (max-width:700px) { .site-header { width:calc(100% - 2.5rem); min-height:72px; }.main-nav { position:absolute; left:0; right:0; top:71px; display:none; padding:1.2rem 0 1.8rem; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); }.menu-open .main-nav { display:flex; }.menu-toggle { display:flex; width:28px; height:28px; padding:5px 0; flex-direction:column; justify-content:center; gap:5px; border:0; background:none; cursor:pointer; }.menu-toggle span:not(.sr-only) { display:block; width:100%; height:1px; background:var(--ink); }.menu-open .menu-toggle span:nth-of-type(2) { transform:rotate(45deg) translate(2px,2px); }.menu-open .menu-toggle span:nth-of-type(3) { transform:rotate(-45deg) translate(2px,-2px); }.hero { min-height:calc(100vh - 72px); padding-top:5rem; }.hero h1 { font-size:clamp(3.8rem,17vw,6.3rem); }.hero-bottom { margin-top:5rem; align-items:start; flex-direction:column; }.shape-one { width:70vw; height:70vw; right:-25vw; top:25%; }.shape-two { width:34vw; height:34vw; right:5vw; bottom:2%; }.section-grid,.travel-section { grid-template-columns:1fr; }.section-intro { padding-right:0; }.music-card { margin-top:0; min-height:440px; }.culture-section,.photo-section,.about-section { padding-top:5rem; padding-bottom:5rem; }.section-heading { display:block; }.culture-grid { grid-template-columns:1fr; }.culture-item { min-height:290px; padding-right:0; }.culture-item-highlight { padding-left:0; border-left:0; }.culture-more { grid-column:auto; justify-self:start; }.photo-grid { grid-template-columns:1fr 1fr; gap:.8rem; margin-top:2.5rem; }.photo-a { grid-column:span 2; }.photo-a div { height:330px; }.photo-b div,.photo-c div { height:190px; }.travel-visual { min-height:390px; }.travel-copy { padding:5rem 2rem; }.about-bottom,.site-footer { align-items:start; flex-direction:column; gap:1.5rem; }.archive,.legal { padding-top:5rem; }.archive-list { margin-top:4rem; }.archive-list section { grid-template-columns:1fr; gap:.4rem; }.legal h1 { font-size:clamp(3.7rem,15vw,5.8rem); } }
/* Reisegalerie */
.photo img { display:block; width:100%; object-fit:cover; }
.photo-a img { height:400px; }
.photo-b img { height:285px; }
.photo-c img { height:350px; }
.gallery-page { min-height:calc(100vh - 94px); padding:7rem max(2rem, calc((100vw - 1440px)/2 + 2rem)) 8rem; }
.gallery-intro { max-width:850px; }
.gallery-intro h1 { max-width:900px; font-size:clamp(4rem,9vw,8rem); }
.gallery-intro > p:last-child { max-width:480px; font-size:.9rem; }
.norway-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:4rem; }
.norway-gallery figure { margin:0; }
.gallery-photo { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden; }
.gallery-photo img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .25s ease; }
.gallery-photo:hover img { transform:scale(1.025); }
.norway-gallery figcaption { padding-top:.75rem; font:400 .63rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.gallery-back { margin-top:4rem; }
.gallery-dialog { width:min(1000px,calc(100% - 2rem)); max-width:none; max-height:calc(100% - 2rem); padding:1rem; border:1px solid rgba(244,241,232,.25); background:var(--ink); color:var(--paper); }
.gallery-dialog::backdrop { background:rgba(12,18,15,.9); }
.gallery-dialog img { display:block; max-width:100%; max-height:78vh; margin:auto; object-fit:contain; }
.gallery-dialog p { margin:.8rem 3rem 0; text-align:center; font:400 .7rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.gallery-dialog-close { position:absolute; top:.5rem; right:.75rem; border:0; background:none; color:var(--paper); font:400 2rem var(--sans); cursor:pointer; }
@media (max-width:850px) { .norway-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } }
@media (max-width:700px) {
  .photo-a img { height:330px; }
  .photo-b img,.photo-c img { height:190px; }
  .gallery-page { padding-top:5rem; padding-bottom:5rem; }
  .gallery-intro h1 { font-size:clamp(3.7rem,15vw,6rem); }
}
@media (max-width:560px) { .norway-gallery { grid-template-columns:1fr; gap:1.5rem; } }