---
title: "Trail Presentation Mode Guide"
description: "STACKIT-Cloud-Framework-Trails als Foliendecks präsentieren: Deck öffnen, kuratierte Autoren-Ansichten vorbereiten und Start, Agenda und Split-Folien setzen."
scfAsset:
  maintainers:
    - user: "tobias.mueller"
  category: "guide"
  external: false
  tags: ["Trails", "Presentation", "Slides", "Blueprint"]
source_url: "https://framework.stackit.cloud/de/advisory/assetcontainer/stackit/howto-presentation/"
source_file: "docs/de/advisory/assetcontainer/stackit/howto-presentation.mdx"
---

Jeder Trail ist zugleich ein Foliendeck. Dieselbe Timeline, die ein Leser scrollt, lässt sich Schritt für Schritt projizieren — mit Agenda, Referentenansicht und Sprechernotizen. Nichts wird doppelt geschrieben: Das Deck wird aus dem `scfTrail`-Frontmatter des Trails erzeugt. Dieser Guide behandelt beides — wie ein Vortragender es steuert und wie du als Autor es vorbereitest.

---

## Ein Deck öffnen

Öffne einen beliebigen Trail (aus der [Trails-Übersicht](/de/trails) oder einem eingebetteten Trail-Loader), klappe ihn auf und nutze den **Präsentieren**-Button in der Detailansicht. Das Deck öffnet sich im Vollbild über der Seite, zunächst mit einem Startbildschirm — keine separate Seite, kein zusätzliches Frontmatter für den Basisfall nötig.

---

## Der Startbildschirm

Vor der ersten Folie kann der Vortragende den Lauf auf dem Startbildschirm anpassen:

- **Alle Steps zeigen** *(Standard an)* — jeder Step wird eine Folie. Ausschalten blendet eine Per-Step-Liste mit je zwei Checkboxen ein: **Folie** (Step überhaupt einschließen) und **Agenda** (in der Agenda listen). Die Nummern werden live neu vergeben, wenn du Steps ein- oder ausschließt.
- **Alternative-Auswahl** — ein Step mit [Alternativen](/de/assets?asset=de/advisory/assetcontainer/stackit/howto-trail-setup) (alternativen Spuren) zeigt in dieser Liste eine kleine Spurauswahl, und die Liste ist bei solchen Trails von Anfang an sichtbar. Voreingestellt ist die Spur, die auf der Trail-Seite gerade aktiv ist; die Folie, ihre Attribution-Ecke und die Sprechernotiz folgen der gewählten Spur.
- **Dropdown „Vorbereitete Ansicht"** — wähle eine der kuratierten Autoren-Ansichten (unten) oder belasse es auf *Default (all steps)*. Eine Ansicht auszuwählen füllt die Per-Step-Auswahl für dich vor.
- **Layout-Umschalter** — *Auto-fit* *(Standard)* verteilt einen Step auf so viele Folien wie nötig, damit nichts aus dem Bild scrollt. *Full step per slide* lässt den ganzen Step auf einer Folie und scrollt stattdessen.
- **Start** — startet das Deck und wechselt in den Vollbildmodus. Browser gewähren Vollbild nur aus einem Klick heraus, deshalb geschieht es hier und nicht beim Öffnen des Decks; `F` oder `Escape` verlässt ihn wieder.

---

## Präsentieren: Steuerung und die Referentenansicht

Im laufenden Deck steuerst du per Tastatur und Zeiger:

- **Navigieren** — Pfeiltasten oder Leertaste wechseln die Folien; die Bildschirm-Steuerung spiegelt sie.
- **Springen** — klicke den Folienzähler (`N / total`) an und tippe eine Nummer, um direkt dorthin zu springen.
- **Vollbild** — der Vollbild-Button oder die Taste `F`.
- **Referentenfenster** (`S` oder der Bildschirm-Button) — öffnet ein zweites Fenster mit der aktuellen Folie, ihren Sprechernotizen, einer „Als Nächstes"-Vorschau, einem Timer und einer Uhr. Es bleibt mit dem Hauptdeck synchron, sodass du nur das Deck auf dem Beamer teilst und die Notizen auf deinem Laptop behältst.
- **Sprechernotizen** — jede Folie hat ein Notizfeld. Der Per-Step-Kontext des Autors wird als Ausgangsnotiz gezeigt; was du tippst, wird pro Trail im Browser gespeichert.
- **Zahnrad-Einstellungen** — schaltet Chrome, Attribution, Agenda, Loop und mehr. Klick außerhalb des Panels schließt es.

