/* Base */ :root { --carbon: #535C66; --jade: #05CC93; --purple: #7764FC; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; color: var(--carbon); background: #fff; } .container { width: min(1024px, 92%); margin: 0 auto; } /* Header with subtle jade gradient */ .site-header { padding: 2.5rem 0; background: linear-gradient(90deg, rgba(5,204,147,0.08), rgba(5,204,147,0.0)); } .site-header h1 { margin: 0 0 0.25rem; font-weight: 800; letter-spacing: 0.2px; } .site-header .lead { margin: 0; color: #6b7280; } /* Steps */ .step { position: relative; padding: 1.5rem; margin: 2rem 0; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.06); opacity: 0.6; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .step.in-view { opacity: 1; transform: translateY(0); } .step-head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; } .step-number { width: 44px; height: 44px; border-radius: 12px; background: var(--jade); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; } .step h2 { margin: 0; font-weight: 700; } /* Levels list */ .levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .level-card { padding: 1rem; border-radius: 12px; background: #f9fbfa; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 0.5rem; } .level-card h3 { margin: 0; font-weight: 700; } .level-card .desc { margin: 0; color: #4b5563; font-size: 0.95rem; min-height: 4.5rem; } .level-card .btn { align-self: center; margin-top: 0.75rem; } /* Media */ .media img, .media video { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); display: block; } .media figcaption { color: #6b7280; font-size: 0.95rem; margin-top: 0.5rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: var(--jade); color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 0.2px; border: 1px solid var(--jade); box-shadow: 0 6px 16px rgba(5,204,147,0.25); } .btn:hover { filter: brightness(0.96); } .btn.primary { background: var(--jade); } /* Footer */ .site-footer { padding: 2rem 0; color: #6b7280; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); } /* Progress outline when done */ .done { outline: 3px solid rgba(5,204,147,0.45); outline-offset: 6px; } /* Step-Buttons mittig */ #step1 .actions, #step2 .actions, #step5 .actions { display: flex; justify-content: center; } /* Brand: 2 Spalten – links Logo (fix), rechts Textgruppe */ .site-header .brand { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: center; } .site-header .brand-logo img { height: 56px; width: auto; display: block; } .site-header .brand-text { display: flex; flex-direction: column; } .site-header .brand-text h1 { margin: 0; font-weight: 800; letter-spacing: 0.2px; } .site-header .brand-text .lead { margin: 0.25rem 0 0; color: #6b7280; } @media (min-width: 640px) { .site-header .brand { column-gap: 1.25rem; } } .site-header .lead { margin: 0; } /* Gesperrte Steps: unsichtbar, nicht fokussierbar */ .step.locked { display: none; } /* Hinweise */ .step .hint { color: #6b7280; margin: 0 0 0.75rem; } /* mehr Luft am Seitenende für Scrollbarkeit */ main.container { padding-bottom: 6rem; } /* Basislayout: Seite groß genug */ html, body { height: 100%; } body { min-height: 100vh; } /* Fonts (lokal) */ @font-face { font-family: "MyTitleFont"; src: url("assets/fonts/HPE Graphik-Black.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } .site-header .brand-text h1 { font-family: "MyTitleFont", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; } /* Sichtbarkeit bei aktivem JS: nie entsättigt */ .js-enabled .step { opacity: 1; } .step.done { opacity: 1; } /* Zugangscode-Gate */ .gate { position: fixed; inset: 0; background: rgba(0,0,0,0.25); display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); } .gate.visible { display: flex; } .gate-card { width: min(560px, 92%); background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 1.5rem; } .gate-card h2 { margin: 0 0 0.5rem; font-weight: 800; letter-spacing: 0.2px; color: var(--carbon); } .gate-hint { margin: 0 0 1rem; color: #6b7280; } .gate-form { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; } .gate-input { padding: 0.6rem 0.75rem; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; font: inherit; } .gate-error { margin: 0.5rem 0 0; color: #e11d48; font-weight: 600; min-height: 1.25rem; } /* Während das Gate sichtbar ist: Seite ausblenden/unklickbar */ body.gate-open header, body.gate-open main, body.gate-open footer { opacity: 0; pointer-events: none; } /* Optional: bei offenem Gate Scrollen verhindern */ body.gate-open { overflow: hidden; } /* Einheitlicher Look für