Scoutbus System: Startseite & Gutenberg Guide

Ein Raum für Klarheit

Viele Menschen merken nicht,
dass etwas fehlt…

…bis sie aufhören, nach dem nächsten Hack zu suchen und anfangen, sich selbst wieder zuzuhören.

Die verlorene Unmittelbarkeit

Warum wir verlernen, was Kleinkinder noch wissen.

Hast du schon einmal einem Kleinkind zugesehen, das völlig in sein Spiel vertieft ist? Da gibt es kein „Ich müsste eigentlich“, kein „Bin ich effizient genug?“. Es gibt nur das Tun.

Wir Erwachsenen haben diese Unmittelbarkeit gegen Strategien getauscht. Wir leben in Plänen, nicht in Momenten. Wir optimieren unser Leben, bis wir uns darin fremd fühlen.

„Wir bauen uns goldene Käfige aus Produktivität und wundern uns, warum wir darin nicht fliegen können.“

🔔

Einbruch im System

Die innere Alarmanlage

Stell dir dein Leben wie ein Haus vor. Wenn eine Alarmanlage losgeht, ignorieren wir sie oft nicht – wir kappen einfach das Kabel, weil das Geräusch nervt.

• Erschöpfung ist kein Zeichen von Schwäche, sondern ein Signal, dass du gegen deine Natur lebst.
• Zynismus ist oft nur enttäuschte Hoffnung, die sich einen Schutzpanzer angezogen hat.
• Leere entsteht, wenn wir Leistung mit Sinn verwechseln.

Ein leiser Selbsttest

Höre auf die Resonanz, nicht auf den Verstand.

Ich funktioniere im Alltag gut, aber ich spüre mich selbst kaum noch darin. Erfolge fühlen sich kurz an, Misserfolge hingegen wiegen tonnenschwer. Ich habe oft das Gefühl, eine Rolle zu spielen, die ich nicht selbst geschrieben habe. Die Stille macht mir mehr Angst als der Lärm.

Wir hören dich.

Wenn diese Punkte resonieren, ist das keine Diagnose, sondern eine Einladung. Eine Einladung, das Drehbuch wieder selbst in die Hand zu nehmen.

Dies ist kein Coaching-System

Wenn du nach „5 Schritten zum Glück“ suchst, bist du hier falsch. Das Leben lässt sich nicht in ein Framework pressen.

Scoutbus ist kein System. Scoutbus ist ein Raum.

Orientierungshilfen,
keine Vorschriften

Scoutbus entstand aus der Erkenntnis, dass wir in einer Welt voller Karten den Kompass verloren haben.

Wir bieten keine fertigen Routen an. Wir helfen dir, deinen eigenen inneren Kompass neu zu kalibrieren. Durch Gespräche, Stille, Natur und ehrliche Begegnung.

🌿 Natur

🔥 Wahrheit

⛺ Raum

🧭 Klarheit

Für wen dieser Raum geöffnet ist

Der Funktionierende

Nach außen hin ist alles perfekt. Job, Familie, Haus. Aber innen fühlt es sich an wie ein Filmset, das abgebaut werden muss.

Der Suchende

Du hast alle Bücher gelesen, alle Podcasts gehört. Du weißt theoretisch alles über ein gutes Leben, aber du fühlst es nicht.

Der Stille

Du spürst, dass die Welt zu laut ist. Du sehnst dich nach einer Tiefe, die im Alltag keinen Platz mehr hat.

Der Schritt über die Schwelle

Es gibt hier nichts zu abonnieren. Keine Falle, kein Upsell. Nur einen Raum, den du betreten kannst, wenn du bereit bist.

Mehr über Scoutbus erfahren Oder schreibe mir einfach eine Mail.

Gutenberg Implementierungs-Guide

Diese Anleitung begleitet dich bei der technischen Umsetzung des neuen Scoutbus-Designs in WordPress Gutenberg. Das Design ist als „Raw HTML“ in Gutenberg-Blöcken oder über ein Custom Theme umsetzbar.

