/* ===================================================================== st.css — Startseite, geteilte editoriale Basis --------------------------------------------------------------------- Synthese aus Design-Briefing_Thesen.md + Design-Briefing_AI-Status-Quo.md. Liefert: Editorial-Schriften (inkl. Söhne Mono + Flecha Medium/Italic, die die globale style.css NICHT lädt), Token-Set, gescopte Primitive (Eyebrow, Editorial-Button, Marker-Unterstrich, Tag, Panel-DNA) und die funktionale Mechanik des zweistufigen Icebreakers. Scope: → alles unter .st ist editorial. Framework (Header/Footer/Menü) bleibt unberührt aus style.css. Pro-Version-Look kommt aus css/st-a.css … st-e.css. ===================================================================== */ /* ---- Schriften, die die globale style.css nicht bereitstellt -------- */ @font-face{ font-family:'Söhne Mono'; src:url('../fonts/soehne-mono-web-buch.woff2') format('woff2'), url('../fonts/soehne-mono-web-buch.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Flecha M'; src:url('../fonts/FlechaM-Medium.woff2') format('woff2'), url('../fonts/FlechaM-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Flecha M'; src:url('../fonts/FlechaM-MediumItalic.woff2') format('woff2'), url('../fonts/FlechaM-MediumItalic.woff') format('woff'); font-weight:500; font-style:italic; font-display:swap; } /* ==================================================================== 1 · Tokens (auf dem Scope, damit Header/Footer mit --color-* unberührt bleiben) ==================================================================== */ .st{ /* Farben — Marke */ --blue:#0000FE; --ink:#1A1A1A; --paper:#F1F3F6; --paper-pure:#FFFFFF; --bone:#EDEAE7; --graphite:#46484B; --silver:#9799A0; --yellow:#EFF746; --yellow-deep:#BFC525; --blue-wash:#ACC1FF; --green:#1F9A5A; /* nur Live-/Erfolgs-Status */ /* Schrift-Rollen */ --font-display:'Flecha M', Georgia, serif; /* Headlines, Zitate, Editorial */ --font-wide:'Söhne Breit','Söhne',sans-serif; /* plakativ, immer 700 UPPERCASE */ --font-sans:'Söhne', -apple-system, sans-serif;/* Fließtext, UI */ --font-mono:'Söhne Mono', ui-monospace, monospace; /* Eyebrows, Meta, Tags */ /* Maß-System */ --gutter:40px; --maxw:1320px; --hair:1px solid rgba(10,10,10,.14); --hair-strong:1px solid var(--ink); /* Motion-Tokens (Bewegung optional, Information immer statisch — Motion-Briefing) */ --ease-out:cubic-bezier(.22,.61,.36,1); --ease-snap:cubic-bezier(.34,1.3,.5,1); --d-fast:.12s; --d-base:.2s; --d-slow:.36s; } @media (max-width:1024px){ .st{ --gutter:28px; } } @media (max-width:600px){ .st{ --gutter:20px; } } /* ==================================================================== 2 · Scope-Grundlagen ==================================================================== */ .st main{ background:var(--paper); color:var(--ink); font-family:var(--font-sans); } .st main *{ box-sizing:border-box; } .st-wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* Durchgehende linke Kante: jede Sektion teilt sich Container + Gutter */ .st-section{ padding-block:clamp(56px,7vw,104px); } .st-section--tight{ padding-block:clamp(40px,5vw,72px); } .st-hr{ border:0; border-top:var(--hair); margin:0; } /* Eyebrow — Mono, gesperrt, mit Auftakt-Linie */ .st-eyebrow{ font-family:var(--font-mono); font-size:.70rem; letter-spacing:.20em; text-transform:uppercase; color:var(--blue); margin:0 0 18px; display:inline-flex; align-items:center; gap:12px; } .st-eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; } .st-eyebrow--silver{ color:var(--silver); } /* Headlines */ .st-h2{ font-family:var(--font-display); font-weight:400; line-height:1.05; font-size:clamp(1.9rem,3.4vw,2.9rem); letter-spacing:-.01em; margin:0; text-wrap:balance; } .st-wide{ font-family:var(--font-wide); font-weight:700; text-transform:uppercase; line-height:.95; letter-spacing:-.01em; } .st-lead{ font-size:1.1875rem; line-height:1.55; color:var(--graphite); max-width:60ch; } .st-body{ font-size:1.0625rem; line-height:1.7; color:var(--graphite); max-width:62ch; } .st-body strong, .st-em{ color:var(--ink); font-weight:600; } /* Marker-Unterstrich (handgezeichnete Note) — Gelb hinter einem Schlüsselwort */ .st-mark{ background-image:linear-gradient(transparent 60%, var(--yellow) 60%); padding-inline:.04em; } .st-mark--blue{ background-image:linear-gradient(transparent 58%, var(--blue-wash) 58%); } /* ==================================================================== 3 · Buttons — Pille (rund), wie die Produkt-/Angebote-Seiten (.aq-btn). Ground Rule: interaktiv = rund (999px); nur STATISCHE Tafeln sind eckig. ==================================================================== */ .st-btn{ display:inline-flex; align-items:center; gap:.55em; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:.95rem; line-height:1.1; padding:13px 26px; border:1.5px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); text-decoration:none; transition:background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out), transform var(--d-fast) var(--ease-out); } .st-btn:hover{ background:var(--ink); color:var(--paper-pure); transform:translateY(-1px); } .st-btn--primary{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:4px 4px 0 -1px var(--blue-wash); } .st-btn--primary:hover{ background:var(--ink); border-color:var(--ink); } .st-btn--ghost{ background:transparent; } .st-btn .st-arrow{ transition:transform var(--d-base) var(--ease-out); } .st-btn:hover .st-arrow{ transform:translateX(3px); } /* Text-Link mit gezeichnetem Unterstrich */ .st-link{ font-family:var(--font-sans); font-weight:600; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:.5em; border-bottom:2px solid var(--yellow); padding-bottom:1px; } .st-link:hover{ border-bottom-color:var(--blue); } /* Tag / Pille — rund, nur als Chip */ .st-tag{ display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; padding:6px 13px; border-radius:999px; border:1px solid rgba(10,10,10,.24); color:var(--graphite); background:transparent; } /* Panel-DNA — statische Tafel: eckig + harter Versatz-Schatten */ .st-panel{ background:var(--paper-pure); border:1.5px solid var(--ink); border-radius:0; box-shadow:6px 6px 0 -1px var(--blue-wash); } /* Bild-Platzhalter (finale S/W-Collage-Assets kommen separat) */ .st-ph{ position:relative; display:flex; align-items:center; justify-content:center; background: repeating-linear-gradient(135deg, rgba(10,10,10,.045) 0 14px, transparent 14px 28px), rgba(10,10,10,.05); border:1px dashed rgba(10,10,10,.28); color:var(--silver); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:24px; min-height:180px; } .st-ph__tag{ position:absolute; top:10px; left:10px; background:var(--ink); color:var(--paper); padding:3px 8px; font-size:.6rem; letter-spacing:.12em; } /* ==================================================================== 3b · Signatur-Motive — Kohäsion & Raffinesse (durchlaufend, „aus einem Guss") ==================================================================== */ /* Handgezeichneter Unterstrich hinter EINEM Schlüsselwort (wiederkehrendes Motiv) */ .st-uline{ position:relative; white-space:nowrap; } .st-uline::after{ content:""; position:absolute; left:-.06em; right:-.06em; bottom:-.16em; height:.36em; background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C60 6 120 16 180 9 C230 4 270 12 296 8' fill='none' stroke='%23EFF746' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); pointer-events:none; } .st-uline--blue::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C60 6 120 16 180 9 C230 4 270 12 296 8' fill='none' stroke='%230000FE' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Laufendes Marken-Band (Marquee) — verbindet Sektionen, full-bleed, on-brand */ .st-marquee{ overflow:hidden; background:var(--yellow); border-block:1px solid var(--ink); padding:11px 0; } .st-marquee__track{ display:inline-flex; align-items:center; white-space:nowrap; will-change:transform; animation:st-marq 34s linear infinite; } .st-marquee__track > *{ font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:1.05rem; letter-spacing:.01em; color:var(--ink); padding:0 26px; } .st-marquee__sep{ color:var(--blue); } @keyframes st-marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Überlappender Übergang — eine Fläche greift in die vorige (wie die blaue Box) */ .st-overlap{ position:relative; z-index:2; margin-top:clamp(-104px,-7vw,-56px); } /* Laufende Sektions-Nummer im Eyebrow (Orientierung + roter Faden) */ .st-eyebrow .st-no{ color:var(--silver); font-variant-numeric:tabular-nums; } .st-eyebrow .st-no::after{ content:" — "; } /* ==================================================================== 4 · Icebreaker — funktionale Mechanik (Look kommt aus der Variante) Stabile Hooks (von st-home.js gesteuert, in allen Versionen gleich): [data-ib] Wurzel [data-ib-step="1|2"] Schritte [data-ib-opt="..."] Reaktions-Buttons (ja|teils|nein|mehr) [data-ib-answer="..."] Antwort-Panels in Schritt 2 [data-ib-reset] „andere Antwort" ==================================================================== */ .st [hidden]{ display:none !important; } .st-ib__opts{ display:flex; flex-wrap:wrap; gap:12px; } .st-ib__opt{ cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.6em; padding:12px 18px; border:1.5px solid rgba(10,10,10,.28); border-radius:999px; background:var(--paper-pure); color:var(--ink); transition:border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out), transform var(--d-fast) var(--ease-out); } .st-ib__opt:hover{ border-color:var(--blue); background:var(--blue-wash); transform:translateY(-1px); } .st-ib__opt .st-ib__emoji{ font-size:1.15em; line-height:1; } .st-ib__reset{ background:none; border:0; cursor:pointer; color:var(--graphite); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; text-decoration:underline; padding:0; margin-top:14px; } .st-ib__micro{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--silver); } /* ==================================================================== 5 · Reveal-Utility (Motion ist additiv — Inhalt immer statisch sichtbar) ==================================================================== */ .st-reveal{ opacity:0; transform:translateY(14px); } .st-reveal.is-in{ opacity:1; transform:none; transition:opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); } @media (prefers-reduced-motion:reduce){ .st-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .st *{ animation:none !important; } }