**Anzeige-Presets** bündeln diese Schalter für gängige Situationen, wählbar in den Einstellungen oder per Launch-Konfiguration vorgesetzt:

- **`standard`** — die Standardwerte.
- **`minimal`** — Chrome und Attribution aus, für einen aufgeräumten Look.
- **`kiosk`** — Auto-Advance und Loop an, Chrome aus, für einen unbeaufsichtigten Bildschirm.
- **`focus`** — Attribution aus, sonst standard.

---

## Vorbereitete Ansichten (Autor)

Standardmäßig zeigt das Deck jeden Step. Als Autor kannst du eine oder mehrere **vorbereitete Ansichten** vorgeben — kuratierte Folien-Auswahlen, die der Leser über das Dropdown auf dem Startbildschirm auswählt. Gib jedem referenzierten Trail-Step eine stabile `id` und ergänze eine `presentations`-Liste unter `scfTrail`:

```markdown
scfTrail:
  steps:
    - id: "assessment"
      style: "compass"
      title: "Initial Assessment"
      trailContext: "Workload-Eigenschaften analysieren, bevor Ressourcen initialisiert werden."
    - id: "landing-zone"
      style: "gondola"
      assetId: "migration/assetcontainer/stackit/landing-zone-foundation-opentofu"
      trailContext: "Landing Zone per standardisiertem Infrastruktur-Code ausrollen."
    # ...weitere Steps...

  presentations:
    - id: "executive"
      label: "Executive-Überblick"
      description: "Die wichtigsten Meilensteine, für ein Management-Publikum."
      steps:
        - assessment                       # als nummerierter Agenda-Punkt enthalten
        - { id: landing-zone, role: sub }   # eingerückter Unterpunkt des vorherigen Hauptschritts
    - id: "technical"
      label: "Technische Vertiefung"
      steps:
        - { id: assessment, role: hidden }  # bleibt eine Folie, fehlt aber in der Agenda
        - landing-zone
```

Jede Ansicht enthält:

- **`id`** — eindeutig innerhalb des Trails.
- **`label`** — im Dropdown des Startbildschirms sichtbar.
- **`description`** *(optional)* — ein kurzer Hinweis zur Ansicht.
- **`steps`** — die kuratierte Auswahl, in Trail-Reihenfolge. Referenziere jeden Step über seine `id` (oder seine 1-basierte Position). Ein nicht gelisteter Step wird aus dieser Ansicht entfernt.

Jeder gelistete Step nimmt eine optionale **`role`**, die steuert, wie er in der Agenda erscheint:

- **`main`** *(Standard)* — ein nummerierter Agenda-Punkt.
- **`sub`** — ein eingerückter Unterpunkt (a, b, …) des vorherigen Hauptpunkts.
- **`hidden`** — der Step bleibt eine Folie, fehlt aber in der Agenda.

Die Timeline-`role` eines Steps (siehe [Trail Authoring Guide](/de/assets?asset=de/advisory/assetcontainer/stackit/howto-trail-setup)) ist hier der Standard, sodass Timeline-Sub-Steps ohne Wiederholung als Agenda-Unterpunkte durchkommen.

Ein gelisteter Step nimmt zusätzlich eine optionale **`notes`** — eine **Sprechernotiz nur für diese Ansicht**. Während die Ansicht präsentiert wird, zeigt das Referentenfenster sie als „Authored note" des Steps; die Default-Ansicht (alle Steps) und jede andere Ansicht ohne Notiz an diesem Step zeigen stattdessen den `trailContext` des Steps. So passt du den roten Faden pro Publikum an, ohne die Timeline anzufassen:

```markdown
  presentations:
    - id: "executive"
      label: "Executive-Überblick"
      steps:
        - { id: assessment, notes: "Mit dem Business Case öffnen, Tooling-Detail weglassen." }
        - { id: landing-zone, role: sub, notes: "Ein Satz: als Code bereitgestellt, reproduzierbar." }
```

Ein gelisteter Step nimmt außerdem ein optionales **`alternative`** — es legt für diese Ansicht eine der [Alternativen](/de/assets?asset=de/advisory/assetcontainer/stackit/howto-trail-setup) (alternativen Spuren) des Steps fest, über die Alternative-`id` (`default` meint die eigene Spur des Steps). Eine Executive-Ansicht kann den Managed-Weg festlegen, die technische Vertiefung den Selbstbau-Weg; eine unbekannte id oder ein Step ohne Alternativen ignoriert das Feld:

