From cfa868744de3b8ff504ab2490ba7fd967f1c42a2 Mon Sep 17 00:00:00 2001 From: NaymeD Date: Fri, 7 Aug 2026 00:20:07 +0200 Subject: [PATCH] Neuer Stand aus website-mfi uebernommen: Wolkensystem Stich, Wolkenreich-Uebergaenge, Daemmerung vor dem Footer, SEO/DSGVO-Fixes Co-Authored-By: Claude Opus 5 --- MFI/DESIGN_NOTES.md | 194 +++++++++ MFI/README.md | 94 +++-- MFI/index.html | 999 +++++++++++++++++++++++++++++++++++--------- 3 files changed, 1046 insertions(+), 241 deletions(-) create mode 100644 MFI/DESIGN_NOTES.md diff --git a/MFI/DESIGN_NOTES.md b/MFI/DESIGN_NOTES.md new file mode 100644 index 0000000..5186d04 --- /dev/null +++ b/MFI/DESIGN_NOTES.md @@ -0,0 +1,194 @@ +# DESIGN_NOTES — MFI Wolkensystem & Produktionsreife + +Arbeitsstand: 2026-08-06. Autonomer Durchlauf nach Spezifikation „CloudDesign". + +## 1. Audit-Inventar (Ist-Zustand vor dem Umbau) + +Eine Datei: `index.html` (541 KB, 1518 Zeilen, alles inline). Fundstellen Dekoration: + +| Element | Zeile(n) | Befund | +|---|---|---| +| Wolken-Sprite `cl-defs` (Kit) | 653–712 | 4 Formen aus EINEM Basispfad `#cl-p` per clip-path Varianten + feTurbulence-Verzerrung; Schraffur = geradliniges `` über die ganze Fläche → mechanisch (Befund 1.3), keine Lichtrichtung (1.4) | +| Hero-Wolken `.c1–.c4` | 740–743 | **4 Stück** — Budget erlaubt 3; alle gleiche Grundform (1.6: keine Tiefe, gleiche Opazität) | +| Trennbänder `.cl-band` | 776, 962, 1120 | ein sich wiederholender Bogenpfad `#cl-bd`, oben UND unten gewellt → „Schaum", nicht Kumulus (1.2) | +| Gespiegelte Bänder `.cl-band-up` | 871, 1048, 1189 | `scaleY(-1)` → Licht käme von unten rechts. Verstößt fundamental gegen die neue Lichtregel (2.2) | +| Mond, Sterne | 1193, 1209 | bleiben (Nacht-Footer, eigenes Motiv) | +| Papier-Korn | — | fehlt (2.9) | + +Geprüfte Behauptungen aus Abschnitt 1 der Spezifikation: + +- **1.1 „H1 von der Kopfzeile geklippt":** im aktuellen Build NICHT reproduzierbar — die Kopfzeile ist `position:sticky` und nimmt Flussplatz ein (H1-Oberkante 159 px, Kopfzeilen-Unterkante 108 px, gemessen bei 1024 px). Der reale Kern des Befunds: `scroll-padding-top` fehlt, **Anker-Sprünge verstecken jede Sektionsüberschrift** unter der Leiste. Wird nach Spezifikation gelöst (`--header-h` + `scroll-padding-top`), zusätzlich als Absicherung gegen künftige `position:fixed`-Umbauten. +- **1.5 „Wolke über Fließtext":** in der Vorrunde bereits behoben; Messung bestätigt 0 Überdeckungen. Die Platzierungsregeln werden für die neuen Formen neu verifiziert. +- **1.8 „toter Raum unter dem Trenner":** bestätigt, 132 px zwischen Bandunterkante und erstem Label. + +## 2. Token-Plan + +### Farbe (Wolkensystem, abgeleitet aus Bestandstokens) +| Token | Wert | Rolle | +|---|---|---| +| `--wk-paper` | `#F6F0E3` | Wolkenkörper auf Creme-Sektionen | +| `--wk-paper-sky` | `#F1E6D4` | Wolkenkörper über dem Hero (Rost) — kein Reinweiß (1.7) | +| `--wk-ink` | `#5C4632` | Schraffur + Kontur, warmes Braun, nie Schwarz | +| `--wk-shadow` | `#C9B79B` | Untersegel-Tönung vor der Schraffur | +| Fern-Dunst | Mischung Papier 55 % / Sektionsgrund 45 % | Fern-Ebene | + +Tuschen-Opazität: nah 0.75, mittel 0.5, fern 0.28. + +### Abstands-Skala +`--s-1:4px` bis `--s-10:128px` (4/8/12/16/24/32/48/64/96/128). Angewandt auf +Sektions-Innenabstände und die Trennerfuge; Bestands-`clamp()`-Werte, die bereits +fluid sind, bleiben (sie liegen auf der Skala auf). + +### Kopfzeile +`--header-h` wird per ResizeObserver aus der echten Höhe gesetzt; +`html{scroll-padding-top:calc(var(--header-h) + 12px)}`. + +## 3. Wolken-Spezifikation (umgesetzte Fassung) + +Sechs handgesetzte Silhouetten `#wk-a … #wk-f` (kubische Béziers, keine Generator- +Geometrie), jede mit: + +1. **Flache Basis** mit höchstens zwei flachen Durchhängen; nie untenrum gewellt. +2. **Unregelmäßiges Oberteil**, 5–9 Lappen, Radienverhältnis 0.45–1.0, nie zweimal + derselbe Radius nacheinander; Hauptmasse bei ~30 % oder ~70 % der Breite. +3. **Blumenkohl-Rekursion:** 2–3 Sub-Beulen an der oberen LINKEN Kontur der größten Lappen. +4. **Fetzenränder:** 1–2 dünne Schleier, die auf der Lee-Seite (rechts) auslaufen. +5. **Licht von oben links, global.** Oben links reines Papier; Schraffur nur unten + rechts und an der Basis (dunkelste Zone). +6. **Schraffur als Bögen**, die der Lappenkrümmung folgen (pfadgeneriert aus den + Lappenmittelpunkten der handgesetzten Silhouette — erlaubt laut Spez. „path-derived + group"), Strich 1–1.4, Abstand 3–5, geclippt auf die Silhouette, per Verlaufsmaske + (unten rechts → oben links) ausgeblendet. Kein ``. +7. **Kreuzschraffur** nur in 2–3 tiefsten Schattentaschen, ~35°. +8. **Kontur mit variabler Stärke:** Haarlinie (0.8) als Ganzes + Schattenseiten-Overlay + in 2 Segmenten (2.3 → 1.4), auf der Lichtseite läuft die Kontur aus. Keine + geschlossene gleichstarke Umrandung. + +### Tiefenebenen +| Ebene | Skala | Tusche | Detail | Bewegung | +|---|---|---|---|---| +| Fern | 0.55–0.65 | 0.28 | nur Silhouette (`#wk-*-b`-Basissymbole) | Drift 110 s | +| Mittel | 0.8–0.9 | 0.5 | leichte Schraffur, Haarlinie | statisch | +| Nah | 1.0 | 0.75 | volle Schraffur, variable Kontur, Fetzen | statisch | + +Fern sitzt höher und kleiner; mindestens eine Mittel-Wolke läuft teilweise HINTER +einer Nah-Wolke (Überlappung verkauft die Tiefe). + +### Trenner +- Hero→Creme: **Wolkenbank** aus 5 überlappenden Symbolen in 3 Ebenen, zwei brechen + klar nach oben aus, eine kleine Fern-Wolke schwebt frei darüber. Creme der + Folgesektion füllt unter der Bank. +- `preserveAspectRatio="xMidYMax slice"` + `min-width` im Wrapper → beschneidet statt + zu quetschen. +- **Eigene Mobilvariante** (weniger, höhere Wolken) unter 700 px — kein Herunterskalieren. +- Himmel→Papier-Grenzen tiefer auf der Seite: schlichtere Niedrigbank (Fern/Mittel). +- **Papier→Himmel-Grenzen (bisher gespiegelte Bänder): ersatzlos glatte Kante.** + Begründung: gespiegelte Wolken hätten Licht von unten; Wolken, die von einer + Papierkante herabhängen, gibt es nicht. Weniger Dekoration = Teil des Looks. + +### Korn +Ein `feTurbulence`-Papierkorn (baseFrequency .75, numOctaves 3) als fixes +Ganzseiten-Overlay, Opazität 0.035, `mix-blend-mode:multiply`, `pointer-events:none`. + +### Platzierung +Dekoschicht `position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden`, +Inhalt auf z-index ≥ 1. Null Überschneidung mit Text/Bedienelementen (numerisch +verifiziert inkl. Drift-Amplitude). Max. 3 Deko-Wolken pro Viewport-Höhe plus Trenner. + +## 4. Selbstkritik des Plans (vor dem Code) und Revision + +1. **Kritik:** Die Verlaufsmaske pro Symbol plus Clip plus zwei Konturpfade macht + 6 × ~40 Knoten — Payload-Risiko gegen das 40-KB-Budget. + **Revision:** Schraffurbögen auf 12–22 Pfade je Symbol begrenzen, Koordinaten auf + eine Dezimale gerundet, Fern-Ebene referenziert nur die Basispfade (kein Duplikat). +2. **Kritik:** Ganzseiten-Multiply-Overlay kann beim Scrollen Repaints kosten. + **Revision:** Overlay als eigenes komposit-freundliches Layer (`transform:translateZ(0)`), + Korn-Kachel klein halten (256²), bei `prefers-reduced-transparency` nicht nötig — + bleibt, da statisch. +3. **Kritik:** Bank mit `slice` beschneidet bei 360 px die Nah-Wolke möglicherweise + mitten im Lappen → wirkt versehentlich. + **Revision:** Mobilbank als eigene Komposition, deren Randwolken absichtlich und + deutlich über die Kante laufen; Schnittkanten liegen in Lappentälern. +4. **Kritik:** Drift auf Fern-Ebene + `slice`-Beschnitt können die Wolke aus dem + sichtbaren Bereich fahren. + **Revision:** Driftamplitude ±10 Einheiten, Ruheposition mit ≥ 24 Einheiten + Abstand zur Schnittkante; im Hero (kein slice) unkritisch. +5. **Kritik:** Die Spezifikation nennt für JSON-LD „Gunzenhausen" als Adresse. + Der Kunde hat den Sitz aber ausdrücklich auf **Wittelshofen (Vorstadt 3, 91749)** + korrigiert; Karte, Fußzeile und Text nennen Wittelshofen. + **Revision:** JSON-LD führt Wittelshofen als Adresse und Gunzenhausen/Mittelfranken/ + Deutschland als `areaServed`. Öffnungszeiten werden NICHT erfunden — Feld entfällt, + bis der Kunde sie liefert. +6. **Kritik:** Honeypot-Feld ist gefordert, das Formular versendet aber per `mailto:` + ohne Server — ein Honeypot hätte keinerlei Wirkung. + **Revision:** entfällt mit Begründung; stattdessen Datenschutzhinweis am Formular + geschärft und Autocomplete vervollständigt. +7. **Kritik:** Lighthouse ist in dieser Umgebung nicht lauffähig (kein Chrome-Headless- + Zugriff aus dem Werkzeug), Screenshots der Browserfläche komponieren nicht. + **Revision:** Wolken werden über Canvas-Rasterung als echte PNGs gerendert und + visuell geprüft (das Kernstück hat damit eine echte Sichtprüfung); Layout, Kontrast, + Überdeckung, CLS-Quellen und Gewicht werden numerisch im echten Browser gemessen. + Lighthouse-Zahlen werden im Bericht ehrlich als „nicht messbar" geführt. + +## 5. Entscheidungsprotokoll + +Wird während der Umsetzung fortgeschrieben. + +- Gespiegelte Bänder ersatzlos gestrichen (Lichtregel > Symmetrie-Gewohnheit). +- Hero-Wolkenzahl 4 → 3 (Budget), die gestrichene ist die, die am wenigsten arbeitet + (kleinste, halb hinter der Wetterkarte). +- Adresse Wittelshofen statt Gunzenhausen (Kundenkorrektur schlägt Prompt-Text). +- Öffnungszeiten im Schema weggelassen statt erfunden. +- Sub-Seiten (leistungen.html usw., altes Platzhalter-Design) sind NICHT Teil dieses + Durchlaufs; die Startseite verlinkt sie nicht. Impressum/Datenschutz bleiben verlinkt + (Pflicht), tragen aber weiterhin Platzhalterdaten — vom Kunden zu liefern. + +- Fern-Wolke im Hero (wk-h3) im Restraint-Schlusstest entfernt: rostgetönt + auf Rost war sie das Deko-Element mit der geringsten Wirkung; die drei + Tiefenebenen trägt die Hero→Creme-Bank. Damit ist die Seite standardmäßig + komplett bewegungsfrei (Drift-Regeln mit entfernt, kein toter CSS). +- Trefferflächen: Buttons min-height 47px (Reserve gegen Transform-Skalierung + der Bürokarte), Telefon-/Mail-Links als inline-flex mit 44px, Karten-Pin + bekam einen unsichtbaren Trefferkreis (gemessen 44×44). Inline-Links im + Fließtext bleiben ausgenommen (WCAG 2.5.8 Inline-Ausnahme). +- Rechtsseiten: Google-Fonts-CDN entfernt (LG München I, 3 O 17493/20); + sie fallen auf Systemschrift zurück, bis sie das neue Design bekommen. + Navigationen zeigen auf Startseiten-Anker; die drei Platzhalter-Unterseiten + wurden gelöscht, sitemap.xml auf 3 URLs gekürzt. +- Sichtprüfung: echte Rasterbilder über foreignObject→Canvas (die Seite ist + komplett inline, darum funktioniert das). Gesichtet: Wolkenatlas v1+v2, + Hero 1024/1440, Gesamtseite 1440, Gesamtseite 360. Browserfenster- + Screenshots komponieren in dieser Umgebung nicht (Pane nicht dargestellt). +- Lighthouse ist in dieser Umgebung nicht lauffähig – ersatzweise gemessen: + 0 externe Requests, 0 Konsolenfehler, Tag-Balance sauber, 0 doppelte IDs, + CLS-Quellen: keine (keine dimensionslosen Bilder, Fonts mit swap und + identischen Fallback-Metriken nicht garantiert → mögliche geringe + Font-Swap-Verschiebung bleibt). + +## 6. Prüfprotokoll (Checkliste Abschnitt 6, zwei Durchläufe) + +Gemessen bei 360/390/768/1024/1440/1920 px, nach jedem Fix erneut: + +| Prüfung | Ergebnis | +|---|---| +| H1 frei von der Kopfzeile (alle 6 Breiten + 150 % Zoom) | ✅ | +| Anker-Sprünge (`scroll-padding-top` = Kopfzeile + 12px) | ✅ 90–120px je Breite | +| Wolke über Text/Bedienelement (inkl. Drift-Puffer) | ✅ 0 Treffer | +| Flache Basis / unregelmäßiges Oberteil / Licht oben links | ✅ per Konstruktion + Sichtbild | +| Schraffur folgt Krümmung, nur Schattenseite, ausblendend | ✅ Sichtbild v2 | +| Kontur variabel, keine gleichstarke Umrandung | ✅ Maske + 2-Segment-Overlay | +| Drei Tiefenebenen mit Überlappung | ✅ in der Hero-Bank | +| Kein Reinweiß/Reinschwarz im Wolkensystem | ✅ #F6F0E3/#F1E6D4/#5C4632 | +| Keine zwei identischen Formen im Viewport | ✅ 6 Symbole, je Bank verschieden | +| Trenner beschneidet statt quetscht; Mobilbank eigene Komposition | ✅ slice + wk-band-m | +| Papierkorn subtil | ✅ Opazität .035 | +| Horizontaler Überlauf | ✅ keiner (alle 6 Breiten) | +| Trefferflächen ≥ 44px | ✅ (Pin 44×44, Buttons ≥ 47) | +| Kontrast: Senf-CTA auf Rost | ✅ Text 7,30 / Fläche 3,85 | +| Kontrast: Hero hell auf Rost | ✅ min. 4,44 (Soll 3) über eigenen Hero-Verlauf | +| Kontrast: Fußzeile auf Nacht | ✅ 10,55 | +| prefers-reduced-motion | ✅ alle 6 Animationsfamilien abgedeckt | +| Konsole | ✅ 0 Fehler/Warnungen | +| Tag-Balance (Wohlgeformtheit) | ✅ sauber | +| Keine Tracker/CDN/Cookie-Banner | ✅ 0 externe Requests | +| Lighthouse ≥ 95 | ❌ nicht messbar in dieser Umgebung (siehe oben) | diff --git a/MFI/README.md b/MFI/README.md index f1c72db..b63f4e4 100644 --- a/MFI/README.md +++ b/MFI/README.md @@ -1,51 +1,69 @@ -# MFI – Mittelfranken Informatik · Webseite +# MFI – Mittelfranken Informatik: Website -IT-Systemhaus aus Wittelshofen. Managed Services, Netzwerk, Microsoft 365, IT-Sicherheit. +Statische Website, reines HTML/CSS/JavaScript – kein Framework, kein +Build-Step, läuft auf jedem einfachen Webhoster per Datei-Upload. -## Aufbau +Die **Startseite ist eine einzige, eigenständige `index.html`**: Schriften +(New Rocker, IM Fell English, Stack Sans Headline, IBM Plex Mono), Logo und +alle Grafiken sind eingebettet. Keine externen Requests, kein CDN, keine +Tracker – DSGVO-sauber per Konstruktion. -Die komplette Seite ist **eine einzige Datei**: `index.html`. -Alles ist darin eingebettet — es gibt bewusst keine externen Abhängigkeiten: +## Lokal öffnen -- **Schriften** (New Rocker, IM Fell English, IBM Plex Mono, Stack Sans Headline) - als WOFF2 im CSS eingebettet, kein Google-Fonts-Aufruf -- **Logo** als PNG mit Transparenz eingebettet -- **Wolken** als Inline-SVG (Kupferstich-Kit, siehe unten) -- **Deutschlandkarte** als Inline-SVG mit allen 16 Bundesländern -- **JavaScript** inline, kein Framework +`index.html` im Browser öffnen. Für eine realistischere Vorschau: -## Öffnen und bearbeiten +``` +python -m http.server 8000 +``` -`index.html` im Browser öffnen — das ist die Vorschau. Zum Bearbeiten die Datei -in einem Editor öffnen. Kein Build-Schritt, kein `npm install`, kein Server nötig. +und `http://localhost:8000` aufrufen. + +## Struktur + +``` +index.html Startseite (eigenständig, alles inline) +impressum.html Impressum – ACHTUNG: noch Platzhalterdaten! +datenschutz.html Datenschutz – ACHTUNG: noch Platzhalterdaten! +robots.txt +sitemap.xml +css/style.css Stylesheet der Rechtsseiten +js/main.js Menü/Reveal der Rechtsseiten +img/mfi-logo.png Logo als Datei (OG-Bild, Apple-Touch-Icon) +DESIGN_NOTES.md Tokens, Wolken-Spezifikation, Entscheidungsprotokoll +``` + +Die früheren Platzhalter-Unterseiten (leistungen/ueber-uns/kontakt) wurden +entfernt; ihre Inhalte deckt die Startseite ab. Die Navigationen der +Rechtsseiten zeigen auf die Anker der Startseite. + +## Wolkensystem „Stich" + +Die Wolken sind handgesetzte Inline-SVGs im Sprite `` +oben im `` (Details in `DESIGN_NOTES.md`). Kurzregeln: + +- Licht kommt **immer von oben links** – Wolken nie vertikal spiegeln. +- Flache Basis, unregelmäßiges Oberteil; kein Reinweiß (`--wk-paper`, + `--wk-ink`, `--wk-shadow` in `:root`). +- Fern-Ebene = nur Silhouette (`#wk-*-b`) im Dunstton, Mittel/Nah über + CSS-Variablen `--wk-inkop`, `--wk-x`, `--wk-heavy` gesteuert. +- Trenner sind Wolkenbänke (`#wk-bank-d/-m/-low/-low2`) mit + `preserveAspectRatio="xMidYMax slice"` – sie beschneiden, statt zu + quetschen; unter 700 px greift die eigene Mobilbank. +- Keine Wolke darf Text überdecken (Deko liegt auf z-index 0, Inhalt auf 2). ## Interaktive Elemente | Element | Verhalten | |---|---| -| Deutschlandkarte (Abschnitt Standort) | Hover über Mittelfranken färbt die Region; Klick zoomt hinein und zeigt den Büro-Pin. Klick auf den Pin öffnet die Adresskarte mit Route. | -| Schritt-Pfad 1–2–3 (Abschnitt Ablauf) | Easter Egg: mit der Maus darüberfahren lässt die Schritte orange/gelb/grün aufleuchten. Auf Touch per Tap. | -| Leistungs- und Sicherheitskarten | Klick klappt Detailtext auf. | -| Wolken | Schweben dauerhaft (langsamer Drift + Auf/Ab). | +| Kopfzeile | Farbton folgt der Tageszeit beim Scrollen (`--head-bg`), Höhe in `--header-h` | +| Systemwetter | Statuskarte im Hero (Signature-Moment) | +| Deutschlandkarte | Mittelfranken klicken → Zoom, Pin → Bürokarte, „Route planen" | +| Ablauf 1-2-3 | Easter Egg: leuchtet beim Überfahren mit der Maus | +| Anfrage | Formular baut eine E-Mail und öffnet das Mailprogramm (kein Server nötig) | -## Wolken-Kit +## Noch offen (vor Livegang zwingend) -Die Wolken kommen aus `wolken-kit.html` (Kupferstich-Stil). Beim Bearbeiten gilt: - -- **Kein** `preserveAspectRatio` auf den Wolken-SVGs setzen -- viewBox `0 0 300 150` (freie Wolke) bzw. `0 0 1440 104` (Band) nicht ändern -- `.cl-base` bekommt keine Kontur -- Die Wolken-IDs existieren genau einmal pro Seite und werden geteilt — nicht umbenennen -- Animiert werden nur die Wrapper `.cl-drift` / `.cl-bob` / `.cl-bobb` - -## Noch offen - -- **Telefonnummer und E-Mail sind Platzhalter** (`hallo@mfi-mittelfranken.de`, `0911 000 000`) - und müssen vor dem Livegang ersetzt werden. Beide stehen im Footer-Abschnitt. -- Impressum und Datenschutz fehlen noch (in Deutschland Pflicht). - -## Barrierefreiheit - -Alle Texte erfüllen WCAG AA im Kontrast (geprüft gegen den Himmelverlauf), -Tastaturbedienung und sichtbarer Fokus sind vorhanden, `prefers-reduced-motion` -schaltet alle Animationen ab. +- **Telefon und E-Mail sind Platzhalter** (`0911 000 000`, `hallo@mfi-mittelfranken.de`). +- **Impressum und Datenschutzerklärung enthalten `[PLATZHALTER: …]`** – Name, + Anschrift, USt-IdNr., Gesellschafter fehlen. In Deutschland Pflicht. +- OG-Bild ist derzeit das Logo; ein echtes 1200×630-Bild wäre besser. diff --git a/MFI/index.html b/MFI/index.html index 0907783..961cee5 100644 --- a/MFI/index.html +++ b/MFI/index.html @@ -5,7 +5,40 @@ MFI – Mittelfranken Informatik | IT-Systemhaus & Managed Services - + + + + + + + + + + + + + + + + -
- Mittelfranken InformatikIT-Systemhaus & Managed Services + Mittelfranken InformatikIT-Systemhaus · Software · Webdesign
-
@@ -709,17 +1185,57 @@ section[id],footer[id]{scroll-margin-top:82px}
IT-Sicherheit & Cloud -

