/* ═══════════════════════════════════════════════════════════════ M4 DIGITAL — Design System Konzept: "Warmes Papier & klare Linie" Warmes, natürliches Papier-Weiß, ein dunkles Kapitel (QAIRO®), Brand-Petrol als einziger kalter Akzent, Ocker als Wärme. ═══════════════════════════════════════════════════════════════ */ :root{ /* — Flächen — */ --paper: #FBF8F4; --paper-2: #F4EFE8; --sand: #EDE5DA; --clay: #E2D6C6; /* — Schrift — */ --ink: #22272B; --ink-2: #545454; --ink-3: #7E7C77; /* — Akzente — */ --teal: #1BACB0; --teal-deep: #0E7C80; --teal-soft: #D8EEEE; --gold: #D2A24C; --gold-soft: #EFDCBB; --terra: #B9714E; /* — Dunkles Kapitel — */ --night: #191B1A; --night-2: #232726; --night-txt: #E9E4DA; /* — Maße — */ --wrap: 1320px; --gut: clamp(18px, 2.4vw, 34px); --pad: clamp(20px, 5vw, 72px); --r: 14px; /* — Typo — */ --f-display: "Outfit", "Helvetica Neue", Arial, sans-serif; --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --ease: cubic-bezier(.22,.61,.36,1); --ease-io: cubic-bezier(.65,.05,.36,1); } /* ── Reset ── */ *,*::before,*::after{box-sizing:border-box} /* overflow-x:clip statt hidden – hidden auf würde daraus einen eigenen Scroll-Container machen und Sticky/Scroll-Effekte stören. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-sans); font-size:clamp(15.5px,1.02vw,17.5px); line-height:1.62; font-weight:400; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,p,figure,blockquote,dl,dd{margin:0} ul,ol{margin:0;padding:0;list-style:none} fieldset{border:0;margin:0;padding:0} legend{padding:0} ::selection{background:var(--teal);color:#fff} /* ── Tastaturbedienung ── Sichtbarer Fokusring für alle bedienbaren Elemente. :focus-visible zeigt ihn nur bei Tastatur, nicht bei Mausklick. */ :where(a,button,input,textarea,label.choice,summary):focus-visible{ outline:2px solid var(--teal-deep); outline-offset:3px; border-radius:6px; } .dark :where(a,button):focus-visible, .sec--qairo :where(a,button):focus-visible{outline-color:var(--gold)} /* Kein blauer Aufblitzer beim Antippen auf Mobilgeräten */ a,button,label{-webkit-tap-highlight-color:transparent} .skip{position:fixed;top:-100px;left:16px;z-index:999;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:8px} .skip:focus{top:16px} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── Layout ── */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut) var(--gut)} .col-1-4{grid-column:1/5} .col-1-5{grid-column:1/6} .col-1-6{grid-column:1/7} .col-1-12{grid-column:1/13} .col-5-12{grid-column:5/13} .col-6-12{grid-column:7/13} .col-7-12{grid-column:7/13} .col-8-12{grid-column:8/13} .sec{position:relative;padding-block:clamp(96px,12.5vw,196px)} .sec__head{max-width:820px;margin-bottom:clamp(52px,6vw,92px)} /* ═══════════ TYPO ═══════════ */ .eyebrow{ font-family:var(--f-mono); font-size:11.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-3);margin-bottom:20px; display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);display:inline-block} .eyebrow--gold{color:var(--gold-soft)} .eyebrow--gold .dot{background:var(--gold)} .h2{ font-family:var(--f-display); font-weight:300; font-size:clamp(31px,4.4vw,62px); line-height:1.08; letter-spacing:-.03em; max-width:16ch; } .sec--pillars .h2,.sec--about .h2{max-width:19ch} .h2--light{color:var(--paper)} .prose p{color:var(--ink-2);max-width:60ch;margin-top:22px;line-height:1.7} .prose--light p,.prose--light{color:#B9B4AA} .keys{ margin-top:34px;font-family:var(--f-mono);font-size:11.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3); } .keys i{color:var(--teal);font-style:normal;margin-inline:8px} .keys--gold{color:#9C958A} .keys--gold i{color:var(--gold)} /* ═══════════ PRELOADER ═══════════ */ /* Ohne JS gibt es keinen Ladevorgang – dann darf der Preloader nichts verdecken. */ .preloader{display:none} .js .preloader{ position:fixed;inset:0;z-index:9999;background:var(--paper); display:grid;place-content:center;gap:26px;justify-items:center; transition:opacity .7s var(--ease),visibility .7s; } .js .preloader.is-done{opacity:0;visibility:hidden;pointer-events:none} .preloader__mark{width:96px;color:var(--ink-2)} .preloader__mark svg{width:100%;height:auto} .preloader__mark path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.1s var(--ease) forwards} .pl-b{animation-delay:.13s !important} .pl-c{animation-delay:.26s !important} @keyframes draw{to{stroke-dashoffset:0}} .preloader__bar{width:132px;height:1px;background:var(--clay);overflow:hidden} .preloader__bar i{display:block;height:100%;width:0;background:var(--teal)} /* ═══════════ CURSOR ═══════════ */ .cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;mix-blend-mode:normal;opacity:0} .cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%)} .cursor__dot{width:6px;height:6px;background:var(--teal)} .cursor__ring{width:34px;height:34px;border:1px solid rgba(27,172,176,.42);transition:width .3s var(--ease),height .3s var(--ease),background .3s} .cursor.is-link .cursor__ring{width:56px;height:56px;background:rgba(27,172,176,.09)} @media (hover:none),(pointer:coarse){.cursor{display:none}} /* ═══════════ SCROLL PROGRESS ═══════════ */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;background:transparent;pointer-events:none} .scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold))} /* ═══════════ NAV ═══════════ */ .nav{position:fixed;top:0;left:0;right:0;z-index:800;transition:transform .5s var(--ease),background .4s,box-shadow .4s,backdrop-filter .4s} .nav__in{ max-width:var(--wrap);margin-inline:auto;padding:20px var(--pad); display:flex;align-items:center;justify-content:space-between;gap:24px; transition:padding .4s var(--ease); } .nav.is-stuck{background:rgba(251,248,244,.82);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 rgba(34,39,43,.07)} .nav.is-stuck .nav__in{padding-block:12px} .nav.is-hidden{transform:translateY(-102%)} /* Wort- und Bildmarke stammen beide aus der Logodatei – der Schriftzug wird nie mit einer Websatzschrift nachgebaut. */ .brand{display:flex;align-items:center;gap:13px} .brand__mark{ width:56px;height:57px;object-fit:contain;flex:none; transition:transform .5s var(--ease); } .brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)} .brand__word{height:19px;width:auto;object-fit:contain;flex:none} .nav__links{display:flex;align-items:center;gap:4px} .nav__links a{ position:relative;padding:9px 14px;border-radius:999px; font-size:13.5px;color:var(--ink-2);transition:color .3s; } .nav__links a span{position:relative;z-index:1} .nav__links a::before{ content:"";position:absolute;inset:0;border-radius:999px;background:var(--sand); transform:scale(.7);opacity:0;transition:transform .4s var(--ease),opacity .3s; } .nav__links a:hover{color:var(--ink)} .nav__links a:hover::before{transform:scale(1);opacity:1} .nav__links a.is-active{color:var(--ink)} .nav__links a.is-active::after{ content:"";position:absolute;left:50%;bottom:1px;width:14px;height:1.5px; background:var(--teal);transform:translateX(-50%); } .nav__links a.is-cta{background:var(--ink);color:var(--paper);margin-left:8px} .nav__links a.is-cta::before{background:var(--teal-deep)} .nav__links a.is-cta:hover{color:#fff} .burger{display:none;width:44px;height:44px;position:relative;border-radius:10px} .burger i{position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s} .burger i:nth-child(1){top:19px} .burger i:nth-child(2){top:25px} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)} /* ═══════════ BUTTONS ═══════════ */ .btn{ --bg:var(--ink);--fg:var(--paper); position:relative;display:inline-flex;align-items:center;gap:11px; padding:16px 30px;border-radius:999px;overflow:hidden; font-size:14px;font-weight:500;letter-spacing:.004em; color:var(--fg);background:var(--bg);isolation:isolate; transition:color .35s var(--ease),transform .35s var(--ease); } .btn svg{width:17px;height:17px;transition:transform .4s var(--ease)} .btn::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--teal-deep);transform:translateY(101%); transition:transform .5s var(--ease); } .btn:hover::before{transform:translateY(0)} .btn:hover svg{transform:translateX(5px)} .btn:active{transform:scale(.98)} .btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px rgba(34,39,43,.13)} .btn--ghost:hover{color:var(--paper)} .btn--ghost::before{background:var(--ink)} .btn--gold{--bg:transparent;--fg:var(--night-txt);box-shadow:inset 0 0 0 1px rgba(210,162,76,.5)} .btn--gold::before{background:var(--gold)} .btn--gold:hover{color:#1B1A17} .btn--quiet{--bg:transparent;--fg:#B9B4AA;box-shadow:inset 0 0 0 1px rgba(233,228,218,.20)} .btn--quiet::before{background:rgba(233,228,218,.10)} .btn--quiet:hover{color:var(--paper)} .btn--quiet svg{width:15px;height:15px} .btn--quiet:hover svg{transform:translate(3px,-3px)} .btn__reg{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;top:-.5em;margin-left:.06em} .btn--wide{width:100%;justify-content:center;margin-top:8px} /* ═══════════ MITLAUFENDER HANDLUNGSAUFRUF ═══════════ Erscheint, sobald der Hero-Button aus dem Blick ist, und zieht sich zurück, sobald das Kontaktformular erreicht ist – dort wäre er doppelt. */ .cta-float{ position:fixed; right:clamp(16px,2.6vw,34px); bottom:clamp(16px,2.6vw,34px); z-index:850; box-shadow:0 18px 44px -20px rgba(34,39,43,.6); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(14px) scale(.96); transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s; } .cta-float.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none} /* Bei offenem Menü tritt er zurück */ body.menu-open .cta-float{opacity:0;visibility:hidden;pointer-events:none} /* ═══════════ HERO ═══════════ */ .hero{ position:relative;min-height:100svh;display:flex;align-items:center; padding-block:clamp(130px,15vh,190px) clamp(80px,10vh,120px); overflow:hidden; background: radial-gradient(115% 85% at 80% 20%, rgba(216,238,238,.34) 0%, rgba(251,248,244,0) 60%), radial-gradient(85% 75% at 8% 92%, rgba(239,220,187,.26) 0%, rgba(251,248,244,0) 62%), var(--paper); } .hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero__grain{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.26; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } .hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .hero__h1{ font-family:var(--f-display);font-weight:200; font-size:clamp(44px,8.4vw,132px); line-height:1;letter-spacing:-.042em; margin:6px 0 clamp(26px,3vw,38px); } .hero__h1 .line{display:block;overflow:hidden;padding-bottom:.06em} .hero__h1 .w{display:inline-block;will-change:transform} /* Betonung über Gewicht und Farbe statt über Kursivschnitt */ .hero__h1 em{ font-style:normal;font-weight:400;position:relative;color:var(--teal-deep); padding-inline:.01em; } .hero__h1 em::after{ content:"";position:absolute;left:.06em;right:.16em;bottom:.045em;height:.018em; background:var(--gold);border-radius:2px; transform:scaleX(0);transform-origin:left; animation:uline 1s var(--ease) 1.55s forwards; } @keyframes uline{to{transform:scaleX(1)}} .hero__lead{font-size:clamp(16px,1.22vw,19px);line-height:1.7;color:var(--ink-2);max-width:46ch} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.4vw,44px)} .hero__meta{ position:absolute;left:0;right:0;bottom:26px;z-index:2; max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad); display:flex;justify-content:space-between;align-items:flex-end; font-family:var(--f-mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-3); } .hero__scroll{display:flex;align-items:center;gap:10px} .hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--clay),var(--teal));position:relative;overflow:hidden} .hero__scroll i::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold);animation:scrollDot 2.2s var(--ease-io) infinite} @keyframes scrollDot{0%{top:-100%}60%,100%{top:100%}} /* ═══════════ TICKER ═══════════ */ .ticker{ border-block:1px solid rgba(34,39,43,.07); background:var(--paper-2);overflow:hidden;padding-block:20px; } .ticker__track{ display:flex;align-items:center;gap:0;white-space:nowrap;width:max-content; will-change:transform; } .ticker span{ font-family:var(--f-display);font-size:clamp(17px,1.7vw,25px); font-weight:300;letter-spacing:-.012em;color:var(--ink-3);padding-inline:30px; } .ticker i{display:block;width:4px;height:4px;border-radius:50%;background:var(--teal);opacity:.65;flex:none} .ticker i:nth-child(8n+4){background:var(--gold)} /* ═══════════ ABOUT ═══════════ */ .sec--about{background:var(--paper)} .sec--about .grid-12{align-items:start} /* Die kurze Überschrift braucht einen Moment Pause, bevor der Text antwortet. padding statt margin, sonst fällt der Abstand dem Margin-Collapsing zum Opfer. */ .sec--about .prose{padding-top:14px} .about__media{position:relative} /* ═══════════ BILDRAHMEN ═══════════ Ein einziger Baustein für alle Bilder der Seite: gleiches Format (4:5), gleiche Rundung, gleiche Innenkante, gleiche Bildstimmung, gleicher Auftritt beim Scrollen. Unterschiedlich ist nur der Bildausschnitt (--pos), damit das Motiv jeweils richtig sitzt. */ .frame{ position:relative;overflow:hidden;border-radius:var(--r); aspect-ratio:4/5; background:var(--sand); box-shadow:inset 0 0 0 1px rgba(34,39,43,.06); } .frame img{ width:100%;height:100%; object-fit:cover; object-position:var(--pos,50% 50%); /* einheitliche Bildstimmung – bindet die sehr unterschiedlichen Aufnahmen zu einer Familie zusammen */ filter:saturate(.94) contrast(1.03); transform:scale(1);transition:transform 1.5s var(--ease); } .frame:hover img{transform:scale(1.045)} .frame::after{ content:"";position:absolute;inset:0;background:var(--paper); transform:scaleY(0);transform-origin:bottom;pointer-events:none; transition:transform 1.15s var(--ease-io); } .js .frame::after{transform:scaleY(1)} .js .frame.is-shown::after{transform:scaleY(0)} .js .frame img{transform:scale(1.09)} .js .frame.is-shown img{transform:scale(1)} .js .frame.is-shown:hover img{transform:scale(1.045)} .frame--dark{background:var(--night-2);box-shadow:inset 0 0 0 1px rgba(233,228,218,.10)} .frame--dark::after{background:var(--night)} .qmarks{ display:flex;flex-wrap:wrap;gap:10px;margin-top:36px; } .qmarks li{ font-family:var(--f-mono);font-size:12px;letter-spacing:.02em; padding:9px 15px;border-radius:999px; background:transparent;border:1px solid rgba(34,39,43,.11);color:var(--ink-2); transition:transform .4s var(--ease),background .4s,border-color .4s; } .qmarks li:hover{transform:translateY(-3px);background:var(--teal-soft);border-color:rgba(27,172,176,.35)} /* ═══════════ SÄULEN ═══════════ */ .sec--pillars{background:linear-gradient(var(--paper) 0%, var(--paper-2) 100%)} .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)} .pillar{ position:relative;padding:clamp(28px,2.6vw,40px); display:flex;flex-direction:column; background:var(--paper);border:1px solid rgba(34,39,43,.07); border-radius:var(--r);overflow:hidden; transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s; } .pillar__link{position:absolute;inset:0;z-index:3} .pillar::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,var(--teal),var(--gold)); transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease); } .pillar:hover{transform:translateY(-6px);box-shadow:0 30px 60px -44px rgba(34,39,43,.32);border-color:rgba(27,172,176,.24)} .pillar:hover::before{transform:scaleX(1)} .pillar__num{ position:absolute;top:18px;right:22px; font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--clay); } .pillar__ico{width:52px;height:52px;color:var(--teal-deep);margin-bottom:26px} .pillar__ico svg{width:100%;height:100%;transition:transform .6s var(--ease)} .pillar:hover .pillar__ico svg{transform:rotate(-6deg) scale(1.06)} .pillar__t{font-family:var(--f-display);font-weight:500;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.022em;line-height:1.24} .pillar__p{margin-top:14px;color:var(--ink-2);font-size:15.2px;line-height:1.66} .pillar__more{ align-self:flex-start; display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:30px; font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);transition:color .3s,gap .35s var(--ease); } .pillar__more::after{content:"→";font-family:var(--f-sans)} .pillar:hover .pillar__more{color:var(--teal-deep);gap:13px} /* ═══════════ QAIRO® (dunkel) ═══════════ */ .dark{background:var(--night);color:var(--night-txt)} .sec--qairo{overflow:hidden;padding-block:clamp(96px,12vw,180px)} .sec--qairo .grid-12{align-items:center} .qairo__bg{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(70% 55% at 20% 18%, rgba(210,162,76,.16) 0%, rgba(25,27,26,0) 62%), radial-gradient(60% 60% at 92% 82%, rgba(27,172,176,.13) 0%, rgba(25,27,26,0) 60%); } .qairo__body{position:relative;z-index:2} .qairo__media{position:relative;z-index:1} .brandmark{color:var(--gold);font-weight:400;letter-spacing:-.01em} /* Das ® gehört zur Marke – es muss lesbar bleiben, nicht verschwinden. */ .brandmark sup{ font-size:.44em;line-height:0;vertical-align:baseline; position:relative;top:-.72em;margin-left:.08em; font-weight:400;letter-spacing:0; } .bullets{margin-top:34px;display:grid;gap:0} .bullets li{ padding:15px 0;border-top:1px solid rgba(233,228,218,.14); font-size:clamp(17px,1.6vw,22px);font-family:var(--f-display);font-weight:300; letter-spacing:-.02em;color:var(--night-txt); display:flex;align-items:center;gap:16px; transition:padding-left .45s var(--ease),color .3s; } .bullets li::before{ content:"";width:8px;height:8px;border-radius:50%;flex:none; background:var(--gold);transition:transform .45s var(--ease); } .bullets li:last-child{border-bottom:1px solid rgba(233,228,218,.14);margin-bottom:14px} .bullets li:hover{padding-left:10px} .bullets li:hover::before{transform:scale(1.5)} .bullets b{font-weight:300} .qairo__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} /* ═══════════ TRANSFORMATION ═══════════ */ .sec--trans{background:var(--paper)} .trans__head{margin-bottom:clamp(34px,4vw,58px)} /* Das Sinnbild schliesst die linke Spalte ab, statt sie leer auslaufen zu lassen */ .trans__media{margin-top:clamp(34px,4vw,56px)} /* ── Sinnbild „Aus vielen Wegen wird eine Struktur" ── Oben ungeordnet, unten gleichmässig; die drei Phasen sind im Bild benannt. Beim Scrollen ordnet sich der Verlauf von unten herauf. */ .trans-viz{display:block;width:100%;height:100%} .tv-label{ font-family:var(--f-mono);font-size:20px;letter-spacing:.19em; fill:var(--ink-3); } .tv-num{fill:var(--teal-deep)} .tv-phase{opacity:1} .js .tv-phase{opacity:0} .js .tv-dot{opacity:0} .tv-strand{will-change:d} .steps{display:grid;gap:0;counter-reset:s} .step{ display:flex;gap:clamp(18px,2.2vw,32px);align-items:flex-start; padding:clamp(26px,2.8vw,38px) 0;border-top:1px solid rgba(34,39,43,.085); transition:padding-left .5s var(--ease); } .step:last-child{border-bottom:1px solid rgba(34,39,43,.085)} .step:hover{padding-left:12px} .step__n{ flex:none;width:44px;height:44px;border-radius:50%; display:grid;place-content:center; font-family:var(--f-mono);font-size:13px; background:transparent;color:var(--teal-deep); border:1px solid rgba(27,172,176,.22); transition:background .45s var(--ease),color .45s,transform .45s var(--ease); } .step:hover .step__n{background:var(--teal-deep);color:#fff;transform:rotate(-8deg)} .step h3{font-family:var(--f-display);font-weight:500;font-size:clamp(19px,1.85vw,26px);letter-spacing:-.022em;line-height:1.28} .step p{margin-top:9px;color:var(--ink-2);font-size:15.2px;max-width:52ch} /* ═══════════ EVENT ═══════════ Spiegelbild des QAIRO®-Kapitels: dort Text links, hier Bild links. Gleicher Bildrahmen, gleiches Format – nur die Leserichtung kehrt sich um. */ .sec--event{position:relative;overflow:hidden;padding-block:clamp(96px,12vw,180px)} .sec--event .grid-12{align-items:center} .event__bg{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(65% 55% at 82% 16%, rgba(210,162,76,.15) 0%, rgba(25,27,26,0) 62%), radial-gradient(60% 60% at 10% 84%, rgba(27,172,176,.12) 0%, rgba(25,27,26,0) 60%); } .event__media{position:relative;z-index:1} .event__body{position:relative;z-index:2;color:var(--night-txt)} .sec--event .eyebrow{color:#A9A296} .sec--event .eyebrow .dot{background:var(--gold)} .sec--event .h2{color:var(--paper)} .sec--event .prose p{color:#C2BCB1} .sec--event .keys{color:#9C958A} .sec--event .keys i{color:var(--gold)} .feats{margin-top:36px;display:grid;gap:0} .feats li{ padding:16px 0;border-top:1px solid rgba(233,228,218,.16); display:flex;flex-wrap:wrap;align-items:baseline;gap:10px; } .feats li:last-child{border-bottom:1px solid rgba(233,228,218,.16)} .feats b{font-weight:500;color:var(--paper);font-size:16.5px} .feats span{color:#A9A296;font-size:15.5px} .event__claim{ margin-top:34px;font-family:var(--f-display);font-weight:300; font-size:clamp(20px,2.3vw,31px);line-height:1.24;letter-spacing:-.026em;color:var(--gold-soft); } /* ═══════════ ZITAT ═══════════ */ .sec--quote{background:linear-gradient(var(--paper-2),var(--paper))} .sec--quote .grid-12{align-items:center} .quote__body{position:relative;padding-left:clamp(0px,2.6vw,44px)} .quote__mark{ position:absolute;left:0;top:-.06em; font-family:var(--f-display);font-size:clamp(64px,7vw,104px); line-height:.8;color:var(--clay);pointer-events:none;user-select:none; } .quote__txt{ font-family:var(--f-display);font-weight:300; font-size:clamp(20px,2.15vw,31px);line-height:1.32;letter-spacing:-.028em; color:var(--ink);max-width:33ch; } .quote__sig{ margin-top:34px;font-family:var(--f-mono);font-size:11.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3); } .quote__sig i{color:var(--teal);font-style:normal;margin-inline:6px} /* ═══════════ HÄUFIGE FRAGEN ═══════════ */ .sec--faq{background:var(--paper-2)} .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.4vw,52px) var(--gut)} .faq__item{border-top:1px solid rgba(34,39,43,.11);padding-top:clamp(20px,2vw,28px)} .faq__q{ font-family:var(--f-display);font-weight:500; font-size:clamp(18px,1.7vw,23px);letter-spacing:-.022em;line-height:1.3; color:var(--ink); } .faq__q sup{font-size:.5em;line-height:0;vertical-align:baseline;position:relative;top:-.65em;margin-left:.04em} .faq__a{margin-top:12px;color:var(--ink-2);font-size:15.4px;line-height:1.72;max-width:52ch} .faq__a sup{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;top:-.5em} /* ═══════════ KONTAKT ═══════════ */ .sec--contact{background:var(--paper);position:relative} .sec--contact::before{ content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px; background:rgba(34,39,43,.085); } .contact__facts{margin-top:44px;display:grid;gap:0;border-top:1px solid rgba(34,39,43,.085)} .contact__facts>div{ display:flex;gap:18px;align-items:baseline; padding:15px 0;border-bottom:1px solid rgba(34,39,43,.085); } .contact__facts dt{ flex:none;width:86px;font-family:var(--f-mono);font-size:10.5px; letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3); } .contact__facts dd{font-size:15.4px;color:var(--ink)} .contact__facts a{position:relative} .contact__facts a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--teal); transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease); } .contact__facts a:hover::after{transform:scaleX(1);transform-origin:left} /* ── Formular ── */ .form{ background:var(--paper-2);border:1px solid rgba(34,39,43,.07); border-radius:var(--r);padding:clamp(26px,3.2vw,48px); display:grid;gap:18px; } .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{position:relative} .field input,.field textarea{ width:100%;padding:24px 16px 10px;border-radius:10px; background:var(--paper);border:1px solid rgba(34,39,43,.11); font:inherit;font-size:15.2px;color:var(--ink); transition:border-color .3s,box-shadow .3s,background .3s; resize:vertical; } .field textarea{padding-top:26px;line-height:1.6} .field label{ position:absolute;left:16px;top:16px; font-size:15px;color:var(--ink-3);pointer-events:none; transform-origin:left top; transition:transform .28s var(--ease),color .28s; } .field input:focus,.field textarea:focus{ outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(27,172,176,.14); } .field input:focus+label,.field input:not(:placeholder-shown)+label, .field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{ transform:translateY(-9px) scale(.74);color:var(--teal-deep); } .field.is-error input,.field.is-error textarea{border-color:var(--terra);box-shadow:0 0 0 3px rgba(185,113,78,.13)} .choices{margin-top:4px} .choices legend{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-3);margin-bottom:12px; } .choice{display:flex;align-items:center;gap:11px;padding:11px 15px;margin-bottom:8px; background:var(--paper);border:1px solid rgba(34,39,43,.12);border-radius:10px; cursor:pointer;font-size:14.6px;color:var(--ink-2); transition:border-color .3s,background .3s,color .3s; } .choice:hover{border-color:rgba(27,172,176,.45)} .choice input{ appearance:none;-webkit-appearance:none;flex:none; width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(34,39,43,.28); display:grid;place-content:center;transition:background .25s,border-color .25s; } .choice input::after{ content:"";width:9px;height:9px;border-radius:2px;background:var(--paper); transform:scale(0);transition:transform .25s var(--ease); } .choice input:checked{background:var(--teal-deep);border-color:var(--teal-deep)} .choice input:checked::after{transform:scale(1)} .choice:has(input:checked){background:var(--teal-soft);border-color:var(--teal);color:var(--ink)} .consent{display:flex;gap:12px;align-items:flex-start;font-size:13.6px;color:var(--ink-2);line-height:1.55;cursor:pointer} .consent input{ appearance:none;-webkit-appearance:none;flex:none;margin-top:2px; width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(34,39,43,.28); display:grid;place-content:center;transition:background .25s,border-color .25s; } .consent input::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--paper);transform:scale(0);transition:transform .25s var(--ease)} .consent input:checked{background:var(--teal-deep);border-color:var(--teal-deep)} .consent input:checked::after{transform:scale(1)} .consent a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px} .consent.is-error{color:var(--terra)} .consent.is-error input{border-color:var(--terra)} .form__note{ min-height:20px;font-family:var(--f-mono);font-size:11.5px; letter-spacing:.05em;color:var(--ink-3); } .form__note.is-ok{color:var(--teal-deep)} .form__note.is-bad{color:var(--terra)} /* ═══════════ FOOTER ═══════════ */ .foot{background:var(--night);color:#A9A296;padding-top:clamp(64px,7vw,100px);padding-bottom:26px} .foot__top{display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(32px,5vw,70px);padding-bottom:clamp(44px,5vw,70px)} .foot__logo{width:min(212px,60%);height:auto;object-fit:contain} .foot__claim{ margin-top:26px;font-family:var(--f-display);font-weight:300; font-size:clamp(23px,2.5vw,34px);line-height:1.18;letter-spacing:-.03em;color:var(--paper); } .foot__claim em{font-style:normal;font-weight:400;color:var(--gold)} .foot__nav{display:grid;grid-template-columns:1fr 1.3fr .8fr;gap:var(--gut)} .foot__nav h3{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.19em; text-transform:uppercase;color:#6E675C;margin-bottom:16px;font-weight:400; } .foot__nav a,.foot__nav span{display:block;padding:6px 0;font-size:14.6px;color:#BDB7AC;transition:color .3s,transform .35s var(--ease)} .foot__nav a:hover{color:var(--gold);transform:translateX(4px)} .foot__bar{ display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; padding-top:22px;border-top:1px solid rgba(233,228,218,.13); font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E675C; } .foot__up{display:inline-flex;align-items:center;gap:9px;color:#BDB7AC;transition:color .3s} .foot__up svg{width:14px;height:14px;transition:transform .4s var(--ease)} .foot__up:hover{color:var(--gold)} .foot__up:hover svg{transform:translateY(-4px)} /* ═══════════ LEGAL PAGES ═══════════ */ .legal{padding-block:clamp(130px,15vh,190px) clamp(70px,8vw,120px)} .legal .h1{ font-family:var(--f-display);font-weight:300; font-size:clamp(34px,5vw,68px);line-height:1.06;letter-spacing:-.034em;margin-bottom:14px; } .legal__grid{margin-top:44px;display:grid;gap:0;max-width:820px;border-top:1px solid rgba(34,39,43,.11)} .legal__grid>div{display:flex;gap:24px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid rgba(34,39,43,.11)} .legal__grid dt{flex:none;width:260px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-top:4px} .legal__grid dd{font-size:15.6px;color:var(--ink)} .legal h2{ font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.4vw,32px); letter-spacing:-.026em;margin:52px 0 14px; } .legal h3{font-size:16.5px;font-weight:600;margin:30px 0 8px} .legal p,.legal li{color:var(--ink-2);max-width:74ch;margin-top:12px;line-height:1.72} .legal ul{margin-top:12px} .legal li{position:relative;padding-left:20px} .legal li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--teal)} .legal a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px} .legal__back{ display:inline-flex;align-items:center;gap:10px;margin-top:56px; font-family:var(--f-mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3); transition:color .3s,gap .35s var(--ease); } .legal__back:hover{color:var(--teal-deep);gap:15px} /* ═══════════ REVEAL (JS-Startzustand) ═══════════ */ .js .reveal-up{opacity:0;transform:translateY(26px)} .js .hero__h1 .w{transform:translateY(105%)} .js .pillar,.js .step,.js .feats li,.js .bullets li{opacity:0;transform:translateY(24px)} .js .split{opacity:0} /* Wortweise Enthüllung */ .sw-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em} .sw{display:inline-block;will-change:transform} @media (prefers-reduced-motion:reduce){ .js .reveal-up,.js .hero__h1 .w,.js .pillar,.js .step,.js .feats li,.js .bullets li,.js .split{opacity:1 !important;transform:none !important} .js .frame::after{transform:scaleY(0)} .hero__h1 em::after{animation:none;transform:scaleX(1)} .ticker__track{transform:none !important} *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} } /* ═══════════ RESPONSIVE ═══════════ */ /* ── Tablet quer und kleine Notebooks (≤1024px) ── */ @media (max-width:1024px){ .faq{grid-template-columns:1fr;gap:26px} .pillars{grid-template-columns:1fr} } /* ── Große Bildschirme (≥1440px) ── Mehr Weite, aber die Textspalten bleiben lesbar schmal. */ @media (min-width:1440px){ :root{--wrap:1400px} .hero__lead{max-width:44ch} .prose p{max-width:58ch} } @media (min-width:1800px){ :root{--wrap:1520px} } @media (max-width:1024px){ .col-1-4,.col-1-5,.col-1-6{grid-column:1/13} .col-5-12,.col-6-12,.col-7-12,.col-8-12{grid-column:1/13} .pillars{grid-template-columns:1fr;gap:16px} .foot__top{grid-template-columns:1fr} .about__media,.quote__media,.qairo__media,.event__media{max-width:520px} .quote__mark{position:static;display:block;font-size:70px;margin-bottom:-.34em} } @media (max-width:768px){ .nav__links{ position:fixed;inset:0;z-index:-1; flex-direction:column;justify-content:center;gap:6px; background:var(--paper); opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s; } .nav__links.is-open{opacity:1;visibility:visible;z-index:1} .nav__links a{font-size:23px;font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;padding:12px 26px} .nav__links a.is-cta{margin-top:14px;font-size:16px;font-family:var(--f-sans)} .burger{display:block;z-index:2;position:relative} .brand{gap:10px} .brand__mark{width:44px;height:45px} .brand__word{height:15px} .nav.is-open{background:var(--paper)} .hero__meta-l{display:none} .eyebrow{letter-spacing:.15em;font-size:10.5px;gap:9px} .f-row{grid-template-columns:1fr} .legal__grid dt{width:100%} .legal__grid>div{gap:2px;flex-direction:column} .step{gap:16px} .foot__nav{grid-template-columns:1fr;gap:28px} } /* ── Touch-Bedienung ── Größere Trefferflächen; Hover-Effekte sind überall nur Beiwerk, jede Funktion ist per Antippen erreichbar. */ @media (hover:none),(pointer:coarse){ .choice{padding:14px 16px} .consent{padding-block:4px} .nav__links a{padding:12px 16px} .foot__nav a{padding:10px 0} .frame:hover img,.js .frame.is-shown:hover img{transform:scale(1)} } @media (max-width:480px){ .hero__h1{font-size:clamp(38px,12.4vw,60px)} .btn{width:100%;justify-content:center} .cta-float{width:auto;padding:14px 22px;font-size:13.5px; right:14px;bottom:14px; bottom:max(14px, env(safe-area-inset-bottom))} .hero__cta{gap:10px} .form{padding:20px} .contact__facts>div{flex-direction:column;gap:3px} .contact__facts dt{width:auto} }