```markdown
  presentations:
    - id: "executive"
      label: "Executive-Überblick"
      steps:
        - { id: migrate-vms, alternative: "default", notes: "Der Managed-Weg: ein Guide, planbare Wellen." }
    - id: "technical"
      label: "Technische Vertiefung"
      steps:
        - { id: migrate-vms, alternative: "hystax", notes: "Den Live-Migration-Pfad Ende zu Ende zeigen." }
```

**Empfohlenes Paar:** Gib einem substanziellen Trail mindestens zwei Ansichten - eine technische Vertiefung für Praktiker und einen nicht-technischen Überblick für Briefings und Entscheider, jede mit eigenen Notizen. Die tm-Trails und die STACKIT-Onboarding-Trails (`scf-onboarding`, `getting-started-contributor`) folgen diesem Muster und taugen als Copy-Paste-Referenz.

---

## Eine Ansicht per Link starten

Ein Link kann einen Trail direkt als Deck öffnen. Dafür hängst du `present` an den Trail-Link, zum Beispiel `/de/trails/?trail=<Trail-ID>&present=kiosk`. Der Wert legt fest, was passiert:

- **`kiosk`**: Das Deck startet sofort und blättert von selbst weiter. Nach der letzten Folie beginnt es von vorn. Das ist für einen Bildschirm gedacht, den niemand bedient.
- **`auto`**: Das Deck startet sofort und blättert von selbst weiter. Auf der letzten Folie bleibt es stehen.
- **`ask`**: Zuerst öffnet sich der Startbildschirm, damit der Besucher vor der ersten Folie bestätigt. So funktioniert der „Get Started"-Button auf der Startseite.

`kiosk` und `auto` funktionieren bei jedem Trail. `ask` funktioniert nur bei einem Trail mit einer Ansicht, die `launch: true` trägt. Ein Trail ohne so eine Ansicht ignoriert den Link und klappt nur auf.

Die folgenden Felder gehören zur Start-Ansicht. Sie wirken nur, wenn ein `ask`-Link sie öffnet:

- **`launch`**: `true` öffnet diese Ansicht über einen `ask`-Link.
- **`preset`**: `standard`, `minimal`, `kiosk` oder `focus`. Es wird auf dem Startbildschirm vorgewählt.
- **`fullscreen`**: **Start** geht standardmäßig ins Vollbild. Mit `false` bleibt das Deck im Fenster.
- **`agenda`**: `false` öffnet ohne Agenda-Folie und springt direkt zum ersten Step. Das schlägt das Preset. Eine `minimal`-Tour kann also trotzdem ohne Agenda starten.

Ein weiteres Feld hat mit Links nichts zu tun:

- **`default`**: `true` wählt diese Ansicht beim normalen Öffnen des Decks vor. Sonst startet es auf *Default (all steps)*.

```markdown
  presentations:
    - id: "quick-tour"
      label: "Quick tour"
      launch: true
      preset: "minimal"
      agenda: false
      steps: [assessment, landing-zone]
```

### Mehrere Trails nacheinander

Ein Bildschirm am Messestand kann mehrere Trails hintereinander zeigen:

1. Speichere die Trails mit dem Herz auf ihren Karten.
2. Öffne **Listen** in der Kopfzeile und bring die Trails mit den Pfeilen in die gewünschte Reihenfolge.
3. Wähle **Als Kiosk abspielen**.

Aus der Liste wird ein Kiosk-Link. Am Ende jedes Decks öffnet sich der nächste Trail. Nach dem letzten Trail beginnt es wieder mit dem ersten. Assets und Contributors in der Liste werden übersprungen.

Die Zeit pro Folie stellst du in den Deck-Einstellungen unter **Auto-advance** ein. Der Browser merkt sie sich für jeden Trail einzeln. Stell sie also auf dem Gerät, das den Bildschirm betreibt, einmal pro Trail ein.

<Aside type="tip">
Ein Browser verlässt das Vollbild bei jedem Seitenaufruf und braucht einen Klick, um zurückzukehren. Für einen Bildschirm ohne Betreuung startest du den Browser im Kiosk-Modus mit dem Link aus der Adressleiste, zum Beispiel `chrome --kiosk "<Link>"`.
</Aside>

---

## Split- und zentrierte Folien

Steps komponieren ihr eigenes Folien-Layout, und das Deck spiegelt die Timeline exakt:

- Ein Step mit Schaubild (`imageSrc`) wird zur Zwei-Spalten-Folie — Bild auf der einen Seite, Inhalt auf der anderen — oder zu einem zentrierten Cover, wenn keine `imagePosition` gesetzt ist.
- Ein Step mit den **`left` / `right` / `center`**-Slots legt beliebige Inhaltstypen auf eine Seite oder in die Mitte: freien Text, ein Schaubild oder eine Card (`assetId` / `pageId` / `trailId`) als Zeiger — hänge einen `#section-anchor` an eine `assetId` / `pageId`, um zusätzlich genau diesen Abschnitt unter der Card einzubetten. `left` + `right` → Split, nur eine Seite → diese Seite, `center` → zentriertes Cover.

