/* studio.mixedsignal.de — Marke und Startanimation aus dem Programm selbst (msstudio/web/static/css/style.css), auf eine Seite eingedampft. */ @font-face { font-family: 'Roobert'; src: url('/static/fonts/Roobert-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roobert'; src: url('/static/fonts/Roobert-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } :root { --bg: #1a1020; --panel: #2A1E2A; --panel-hell: #3a2e3a; --orange: #F05924; --orange-dunkel: #d04a1a; --text: #ffffff; --muted: #a89aa8; --radius: 12px; --radius-sm: 8px; --font: 'Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --spalte: 760px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--orange); } a:hover { color: var(--orange-dunkel); } /* ============ Seitenkopf: Wortmarke + getippter Satz ============ In der App ist das ein Vorhang (position: fixed), der nach 3 s ausblendet und aus dem DOM fliegt. Hier bleibt er stehen und IST die Ueberschrift — umgedreht wird die Bewegung: nicht der Kopf geht weg, der Rest kommt dazu. min(100svh, 720px): svh statt vh, sonst springt die Hoehe auf iOS, wenn die Adressleiste einfaehrt. Die Deckelung auf 720 px laesst auf dem Schreibtisch den naechsten Abschnitt anschneiden — so ist sichtbar, dass es weitergeht. */ .seitenkopf { min-height: min(100svh, 720px); display: flex; align-items: center; justify-content: center; padding: 24px; } .start-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; max-width: var(--spalte); } .signet { width: 56px; height: 56px; display: block; margin-bottom: 6px; } .start-wortmarke { font-size: clamp(30px, 6vw, 58px); font-weight: 500; line-height: 1.1; letter-spacing: -0.5px; color: var(--orange); } /* Roobert hat kein Light 300 — in der App steht hier 300 und der Browser rechnet es sich aus Regular zurecht. Hier steht bewusst 400, damit die Schrift gezeigt wird, die auch geliefert wird. */ .start-wortmarke span { color: var(--text); font-weight: 400; } .start-satz { font-size: clamp(15px, 2.2vw, 21px); color: var(--muted); min-height: 1.5em; /* kein Nachrutschen, waehrend getippt wird */ } .start-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.14em; background: var(--orange); animation: startCursorBlinken 1s steps(1, end) infinite; } /* Nach dem Tippen weg — ein dauerblinkender Balken in einem Seitenkopf liest sich als Fehler, nicht als Gestaltung. */ .start-cursor.fertig { display: none; } @keyframes startCursorBlinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ============ Aufdecken des Seiteninhalts ============ Verdeckt wird AUSSCHLIESSLICH ueber opacity, nie ueber display:none oder visibility:hidden — der Text muss fuer Suchmaschinen und Vorlesehilfen von Anfang an im Dokument stehen. Und die Verdeckung haengt an der Klasse 'js' auf : laeuft kein Skript (JavaScript aus, Datei nicht geladen), ist der Inhalt schlicht sofort da. Der Wecker bei 4.5s ist der Gurt zum Hosentraeger: setzt das Skript die Klasse nie, deckt die Animation trotzdem auf. Waehrend der Verzoegerung greift sie noch nicht (kein 'backwards'), der Uebergang gewinnt also im Normalfall. */ html.js .seiteninhalt { opacity: 0; animation: inhaltAufdecken 0.45s ease 4.5s forwards; } html.js body.start-fertig .seiteninhalt { opacity: 1; transition: opacity 0.45s ease; } @keyframes inhaltAufdecken { to { opacity: 1; } } /* ============ Abschnitte ============ */ .abschnitt { max-width: var(--spalte); margin: 0 auto; padding: 0 24px 56px; } .abschnitt h2 { font-size: 22px; font-weight: 500; margin-bottom: 14px; color: var(--orange); } .abschnitt p { margin-bottom: 14px; color: rgba(255, 255, 255, 0.85); } .abschnitt p:last-child { margin-bottom: 0; } .leise { color: var(--muted); font-size: 15px; } /* Damit im HTML kein style="" noetig ist — nur so bleibt die Inhaltsrichtlinie ohne 'unsafe-inline' fuer Stile. */ .abstand-oben { margin-top: 16px; } /* Ablauf: vier Schritte, nummeriert */ .schritte { list-style: none; counter-reset: schritt; } .schritte li { counter-increment: schritt; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px solid var(--panel-hell); color: rgba(255, 255, 255, 0.85); } .schritte li:last-child { border-bottom: none; } .schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); color: var(--orange); font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; } .schritte b { font-weight: 500; color: var(--text); } /* Voraussetzungen */ .karte { background: var(--panel); border-radius: var(--radius); padding: 20px 22px; } .zeile { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--panel-hell); } .zeile:first-child { padding-top: 0; } .zeile:last-child { border-bottom: none; padding-bottom: 0; } .zeile dt { flex: 0 0 170px; font-weight: 500; } .zeile dd { flex: 1; color: var(--muted); font-size: 15px; } .hinweis { border-left: 3px solid var(--orange); padding: 4px 0 4px 16px; color: var(--muted); font-size: 15px; } /* ============ Formular ============ */ .formular { display: flex; flex-direction: column; gap: 14px; } .feld { display: flex; flex-direction: column; gap: 6px; } .feld label { font-size: 14px; color: var(--muted); } .feld input, .feld textarea { background: var(--bg); border: 1px solid var(--panel-hell); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; padding: 10px 12px; width: 100%; } .feld input:focus, .feld textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; } .feld textarea { resize: vertical; min-height: 84px; } .paar { display: flex; gap: 14px; } .paar .feld { flex: 1; } /* Honigtopf: fuer Menschen unsichtbar, fuer Ausfuellhilfen uninteressant. Nicht display:none — manche Sammelprogramme ueberspringen das gezielt. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .knopf { background: var(--orange); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font); font-size: 16px; font-weight: 500; padding: 12px 22px; cursor: pointer; align-self: flex-start; } .knopf:hover { background: var(--orange-dunkel); } .knopf:disabled { opacity: 0.5; cursor: default; } .meldung { font-size: 15px; min-height: 1.5em; } .meldung.gut { color: var(--orange); } .meldung.schlecht { color: #f59e0b; } noscript .hinweis { display: block; margin-bottom: 14px; } /* ============ Fuss ============ */ .fuss { border-top: 1px solid var(--panel-hell); padding: 28px 24px 40px; color: var(--muted); font-size: 14px; } .fuss-inhalt { max-width: var(--spalte); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ============ Schmale Fenster ============ */ @media (max-width: 640px) { .zeile { flex-direction: column; gap: 4px; } .zeile dt { flex: none; } .paar { flex-direction: column; } .seitenkopf { min-height: min(100svh, 560px); } } /* ============ Bewegung reduzieren ============ Systemeinstellung "Bewegung reduzieren": kein Tippen, kein Blinken — der Satz steht sofort vollstaendig da. seite.js prueft dieselbe Abfrage; das hier ist der Gurt zum Hosentraeger, falls kein Skript laeuft. */ @media (prefers-reduced-motion: reduce) { .start-cursor { display: none; } html.js .seiteninhalt { animation-delay: 0.6s; animation-duration: 0.2s; } html.js body.start-fertig .seiteninhalt { transition-duration: 0.2s; } }