Hinweis: Nutzen Sie den „Startseite (Live)“ Button oben, um das Ergebnis zu sehen. Diese Dokumentation liefert den Code dazu.

1. Complete CSS Package

Fügen Sie diesen Code in den Customizer oder Ihr Child-Theme style.css ein. Er definiert alle Farben, Typografie und Layout-Klassen.

style.css

/* SCOUTBUS CSS VARIABLES */
:root {
    --sb-sage: #8A9A5B; /* Salbei */
    --sb-sage-light: #E8EDE0;
    --sb-offwhite: #F9F7F2; /* Warm White */
    --sb-earth: #C07A5C; /* Terracotta */
    --sb-sand: #E6DCCD;
    --sb-text: #2C3328; /* Dark Green/Grey */
    --sb-text-light: #5C6658;
    --sb-white: #FFFFFF;
    --sb-container: 1100px;
    --sb-radius: 4px;
}

/* Base Styles */
.sb-wrapper { font-family: 'Inter', sans-serif; background: var(--sb-offwhite); color: var(--sb-text); line-height: 1.7; }
.sb-container { max-width: var(--sb-container); margin: 0 auto; padding: 0 24px; }
.sb-section { padding: 6rem 0; }
.sb-section-narrow { max-width: 800px; margin: 0 auto; }