Beides wird am Trail-Step gesetzt und ist im **[Trail Authoring Guide](/de/assets?asset=de/advisory/assetcontainer/stackit/howto-trail-setup)** dokumentiert. Bilder sind auf der Folie per Klick zoombar, animierte SVGs eingeschlossen. Eine nackte Card bleibt kompakt; nutze einen `#section-anchor`, wenn der Inhalt eines Abschnitts eingebettet werden soll, damit die Folie nie eine sehr hohe Spalte wird.

### Auf dem Handy

Auf dem Handy passt das Deck diese Folien an. Am Trail muss dafür nichts geändert werden.

- **Hochkant**: Ein Step mit `left` und `right` zeigt eine Spalte groß und die andere als kleine Vorschau daneben. Tippen auf die Vorschau, Wischen oder der Weiter-Pfeil tauscht sie. Weiter zeigt erst die rechte Spalte und geht dann zum nächsten Step.
- **Bild neben dem Text**: Hochkant zeigt ein Step mit `imageSrc` und `imagePosition: left` oder `right` das Bild in voller Breite über dem Text.
- **Quer**: Der Kopf jeder Folie schrumpft auf eine kurze Zeile. Ein Split-Step behält beide Spalten nebeneinander.

---

## Zentrale Übersicht

<div class="scf-overview-card-container">
	<a href="/de/trails" class="scf-custom-link-card">
		<div class="scf-card-text-box">
			<h4 class="scf-card-title">Zur Cloud-Framework-Trails-Übersicht</h4>
			<p class="scf-card-desc">Öffne einen Trail, klappe ihn auf und drücke Präsentieren, um eines dieser Decks in Aktion zu sehen.</p>
		</div>
		<div class="scf-card-icon-box">
			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
		</div>
	</a>
</div>

<style>{`
	.scf-overview-card-container {
		margin: 3rem 0;
		width: 100%;
		box-sizing: border-box;
	}

	.scf-custom-link-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--nds-viewport-spacing-component-150, 24px);
		background: var(--nds-mode-color-background-neutral-surface-default-rest, #18232c);
		border: 1px solid var(--nds-mode-color-border-neutral-subtle-rest, #2e3c48);
		border-radius: var(--nds-viewport-border-radius-container, 16px);
		text-decoration: none !important;
		transition: all 0.2s ease-in-out;
		gap: 24px;
	}

	.scf-custom-link-card:hover {
		background: var(--nds-mode-color-background-neutral-surface-default-hover, #202c36);
		border-color: var(--nds-mode-color-foreground-primary-on-neutral, #00c2cc);
		transform: translateY(-2px);
		box-shadow: 0 8px 24px -8px rgba(0, 194, 204, 0.2);
	}

	.scf-card-text-box {
		display: flex;
		flex-direction: column;
		gap: 6px;
		flex: 1;
		min-width: 0;
	}

	.scf-card-title {
		margin: 0 !important;
		font-family: var(--nds-mode-font-family-heading, 'Univia Pro'), sans-serif;
		font-size: var(--nds-viewport-font-size-heading-content-level-3, 18px) !important;
		font-weight: 700;
		color: var(--nds-mode-color-foreground-neutral-high-contrast, #fff) !important;
	}

	.scf-card-desc {
		margin: 0 !important;
		font-family: var(--nds-mode-font-family-body, 'DIN 2014'), sans-serif;
		font-size: var(--nds-viewport-font-size-body-small, 14px);
		color: var(--nds-mode-color-foreground-neutral-subtle, #9da5ac);
		line-height: 1.4;
	}

	.scf-card-icon-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--nds-mode-color-background-neutral-component-subtle-rest, #25323d);
		color: var(--nds-mode-color-foreground-neutral-default, #e5eaee);
		flex-shrink: 0;
		transition: all 0.2s ease-in-out;
	}

	.scf-custom-link-card:hover .scf-card-icon-box {
		background: var(--nds-mode-color-foreground-primary-on-neutral, #00c2cc);
		color: var(--nds-mode-color-background-neutral-surface-sunken-rest, #101820);
		transform: translateX(4px);
	}

	@media (max-width: 600px) {
		.scf-custom-link-card {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;
		}
		.scf-card-icon-box {
			align-self: flex-end;
		}
	}
`}</style>
