Doppelbutton nebeneinander

Optische Darstellung

Ab Lektion a1-10 wird der Doppelbutton am Lektionsanfang mit einem Shortcode gesteuert:

Siehe:

• Anordnung: Die beiden Elemente stehen dank des äußeren Containers (display: flex) nebeneinander in einer sauberen Reihe, ausgerichtet am linken Rand (justify-content: flex-start). Auf kleineren Bildschirmen (wie Smartphones) brechen sie automatisch in die nächste Zeile um (flex-wrap: wrap).
• Einheitlicher Stil: Beide Buttons haben exakt dieselbe Größe, Schriftart, Innenabstände (padding: 12px 24px), Schriftgröße (18px) und abgerundete Ecken (8px), sodass sie wie aus einem Guss wirken.
• Button 1 (Blau): Ein blauer (#0073aa) interaktiver Button mit weißer, fetter Schrift und dem Text „🔍 1. Lernposter vergrößern“.
• Button 2 (Orange): Ein leuchtchend orangefarbener (#FFA500) Link-Button mit weißer, fetter Schrift und dem Text „2. Wortschatz Lektion 5“.

Exakte Funktionsweise

1. Button 1 (Das Lernposter-Modal):
   • Der Button basiert auf einer unsichtbaren Checkbox-Technik (input type="checkbox").
   • Klickt der Nutzer auf das blaue Label („1. Lernposter vergrößern“), wird die Checkbox aktiviert.
   • Das bewirkt, dass sich das verknüpfte Bild (lektion5_LP_a1-1.png) als großes, modal über die Seite gelegtes Pop-up (Vollbild-Ansicht) öffnet. Durch erneutes Klicken auf das Bild schließt sich das Modal wieder.
2. Button 2 (Die interaktive Übung):
   • Klickt der Nutzer auf den orangen Button („2. Wortschatz Lektion 5“), wird die URL /interaktive-karte/lektion-5/ aufgerufen.
   • Dank des integrierten JavaScripts (window.open) öffnet sich die Übung nicht im aktuellen Tab, sondern in einem separaten, kleineren Pop-up-Fenster (genannt „Lernbox“) mit einer festen Größe von 800×600 Pixeln und ohne Browser-Menüleisten. Das normale Laden der Hauptseite wird unterdrückt (return false;).

Der Button lässt sich anpassen indem die URLs und die Beschriftungen abgeändert werden.

<div class="button-row" style="display: flex; gap: 15px; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin-bottom: 20px;">
    
    <!-- Button 1: Lernposter (Modal) -->
    <div class="modal-wrapper">
        <input type="checkbox" id="modal-trigger-1" class="modal-checkbox" style="display: none;">
        <label for="modal-trigger-1" class="action-button" style="display: inline-block; cursor: pointer; background-color: #0073aa; color: #ffffff; padding: 12px 24px; border-radius: 8px; font-weight: bold; font-size: 18px; line-height: 1.2; border: none; white-space: nowrap;">
            🔍 1. Lernposter vergrößern
        </label>
        <div class="full-modal">
            <label for="modal-trigger-1">
                <img src="https://typischdeutsch.org/wp-content/uploads/2026/05/lektion5_LP_a1-1.png" alt="Vergrößerte Ansicht 1">
            </label>
        </div>
    </div>

    <!-- Button 2: Übung -->
    <a href="/interaktive-karte/lektion-5/" onclick="window.open(this.href, 'Lernbox', 'width=800,height=600,scrollbars=no,toolbar=no,menubar=no,location=no,status=no'); return false;" style="display: inline-block; background-color: #FFA500; color: #ffffff; padding: 12px 24px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 18px; line-height: 1.2; border: none; white-space: nowrap;">
       2. Wortschatz Lektion 5
    </a>

</div>