Sicher, auch wenn es stürmisch wird.

-

Ransomware, Phishing, ein verlorenes Notebook im ICE. Wir bauen Ihre Sicherheit so, dass ein einzelner Fehler nicht den ganzen Betrieb lahmlegt — und Sie im Ernstfall wissen, was zu tun ist.

+

IT-Sicherheit auf mehreren Ebenen.

+

Ransomware, Phishing, ein verlorenes Notebook. Wir richten Ihre Sicherheit so ein, dass ein einzelner Fehler nicht den ganzen Betrieb lahmlegt — und im Ernstfall klar ist, was zu tun ist.

@@ -732,8 +1248,8 @@ section[id],footer[id]{scroll-margin-top:82px}

Backup & Notfallplan

-

Tägliche Sicherungen an einen zweiten Ort. Fällt etwas aus, wissen wir vorher, wie wir Sie wieder online bringen — getestet, nicht gehofft.

-

3-2-1-Regel, tägliche Prüfung der Sicherungen und echte Wiederherstellungs-Tests — damit im Ernstfall nichts überrascht.

+

Tägliche Sicherungen an einen zweiten Ort. Der Weg zur Wiederherstellung ist dokumentiert und regelmäßig getestet.

+

3-2-1-Regel, tägliche Prüfung der Sicherungen und dokumentierte Wiederherstellungs-Tests.