/* Typography */
.sb-h1 { font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; line-height: 1.1; font-weight: 600; margin-bottom: 1.5rem; }
.sb-h2 { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; margin-bottom: 1.25rem; font-weight: 600; }
.sb-h3 { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.sb-lead { font-size: 1.25rem; color: var(--sb-text-light); font-weight: 300; margin-bottom: 2rem; }

/* Components */
.sb-btn { 
    display: inline-block; padding: 1rem 2.5rem; background: var(--sb-sage); color: #fff; 
    text-decoration: none; border-radius: 50px; transition: 0.3s; cursor: pointer; border: none;
}
.sb-btn:hover { transform: translateY(-2px); background: var(--sb-text); }

.sb-card { background: #fff; padding: 2rem; border-radius: var(--sb-radius); box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.sb-no-promise { border: 1px dashed var(--sb-earth); background: rgba(192, 122, 92, 0.05); padding: 3rem; text-align: center; border-radius: var(--sb-radius); }

/* Checkbox Style */
.sb-checklist { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; }
.sb-checkbox-wrapper { 
    display: flex; align-items: center; background: #fff; padding: 1.5rem; 
    border: 1px solid var(--sb-sand); border-radius: var(--sb-radius); cursor: pointer; transition: 0.2s; 
}
.sb-checkbox-wrapper:hover { border-color: var(--sb-sage); }
.sb-checkbox-wrapper.checked { background: var(--sb-sage-light); border-color: var(--sb-sage); }
.sb-result-box { background: var(--sb-text); color: var(--sb-offwhite); padding: 2rem; border-radius: var(--sb-radius); margin-top: 2rem; display: none; }
.sb-result-box.visible { display: block; animation: fadeIn 0.5s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .sb-h1 { font-size: 2.5rem; }
    .sb-section { padding: 4rem 0; }
}

2. Block-by-Block Guide

Für jeden Abschnitt empfiehlt es sich, den „Individuelles HTML“ Block in Gutenberg zu nutzen, um die exakte Kontrolle über das Design zu behalten. Alternativ können Sie „Gruppen“-Blöcke nutzen und die CSS-Klassen (sb-section, sb-container) unter „Erweitert > Zusätzliche CSS-Klassen“ eintragen.

A. Hero Section

HTML-Snippet für den Einstieg. Nutzen Sie dies im obersten Block der Seite.

<section class="sb-section" style="padding-top: 8rem;">
    <div class="sb-container" style="text-align: center;">
        <p style="color: #8A9A5B; font-family: serif; font-style: italic; font-size: 1.25rem; margin-bottom: 1rem;">Ein Raum für Klarheit</p>
        <h1 class="sb-h1">Viele Menschen merken nicht,<br>dass etwas fehlt...</h1>
        <p class="sb-lead" style="margin-left: auto; margin-right: auto;">
            ...bis sie aufhören, nach dem nächsten Hack zu suchen.
        </p>
        <div style="margin-top: 2rem;">
            <a href="#sb-test" class="sb-btn">Bist du gemeint?</a>
        </div>
    </div>
</section>

B. Der Selbsttest (Interactive)

Dieser Block benötigt das JavaScript (siehe Abschnitt 3), um zu funktionieren.

<section id="sb-test" class="sb-section bg-white">
    <div class="sb-container sb-section-narrow">
        <h2 class="sb-h2 text-center">Ein leiser Selbsttest</h2>
        
        <div class="sb-checklist" id="scoutbus-checklist">
            <label class="sb-checkbox-wrapper">
                <input type="checkbox" class="sb-checkbox-input">
                <span>Ich funktioniere im Alltag gut, spüre mich aber kaum noch.</span>
            </label>
            <label class="sb-checkbox-wrapper">
                <input type="checkbox" class="sb-checkbox-input">
                <span>Erfolge fühlen sich kurz an, Misserfolge wiegen schwer.</span>
            </label>
            <!-- Weitere Fragen hier -->
        </div>

        <div id="sb-result" class="sb-result-box">
            <h3 class="sb-h3" style="color:white">Wir hören dich.</h3>
            <p>Dies ist eine Einladung, das Drehbuch wieder selbst in die Hand zu nehmen.</p>
            <button class="sb-btn" style="background:white; color:#2C3328">Weiter</button>
        </div>
    </div>
</section>

C. „No Promise“ Box

<div class="sb-no-promise">
    <h3 class="sb-h3">Dies ist kein Coaching-System</h3>
    <p>Scoutbus ist kein System. Scoutbus ist ein Raum.</p>
</div>

3. JavaScript Implementation

Für die Checkbox-Logik und das Smooth Scrolling. Fügen Sie dies in den Footer Ihrer WordPress-Seite ein (z.B. via Plugin „WPCode“ oder „Header and Footer Scripts“).

document.addEventListener('DOMContentLoaded', function() {
    // 1. Checkbox Logic
    const checkboxes = document.querySelectorAll('.sb-checkbox-input');
    const resultBox = document.getElementById('sb-result');

    if(checkboxes.length > 0) {
        checkboxes.forEach(cb => {
            cb.addEventListener('change', function() {
                // Style parent wrapper
                if(this.checked) {
                    this.parentElement.classList.add('checked');
                } else {
                    this.parentElement.classList.remove('checked');
                }

                // Count active
                const count = document.querySelectorAll('.sb-checkbox-input:checked').length;
                
                // Show result if 2 or more are checked
                if(count >= 2) {
                    resultBox.style.display = 'block';
                    // Small delay for CSS transition
                    setTimeout(() => resultBox.classList.add('visible'), 50);
                }
            });
        });
    }

    // 2. Smooth Scroll Logic
    window.scrollToSection = function(id) {
        const el = document.getElementById(id);
        if(el) el.scrollIntoView({behavior: 'smooth'});
    };
});

4. Step-by-Step Tutorial

Vorbereitung

Installieren Sie WordPress 6.0+. Stellen Sie sicher, dass Sie Administrator-Rechte haben. Installieren Sie das Plugin „WPCode“ (optional, aber empfohlen für CSS/JS).

CSS Einbinden

Kopieren Sie den CSS-Code aus Abschnitt 1. Gehen Sie zu Design > Customizer > Zusätzliches CSS und fügen Sie ihn ein.

Seite erstellen

Erstellen Sie eine neue Seite. Stellen Sie das Template auf „Canvas“ oder „Full Width“ (abhängig vom Theme), um störende Sidebars auszublenden.

Inhalte einfügen

Fügen Sie Block für Block ein (Hero, Alarm, Selbsttest). Nutzen Sie „Individuelles HTML“ Blöcke und kopieren Sie die Snippets aus Abschnitt 2.

Scoutbus optimierung dann zu läuft

Viele Menschen merken nicht,dass etwas fehlt…