/* ========================================================================== wireframe.css — Westmetall Wireframe-Baukasten -------------------------------------------------------------------------- Die EINE zentrale CSS-Datei für alle Wireframe-Seiten (ist/ und neu-1/…3/). Regeln (aus WIREFRAME-METHODE.md + Bauanleitung/05_Build.md): · Schwarz-Weiß-Konvention: schwarze Rahmen auf Weiß. · Bild-Platzhalter = schraffiertes graues Feld mit Beschriftung. · Einziger Akzent: Kupfer #C25F09. · Poppins für alles, IBM Plex Mono AUSSCHLIESSLICH für Zahlen (.zahl). · Jeder Baustein ist benannt und kommentiert (wofür, woher). · Neues Layout-Muster → neuer benannter Baustein, hier eintragen. Die Schriften lädt jede Seite im über Google Fonts. Angelegt: Phase 0 · 07.07.2026 ========================================================================== */ /* -------------------------------------------------------------------------- GRUNDLAGEN — Reset, Farben, Schrift -------------------------------------------------------------------------- */ :root { --wf-ink: #111111; /* Rahmen + Text */ --wf-grau-1: #f2f2f2; /* Schraffur hell */ --wf-grau-2: #e3e3e3; /* Schraffur dunkel */ --wf-grau-3: #9a9a9a; /* inaktive Elemente */ --wf-kupfer: #C25F09; /* einziger Akzent */ } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.55; color: var(--wf-ink); background: #ffffff; } h1, h2, h3 { line-height: 1.25; font-weight: 600; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 18px; } a { color: var(--wf-ink); } /* Zahlen — die EINZIGE Stelle für IBM Plex Mono */ .zahl { font-family: "IBM Plex Mono", monospace; } /* Akzent-Text in Kupfer (sparsam einsetzen) */ .akzent { color: var(--wf-kupfer); } /* -------------------------------------------------------------------------- BAUSTEIN: wf-wrap — zentrierte Seitenspalte Wofür: äußere Begrenzung jeder Inhaltsseite. -------------------------------------------------------------------------- */ .wf-wrap { max-width: 1100px; margin: 0 auto; padding: 48px 24px 64px; } /* -------------------------------------------------------------------------- BAUSTEIN: umschalter — Zustands-Wechsler oben rechts Wofür: kleiner fixierter Kasten mit Radio-Punkten (Ist · Neu 1 · Neu 2 · Neu 3). Gefüllter Punkt = aktiver Zustand, verlinkter Punkt wechselt in den anderen Ordner, grauer Punkt = noch nicht vorhanden. Herkunft: WIREFRAME-METHODE.md, Kap. 3. -------------------------------------------------------------------------- */ .umschalter { position: fixed; top: 16px; right: 16px; z-index: 1000; background: #ffffff; border: 2px solid var(--wf-ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12); padding: 10px 14px; font-size: 13px; } .umschalter__titel { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .umschalter__punkt { display: flex; align-items: center; gap: 8px; margin: 4px 0; text-decoration: none; color: var(--wf-ink); } .umschalter__punkt::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--wf-ink); border-radius: 50%; flex: none; } a.umschalter__punkt:hover { color: var(--wf-kupfer); } .umschalter__punkt--aktiv { font-weight: 600; } .umschalter__punkt--aktiv::before { background: var(--wf-kupfer); border-color: var(--wf-kupfer); } .umschalter__punkt--inaktiv { color: var(--wf-grau-3); pointer-events: none; } .umschalter__punkt--inaktiv::before { border-color: var(--wf-grau-3); } /* -------------------------------------------------------------------------- BAUSTEIN: btn — schlichter Wireframe-Button Wofür: alle Klickflächen. Variante --kupfer für den Haupt-CTA. -------------------------------------------------------------------------- */ .btn { display: inline-block; border: 2px solid var(--wf-ink); background: #ffffff; color: var(--wf-ink); padding: 12px 24px; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--wf-ink); color: #ffffff; } .btn--kupfer { border-color: var(--wf-kupfer); color: var(--wf-kupfer); } .btn--kupfer:hover { background: var(--wf-kupfer); color: #ffffff; } /* -------------------------------------------------------------------------- BAUSTEIN: bild-platzhalter — schraffiertes graues Feld Wofür: jedes Foto/Logo/Titelbild im Wireframe. Beschriftung in den Kasten schreiben („Foto“, „Titelbild“, „Logo“ …). -------------------------------------------------------------------------- */ .bild-platzhalter { border: 2px solid var(--wf-ink); background: repeating-linear-gradient( 45deg, var(--wf-grau-1), var(--wf-grau-1) 10px, var(--wf-grau-2) 10px, var(--wf-grau-2) 20px ); min-height: 180px; display: flex; align-items: center; justify-content: center; color: #555555; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; } /* -------------------------------------------------------------------------- BAUSTEIN: konnektor — Platzhalter für externe Dienste Wofür: Formulare/Kalender/Newsletter/Feeds, die live eingebettet werden (Brevo, Kurs-Ticker, Charts, Karte, Videos, Kundenportal). Dunkler Kopf nennt den Dienst, Feldzeilen deuten das Widget an, die Fußzeile sagt es klar. Kopf-Texte WÖRTLICH nach Bauanleitung, z. B. „externer Dienst: Brevo“ oder „lizenzpflichtiger Datenfeed — wird live eingebunden“. -------------------------------------------------------------------------- */ .konnektor { border: 2px solid var(--wf-ink); background: #ffffff; } .konnektor__kopf { background: var(--wf-ink); color: #ffffff; padding: 8px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .konnektor__zeile { height: 14px; background: var(--wf-grau-1); border: 1px solid var(--wf-grau-2); margin: 10px 12px; } .konnektor__zeile--kurz { width: 60%; } .konnektor__hinweis { padding: 2px 12px 12px; font-size: 12px; color: #555555; } /* -------------------------------------------------------------------------- BAUSTEIN: einstieg — nur für die Stamm-index.html Wofür: schmale Einleitungstexte auf der Einstiegsseite. -------------------------------------------------------------------------- */ .einstieg p { max-width: 640px; margin: 16px 0; } .einstieg .einstieg__hinweis { font-size: 14px; color: #555555; margin-bottom: 32px; } /* -------------------------------------------------------------------------- BAUSTEIN: probe — Baustein-Probe auf der Einstiegsseite Wofür: Phase-0-Abnahmetest (rendert das per Doppelklick, ist Phase 0 durch). Fliegt zusammen mit der Probe-Sektion raus, sobald Phase 1 läuft. -------------------------------------------------------------------------- */ .probe { margin-top: 56px; border-top: 2px solid var(--wf-ink); padding-top: 32px; } .probe h3 { margin: 28px 0 8px; } .probe__box { max-width: 480px; }