Styleguide

Live-Muster aus den echten Seiten inklusive kopierbarer Beispiele.

Alle Hauptvarianten Direkte Copy-Blöcke 1:1 Klassen

Farben / Tokens

--color-bg

--color-surface

--color-ink

--color-muted

--color-accent

--color-accent-soft

--color-accent-ring

--color-warm

--color-warm-soft

--color-warm-ring

--color-calm

--color-calm-soft

--color-calm-ring

--color-reflect

--color-reflect-soft

--color-reflect-ring

--color-border

--color-border-strong

Code

:root {
  --color-bg: #f2efe9;
  --color-surface: rgba(255, 255, 255, 0.78);
  --color-ink: #1c1b18;
  --color-muted: #5f5c55;
  --color-accent: #c73a2d;
  --color-warm: #e07a2f;
  --color-calm: #3b6f6b;
  --color-reflect: #b6add6;
}

Buttons, Pills, Tags

Default Primary Calm Alert

Pill Workshop 1 (5)

Code

<div class="row">
  <a class="btn default" href="/styleguide">Default</a>
  <a class="btn primary" href="/styleguide">Primary</a>
  <a class="btn calm" href="/styleguide">Calm</a>
  <a class="btn alert" href="/styleguide">Alert</a>
  <button class="btn default" disabled>Disabled</button>
</div>

<div class="row">
  <span class="pill">Pill</span>
  <span class="pill">Workshop</span>
  <span class="tag">1</span>
  <span class="tag">(5)</span>
</div>

Organisation Diagnose Bildung Autonomie

Manipulation Aufklären - Mut zur Autonomie

Dieser Block nutzt exakt dieselben Klassen wie die Startseite.

Mitmachen / Kontakt Was ist Manipulation? Newsletter

Hero-Code

<section class="hero">
  <div class="card heroMain">
    <div class="kicker">
      <span class="pill">Organisation</span>
      <span class="pill">Diagnose</span>
      <span class="pill">Bildung</span>
      <span class="pill">Autonomie</span>
    </div>

    <h1 class="heroTitle">Manipulation Aufklären - Mut zur Autonomie</h1>
    <p class="heroSub muted">Verständliche Modelle, Werkzeuge und Lernformate.</p>

    <div class="ctaRow">
      <a class="btn primary" href="/anmeldung">Mitmachen / Kontakt</a>
      <a class="btn calm" href="#was-ist-manipulation">Was ist Manipulation?</a>
      <a class="btn default" href="#was-wir-tun">Was wir tun</a>
    </div>
  </div>

  <aside class="card heroAside">
    <div class="callout reflect">
      <strong>Worum es geht</strong>
      <p>Menschen helfen, Manipulationen zu erkennen und zu unterbrechen.</p>
    </div>
    <div class="callout focus">
      <strong>Was du hier findest</strong>
      <p>Werkzeuge, Begriffe, Fälle, Workshops</p>
    </div>
    <div class="callout calm">
      <strong>Was wir schützen</strong>
      <p>Autonomie und bewusste Entscheidungen.</p>
    </div>
  </aside>
</section>

Section + Grid + Cards

Analyse & Diagnose

Wir strukturieren Fälle anhand nachvollziehbarer Bausteine.

Arbeitsmodell Forschung

Bildung & Workshops

Übungen, Seminarformate und Reflexions-Tools für die Praxis.

Workshop anfragen Arbeitsweise

Cards-Code

<section class="section" id="was-wir-tun">
  <div class="sectionHead">
    <h2>Was wir tun</h2>
    <p class="muted">Analyse, Bildung, Werkzeuge.</p>
  </div>

  <div class="grid">
    <div class="card">
      <h3>Analyse & Diagnose</h3>
      <p class="muted" style="margin-top: 6px;">Wir strukturieren Fälle anhand nachvollziehbarer Bausteine.</p>
      <div style="margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap;">
        <a class="btn default" href="#was-ist-manipulation">Arbeitsmodell</a>
        <a class="btn default" href="#forschung">Forschung</a>
      </div>
    </div>

    <div class="card">
      <h3>Bildung & Workshops</h3>
      <p class="muted" style="margin-top: 6px;">Übungen, Seminarformate und Reflexions-Tools.</p>
      <div style="margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap;">
        <a class="btn calm" href="#mitmachen">Workshop anfragen</a>
        <a class="btn default" href="#transparenz">Arbeitsweise</a>
      </div>
    </div>
  </div>
</section>

Callout-Varianten

Partizipativ

Gemeinsam gestalten wir Formate.

Nachvollziehbar

Entscheidungen, Quellen und Schritte werden dokumentiert.

Autonomie-orientiert

Ergebnisse geben Orientierung und stärken Urteilskraft.

Interdisziplinär

Philosophie, Medienanalyse, Psychologie, Technik.

Callout-Code

<div class="grid">
  <div class="callout alert">
    <strong>Partizipativ</strong>
    <p>Gemeinsam gestalten wir Formate.</p>
  </div>
  <div class="callout calm">
    <strong>Nachvollziehbar</strong>
    <p>Entscheidungen, Quellen und Schritte werden dokumentiert.</p>
  </div>
  <div class="callout reflect">
    <strong>Autonomie-orientiert</strong>
    <p>Ergebnisse geben Orientierung und stärken Urteilskraft.</p>
  </div>
  <div class="callout focus">
    <strong>Interdisziplinär</strong>
    <p>Philosophie, Medienanalyse, Psychologie, Technik.</p>
  </div>
</div>

Timeline

Intention

Ein manipulativer Zweck entsteht.

Beziehung

Vertrauen, Abhängigkeit oder Nähe erhöhen Beeinflussbarkeit.

Strategie

Rahmung, Auslassung, Emotionalisierung und Timing.

Timeline-Code

<div class="timeline" style="margin-top: 12px;">
  <div class="step">
    <span class="tag">1</span>
    <div>
      <strong>Intention</strong>
      <p>Ein manipulativer Zweck entsteht.</p>
    </div>
  </div>
  <div class="step">
    <span class="tag">2</span>
    <div>
      <strong>Beziehung</strong>
      <p>Vertrauen, Abhängigkeit oder Nähe erhöhen Beeinflussbarkeit.</p>
    </div>
  </div>
  <div class="step">
    <span class="tag">3</span>
    <div>
      <strong>Strategie</strong>
      <p>Rahmung, Auslassung, Emotionalisierung und Timing.</p>
    </div>
  </div>
</div>

Formular (Newsletter)

Form-Code

<form class="form" method="POST">
  <div class="hp" aria-hidden="true">
    <label>
      Website
      <input name="website" autocomplete="off" tabindex="-1" />
    </label>
  </div>

  <label class="field">
    <span class="label">E-Mail *</span>
    <input class="input" name="email" type="email" autocomplete="email" required />
  </label>

  <div class="row">
    <button class="btn primary" type="submit">Eintragen</button>
    <p class="hint muted">Abmelden jederzeit per Antwortmail.</p>
  </div>

  <p class="hint muted">(Datenbankverbindung folgt: E-Mails werden hier später gespeichert.)</p>
</form>