B1 · HERO-PORTRAIT-BG · LIBRARY-SHOWCASE
Die Patterns.
Die Hansestadt.
Die Verteidigung.
Dreizehn Library-Patterns für Barbara Lüdtkes Webpräsenz. Jeder Block ist eine Entscheidung. Jede Entscheidung hat eine Logik.
MARITIM-DNA · GLYPH-BAND
B2 · CREDENTIAL-STRIP · 5-COL HORIZONTAL
13
Library
Patterns
17
Cinematic
Animations
06
SVG-Icon-Set
Hanse-Petrol
04
BG-Varianten
(pure/warm/tint/navy)
01
Maritim-DNA
Wave-Glyph + Fels
B3 · EDITORIAL-PROSE · LIGHT-VARIANTE
Die Editorial-Prose-Section.
Hier ein Fließtext-Block in Open Sans , drei bis fünf Absätze, klinisch-Jonas. Maritim-Signatur ist der Wave-Glyph mit Fels-Brandung als Editorial-Entry-Marker oben links: Standhaftigkeit in rauer See, gezeichnet per stroke-draw-Animation.
Nach zwei Absätzen kommt die Inline-Pull-Quote , Aside-Element mit roter Left-Border. Sie bricht die Text-Wall auf, ohne aus der Section zu fallen.
Nach der Inline-Quote folgt die Auflösung. Ein bis zwei Absätze als Closing , der Spannungsbogen wird in der gleichen Section geschlossen, nicht in der nächsten.
B4 · SERVICES-3COL-ICONS · CARDS MIT SVG
Drei-Spalten Service-Cards.
01
Strafverteidigung
Vom Ermittlungsverfahren bis zur Hauptverhandlung. Aktenprüfung vor jeder Einlassung.
02
Verkehrsrecht
Bußgeldverfahren, MPU, Führerscheinrecht. Erstgespräch binnen 24 Stunden.
03
Mediation
Außergerichtliche Konfliktlösung. Wirtschaft, Familie, Erbe , bevor das Gericht entscheidet.
B5 · DARK-NAVY-STATEMENT · INTERSTITIAL-BREAK
„Eine These. Eine Sektion. Ein Höhepunkt im Rhythmus der Page."
Dunkles Navy-BG mit Hanse-Petrol-Radial-Glow im rechten oberen Quadranten , rhythmischer Bruch zwischen zwei hellen Sections, ein Atemzug bevor die nächste Argumentation beginnt.
B6 · LARGE-NUMBER-CARDS · ROMAN-NUMERAL-ACCENT
Drei Grundsätze. Drei Mega-Roman-Numerals in MV-Red.
I.
Akte zuerst
Jedes Mandat beginnt mit der Akte, nicht mit der Einlassung. Lesen vor Reden.
II.
Strategie folgt der Beweislage
Verteidigungslinie wird aus dem Akteninhalt entwickelt, nicht aus dem Wunschdenken.
III.
Rückfragen statt Vermutungen
Bei jeder Unklarheit wird nachgefragt. Auch wenn es länger dauert. Auch wenn es unbequem ist.
B7 · FULL-BLEED-IMAGE-DIVIDER · HANSESTADT STRALSUND
„Der Unterschied zwischen Einstellung und Eintrag beginnt mit der ersten Stunde."
B8 · PULL-QUOTE-MEGA · LIGHT-WARM-VARIANTE
„Wer den Bildschirm vollstopft, sagt dem Leser: meine Zeit ist wichtiger als deine."
B8 · PULL-QUOTE-MEGA · NAVY-VARIANTE
B9 · BENEFITS-GRID-SVG · 6 ITEMS · 2-COL
Sechs Vorteile mit Outline-SVG-Icons in Hanse-Petrol.
Aktenprüfung vor Mandat
Jede Akte wird gelesen, bevor wir Sie als Mandant annehmen.
24-Stunden-Erstgespräch
Bei Eilfällen Termin binnen eines Werktages.
Fachanwältin seit 2000
Zwei Fachanwaltstitel , Strafrecht und Verkehrsrecht.
Verankert in Stralsund
Kanzleistandort in der Hansestadt seit 1996.
Mediation als erste Option
Wo möglich außergerichtliche Lösung , bevor das Verfahren eskaliert.
Honorarrahmen vorab klar
Transparente Vergütungsabrede vor der Mandatsannahme. Keine Überraschungen.
B10 · TESTIMONIAL-ASYMMETRIC · 1 FEATURED + 2 SECONDARY
Asymmetrisches Testimonial-Layout.
Demo-Quote als Platzhalter , echte Mandanten-Stimmen werden erst nach Freigabe und mit Aktenzeichen-anonymisierter Verfahrenszuordnung eingebaut. Das ist Compliance, nicht Schmückerei.
Verfahren , anonymisierter Demo-Datensatz
„Zweite Stimme, kompakter , fungiert als Sekundär-Beleg neben dem Featured."
„Dritte Stimme, ebenfalls kompakt , stellt die Vielstimmigkeit her."
B11 · FAQ-ACCORDION · NATIVE DETAILS/SUMMARY
Native Browser-Accordion , keine JS-Abhängigkeit.
Warum native details/summary statt JS-Accordion?
Wie wird das +/− Icon erzeugt?
Können auch mehrere Items gleichzeitig offen sein?
Welche BG-Varianten gibt es für FAQ?
B14 · PROCESS-HORIZONTAL · 3 SCHRITTE + STROKE-DRAW
Drei Schritte vom Anruf zur laufenden Verteidigung.
Erstgespräch
45 Minuten · kostenfrei
Sachverhalt, Akten-Stand, Verfahrenslage. Klärung ob Mandat sinnvoll und ob Eilbedarf besteht.
Aktenprüfung
binnen 7 Werktagen
Akteneinsicht über die Staatsanwaltschaft, Durchsicht aller Beweismittel, Identifikation von Verfahrensfehlern.
Strategie & Vertretung
laufend
Entwicklung der Verteidigungslinie, Schriftverkehr, Hauptverhandlung, ggf. Rechtsmittel.
B15 · TEAM-GRID-3COL · PORTRAIT + POSITION + BIO
Editorial Team-Cards mit Hover-Color-Reveal.
B16 · IMAGE-TEXT-SPLIT · EDITORIAL 2-COL + MASK-WIPE
Bild links, Story rechts. Asymmetrisch und editorial.
Der Pattern für längere Story-Passagen mit visueller Verankerung. Bild kommt mit Clip-Path-Mask-Wipe links→rechts beim Scroll-In. Hanse-Petrol-Linie an der oberen Section-Kante als subtiler Maritim-Marker.
Optional ein Accent-Quote über der H2 , kurzes Statement in Tenor Sans MV-Red mit roter Left-Border. Funktioniert auch mit Bild rechts (Parameter image_position='right').
B17 · CTA-INLINE-BAR · MID-PAGE-HANDLUNG
Akute Lage? Ein Anruf reicht.
Mid-Page-CTA in dunkler Variante. Mit Petrol-Sweep der links→rechts unter der Section wandert beim Reveal.
B18 · STATS-INLINE-BAR · 4 MEGA-ZAHLEN + NUMBER-MORPH
Vier Mega-Zahlen mit Number-Morph beim Scroll-In.
30+
Jahre Berufserfahrung
2
Fachanwaltstitel
1996
Kanzleistandort Stralsund
24h
Erstgespräch bei Eilfall
Was passiert in den ersten 48 Stunden eines Ermittlungsverfahrens?
Der Mega-Frage-Pattern als Page-Break-Statement. Tenor Sans clamp(40-96px), Mega-Frage-Mark in MV-Red als Glyph oben links, leicht transparent als Editorial-Layer.
B21 · CASE-STUDY-FRAME · 3-SPALTEN AUSGANGSLAGE/METHODE/ERGEBNIS
Anonymisierter Mandanten-Fall im 3-Spalten-Frame.
AUSGANGSLAGE
Beschuldigter erfährt aus Briefkasten von der Einleitung des Ermittlungsverfahrens. Akten-Lage unklar, Verteidiger-Wechsel von Pflichtverteidiger gewünscht.
METHODE
Sofortige Akteneinsicht beantragt. Aussage zunächst zurückgehalten , Akte vor Aussage. Nach Aktenprüfung: Verfahrensfehler in der Beweissicherung identifiziert.
ERGEBNIS
Verfahren nach §170 Abs. 2 StPO eingestellt. Kein Eintrag im Bundeszentralregister.
B22 · COMPARISON-TABLE · MEDIATION VS. GERICHTSVERFAHREN
Vergleichstabelle mit Highlight-Spalte (rechts oder links).
| Kriterium | Mediation | Gerichtsverfahren |
|---|---|---|
| Dauer | 2 , 6 Sitzungen | 12 , 36 Monate |
| Kosten | nach Stundensatz, transparent | Verfahrens- + Anwaltskosten + ggf. Sachverständige |
| Beziehungserhalt | zentrales Ziel | in der Regel beendet |
| Vertraulichkeit | vollständig | Verhandlung grundsätzlich öffentlich |
| Lösungs-Hoheit | bei den Parteien | beim Gericht |
B11 · FAQ-ACCORDION · NATIVE DETAILS/SUMMARY
Native Browser-Accordion , keine JS-Abhängigkeit.
Warum native details/summary statt JS-Accordion?
Wie wird das +/− Icon erzeugt?
Können auch mehrere Items gleichzeitig offen sein?
Welche BG-Varianten gibt es für FAQ?
B23 · HERO-IMAGE-LEFT · ALTERNATIVE-HERO-VARIANTE
Bild links.
Story rechts.
Asymmetrisch.
Hero-Variante für Service-LPs oder Sub-Pages, wo der Portrait-BG-Hero (B1) zu plakativ wäre. Image-Mask-Wipe + Hanse-Petrol-Frame links unten als Editorial-Akzent.
DEMO-PATTERN · ALTERNATIVE ZU B1
§ 136 StPO
„Der Beschuldigte ist vor der ersten Vernehmung darauf hinzuweisen, dass es ihm freisteht, sich zu äußern oder nicht zur Sache auszusagen."
Art. 103 GG
„Vor Gericht hat jedermann Anspruch auf rechtliches Gehör. Eine Tat kann nur bestraft werden, wenn die Strafbarkeit gesetzlich bestimmt war, bevor die Tat begangen wurde."
B24 · MARQUEE-STRIP · KONTINUIERLICH SCROLLEND (25s LINEAR INFINITE)
30+
Jahre Berufserfahrung
Zentrale Mega-Zahl in Tenor Sans 240px mit Gradient-Sweep. Drumherum 4 Editorial-Labels die langsam um die Mitte rotieren (60 Sekunden pro Umdrehung). Drei konzentrische Ringe in Hanse-Petrol + MV-Red als Editorial-Architektur.
B25 · ORBITAL-STAT · MEGA-NUMBER + 60s ROTIERENDE LABELS
B26 · IMAGE-WIPE-OVERLAY · CINEMATIC REVEAL (2.4s CUBIC-BEZIER)
Cinematic Image-Wipe als Section-Höhepunkt.
Dunkle Navy-Overlay-Schicht wischt links→rechts weg beim Scroll-Eintritt. Editorial-Reveal-Geste in Konja-Speed. Funktioniert als atmospheric Page-Höhepunkt.
B27 · HSCROLL-CARD-TRACK · 5 CARDS HORIZONTAL SCROLLEND
Horizontal scrollende Card-Reihe , seitwärts via Scroll oder Drag.
01
Aktenanforderung
Schriftliche Akteneinsicht-Beantragung bei der zuständigen Staatsanwaltschaft. Fristlauf: 5 Werktage.
02
Beweisaufnahme
Sichtung aller Beweismittel: Vernehmungsprotokolle, Sachverständigengutachten, Asservate.
03
Verfahrensfehler-Identifikation
Prüfung auf formelle und materielle Fehler in der Beweissicherung , oft entscheidend für die Verteidigungslinie.
04
Strategie-Entwicklung
Auswahl der Verteidigungslinie: Schweigen, Bestreiten, Geständnis mit Verfahrensabsprache, Verfahrensbeendigung.
05
Mandanten-Vorbereitung
Detaillierte Vorbereitung auf Hauptverhandlung. Befragung, Aussagen, Verhalten vor Gericht.
B28 · MORPHING-GLYPH-BAND · 3 SVG-WAVES MORPH 11/14/18s INFINITE
B12 · CLOSE-CTA-BAR · DARK-NAVY-DEEP
Ende der Library. Anfang der Arbeit.
Diese Showcase-Page demonstriert achtundzwanzig Patterns mit echten infinite-Animationen , Marquee, Orbital, Wipe, HScroll, Path-Morph + Editorial-Detail-Animations (Wave-Float, Gradient-Sweep, Pulse, Travel-Dot).
Beratungstermin vereinbaren