/* Projekte-Seite: Styles der beiden originalgetreuen Demo-Nachbildungen. Ausgelagert aus projekte/index.html (SEO: kein Inline-CSS im Dokument). */ /* Wie auf der ursprünglichen Seite: verhindert horizontales Scrollen der 100vw-Demos */ html { overflow-x: hidden; } /* Kompatibilitäts-Wrapper: bildet die Body-Umgebung der Originalseite nach, damit die Original-Demo-Sektionen unverändert dargestellt werden. */ .legacy-demos { --body-pad-x: 2rem; --top-offset: calc(2rem + 70px); padding: 0 var(--body-pad-x); font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: normal; text-align: center; } @media (max-width: 1024px) { .legacy-demos { --top-offset: calc(2rem + 80px); } } /* Neutrale UA-Defaults innerhalb der Demos (setzt globale site.css-Regeln zurück, ohne die spezifischen Original-Regeln zu überstimmen) */ .legacy-demos :where(*, *::before, *::after) { box-sizing: content-box; } .legacy-demos :where(h1, h2, h3, h4, h5) { margin: revert; font-size: revert; font-weight: revert; line-height: revert; letter-spacing: revert; color: revert; } .legacy-demos :where(p) { margin: revert; } .legacy-demos :where(ul, ol) { margin: revert; padding: revert; } .legacy-demos :where(img) { display: revert; max-width: revert; height: revert; } .legacy-demos :where(a) { color: revert; text-decoration: revert; } /* ================================================================== Ab hier: Original-CSS der Demo-Sektionen (unverändert übernommen) ================================================================== */ /* Bazara Demo Styles (scoped) */ .bazara-demo { position: relative; width: 100vw; min-height: 100vh; overflow: hidden; background: #6e370e; z-index: 1500; } /* Default: hide Bazara hamburger on desktop */ .bazara-demo .hamburger-menu { display: none; } @media (max-width: 768px) { /* Braun oberhalb entfernen: Section direkt ohne farbigen Block anschließen */ #bazara-demo-section { background-color: #ffffff !important; margin-top: 0 !important; padding-top: 2.2rem !important; height: auto; } /* Mobile Intro trennt ausreichend, also ggf. obere Offsets neutralisieren */ #bazara-demo-section .hero-section { padding-top: 0 !important; } } /* Bazara Demo – Mobile Nav (like main mobile, but nav not fixed) */ @media (max-width: 1024px) { .bazara-demo .bazara-nav { position: relative; height: 5rem; padding: 0 1rem; background-color: rgba(230,230,230,0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #c8c5c5; } .bazara-demo .menu-logo .logo-link { padding-left: 0; margin-left: -20px; } /* Show hamburger on mobile */ .bazara-demo .hamburger-menu { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; padding: 0; background: transparent; border: none; cursor: pointer; position: relative; z-index: 40002; } .bazara-demo .hamburger-menu .bar { width: 30px; height: 4px; background-color: #fff; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; transform-origin: center; } .bazara-demo .hamburger-menu.active .bar1 { transform: rotate(45deg) translate(5px, 5px); } .bazara-demo .hamburger-menu.active .bar2 { opacity: 0; } .bazara-demo .hamburger-menu.active .bar3 { transform: rotate(-45deg) translate(5px, -5px); } /* Slide-out panel anchored to the demo section (not fixed) */ .bazara-demo .nav-links { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.35); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 3rem; gap: 2rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1); z-index: 40001; box-shadow: none; overflow-y: auto; overflow-x: hidden; } .bazara-demo .nav-links.mobile-menu-open { transform: translateX(0); } .bazara-demo .nav-links.mobile-menu-open { box-shadow: -10px 0 25px rgba(0,0,0,0.2); } .bazara-demo .nav-links li { width: 100%; text-align: center; margin: 0; } .bazara-demo .nav-links span { color: #000; font-size: 1.4rem; } .bazara-demo .lang-switcher .lang-option { color: #000; } } .bazara-demo .bazara-nav { display: flex; justify-content: space-between; align-items: center; background-color: rgba(230,230,230,0.15); border-bottom: 1px solid #c8c5c5; padding: 0 25px; position: absolute; top: 0; left: 0; width: 100%; height: 93px; box-sizing: border-box; z-index: 1501; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .bazara-demo .menu-logo .logo-link { text-decoration: none; color: inherit; display: inline-block; padding-top: 5.5px; padding-left: 20px; } .bazara-demo .menu-logo .logo-text-container { position: relative; display: inline-block; line-height: 1; } .bazara-demo .menu-logo .bazara-style { font-family: 'Questrial', sans-serif; font-size: 34px; color: #c8c5c5; } .bazara-demo .menu-logo .safia-style { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: 'Great Vibes', cursive; font-size: 30px; color: #0c0c0c; pointer-events: none; opacity: 0.75; white-space: nowrap; } .bazara-demo .menu-logo .subtitle-style { margin-top: 4px; font-family: 'Inter', sans-serif; font-size: 10px; color: #000000; opacity: 0.9; line-height: 1.2; text-align: center; } .bazara-demo .nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } .bazara-demo .nav-links li { margin-left: 60px; } .bazara-demo .nav-links li:last-child { margin-right: 60px; } .bazara-demo .nav-links span { color: #ffffff; font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 16px; position: relative; padding-bottom: 1px; display: inline-block; } .bazara-demo .nav-links span .menu-item-number { display: none; } .bazara-demo .nav-links span::after { content: ''; position: absolute; width: 0; height: 1.3px; bottom: 0; left: 0; background-color: currentColor; transition: width 0.2s ease-in-out; } .bazara-demo .nav-links span:hover::after { width: 100%; } .bazara-demo .lang-switcher { margin-left: 40px; display: flex; align-items: center; } .bazara-demo .lang-switcher .lang-option { font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: 300; padding: 0 6px; color: #b0b0b0; text-decoration: none; } .bazara-demo .lang-switcher .lang-option.active-lang { color: #ffffff; } .bazara-demo .hero-section { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #ffffff; position: relative; overflow: hidden; } .bazara-demo .hero-text-wrapper { width: 100%; } .bazara-demo .hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/assets/startseite.webp'); background-size: cover; background-position: center; z-index: -1; transition: transform 0.1s ease-out; min-width: 100vw; min-height: 100vh; will-change: transform; backface-visibility: hidden; transform-origin: center center; } .bazara-demo .hero-section .demo-h1 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 110px; margin: 0 0 20px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); line-height: 1.2; text-align: center; } .bazara-demo .hero-section .demo-h1 .h1-firstline { display: inline; white-space: nowrap; } .bazara-demo .dynamic-h1-line { display: block; position: relative; height: 1.3em; overflow-y: hidden; width: 200%; left: 50%; transform: translateX(-50%); } .bazara-demo .hero-section h2 { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 30.1px; color: #ffffff; line-height: 1.3; margin: 15px 0 25px 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); } .bazara-demo .dynamic-phrase { position: absolute; left: 50%; width: max-content; transform: translateX(-50%); display: block; text-align: center; transition: transform 1s ease-in-out, opacity 1s ease-in-out; white-space: nowrap; } .bazara-demo .dynamic-phrase.entering { opacity: 0; transform: translateX(-50%) translateY(100%); } .bazara-demo .dynamic-phrase.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .bazara-demo .dynamic-phrase.exiting { opacity: 0; transform: translateX(-50%) translateY(-100%); } @media (max-width: 768px) { /* Match main hero mobile alignment and sizes */ #bazara-demo-section .hero-section { align-items: flex-start; justify-content: flex-start; text-align: left; padding-left: 20px; padding-right: 0; padding-top: 215px !important; height: calc(100vh - 215px) !important; } #bazara-demo-section .hero-section .demo-h1 { font-size: 39px; margin-bottom: 15px;} #bazara-demo-section .dynamic-h1-line { height: 1.3em; width: auto; left: 0; transform: none; } #bazara-demo-section .hero-section h2 { font-size: 20px; line-height: 1.4; margin-top: 10px; margin-bottom: 20px; padding-right: 20px; } #bazara-demo-section .dynamic-phrase { left: 0; transform: translateX(0); text-align: left; } #bazara-demo-section .dynamic-phrase.entering { transform: translateX(0) translateY(100%); } #bazara-demo-section .dynamic-phrase.visible { transform: translateX(0) translateY(0); } #bazara-demo-section .dynamic-phrase.exiting { transform: translateX(0) translateY(-100%); } /* Nudge only the first non-dynamic line of the h1 a bit further left */ /* Bild-Box überhöht anlegen, damit das Hoch-Schieben (translateY) beim Zoomen unten nie den braunen Hintergrund freilegt - der Überschuss wird vom overflow:hidden der Hero-Section einfach abgeschnitten */ #bazara-demo-section .hero-background { height: calc(100% + 240px); } } #bazara-demo-section { isolation: isolate; } /* Nahla Demo (scoped) */ #nahla-demo-section { font-family: 'Roboto', sans-serif; overflow-x: hidden; letter-spacing: 0.5px; position: relative; z-index: 20; isolation: isolate; background: #ffffff; } #nahla-demo-section a { text-decoration: none; color: inherit; } /* New Nahla header styles */ #nahla-demo-section { --header-gap: 36px; --header-edge: 40px; } #nahla-demo-section .header { background-color: #fff; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: clamp(8px, 2.8vw, 36px); padding: 1px clamp(12px, 4vw, 40px); border-bottom: 1px solid #eee; position: relative; left: 0; top: 0; width: 100%; margin: 0; box-sizing: border-box; z-index: 10002; } #nahla-demo-section .header-left, #nahla-demo-section .header-center, #nahla-demo-section .header-right, #nahla-demo-section .header-button, #nahla-demo-section .header-language { padding: 10px; } #nahla-demo-section .logo { width: clamp(90px, 7vw, 120px); margin: 0; } #nahla-demo-section .header-left { display: flex; align-items: center; gap: var(--header-gap); padding: 0; } #nahla-demo-section .header-title { font-weight: 700; font-size: 14px; line-height: 1.2; color: #111; white-space: nowrap; } #nahla-demo-section .header-address { margin: 0; font-size: 13px; color: #666; white-space: nowrap; flex: 0 0 auto; text-align: right; } #nahla-demo-section .header-email { margin: 0; font-size: 13px; color: #666; white-space: nowrap; flex: 0 0 auto; } #nahla-demo-section .header-email a { color: inherit; text-decoration: none; } #nahla-demo-section .header-email a:hover { text-decoration: underline; } #nahla-demo-section .header-spacer-left { flex: 1 1 auto; min-width: 0; } /* Keep content blocks fixed so only spacer compresses */ #nahla-demo-section .header-left, #nahla-demo-section .header-actions, #nahla-demo-section .header-address, #nahla-demo-section .header-email, #nahla-demo-section .hamburger { flex: 0 0 auto; } /* Ensure inline, no internal wraps on key text */ #nahla-demo-section .header-title, #nahla-demo-section .header-address, #nahla-demo-section .header-email { white-space: nowrap; } #nahla-demo-section .button { color: #fff; background-color: #4b79ce; padding: 13px 0px; text-decoration: none; margin: 0; border-radius: 10px; font-weight: 700; font-size: 1.04rem; transition: background-color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-width: 195px; } #nahla-demo-section .button:hover { background-color: #7bbd64; } #nahla-demo-section .header-actions { display: flex; align-items: center; gap: var(--header-gap); } #nahla-demo-section .header-language { margin: 0; font-size: 13px; padding: 0; } #nahla-demo-section .language-active { color: grey; padding-right: 5px; } #nahla-demo-section .language-inactive { color: black; } #nahla-demo-section .header-hidden { top: -150px; } /* Keep old mobile menu / hamburger styles adjustments below */ #nahla-demo-section .hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; outline: none; -webkit-tap-highlight-color: transparent; } #nahla-demo-section .hamburger:focus, #nahla-demo-section .hamburger:focus-visible { outline: none; box-shadow: none; } #nahla-demo-section .hamburger .bar { display: block; width: 26px; height: 3px; background: #222; margin: 5px 0; border-radius: 2px; } #nahla-demo-section .mobile-menu { display: none; position: fixed; inset: 0; background: #ffffff; z-index: 10002; padding: 80px 24px 24px; box-sizing: border-box; overflow-y: auto; } #nahla-demo-section .mobile-menu.open { display: flex; flex-direction: column; gap: 18px; } #nahla-demo-section .mobile-menu span { font-size: 20px; padding: 12px 4px; border-bottom: 1px solid #eee; } #nahla-demo-section .mobile-menu .mobile-cta { align-self: flex-start; margin-top: 6px; background: #4b79ce; color: #fff; border-radius: 10px; padding: 12px 16px; font-weight: 700; border: 2px solid #4b79ce; } #nahla-demo-section .mobile-menu .mobile-section-title { border: none; padding: 0; margin-top: 10px; font-weight: 700; color: #555; text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; } #nahla-demo-section .mobile-menu .mobile-lang { border: none; padding: 0; font-size: 16px; } #nahla-demo-section .nav-container { display: flex; justify-content: center; padding-top: 20px; width: 100%; z-index: 10001; transition: height 0.3s ease; position: relative; } #nahla-demo-section nav { background-color: #fff; border: 5px solid #4b79ce; border-radius: 50px; padding: 20px 45px; display: inline-block; } #nahla-demo-section nav ul { display: flex; justify-content: space-around; width: 100%; list-style: none; padding: 0; margin: 0; } #nahla-demo-section nav ul li { text-align: center; padding: 0px 57px; } #nahla-demo-section .nav-placeholder { height: 109px; width: 100%; } #nahla-demo-section .nav-fixed { position: static; top: auto; left: auto; width: 100%; } #nahla-demo-section main { padding-top: 50px; } #nahla-demo-section .page-container { max-width: 1300px; margin: 0 auto; width: 100%; } @media (max-width: 900px) { #nahla-demo-section .header { justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-left: 0; position: sticky; top: 0; z-index: 10004; border-bottom: 1px solid #eee; } #nahla-demo-section .logo { width: 78px; margin-left: 3px; } #nahla-demo-section .header-title, #nahla-demo-section .header-address, #nahla-demo-section .header-email, #nahla-demo-section .header-actions, #nahla-demo-section .header-language, #nahla-demo-section .button, #nahla-demo-section .header-spacer-left, #nahla-demo-section .header-spacer-right { display: none !important; } #nahla-demo-section .hamburger { display: block; margin-right: 0; padding: 4px; position: absolute; right: 28px; z-index: 10003; pointer-events: none; cursor: default; } #nahla-demo-section .hamburger .bar { width: 24px; height: 3px; background: #222; margin: 5px 0; border-radius: 2px; } body.menu-open #nahla-demo-section .hamburger { z-index: 10005; } body.menu-open { overflow: hidden !important; } html.mobile-menu.open, body.mobile-menu.open { overflow: hidden !important; } #nahla-demo-section .nav-container { display: none; } #nahla-demo-section .page-container { max-width: 100%; } /* Mirror Nahla mobile hero layout + requested tweaks */ #nahla-demo-section main { padding-top: 8px; } #nahla-demo-section { padding-bottom: 200px; } #nahla-demo-section .main-content { padding: 12px 10px; min-height: 620px; padding-top: 0; } #nahla-demo-section .main-text { width: 100%; max-width: none; padding-left: 0; } #nahla-demo-section .main-text { position: relative; z-index: 2; } #nahla-demo-section .main-text h2 { font-size: 1.5rem; margin-bottom: 16px; margin-top: 0; } #nahla-demo-section .main-text p { font-size: 1rem; line-height: 1.6; } #nahla-demo-section .main-text p:nth-of-type(2) { display: none; } #nahla-demo-section .main-image-bg { position: relative; width: 100%; height: auto; display: block; margin-top: 120px; margin-left: 40px; right: auto; top: auto; z-index: -1; pointer-events: none; } #nahla-demo-section .main-image-bg img { width: 130%; max-width: none; margin: 12px 0 0; border-radius: 10px; } } #nahla-demo-section .main-content { display: block; align-items: initial; padding: 20px; position: relative; min-height: 350px; margin-left: 0; padding-left: 1.5rem; } #nahla-demo-section .main-text { position: relative; z-index: 2; width: 80%; max-width: 750px; background: transparent; padding: 10px 0 10px 0; text-align: left; } #nahla-demo-section .main-text h2 { font-size: 1.8rem; margin-bottom: 25px; font-weight: 800; line-height: 1.2; text-align: left; color: #000; } #nahla-demo-section .main-image-bg { position: absolute; top: 0; right: 0; width: 60%; height: 100%; z-index: -1; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; } #nahla-demo-section .main-image-bg img { width: 100%; max-width: 600px; border-radius: 10px; opacity: 1; margin-top: 50px; margin-right: 0; } /* Ensure mobile image sizing overrides later general rule */ @media (max-width: 900px) { #nahla-demo-section .main-image-bg { margin-top: 120px !important; margin-left: 40px !important; } #nahla-demo-section .main-image-bg img { width: 130% !important; max-width: none !important; transform: translateX(6%) !important; } #nahla-demo-section .main-text { width: 100% !important; max-width: none !important; } } #nahla-demo-section .main-text p { font-size: 16px; line-height: 1.8; margin-bottom: 15px; text-align: left; color: #000; } #nahla-demo-section .nahla-live-btn { position: absolute; right: clamp(32px, 6vw, 64px); bottom: clamp(16px, 3vw, 28px); z-index: 10010; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; background-color: #4b79ce; color: #ffffff; border: 1px solid #4b79ce; padding: 0.9rem 1.1rem; border-radius: 10px; box-shadow: none; font-weight: 500; white-space: nowrap; transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out; } #nahla-demo-section .nahla-live-btn:hover, #nahla-demo-section .nahla-live-btn:focus-visible { background: #7bbd64; color: #ffffff; border-color: #7bbd64; outline: none; } @media (max-width: 768px) { #nahla-demo-section .nahla-live-btn { right: auto; left: 16px; bottom: 60px; } } .bazara-demo .lang-switcher .lang-option::after { content: none; } @media (max-width: 768px) { .h1-firstline { margin-left: -70px; } } /* ================================================================== Uebergang in die Demos: die echte Website oeffnet sich wie in einem Browserfenster. Die Demo-Sektionen selbst bleiben unveraendert – sie werden beim Hereinscrollen nur skaliert und eingerahmt. ================================================================== */ /* Ersetzt die frueheren Inline-Styles der beiden Demo-Sektionen */ #bazara-demo-section, #nahla-demo-section { width: 100vw; margin-left: calc(-1 * (var(--body-pad-x, 2rem))); margin-right: calc(-1 * (var(--body-pad-x, 2rem))); position: relative; } /* Die Demos muessen untereinander stapeln (Nahla schiebt sich beim Scrollen ueber Bazara), aber IMMER unter der vivenna-Seitennavigation bleiben: .site-header liegt bei 1000, .mobile-nav bei 999. Frueher standen hier 15000/16000 – damit deckten die Demos das aufgeklappte Hamburger-Menue und den Header komplett zu. Beide Sektionen haben "isolation: isolate", ihre internen z-index-Werte bleiben also gekapselt; nur diese beiden Werte zaehlen nach aussen. */ #bazara-demo-section { z-index: 10; background-color: #6e370e; } #nahla-demo-section { z-index: 20; background: #ffffff; } /* Der Versatz stammte vom braunen Overlay: die Demo soll jetzt buendig mit der Praxis-Navigation an der Fensteroberkante beginnen. */ #bazara-demo-section { margin-top: 0 !important; padding-top: 0 !important; } /* --- Intro vor der jeweiligen Demo --- */ /* Die Hoehe ist bewusst gedeckelt: ohne "min()" waeren es auf einem 27-Zoll- Monitor rund 1200px fuer gut 500px Inhalt – also je ~330px tote Flaeche ueber und unter dem Intro. Bis ~891px Fensterhoehe (Handy, 13-Zoll-Laptop) gewinnt weiterhin 92vh, dort aendert sich also nichts. "align-items: flex-end" statt "center": bei zentriertem Inhalt wird die Restflaeche gleichmaessig oben und unten verteilt, der sichtbare Abstand unter .launch__hint haengt dann an der Inhaltshoehe. Das Nahla-Signet ist hoeher als das Bazara-Signet – die beiden Intros bekamen dadurch unterschiedlich viel Luft vor der Demo. Am unteren Rand ausgerichtet ist der Abstand immer exakt das padding-bottom, in beiden Sektionen und bei jeder Fenstergroesse. Die Restflaeche landet oben, neben der vorherigen Sektion, wo sie nicht auffaellt. */ .launch { --desk: #e9eff5; position: relative; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #ffffff 0%, var(--blue-050) 42%, var(--desk) 100%); min-height: min(92vh, 820px); display: flex; align-items: flex-end; justify-content: center; padding: clamp(3.5rem, 9vh, 6rem) 1.5rem clamp(5rem, 15vh, 9rem); text-align: center; } .launch__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; } .launch__eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--blue-050); border: 1px solid var(--blue-100); padding: .35rem .75rem; border-radius: 999px; } .launch__title { margin: 1.2rem 0 .75rem; letter-spacing: -.015em; font-size: clamp(1.9rem, 4.4vw, 3.05rem); line-height: 1.16; } .launch__sub { margin: 0 auto; max-width: 42em; color: var(--muted); font-size: 1.05rem; } .launch__mark { margin-top: clamp(1.8rem, 6vh, 3.4rem); } .launch__hint { margin-top: clamp(2rem, 6.5vh, 3.6rem); display: inline-flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .launch__hint i { display: block; width: 1px; height: 40px; background: linear-gradient(rgba(90,102,115,.75), rgba(90,102,115,0)); animation: launchPulse 2.4s ease-in-out infinite; } @keyframes launchPulse { 0%,100% { opacity: .3; transform: scaleY(.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* Praxis-Signet im Intro (folgt dem Original-Logoaufbau) */ .mark { display: inline-flex; flex-direction: column; align-items: center; } .mark__stack { position: relative; display: inline-block; line-height: .85; } .mark__base { font-family: 'Questrial', sans-serif; font-size: clamp(54px, 8.5vw, 116px); color: #c8c5c5; letter-spacing: .02em; } .mark__script { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: 'Great Vibes', cursive; font-size: clamp(58px, 9vw, 124px); color: #0c0c0c; white-space: nowrap; line-height: .9; } .mark__sub { margin-top: clamp(1rem, 2.4vw, 1.9rem); font-family: 'Inter', sans-serif; font-size: clamp(14px, 1.6vw, 22px); color: var(--ink-soft); } /* Ueber die HOEHE begrenzt, nicht ueber die Breite: das Bazara-Signet daneben ist rund 165px hoch, ein breitenbasiertes Logo waere durch sein Seitenverhaeltnis deutlich hoeher ausgefallen. Die 180px gleichen die leichtere Wirkung der reinen Typografie aus – beide Intros lesen sich dadurch als Serie. */ .mark--plate img { height: clamp(92px, 13vw, 180px); width: auto; display: block; } /* --- Browserrahmen, der der einfahrenden Demo folgt (per JS erzeugt) --- Bewusst nicht mitskaliert: die Chrome-Oberflaeche eines echten Fensters bleibt ja auch gleich gross, wenn das Fenster kleiner ist – und die Adresszeile bleibt dadurch in jeder Phase lesbar. */ /* Absolut im Dokument statt fixed am Viewport: nur so scrollt der Rahmen auf dem Compositor mit der Sektion mit. Bei "fixed" haengt die per JS gesetzte Position auf Handys sichtbar hinterher und der Rahmen loest sich beim schnellen Scrollen kurz vom Fenster ab. */ /* Ueber den Demo-Sektionen (10/20), aber unter der Seitennavigation. */ .vchrome { position: absolute; left: 0; top: 0; z-index: 30; display: flex; flex-direction: column; box-sizing: border-box; background: #dee1e6; border-radius: 12px 12px 0 0; overflow: hidden; font-family: var(--font); color: #3c4043; pointer-events: none; opacity: 0; will-change: transform, width; } .vchrome__tabs { flex: none; height: 34px; display: flex; align-items: flex-end; gap: 6px; padding: 0 8px; } .vchrome__tab { height: 28px; min-width: 190px; max-width: 280px; display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 9px 9px 0 0; padding: 0 11px; font-size: 12px; line-height: 1; } .vchrome__fav { flex: none; width: 14px; height: 14px; border-radius: 50%; } .vchrome__tabtitle { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vchrome__x { flex: none; opacity: .45; font-size: 14px; line-height: 1; } .vchrome__plus { flex: none; color: #5f6368; font-size: 17px; line-height: 1; padding-bottom: 5px; } .vchrome__bar { flex: none; height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 13px; background: #fff; } .vchrome__nav { flex: none; display: flex; align-items: center; gap: 7px; color: #5f6368; } .vchrome__nav svg { display: block; width: 18px; height: 18px; } .vchrome__nav svg:nth-child(2) { opacity: .35; } .vchrome__omni { flex: 1 1 auto; min-width: 0; height: 32px; display: flex; align-items: center; gap: 9px; background: #f1f3f4; border-radius: 999px; padding: 0 14px; color: #202124; font-size: 15px; overflow: hidden; } .vchrome__omni svg { flex: none; color: #5f6368; } .vchrome__url { white-space: nowrap; } .vchrome__caret { display: inline-block; flex: none; width: 1.5px; height: 17px; background: #1a73e8; animation: vcaret 1.05s step-end infinite; } @keyframes vcaret { 50% { opacity: 0; } } .vchrome__count { display: none; flex: none; width: 20px; height: 20px; border: 2px solid #5f6368; border-radius: 5px; color: #5f6368; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; } .vchrome__menu { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 0 2px; } .vchrome__menu i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #5f6368; } /* Ladebalken wie in Chrome: ganz unten am Rahmen, direkt ueber der Seite */ /* Akzentfarbe pro Demo: Standard ist das vivenna-Blau, einzelne Sektionen setzen --vchrome-accent auf ihre eigene Buttonfarbe. */ .vchrome__load { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--vchrome-accent, var(--blue)); } @media (max-width: 700px) { .vchrome { border-radius: 14px 14px 0 0; background: #fff; } .vchrome__tabs, .vchrome__nav { display: none; } .vchrome__count { display: block; } .vchrome__bar { height: 50px; gap: 10px; padding: 0 11px; } .vchrome__omni { height: 36px; font-size: 15px; } } /* Auf 24-/27-Zoll-Monitoren ist das verkleinerte Fenster rund 2000px breit – eine 78px hohe Leiste wirkt darauf wie ein Strich. Etwas kraeftiger bleibt sie im Verhaeltnis erkennbar. Das Skript misst die Rahmenhoehe bei jedem Resize selbst (it.bar = chrome.offsetHeight) und setzt die Position danach, hier ist also nichts nachzuziehen. */ @media (min-width: 1600px) { .vchrome__tabs { height: 40px; } .vchrome__tab { height: 33px; min-width: 220px; max-width: 330px; font-size: 13px; } .vchrome__bar { height: 52px; } .vchrome__omni { height: 36px; font-size: 16px; } } /* Heller "Schreibtisch", auf dem das Fenster liegt */ .legacy-demos { background: #e9eff5; } /* Die Nahla-Demo ist deutlich kuerzer als die Bazara-Demo (rund 660px statt voller Fensterhoehe). Auf grossen Monitoren stiess sie dadurch fast unmittelbar an den naechsten Abschnitt. Bewusst als AUSSENabstand: als Innenabstand wuerde der Schreibtisch die Flaeche einfaerben und unter der randlos geoeffneten Website bliebe ein grauer Streifen stehen. So bleibt der Schreibtisch genau so hoch wie die Demo – waehrend der Animation liegt das verkleinerte Fenster weiterhin darauf – und der Zwischenraum zum Folgeabschnitt ist sauber weiss. Am Wrapper und nicht an der Sektion, damit die vom Launch-Skript gemessene Sektionshoehe unveraendert bleibt. */ @media (min-width: 1200px) { .legacy-demos--short { margin-bottom: clamp(2rem, 7vh, 6rem); } } #bazara-demo-section, #nahla-demo-section { transform-origin: 50% 0; } @media (prefers-reduced-motion: reduce) { .vchrome { display: none; } .launch__hint { display: none; } /* Ohne Rahmen und ohne Hinweis ist das Intro nur noch eine Titelkarte – die auf die Fensterhoehe gerechnete Mindesthoehe wuerde darueber bloss leere Flaeche stehen lassen. */ .launch { min-height: 0; } } /* Bazara Live-Button (in der Hero-Section unten rechts) */ .bazara-hero { position: relative; } .bazara-hero .bazara-live-btn { position: absolute; right: 3rem; bottom: 3rem; z-index: 500000; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: #ffffff; color: #6e370e; border: 1px solid #ffffff; font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; line-height: 1; padding: 12px 16px; border-radius: 0; box-shadow: none; cursor: pointer; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .bazara-hero .bazara-live-btn .live-btn-arrow { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; } .bazara-hero .bazara-live-btn .live-arrow-svg { display: block; width: 22px; height: 22px; } .bazara-hero .bazara-live-btn:hover, .bazara-hero .bazara-live-btn:focus-visible { background: #6e370e; color: #ffffff; border-color: #ffffff; outline: none; } @media (max-width: 768px) { /* Auf Handy: Button im unteren linken Bereich der Hero-Section anzeigen */ .bazara-hero .bazara-live-btn { right: auto; bottom: auto; top: 85%; left: 30%; transform: translate(-50%, -50%); z-index: 10000; } }