Kopfleiste (schwarzer Balken, oben fixiert)

Links: Zur Website und die Bereichs-Tabs (Hintergrund, Inhaltsbereich, …). Für den SysAdmin gibt es zusätzlich den Tab Protokoll (Änderungsverlauf der Verwaltung). Rechts: Angemeldet als …, Profil, Benutzer, Abmelden, ganz aussen das ? für die Hilfe. Jeder Tab lädt einen Einstellungsblock; der aktive Tab bzw. das aktive ? ist grün hervorgehoben.

Speichern, Entwürfe und Backup

• Feststehender Balken unten rechts: Dort finden Sie «Speichern» und «Backup». «Speichern» schreibt zwei Dinge in die Datenbank: die Website-Einstellungen (alles aus den Tabs ausser «Texte & Seiten») und alle Seitentexte auf einmal.
• Ausgegrautes «Speichern»: Solange sich nichts gegenüber dem zuletzt geladenen Stand geändert hat, ist der Button deaktiviert — das ist Absicht, nicht ein Fehler.
• Vor dem Verlassen der Seite: Ungespeicherte Änderungen gehen verloren. Arbeiten Sie in mehreren Tabs, speichern Sie pro «Arbeitspaket» oder wechseln Sie den Seiten-Tab nur, wenn Sie den aktuellen Stand nicht brauchen.
• «Backup»: Lädt genau die produktive Datenbank Verwaltung.ETBrunold.ch/AppDatabase/ETB-Database.sqlite als ETB-Database.sqlite herunter (Einstellungen, Seitentexte, Benutzer). Ein Datei-Download pro Klick — zuverlässig in allen gängigen Browsern. Ersetzt nicht das Speichern ungespeicherter Formularänderungen.
• Öffentliche Website: Nach erfolgreichem Speichern liest die Live-Site Einstellungen und Texte über die API; ein erneutes «Bauen» der index.html ist dafür nicht nötig.

Tab «Hintergrund»

• Zwei Spalten: Oben links nebeneinander (je halbe Breite): Modus und Seitengrundfarbe (Farbwürfel + Hex). Bei «Bild (URL)» darunter die Bild-Einstellungen (Pfad, Grösse, …). Rechts: Vorschau, Upload und Bild-Deckkraft (nur im Bildmodus sichtbar).
• Modus «Farbe»: Eine einheitliche Seitenfarbe. Farbwähler und Hex-Feld sind gekoppelt — Sie können beides nutzen.
• Modus «Bild (URL)»: Der Bild-Pfad im Formular ist nur Anzeige (schreibgeschützt): Mit «Bild hochladen» wählen Sie eine Datei; sie wird unter Bilder/ abgelegt und der Pfad eingetragen. Anschliessend «Speichern». Bereits gespeicherte https-URLs erscheinen ebenfalls in der Anzeige.
• Bild-Deckkraft: Rechts unter der Vorschau — unter 100 % wirkt das Foto heller/transparenter; darunter kommt die Seitengrundfarbe zum Vorschein (Farbfelder oben).
• Statischer Hintergrund: Option background-attachment: fixed — das Bild bleibt beim Scrollen «stehen»; wirkt modern, kann auf Mobilgeräten je nach Browser anders dargestellt werden.
• Bildgrösse / Position: Übliche Kombination für Vollflächenfotos: cover + center center. Bei Logos oder Mustern eher contain oder eine kleinere Prozentangabe testen.

Tab «Inhaltsbereich (Lesbarkeit)»

• Helle Fläche hinter dem Text: Schaltet die halbtransparente «Karte» hinter dem Hauptinhalt der Website ein oder aus. Aus = der Seitenhintergrund steht direkt hinter dem Text (kann je nach Hintergrundbild schlechter lesbar sein).
• Hintergrund main: Wählt Farbe und Transparenz dieser Fläche. Probieren Sie bei bunten Hintergrundbildern eher höhere Deckkraft (weniger Transparenz), damit der Text klar bleibt.
• Eigene Fläche #app-body: Steuert nur den Bereich unter der Seitenüberschrift (der eigentliche Seiteninhalt). Sinnvoll, wenn main transparent ist und nur der Textblock leicht abgedunkelt oder aufgehellt werden soll. Mit dem optionalen Feld Eigener Wert können Sie jeden gültigen CSS-background-Wert setzen (z. B. fein abgestufte rgba(…)-Transparenz).

Tab «Texte & Seiten»

• Dropdown «Seite»: Jeder Menüpunkt der öffentlichen Website entspricht einem Eintrag. Alle Texte liegen in der Datenbank; Änderungen sind nach «Speichern» live.
• Seitentitel: Wird als HTML-Überschrift auf der Seite dargestellt und beeinflusst u. a. die Navigation. Für den Browser-Tab wird eine Klartext-Variante verwendet (siehe Hinweis unter dem Feld).
• «Startseiten-Layout»: Nur sinnvoll für die Startseite: grössere Typo, zentrierte Anmutung — entspricht dem Look der Live-Startseite.
• Feld «Inhalt» (TinyMCE): Visueller Editor wie in einer Textverarbeitung. Bilder einfügen über die Toolbar; achten Sie auf Dateigrösse und sinnvolle alt-Texte.
• Partner- / Referenz-Logos auf Seiten: Unter dem Inhalt-Feld gibt es die Buttons «Partner-Logos einfügen» bzw. «Referenz-Logos einfügen» (für jede Seite, auch die Startseite). Sie fügen einen Baustein ein, der durch die Einträge aus den Tabs «Partner» bzw. «Referenzen» ersetzt wird — inkl. Links und «neuer Tab». Ohne Baustein erscheinen diese Logos nirgends (nicht automatisch auf der Startseite).
• Tab-Wechsel / andere Bereiche: Beim Wechsel zu einem anderen Verwaltungs-Tab können Editor-Inhalte neu initialisiert werden — wichtige Zwischenstände vorher speichern.

