+ + Lasst uns froh und munter sein + und uns recht von Herzen freun! + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Dann stell’ ich den Teller auf, + Nikolaus legt gewiss was drauf. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Wenn ich schlaf’, dann träume ich: + Jetzt bringt Nikolaus was für mich. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Wenn ich aufgestanden bin, + lauf’ ich schnell zum Teller hin. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
++ + Nikolaus ist ein guter Mann, + dem man nicht genug danken kann. + + + Lustig, lustig, tralalala! + Bald ist Nikolaus-Abend da, + bald ist Nikolaus-Abend da! + +
+ + + \ No newline at end of file diff --git a/web/11/demos/00_styles_nikolaus.css b/web/11/demos/00_styles_nikolaus.css new file mode 100644 index 0000000..1e64b21 --- /dev/null +++ b/web/11/demos/00_styles_nikolaus.css @@ -0,0 +1,26 @@ +h1 { + color: goldenrod; +} + +p { + font-size: 1.5em; +} + +.refrain { + font-size: 1.2em; + color: green; +} + +.strophe{ + color: darkred; +} + +.nikolaus{ + font-size: 1.3em; + font-style: italic; + font-weight: bolder; +} + +h1 .nikolaus{ + box-shadow: 1px 1px 2px 3px darkgreen; +} \ No newline at end of file diff --git a/web/11/demos/01_cascading.html b/web/11/demos/01_cascading.html new file mode 100644 index 0000000..b90927f --- /dev/null +++ b/web/11/demos/01_cascading.html @@ -0,0 +1,12 @@ + + + + + +Mit Kaskaden kann man sich zu viele feingranulare Style-Klassen sparen.
+ + \ No newline at end of file diff --git a/web/11/demos/01_styles_cascading.css b/web/11/demos/01_styles_cascading.css new file mode 100644 index 0000000..c5ce1ff --- /dev/null +++ b/web/11/demos/01_styles_cascading.css @@ -0,0 +1,15 @@ +body { + color: blue; + font-size: small; +} + +p { + color: cornflowerblue; + font-weight: bolder; + box-shadow: 2px 2px 5px red; +} + +span { + font-size: large; + /* box-shadow: inherit; */ +} \ No newline at end of file diff --git a/web/11/demos/02_fonts.html b/web/11/demos/02_fonts.html new file mode 100644 index 0000000..d84c6ee --- /dev/null +++ b/web/11/demos/02_fonts.html @@ -0,0 +1,28 @@ + + + + + + + +Dies ist ein Absatz mit 12pt Schriftgröße.
+Dies ist ein Absatz mit 1.5rem Schriftgröße.
+Dies ist ein Absatz mit 1.5em Schriftgröße.
+ +Dies ist ein Absatz mit nicht kursiver Schrift.
+ + + \ No newline at end of file diff --git a/web/11/demos/02_styles_fonts.css b/web/11/demos/02_styles_fonts.css new file mode 100644 index 0000000..3e03fd3 --- /dev/null +++ b/web/11/demos/02_styles_fonts.css @@ -0,0 +1,53 @@ +/* @font-face { + font-family: 'Roboto Schrift'; + src: + url('fonts/Roboto-Regular.woff2') format('woff2'), + url('fonts/RobotoCondensed-Bold.otf') format('opentype'); +} + +body { + font-family: 'Roboto Schrift', serif; +} */ + +/* +body { + font-family: "Arial", serif; +} */ + +/* body{ + font-family: Barriecito; +} */ + +.absatz-px { + font-size: 18px; +} + +.absatz-pt { + font-size: 12pt; +} + +strong { + font-weight: 800; +} + +h4 strong { + font-style: italic; +} + +/* Relative Schriftgröße mit rem (bezogen auf html-Größe) */ +html { + font-size: 16px; +} + +.absatz-rem { + font-size: 1.5rem; +} + +/* Relative Schriftgröße mit em (bezogen auf Eltern-Element: body) */ +body { + font-size: 14px; +} + +.absatz-em { + font-size: 1.5em; +} \ No newline at end of file diff --git a/web/11/demos/03_simplebox.html b/web/11/demos/03_simplebox.html new file mode 100644 index 0000000..69829f8 --- /dev/null +++ b/web/11/demos/03_simplebox.html @@ -0,0 +1,14 @@ + + + + + +Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+Schlechte Jahresbilanz
+Der Branchenverband der Maschinenbauer zieht eine schlechte Jahresbilanz 2025. Der VDMA verlangt Reformen. Sonst + würden noch mehr Unternehmen abwandern. Vor allem der Mittelstand leidet unter den Standortbedingungen.
+ ++ Julia Schnitzler schaut von ihrem Büro auf die Landstraße, die direkt an ihrem Unternehmen entlang führt. Von + hier + aus gehen die Spezialanlagen des Herstellers Strassburger Filter in alle Welt. Julia Schnitzler ist hier + geschäftsführende Gesellschafterin. +
+"Wir sind aufgrund unserer Expertise international führend, aber es wird immer + schwerer. Der Standort Deutschland macht uns zu schaffen. Auch international wird das Geschäftsklima immer + rauer", + fasst die Geschäftsfrau ein ernüchterndes Jahr zusammen. "Unsere Exporte sind um mehr als zehn Prozent + zurückgegangen." Die Firma fertigt Filtrationssysteme für die Bereiche Pharma, Chemie und Kosmetik. Die Exporte + gehen vor allem nach Südostasien oder auch nach Nordamerika. +
+Im rheinhessischen Westhofen hat der Betrieb 50 Angestellte. Auch im chinesischen + Shanghai arbeiten zwei Spezialisten für das deutsche Unternehmen. China war lange ein starker Markt für den + deutschen Filterbauer. "Das hat sich geändert: Die Nachfrage ist zurückgegangen. Es gibt immer mehr chinesische + Wettbewerber, die in ihrem heimischen Markt bevorzugt werden", sagt Schnitzler. Qualitativ sei man noch ein + gutes + Stück voraus. Dafür seien die Chinesen bei den Preisen kaum noch zu schlagen. "Chinesische Firmen haben viel + niedrigere Energiepreise. Auch deshalb bieten sie Produkte an, die teils bis zu 75 Prozent billiger als unsere + Anlagen sind."
+Die US-Zölle verschärften die Krise. "Dadurch wird alles noch komplizierter - und unsicherer. Viele + unserer Kunden warten erstmal ab. Wer weiß schon, was sich morgen wieder ändert." Pläne zur Verlagerung des + Betriebes in die USA habe sie nicht. Aber Schnitzler stellt fest: "Es wird einem in den USA aufgrund der neuen + Gesetzeslage inzwischen sehr einfach gemacht, eine Niederlassung zu gründen." +
+Daheim setzen der Firma die + Standortbedingungen immer mehr zu. Vor allem die fehlenden Fachkräfte sind ein Problem. Beim Thema + Bürokratieabbau + schüttelt Julia Schnitzler fast schon resigniert den Kopf. "Alle reden davon, aber es wird immer mehr. Ständig + gibt + es neue Richtlinien", sagt die geschäftsführende Gesellschafterin "Ein Beispiel: Wenn wir ein bestimmtes Bauteil + in + einen Filter verbauen, ist das für die Verwaltung eine Kleinigkeit. Liefern wir es aber als Ersatzteil separat + aus, + entsteht ein enormer Dokumentationsaufwand. Das kostet Zeit, bindet Mitarbeiter und wird immer teurer. Dieses + Geld + fehlt dann woanders." +
+ + + + + \ No newline at end of file diff --git a/web/11/labor/styles_workshop.css b/web/11/labor/styles_workshop.css new file mode 100644 index 0000000..2ddacee --- /dev/null +++ b/web/11/labor/styles_workshop.css @@ -0,0 +1,75 @@ +.styled-select { + appearance: none; +} + +.styled-checkbox { + appearance: none; + width: 1.2rem; + height: 1.2rem; + border: 1px solid #000000; + border-radius: 4px; + background-color: #ffffff; + + /* richtet sich mittig zur Textzeile/Nachbarelementen aus */ + vertical-align: middle; + /* dient als Anker für absolute Kinder */ + position: relative; +} + +.styled-checkbox:checked { + background-color: #000000; + border-color: #ffffff; +} + +.styled-checkbox:checked::after { + /* Häkchen-Symbol */ + content: "\2713"; + color: #ffffff; + font-size: 1rem; + + + /* Position relativ zum nächsten positionierten Eltern-Element */ + position: absolute; + /* obere Kante in die Mitte (50%) des Eltern-Elements setzen */ + top: 50%; + /* linke Kante in die Mitte (50%) des Eltern-Elements setzen */ + left: 50%; + /* sich selbst um 50% der eigenen Breite/Höhe zurückschieben → exakt zentriert */ + transform: translate(-50%, -50%); +} + +.styled-radio { + appearance: none; + width: 1.2rem; + height: 1.2rem; + border: 1px solid #000; + border-radius: 50%; + background-color: #ffffff; + + /* richtet sich mittig zur Textzeile/Nachbarelementen aus */ + vertical-align: middle; + /* dient als Anker für absolute Kinder */ + position: relative; +} + +.styled-radio:checked { + border-color: #ffffff; + background-color: #000000; +} + +.styled-radio:checked::after { + content: ""; + width: 0.5rem; + height: 0.5rem; + background-color: #ffffff; + border-radius: 50%; + + /* Position relativ zum nächsten positionierten Eltern-Element */ + position: absolute; + /* obere Kante in die Mitte (50%) des Eltern-Elements setzen */ + top: 50%; + /* linke Kante in die Mitte (50%) des Eltern-Elements setzen */ + left: 50%; + /* sich selbst um 50% der eigenen Breite/Höhe zurückschieben → exakt zentriert */ + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/web/11/labor/uebung02.png b/web/11/labor/uebung02.png new file mode 100644 index 0000000..1843274 Binary files /dev/null and b/web/11/labor/uebung02.png differ diff --git a/web/11/labor/workshop-anmeldung.html b/web/11/labor/workshop-anmeldung.html new file mode 100644 index 0000000..dddd638 --- /dev/null +++ b/web/11/labor/workshop-anmeldung.html @@ -0,0 +1,68 @@ + + + + + + +