/* ═══════════════════════════════════════════════════════ ADSIGN — Upgrade layer 1. Hero corner label fix (was painted under the artwork) 2. DE/EN language switch 3. Landing page: booking path next to the brief form Loaded LAST so it wins over main.css + refinements.css ═══════════════════════════════════════════════════════ */ /* ───────────────────────────────────────── 1. HERO CORNER LABEL Bug: .head-img is animated (creates a stacking context) and comes later in the DOM, so it painted on top of the absolutely positioned .hero-corner — swallowing "STR" / "D" / "GR". Fix: lift the label AND reserve a lane so they never meet. ───────────────────────────────────────── */ .hero-corner{ z-index:6; pointer-events:none; max-width:220px; margin-left:auto; /* right-aligned block, but each line flush to the same right edge */ text-align:right; text-wrap:balance; } .hero-right{ z-index:1; } .head-stage{ z-index:1; } /* H1 sizing moved out of inline styles so both languages fit the column. German runs longer than English, so the line is allowed to breathe. */ .hero-left{ max-width:600px; } .hero-h1 .word > span{ font-size:clamp(44px,6vw,80px); } .hero-h1 .hero-accent{ color:#9e0606; } .hero-h1 .dot{ color:var(--accent); } @media(min-width:901px){ /* keep the artwork clear of the corner label */ .hero-right{ padding-right:clamp(56px,8vw,132px); } .hero-corner{ top:72px; } } @media(min-width:1500px){ .hero-right{ padding-right:96px; } } /* ───────────────────────────────────────── 2. LANGUAGE SWITCH ───────────────────────────────────────── */ .langsw{ display:inline-flex; align-items:stretch; border:1px solid var(--rule); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; line-height:1; overflow:hidden; flex-shrink:0; margin-left:auto; margin-right:1.5rem; } .langsw button{ appearance:none; border:0; background:transparent; color:var(--muted); font:inherit; padding:9px 12px; cursor:pointer; transition:background .2s, color .2s; } .langsw button + button{ border-left:1px solid var(--rule); } .langsw button:hover{ color:var(--ink); } .langsw button[aria-current="true"]{ background:var(--ink); color:var(--paper); } @media(max-width:900px){ .langsw{ margin-right:1rem; } .langsw button{ padding:8px 10px; } } @media(max-width:420px){ .langsw{ margin-right:.6rem; } .langsw button{ padding:7px 8px; font-size:10px; letter-spacing:.1em; } .nav-cta{ padding:12px 14px !important; font-size:11px !important; } } /* Prevent a flash of the wrong language before i18n.js runs. A failsafe in the removes this class after 900ms even if the script fails, so content is never permanently hidden. */ html.i18n-pending body{ visibility:hidden; } /* ───────────────────────────────────────── 3. LANDING — two paths, one page ───────────────────────────────────────── */ .paths{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(241,239,234,0.16); border:1px solid rgba(241,239,234,0.16); margin:2.5rem 0 0; } .path{ background:var(--ink); padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; } .path-kicker{ font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); } .path-title{ font-family:var(--f-display); font-size:19px; line-height:1.15; text-transform:uppercase; color:var(--paper); letter-spacing:.01em; } .path-desc{ font-size:13px; line-height:1.65; color:rgba(241,239,234,0.62); flex:1; } .path-link{ display:inline-flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--paper); border-bottom:1px solid rgba(241,239,234,0.35); padding-bottom:7px; align-self:flex-start; transition:gap .3s, color .25s, border-color .25s; } .path-link:hover{ gap:20px; color:var(--accent); border-color:var(--accent); } .path.is-primary{ background:#141414; } @media(max-width:700px){ .paths{ grid-template-columns:1fr; } } /* Booking panel */ .booking{ border-top:1px solid var(--rule); padding:clamp(48px,7vw,96px) var(--gutter); } .booking-inner{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:start; } .booking-title{ font-family:var(--f-display); font-size:clamp(30px,4vw,52px); line-height:1.02; text-transform:uppercase; letter-spacing:-0.015em; margin-top:1.25rem; } .booking-title .dot{ color:var(--accent); } .booking-sub{ font-size:15px; line-height:1.75; color:var(--ink-2); max-width:42ch; margin-top:1.5rem; } .booking-list{ list-style:none; margin-top:2rem; display:grid; gap:.9rem; } .booking-list li{ font-size:14px; line-height:1.6; color:var(--ink-2); padding-left:1.6rem; position:relative; } .booking-list li::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-family:var(--f-mono); } .booking-embed{ border:1px solid var(--rule); background:var(--paper-2); min-height:520px; display:flex; align-items:center; justify-content:center; padding:2rem; } .booking-embed iframe{ width:100%; min-height:660px; border:0; display:block; } .booking-placeholder{ text-align:center; max-width:34ch; } .booking-placeholder .bp-mark{ font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; } .booking-placeholder p{ font-size:14px; line-height:1.7; color:var(--muted); } @media(max-width:900px){ .booking-inner{ grid-template-columns:1fr; } .booking-embed{ min-height:auto; } } /* Anchor offset so the sticky nav doesn't cover section headings */ [id]{ scroll-margin-top:96px; }