Tab «Sektionen (Zusatzblöcke)»

• Im Tab steht oben der Kasten «Aktuell bearbeitete Seite» — das ist dieselbe Seite wie im Dropdown «Seite» unter «Texte & Seiten» (Startseite oder Unterseite).
• Sektionen gelten nur für diese eine Seite, nicht global. Sie erscheinen auf der Website unterhalb des Haupttexts; der Haupttext bleibt im Feld «Inhalt».
• Position: Die oberste Karte = direkt unter dem Haupttext; die Nummerierung «Position i / n» und die Pfeile «nach oben» / «nach unten» steuern die Reihenfolge. «✕» entfernt eine Sektion.
• Jede Sektion hat optionalen Titel und HTML-Inhalt (Editor).

Tabs «Partner» und «Referenzen»

• Die Listen steuern nur die Baustein-Inhalte (wo Sie in «Texte & Seiten» Partner- bzw. Referenz-Logos einfügen — typisch «Unsere Partner» / «Unsere Referenzen»). Sie erscheinen nicht automatisch auf der Startseite. Gleiche Bedienung in beiden Tabs (Zeile/Karte, Upload, Link, neuer Tab).
• Überschrift über der Liste: In beiden Tabs optional; leer = keine Zwischenüberschrift über der Logo-Reihe.
• Pro Zeile (Partner wie Referenzen): Logo (Pfad oder URL), optional Alternativtext (Barrierefreiheit), Text unter dem Logo, optional Link. Checkbox für neuen Browser-Tab bei externen Links.
• Ohne Zeile sichtbar: grüner Kasten «Datei wählen» legt eine Zeile an. Upload: Neue Zeilen erhalten automatisch einen gültigen Vorschlags-Pfad im Feld Logo-URL — «Logo hochladen» ist sofort nutzbar; Sie können den Pfad vor dem Upload ändern. Die Datei landet genau unter diesem Namen. Ablage: Bilder/Partner/ bzw. Bilder/Referenzen/. Danach «Speichern».
• Reihenfolge der Logos: wie bei Sektionen mit den Pfeiltasten je Karte steuerbar.

Tab «E-Mail»

• Öffentliche E-Mail: Wird in der Kopfzeile der Website angezeigt und als Haupt-Kontaktadresse auf der Seite «Kontakt» verwendet.
• Ersetzungen (alt → neu): Ersetzt in Texten (z. B. nach einer Domain- oder Adressumstellung) alte Zeichenketten durch neue. Jede Zeile: «Alter Text» und «Neuer Text». Nach dem Speichern greifen die Ersetzungen beim nächsten Laden der Inhalte — planen Sie ggf. Test auf einer Unterseite.

Tab «Popup «Offene Stellen»»

• Zuerst Aktiv oder Inaktiv wählen. Bei «Inaktiv» sind Titel, Text und Optionen gesperrt — das verhindert versehentliche Bearbeitung eines nicht angezeigten Popups.
• Verzögerung (ms): Wartezeit nach Seitenaufruf, bevor das Popup erscheint.
• Nur einmal pro Sitzung / Immer anzeigen / Nur Startseite: Kombinieren Sie die Checkboxen nach gewünschtem Verhalten (z. B. nur auf der Home-Seite und höchstens einmal pro Besuch).
• Titel und Text werden mit denselben Rich-Text-Werkzeugen wie bei Seiten bearbeitet.

Profil & Benutzer

• Profil: Anzeigename und optional neues Passwort. Nicht-SysAdmins geben beim Passwortwechsel das aktuelle Passwort an.
• Benutzer: Liste aller (bzw. sichtbaren) Konten, Bearbeiten, neue Benutzer anlegen. SysAdmin sieht alle inkl. «verborgener» Konten und Rollen; normale Administratoren nur die für sie freigegebenen Einträge — Details stehen im Intro-Text über dieser Verwaltung.

Technik, Subdomain & Fehlersuche

• API-Basis: Die Verwaltung spricht mit …/api/ auf der Hauptdomain (lokal z. B. gleicher Host, Pfad /ETBrunold.ch/api/). Auf einer Subdomain wie verwaltung.etbrunold.ch muss in api/etb-api-config.php u. a. session_cookie_domain und cors_allowed_origins passen, damit Cookies und «Speichern» zuverlässig funktionieren.
• Fehler «Nicht angemeldet» (HTTP 401) beim Speichern: Fast immer Session-Cookie kommt bei API-Anfragen nicht an — Konfiguration prüfen, danach neu anmelden.
• Bild-Upload schlägt fehl: Ordner Bilder/, Bilder/Partner/ und Bilder/Referenzen/ für den Webserver beschreibbar machen; PHP-Uploadlimits prüfen.
• Manuelle API-URL: In Ausnahmefällen kann im Seiten-HTML vor dem Skript window.ETB_MAIN_ORIGIN = "https://www.example.ch" gesetzt werden (siehe Kommentar im Quelltext der Verwaltung).