@@ -742,17 +1258,19 @@ section[id],footer[id]{scroll-margin-top:82px}

Wir überwachen Anmeldungen, sperren verdächtige Zugriffe und halten alle Systeme per Patch-Management aktuell.

- -

Schulungen & DSGVO

-

Ihr Team lernt, Phishing zu erkennen. Wir dokumentieren Ihre IT sauber — für den Datenschutz und für Prüfungen, wenn sie kommen.

-

Kurze, praxisnahe Trainings, simulierte Phishing-Mails und eine saubere Doku für Ihre Datenschutz-Nachweise.

+ +

Zugänge & Berechtigungen

+

Wer darf was? Wir richten Konten und Rechte nach einem festen Standard ein und entziehen Zugänge zuverlässig, wenn jemand den Betrieb verlässt.

+

Zwei-Faktor-Anmeldung, getrennte Verwalterkonten und eine Übersicht des Berechtigungsstands, die Sie für Datenschutznachweise verwenden können.

- +
@@ -761,47 +1279,83 @@ section[id],footer[id]{scroll-margin-top:82px}
Unser Versprechen

Worauf Sie sich verlassen können.

-

Wir schreiben keine Werbe-Prozente auf. Das hier sind die Zusagen, die in unseren Betreuungsverträgen stehen — die Grundlage, auf der wir arbeiten.

