@charset "utf-8";
/* ===========================================
// Overview
=========================================== //
[x] Reset, defaults, Web Fonts (and/or font-face), clearfix, misc.
[x] HTML5 fix
[x] Default layout
[Header, navigation, container, sticky footer, misc.]
[x] Content
[Headlines, images, misc.]
[x] Google Maps (page "Anfahrt und Öffnungszeiten")
[x] IE fixes and filters
[x] Plugins
[Slimbox 2, jQuery Validation]
[x] No JavaScript
[x] Print
/* ===========================================
// [x] Reset, defaults, Web Fonts (and/or font-face), clearfix, misc.
=========================================== */
* { margin: 0; padding: 0 }
body { background: #225c96 url(../img/defaultLayout/bg.png) repeat-x; font: normal 14px/18px Arial, Helvetica, sans-serif; color: white }
h1, h2, h3 { font: normal 18px/25px 'Oswald', Arial, Helvetica, sans-serif; text-shadow: 4px 2px 3px #333; color: #fdf467; margin-bottom: 15px }
h2 { font-size: 16px; line-height: 20px; margin-bottom: 10px }
h3 { font-size: 15px; line-height: 19px; margin-bottom: 6px }
ul, dl { list-style: none; margin-bottom: 25px }
ul.bulletList { list-style-type: disc; list-style-position: inside }
ul sup { text-decoration: underline }
ol { list-style: decimal; padding-left: 20px; margin-bottom: 15px }
dt { float: left; margin-right: 7px }
section, p { margin-bottom: 15px }
hr { background-color: #aaa; height: 1px; border: 0 }
img, img a { outline: none; border: none }
a:link, a:visited { color: #fdf467; text-decoration: none; border-bottom: 1px dotted red; outline: none }
a:hover, a:active { color: #ffef27; border-bottom-color: #fdf467 }
li.active, li.active a:link, li.active a:visited, li.active a:hover { color: #fdf467; text-decoration: none }
.accentuate { font-weight: bold; color: #ccc }
.separator { border-bottom: 1px solid #888; padding-bottom: 30px; margin-bottom: 10px }
.item { margin-bottom: 10px }
.noShow { visibility: hidden; height: 0 }
.group, .item { overflow: hidden }
.group:after, .item:after { clear: both; content: "."; display: block; font-size: 0; height: 0; min-height: 0; visibility: hidden }
/* Force scrollbar + -webkit-font-smoothing (http://maxvoltar.com/archive/-webkit-font-smoothing) */
html { overflow-y: scroll; -webkit-font-smoothing: antialiased }
/* ===========================================
// [x] HTML5 fix
=========================================== */
header, hgroup, nav, aside, article, section, figure, footer { display: block }
/* ===========================================
// [x] Default layout
=========================================== */
.wrap .layout { position: relative; width: 874px; margin: 0 auto }
section.default { margin-bottom: 80px }
.fadedLogo { position: absolute; top: 252px; left: -136px; background: url(../img/defaultLayout/bgLogo.png) no-repeat; width: 228px; height: 154px; z-index: 1 }
.allProducts .fadedLogo { top: 94px }
.drape .fadedLogo { top: 119px }
.carpets .fadedLogo { top: 145px }
.hangings .fadedLogo { top: 193px }
.lining .fadedLogo { top: 196px }
.sunscreen .fadedLogo { top: 218px }
.measuredCarpets .fadedLogo { top: 244px }
.brands .fadedLogo { top: 258px }
.beforeAfterwards .fadedLogo { top: 291px }
.approach .fadedLogo { top: 329px }
.contact .fadedLogo { top: 360px }
/* Header
// =========================================== */
header { color: #2f2f2f }
.wrap .layout header hgroup, .wrap .layout header a, .wrap header h1 { border-bottom: 0; text-indent: -9999px; width: 424px; height: 110px;
margin: 0 auto 22px }
.wrap .layout header hgroup { background: url(../img/defaultLayout/logo.png) 0 24px no-repeat }
/* Navigation
// =========================================== */
nav { position: relative; z-index: 2; float: left; width: 200px; font-size: 15px; text-shadow: 4px 2px 3px #333; margin-bottom: 37px }
nav li { list-style-type: none }
nav a:link, nav a:visited, nav a:active { font: normal 20px/26px Oswald, Arial, Helvetica, sans-serif; color: white; border-bottom-color: red }
nav a:link span, nav a:visited span, nav a:active span { font-size: 14px; color: #ccc }
nav a:hover, nav a:hover span, nav li.active a span { color: #ffef27 }
nav li { margin-bottom: 5px }
nav li.beforeAfter { margin-bottom: 12px }
nav li ul { margin: 7px 0 6px 68px }
nav li ul li { list-style: disc outside; display: list-item; font-size: 13px; font-weight: normal; margin-bottom: 3px }
nav li ul li a:link, nav li ul li a:visited { font-size: 15px; line-height: 22px }
nav .offer { text-decoration: none }
nav a:link.start, nav a:visited.start, nav a:hover.start { font-size: 13px; margin-top: 7px }
/* Sticky Footer (New CSS Sticky Footer: http://www.cssstickyfooter.com/)
// =========================================== */
html, body { height: 100% }
.wrap { min-height: 100% }
#main { overflow: auto; padding-bottom: 200px }
body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /} /* Opera Fix */
footer { position: relative; margin-top: -140px /* negative value of footer height */; height: 140px; clear: both }
/* Footer (additional styles)
// =========================================== */
footer { background: black url(../img/defaultLayout/bgFooter.png) repeat-x }
footer .wrap { width: 874px; margin: 0 auto }
footer a.showroom { display: inline-block; float: left; border-bottom: 0; -moz-transition: -moz-transform 200ms ease-in-out;
-webkit-transition: -webkit-transform 200ms ease-in-out; -ms-transition: -ms-transform 200ms ease-in-out /*IE (up to 9) does not support*/;
-o-transition: -o-transform 200ms ease-in-out; transition: transform 200ms ease-in-out; margin-top: -85px }
footer a.showroom:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25) }
footer a.showroom img { border: 2px solid #5d688a }
footer ul { float: left; width: 530px; display: inline-block; color: #fdf467; margin: 9px 0 0 27px }
footer li { float: left; display: inline-block; font-weight: bold; margin-bottom: 2px }
footer a.imprint { float: right; font-size: 13px; text-decoration: none; color: white; margin-top: 9px }
footer a.imprint:hover, footer a.imprint.active { color: #fdf467 }
/* ===========================================
// [x] Content
=========================================== */
section.main h1, section.intro h1 { display: inline-block; border-bottom: 1px solid #888; padding: 0 53px 7px 0; text-indent: 53px; line-height: 50px; height: 33px;
background: url(../img/defaultLayout/bgHeadline.png) no-repeat }
.content, article { float: right; width: 640px; margin-bottom: 50px }
.content { padding-top: 10px }
/* Claim
// =========================================== */
section.intro { width: 780px; position: relative; margin: 0 auto }
section.intro h1 { border: 0; color: white; text-indent: 47px; line-height: 47px; margin-bottom: 9px }
section.intro div { position: absolute; left: 125px; bottom: 118px }
/* Galleries
// =========================================== */
section.slimbox { width: 100%; margin-top: 15px }
section.slimbox a { float: left; width: 188px; height: 120px; overflow: hidden; background: #e4e0dd; border: 4px solid #ccc; -moz-border-radius: 8px;
-webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 3px 4px 4px #222; -webkit-box-shadow: 3px 4px 4px #222;
-ms-box-shadow: 3px 4px 4px #222; -o-box-shadow: 3px 4px 4px #222; box-shadow: 3px 4px 4px #222; margin: 0 17px 16px 0; font-size: 0 }
section.slimbox a:hover { margin: 1px 15px 15px 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;
border-radius: 5px; -moz-box-shadow: 3px 3px 3px #222; -webkit-box-shadow: 3px 3px 3px #222; -ms-box-shadow: 3px 3px 3px #222; -o-box-shadow: 3px 3px 3px #222;
box-shadow: 3px 3px 3px #222 }
section.slimbox img.arrow { float: left; margin: 45px 8px 0 0 }
section.slimbox .keys { font: normal 19px/24px Oswald, Arial, Helvetica, sans-serif; color: #fff215; letter-spacing: 2px; text-transform: uppercase }
section.slimbox a.virtualShowroom { width: 230px; height: 60px }
/* Page "Links zu unseren Marken"
// =========================================== */
.brands h2 { margin-bottom: 7px }
/* Page "Vorher-Nachher"
// =========================================== */
.beforeAfter section { float: left }
.beforeAfter section a:first-child { margin-left: 90px }
.beforeAfter .separator { padding-bottom: 1px; margin-bottom: 1px }
.beforeAfter section.slimbox a:hover { margin-right: 17px }
/* Page "Kontakt"
// =========================================== */
#form { position: relative; margin-top: 4px; border: 1px solid #ccc; -moz-border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px;
-o-border-radius: 8px; border-radius: 8px; width: 417px; padding: 30px 37px 20px 13px; background: #013059 url(../img/defaultLayout/bgForm.png) repeat-x;
background: -moz-linear-gradient(top, #225c96 0%, #013059 100%); background: -webkit-linear-gradient(top, #225c96 0%, #013059 100%);
background: -ms-linear-gradient(top, #225c96 0%, #013059 100%); background: -o-linear-gradient(top, #225c96 0%, #013059 100%);
linear-gradient(top, #225c96 0%, #013059 100%) }
#form .required { position: absolute; top: 17px; right: 20px }
#form input, #form textarea { background-color: white; border: 1px solid white; -moz-border-radius: 6px; -webkit-border-radius: 6px; -ms-border-radius: 6px;
-o-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 3px 4px 4px #222; -webkit-box-shadow: 3px 4px 4px #222; -ms-box-shadow: 3px 4px 4px #222;
-o-box-shadow: 3px 4px 4px #222; box-shadow: 3px 4px 4px #222; width: 265px; font-size: 14px; color: #555; padding: 4px 10px; margin: 0 7px 9px 0 }
#form fieldset { border: 0; margin-bottom: 20px }
#form .position label { width: 120px; line-height: 15px }
#form .position div { height: 22px }
#form fieldset.gender { margin-bottom: 9px }
#form fieldset.gender div div { float: right; width: 295px }
#form fieldset.gender div div input { float: left; background: 0; padding: 0; width: auto; color: black; margin: 5px 6px 0 0 }
#form .gender div label { float: left; margin-right: 25px }
#form label { float: left; line-height: 26px }
#form input, #form textarea { float: right }
#form .wrapZipCity .descZipCity { float: left; width: 120px }
#form .wrapZipCity .descZipCity label { width: auto; float: none; display: inline }
#form .wrapZipCity .zipCity { float: right }
#form .wrapZipCity .zipCity input { float: left; width: 41px }
#form .wrapZipCity .zipCity input.city { float: right; width: 194px }
#form .approach { margin: -14px 0 29px }
#form .approach label.labelApproach { width: 100%; margin: 0 }
#form .approach input { float: left; background: 0; padding: 0; width: auto; line-height: 20px; color: black; margin: 5px 2px 0 0 }
#form .approach label { height: 20px; line-height: 24px; padding-top: 0; margin: 0 25px 0 5px }
#form textarea { font: normal 14px/18px Arial, Helvetica, sans-serif; width: 270px; min-width: 270px; max-width: 270px; height: 150px; min-height: 18px;
max-height: 300px; padding-right: 5px; margin-bottom: 18px }
#form input#send { width: 140px; height: 28px; color: white; border: 1px solid white; background-color: #225c96; background: -moz-linear-gradient(top,#225c96, #003059);
background: -webkit-linear-gradient(top, #225c96, #003059); background: -ms-linear-gradient(top, #225c96 0%, #013059 100%);
background: -o-linear-gradient(top, #225c96 0%, #013059 100%); background: linear-gradient(top, #225c96 0%, #013059 100%); -moz-border-radius: 8px;
-webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; margin-right: 154px; cursor: pointer }
/* ===========================================
// [x] Google Maps (page "Anfahrt und Öffnungszeiten")
=========================================== */
#map { border: 1px solid black; background-color: #f4f3f0; color: black; width: 638px; height: 400px }
#map .location { margin-bottom: 5px }
#map .location div { font-weight: bold; color: #003059 }
#map .routePlanner { border-top: 1px solid #ccc; font-size: 12px; margin-bottom: 10px }
#map .routePlanner input { height: 20px; margin-right: 10px }
#map .routePlanner input#route { float: left; border: 1px solid #ccc; width: 224px }
#map .routePlanner input.submit { width: 65px; height: 23px; margin: 0 }
/* ===========================================
// [x] IE fixes and filters
=========================================== */
section.slimbox a, .ie6-8 #form, .ie6-8 #form input, .ie6-8 #form textarea, .ie6-8 #form input#send { behavior: url(assets/ie/PIE.htc) } /* PIE.htc for CSS 3 support for
IE 6-IE 8 (CSS3 Pie: http://css3pie.com/) */
.ie6-8 .wrap .layout header hgroup { cursor: pointer }
.ie6-8 a#lbPrevLink img, .ie6-8 a#lbNextLink img, .ie6-8 a#lbCloseLink img { display: none }
.ie6-8 #form { z-index: 1 } /* Necessary fix for IE 8 [regarding the CSS 3 support for IE 6-IE 8 (CSS3 Pie: http://css3pie.com/)] */
.ie6-8 #form, .ie6-8 #form input#send { border-width: 1px 2px 2px 1px }
.ie6-8 #form input, .ie6-8 #form textarea { border-radius: 6px 6px 8px 8px }
.ie6-8 #form .gender input, .ie6-8 #form .approach input, .ie9 #form .gender input, .ie9 #form .approach input { width: 10px; height: 10px }
.ie6-8 #form .wrapZipCity .zipCity { width: 294px }
.ie6-8 #form .approach label { line-height: 20px }
/* IE 6 only
// =========================================== */
*html .ie6-8 .group, *html .ie6-8 .item { height: 1% }
*html .ie6-8 ul.subMenu { margin-top: -14px }
*html .ie6-8 .main h1, *html .ie6-8 .intro h1 { padding-bottom: 0; line-height: 40px; background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='assets/img/defaultLayout/bgHeadline.png') }
*html .ie6-8 .fadedLogo { background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='assets/img/defaultLayout/bgLogo.png') }
*html .ie6-8 .slimbox a { cursor: pointer }
*html .ie6-8 footer ul { margin: 9px 0 0 28px }
*html .ie6-8 footer a.showroom { position: relative; z-index: 2 }
*html .ie6-8 section.intro div { bottom: 132px }
*html .ie6-8 .beforeAfter .separator { padding-bottom: 16px }
*html .ie6-8 .beforeAfter a:hover { margin: 1px 15px 13px 2px }
*html .ie6-8 #form .wrapZipCity .zipCity input.city { width: 191px }
*html .ie6-8 #form .approach { margin-top: -5px }
/* IE 7 only
// =========================================== */
*+html .ie6-8 section.intro div { bottom: 133px }
*+html .ie6-8 ul.subMenu { margin-top: -14px }
*+html .ie6-8 .approach ul { line-height: 22px }
*+html .ie6-8 .beforeAfter .separator { padding-bottom: 16px }
/* IE 9 only
// =========================================== */
.ie9 #form input#send { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#225c96', endColorstr='#013059') } }
/* ===========================================
// [x] Plugins
=========================================== */
/* Slimbox 2
// =========================================== */
#lbBottomContainer #lbCaption { font-size: 12px; line-height: 16px; color: #444; width: 88%; margin: -2px 0 5px }
#lbBottomContainer #lbCaption a:link, #lbBottomContainer #lbCaption a:visited, #lbBottomContainer #lbCaption a:hover { color: #124778;
border-bottom: 1px dotted #124778 }
#lbCenter a, #lbBottom a { border-bottom: 0 }
/* jQuery Validation
// =========================================== */
#form ul.errorlist { display: block; clear: both; float: right; border: 2px solid red; width: 263px; padding: 3px 10px; margin: 0 7px 15px 0 }
/* ==================================================
// [x] No JavaScript
================================================== */
.noJS section.slimbox:before { display: block; border: 2px solid red; font-size: 13px; font-weight: bold; font-style: italic; padding: 10px; margin-bottom: 20px;
content: "Ohne aktiviertes JavaScript stehen Ihnen die Funktionalitäten der Bilder-Galerien dieser Website nicht zur Verfügung. Die Bilder sind dann nur auf Basis von HTML verlinkt." }
.noJS section.slimbox.index:before { margin-top: -22px }
.noJS #map:before { display: block; border: 2px solid red; font-size: 13px; font-weight: bold; font-style: italic; padding: 10px; margin: 20px 0 0 132px;
width: 350px; text-align: center; content: "Ohne aktiviertes JavaScript steht Ihnen Google Maps und der Routenplaner nicht zur Verfügung." }
/* ===========================================
// [x] Print
=========================================== */
@media print {
* { background: transparent!important; color: #000!important; text-shadow: none }
header hgroup, section.intro, footer img, a.imprint { display: none }
header { height: 120px }
nav a { font-size: 14px!important; line-height: 13px!important }
.content { padding: 0 }
a, a:visited { color: #444!important; text-decoration: none; border-bottom: 1px dotted #fdf467 }
a:after { content: " (" attr(href) ")" }
abbr:after { content: " (" attr(title) ")" }
.ir a:after { content: "" }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid }
img { page-break-inside: avoid }
@page { margin: 0.5cm }
p, h1, h2, h3 { orphans: 3; widows: 3 }
h1, h2, h3 { text-shadow: none; text-indent: 0; page-break-after: avoid }
footer { position: absolute; margin: 0; top: 0 }
footer li { display: block; margin-right: 30px }
}
Relaunch! | Version 6.0 demnächst... |
|
| Zuletzt aktualisiert: 14. Mai 2012 | |
Ab 02. Juli 2012: Wieder “up-to-date”, mit Elementen der
Social Media
und Web 2.0
-Technologien,
wird die jetzige veraltete Website (Version 4.1 von 2008!) abgelöst.
Fluid-Layout + media-queries + HTML5 + CSS 3... |
| 14. Mai 2012/ von Stefan Plagge |
Aktuelles Projekt ist eine “mobile” Demo-Seite (für alle Endgeräte) mit Fluid-Layout und den aktuellen Web-Technologien (HTML5
,
CSS 3
,
jQTouch
,
Sencha Touch
,
jQuery Mobile
,
Ext JS
,
jQuery
,
Ajax
und PHP
.
Die Demo-Seite ist ab 18. Juni 2012 verfügbar.
(Screenshot der Demo-Seite)
Artikel: How To Build A Mobile Website |
| 26. März 2012/ von Stefan Plagge |
Auf Smashing Magazine
gibt es eine sehr interessante Einführung (in englisch) mit den Pros & Cons bezgl. der technischen Umsetzung von “mobilen” Websites:
How To Build A Mobile Website
.
Bei dieser Gelegenheit auch gleich noch die Artikel-Übersicht
“Guidelines For Mobile Web Development”
mit einigen informativen Leitfäden zur Thematik “Entwicklung für mobile Endgeräte”.
Smashing Magazine vermittelt mittels weniger Artikel bereits die wichtigsten (Grundlagen-) Informationen.
Aus aktuellem Anlass (bzgl. Flash®
für mobile Endgeräte): Technologievordenker Steve Jobs
setzte auf (die offiziellen) Webstandards und veröffentlichte, im April 2010, aufschlussreiche Gedanken hierzu: Thoughts on Flash
(engl.).
Vorschau auf Opera Dragonfly 1.1 |
| 19. Juni 2011/ von Stefan Plagge |
ausprobiert werden.
Neben Safaris Developer Tools
(in ähnlicher Form auch in Google Chrome
enthalten) befinden sich diese beiden Developer-Tools mittlerweile auf dem Niveau (mit kleinen Abstrichen) von
Firebug
.
U.a. wegen der enormen Erweiterbarkeit bleibt der Firefox
mein Browser “für alle Gelegenheiten”.
Bei der Arbeit kann man auf eine riesige Anzahl von (Developer-) Add-Ons zurückgreifen, z.B.
HTML Validator
,
JSView
,
QuickJava
und
EventBug
.
Innovationsschub auf dem Browsermarkt |
| 14. August 2010/ von Stefan Plagge |
,
Firefox
,
Safari
,
Opera
und
Chrome
.
Die besten Plugins für jQuery... |
| 19. Juli 2010/ von Stefan Plagge |
Die Auswahl an Plugins für jQuery
im Web ist riesig und (naturgemäß) unübersichtlich. Die BLOGPROGRAMMIERER
hatten im Vorjahr eine Auswahl zusammengestellt, welche die Bezeichnung “Best of...” wirklich verdient: jQuery: Die 20+ besten Content - Plugins (Scroll, Accordion, Slide)
.
Auch einen Besuch wert ist die Zusammenstellung der Plugins im Teil 1 der “Best of jQuery-Tutorials”
des Webstandard- Blogs
.
Bei dieser Gelegenheit lohnt auch ein Klick auf Teil 2
und Teil 3
der Bestenliste.
Google Chrome 5: Beta-Version verfügbar |
| 09. Mai 2010/ von Stefan Plagge |
mitteilt, ist die aktuelle Beta-Version
jetzt schon bis zu 35 Prozent schneller als die stabile Version 4.1.
weiterhin verbessert.
Chrome überholte
im Januar Safari
(Apple) und verfügt nun (Mai 2010) über einen Marktanteil um 7 Prozent
.
Durch den -in absehbarer Zeit- zweistelligen Marktanteil kommen auch “Google-kritische” Web-Entwickler nicht mehr umhin, den Browser
zu berücksichtigen; und die umstrittene Browser-ID
lässt sich mittlerweile ja problemlos deaktivieren.
Firebug: Website mit neuem Layout |
| 11. Februar 2010/ von Stefan Plagge |
hat ein neues Layout.
Schnell, schneller: jQuery 1.4 |
| 19. Januar 2010/ von Stefan Plagge |
nicht nur neue Funktionen, sondern verfügt über eine um 40 Prozent höhere Performance im Vergleich zum direkten Vorgänger.
eine (fast) unschlagbare Performance genießen!
Firefox überholt Internet Explorer |
| 01. Dezember 2009/ von Stefan Plagge |
hat ermittelt, dass der Firefox-Browser (in Deutschland) mit 45,4 Prozent Marktanteil vor dem Internet Explorer (44,5 Prozent) liegt.
Microsoft hatte zwar mit dem Internet Explorer 8
in mehrerer Hinsicht große Fortschritte gemacht; alleine schon aus Sicherheitsgründen (und natürlich der enormen Erweiterbarkeit!) sollte man jedoch
Firefox
den Vorzug geben.
Dank der riesigen Verfügbarkeit von Add-ons
für Webentwickler (z.B. Firebug
und Web Developer
)
gibt es zur Zeit keine gleichwertige Alternative.
Über wwwdesign.info (Version 4.1) |
|
| Update: 14. Mai 2012/ von Stefan Plagge | |
wwwdesign.info (die komplett neue Version 6.0 erscheint demnächst) ist meine Informationsseite mit Tutorials aus verschiedenen Bereichen der Webentwicklung und des Webdesigns. U.a. (X)HTML, CSS, JavaScript, jQuery, script.aculo.us, PHP (neu), Web 2.0 (neu) und Flash®.
Falls Sie an den Möglichkeiten interessiert sind welche sich mit 3D-Programmen ergeben, so finden Sie hier Beispiele für die beiden Szenarien “Stills” und “Animation”.
Ich freue mich, falls auch Sie hier interessantes Material finden, welches Sie für die Umsetzung ihrer Webprojekte verwenden können!
Falls Sie mehr über meine bisherigen Arbeiten erfahren möchten, so finden Sie hier mein Portfolio, sowie ein paar Fakten über mich (Stefan Plagge), z.B. meinen Lebenslauf.
Für eine vollständige Übersicht aller Inhalte (bzw. Artikel) meiner Website besuchen Sie bitte die Sitemap.