+

Diese Zusagen stehen in unseren Betreuungsverträgen und sind die Grundlage unserer Arbeit.

-
< 30 Min

Reaktionszeit bei kritischen Störungen während der Servicezeit.

+
Servicestufen

Sie wählen, wie schnell wir zugesagt reagieren — von Bürozeiten bis zur bevorzugten Bearbeitung.

-
24 / 7

Monitoring Ihrer wichtigen Systeme, auch außerhalb der Bürozeiten.

+
Überwacht

Monitoring Ihrer wichtigen Systeme rund um die Uhr, auch außerhalb der Bürozeiten.

-
1 Team

Feste Ansprechpartner, die Ihren Betrieb kennen — kein Ticket-Roulette.

+
1 Team

Feste Ansprechpartner, die Ihren Betrieb und Ihre Systeme kennen.

-
Pauschale

Planbare Kosten pro Monat statt Überraschungen auf der Rechnung.

+
Pauschale

Planbare Kosten pro Monat, keine Abrechnung nach Aufwand.

-

// Konkrete Servicezeiten und Reaktionszeiten legen wir gemeinsam im Betreuungsvertrag fest.

+

Die Überwachung läuft durchgehend. Wie schnell wir auf eine Meldung reagieren, richtet sich nach der Servicestufe, die Sie im Betreuungsvertrag wählen — wir nennen Ihnen die Stufen im Erstgespräch.

-
@@ -809,8 +1363,8 @@ section[id],footer[id]{scroll-margin-top:82px}
So starten wir -

Vom ersten Gespräch zur ruhigen IT.

-

In drei Schritten, ohne dass Sie Ihren Betrieb dafür anhalten müssen.

+

Vom ersten Gespräch zum laufenden Betrieb.

+

In drei Schritten, ohne Unterbrechung Ihres laufenden Betriebs.

01

Bestandsaufnahme

-

Wir sehen uns Ihre IT vor Ort an: Geräte, Verträge, Risiken. Sie bekommen einen ehrlichen Bericht — auch dann, wenn nicht alles neu gemacht werden muss.

-

Vor-Ort-Termin, Inventarliste, Risiko-Ampel. Nach ein bis zwei Wochen liegt ein klarer Bericht auf dem Tisch — ohne Verkaufsdruck.

+

Wir sehen uns Ihre IT vor Ort an: Geräte, Verträge, Risiken. Sie erhalten einen schriftlichen Bericht — auch dann, wenn kein Austausch nötig ist.

+

Vor-Ort-Termin, Inventarliste, Risikobewertung. Nach ein bis zwei Wochen erhalten Sie den Bericht — unverbindlich.

02

Fahrplan

-

Gemeinsam legen wir fest, was sofort wichtig ist und was warten kann. Transparent, mit klaren Kosten und ohne Fachchinesisch.

+

Gemeinsam legen wir fest, was sofort wichtig ist und was warten kann. Nachvollziehbar, mit klaren Kosten und in verständlicher Sprache.

Wir priorisieren nach Dringlichkeit und Budget: Was schützt sofort, was kann geplant werden — jede Position mit klarem Preis.

03

Betreuung

-

Wir übernehmen den laufenden Betrieb. Ab jetzt haben Sie eine Nummer für alles rund um IT — und einen ruhigeren Arbeitstag.

+

Wir übernehmen den laufenden Betrieb. Ab dann haben Sie für alle IT-Themen eine Rufnummer und einen Ansprechpartner.

Monatliche Pauschale, feste Ansprechpartner, proaktives Monitoring. Sie melden sich bei einer Nummer — den Rest koordinieren wir.

@@ -873,7 +1427,9 @@ section[id],footer[id]{scroll-margin-top:82px}
- +
@@ -885,7 +1441,7 @@ section[id],footer[id]{scroll-margin-top:82px}

Wir sitzen in Wittelshofen. Von hier aus betreuen wir Netzwerke, Server, Microsoft 365 und die IT-Sicherheit mittelständischer Betriebe — vor Ort in der Region, per Fernwartung überall.

-

Hier sitzen wir Wittelshofen in Mittelfranken

+

Standort Wittelshofen in Mittelfranken

@@ -919,7 +1475,7 @@ section[id],footer[id]{scroll-margin-top:82px} - + @@ -942,9 +1498,11 @@ section[id],footer[id]{scroll-margin-top:82px}
- +