Leuchtturm Stand 08.Juli

2026-07-08 16:10:38 +02:00
commit 70ac115da7
32 changed files with 835 additions and 0 deletions
@@ -0,0 +1,11 @@
 # editorconfig.org
 root = true
 [*]
 charset = utf-8
 end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
@@ -0,0 +1,194 @@
 ## GITATTRIBUTES FOR WEB PROJECTS
 #
 # These settings are for any web project.
 #
 # Details per file setting:
 #   text    These files should be normalized (i.e. convert CRLF to LF).
 #   binary  These files are binary and should be left untouched.
 #
 # Note that binary is a macro for -text -diff.
 ######################################################################
 ## AUTO-DETECT
 ##   Handle line endings automatically for files detected as
 ##   text and leave all files detected as binary untouched.
 ##   This will handle all files NOT defined below.
 * text=auto
 ## SOURCE CODE
 *.bat      text eol=crlf
 *.coffee   text
 *.css      text
 *.htm      text
 *.html     text
 *.inc      text
 *.ini      text
 *.js       text
 *.json     text
 *.jsx      text
 *.less     text
 *.od       text
 *.onlydata text
 *.php      text
 *.pl       text
 *.py       text
 *.rb       text
 *.sass     text
 *.scm      text
 *.scss     text
 *.sh       text eol=lf
 *.sql      text
 *.styl     text
 *.tag      text
 *.ts       text
 *.tsx      text
 *.xml      text
 *.xhtml    text
 ## DOCKER
 *.dockerignore text
 Dockerfile     text
 ## DOCUMENTATION
 *.markdown   text
 *.md         text
 *.mdwn       text
 *.mdown      text
 *.mkd        text
 *.mkdn       text
 *.mdtxt      text
 *.mdtext     text
 *.txt        text
 AUTHORS      text
 CHANGELOG    text
 CHANGES      text
 CONTRIBUTING text
 COPYING      text
 copyright    text
 *COPYRIGHT*  text
 INSTALL      text
 license      text
 LICENSE      text
 NEWS         text
 readme       text
 *README*     text
 TODO         text
 ## TEMPLATES
 *.dot        text
 *.ejs        text
 *.haml       text
 *.handlebars text
 *.hbs        text
 *.hbt        text
 *.jade       text
 *.latte      text
 *.mustache   text
 *.njk        text
 *.phtml      text
 *.tmpl       text
 *.tpl        text
 *.twig       text
 ## LINTERS
 .babelrc      text
 .csslintrc    text
 .eslintrc     text
 .htmlhintrc   text
 .jscsrc       text
 .jshintrc     text
 .jshintignore text
 .prettierrc   text
 .stylelintrc  text
 ## CONFIGS
 *.bowerrc       text
 *.cnf           text
 *.conf          text
 *.config        text
 .browserslistrc text
 .editorconfig   text
 .gitattributes  text
 .gitconfig      text
 .gitignore      text
 .htaccess       text
 *.npmignore     text
 *.yaml          text
 *.yml           text
 browserslist    text
 Makefile        text
 makefile        text
 ## HEROKU
 Procfile    text
 .slugignore text
 ## GRAPHICS
 *.ai   binary
 *.bmp  binary
 *.eps  binary
 *.gif  binary
 *.ico  binary
 *.jng  binary
 *.jp2  binary
 *.jpg  binary
 *.jpeg binary
 *.jpx  binary
 *.jxr  binary
 *.pdf  binary
 *.png  binary
 *.psb  binary
 *.psd  binary
 *.svg  text
 *.svgz binary
 *.tif  binary
 *.tiff binary
 *.wbmp binary
 *.webp binary
 ## AUDIO
 *.kar  binary
 *.m4a  binary
 *.mid  binary
 *.midi binary
 *.mp3  binary
 *.ogg  binary
 *.ra   binary
 ## VIDEO
 *.3gpp binary
 *.3gp  binary
 *.as   binary
 *.asf  binary
 *.asx  binary
 *.fla  binary
 *.flv  binary
 *.m4v  binary
 *.mng  binary
 *.mov  binary
 *.mp4  binary
 *.mpeg binary
 *.mpg  binary
 *.ogv  binary
 *.swc  binary
 *.swf  binary
 *.webm binary
 ## ARCHIVES
 *.7z  binary
 *.gz  binary
 *.jar binary
 *.rar binary
 *.tar binary
 *.zip binary
 ## FONTS
 *.ttf   binary
 *.eot   binary
 *.otf   binary
 *.woff  binary
 *.woff2 binary
 ## EXECUTABLES
 *.exe binary
 *.pyc binary
@@ -0,0 +1,6 @@
 # Include your project-specific ignores in this file
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
 # Useful .gitignore templates: https://github.com/github/gitignore
 node_modules
 dist
 .cache
@@ -0,0 +1,10 @@
 # Default ignored files
 /shelf/
 /workspace.xml
 # Ignored default folder with query files
 /queries/
 # Datasource local storage ignored files
 /dataSources/
 /dataSources.local.xml
 # Editor-based HTTP Client requests
 /httpRequests/
@@ -0,0 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ProjectRootManager" version="2">
    <output url="file://$PROJECT_DIR$/out" />
  </component>
 </project>
@@ -0,0 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/react-basics.iml" filepath="$PROJECT_DIR$/react-basics.iml" />
    </modules>
  </component>
 </project>
@@ -0,0 +1,197 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Reiseagentur Leuchtturm</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
 </head>
 <body>
 <header>
    <h1>Reiseagentur Leuchtturm</h1>
    <nav>
        <!--
            Mit dem Argument 'this' wird der Funktion das Element mitgegeben, das die Funktion aufruft.
            Wird hier verwendet, um dem Button die Klasse 'active' hinzuzufügen / zu entfernen.
        -->
        <button onclick="loadPage(this, 'home')" id="homeButton">Start</button>
        <button onclick="loadPage(this, 'berge')">Urlaub in den Bergen</button>
        <button onclick="loadPage(this, 'malediven')">Urlaub auf den Malediven</button>
        <button onclick="loadPage(this, 'toskana')">Urlaub in der Toskana</button>
        <button onclick="loadPage(this, 'daheim')">Urlaub in Balkonien</button>
        <button onclick="loadPage(this, 'barcelona')">Urlaub in Barcelona</button>
    </nav>
 </header>
 <main id="content"></main>
 <footer>
    <span>Reiseagentur Leuchtturm GmbH © 2026</span>
    <span>|</span>
    <button onclick="loadPage(this, 'impressum')">Impressum</button>
 </footer>
 <!--
    template-Elemente werden standardmäßig nicht angezeigt, können aber über JavaScript angesprochen werden.
    Anstatt den html-Code in der loadPage()-Funktion zu definieren, kopiert loagPage() hier den Inhalt einfach aus den
    entsprechenden Templates.
 -->
 <template id="homeTemplate">
    <section>
        <div class="content-text">
            <h2>Ihr Traumurlaub bei der Reiseagentur Leuchtturm</h2>
            <p>Buchen Sie Ihren Urlaub bei uns!</p>
        </div>
        <div class="content-img right"><img src="./src/Leuchtturm.jpg" alt="Leuchtturm"></div>
    </section>
 </template>
 <template id="bergeTemplate">
    <section>
        <div class="content-img left"><img src="./src/Bergdorf.jpg" alt="Bergdorf"></div>
        <div class="content-text">
            <h2>Urlaub in den Bergen</h2>
            <p>Genießen Sie die frische Luft und die atemberaubende Aussicht.</p>
            <a href="https://de.wikipedia.org/wiki/Berge" target="_blank rel='noopener noreferrer'">Mehr über Berge</a>
        </div>
    </section>
    <section>
        <div class="content-text">
            <h2>Die volle Natur</h2>
            <p>Es ist für jeden was dabei.</p>
        </div>
        <div class="content-img right"><img src="./src/BergMitNebel.jpg" alt="Berg mit Nebel"></div>
    </section>
 </template>
 <template id="maledivenTemplate">
    <section>
        <div class="content-text">
            <h2>Urlaub auf den Malediven</h2>
            <p>Genießen Sie die frische Luft und die atemberaubende Aussicht.</p>
            <a href="https://de.wikipedia.org/wiki/Malediven" target="_blank rel='noopener noreferrer'">Mehr über die Malediven</a>
        </div>
        <div class="content-img left"><img src="./src/HerrenHausAmMeer.jpg" alt="Haus am Meer"></div>
    </section>
    <section>
        <div class="content-img right"><img src="./src/PalmenVorStrand.jpg" alt="Strand mit Palmen"></div>
    </section>
 </template>
 <template id="toskanaTemplate">
    <section>
        <div class="content-text">
            <h2>Urlaub in der Toskana</h2>
            <p>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.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
            <p>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</p>
        </div>
        <div class="content-img left"><img src="./src/Toskana.jpg" alt="Grünes Tal in der Toscana"></div>
    </section>
    <section>
        <div class="content-text">
            <h2>Einzigartige Landschaft</h2>
            <p>
                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.
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
                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
            </p>
        </div>
        <div class="content-img right"><img src="./src/Toskana2.jpg" alt="Grünes Tal in der Toscana" ></div>
    </section>
 </template>
 <template id="daheimTemplate">
    <section>
        <div class="content-text">
            <h2>Urlaub in vertrauten vier Wänden</h2>
            <p>Hier gibt's nichts zu buchen.</p>
        </div>
        <div class="content-img left"><img src="./src/Wohnzimmer.png" alt="Ein Wohnzimmer"></div>
    </section>
 </template>
 <template id="barcelonaTemplate">
    <section>
        <div class="content-text">
            <h2>Urlaub in Barcelona</h2>
            <p>Barcelona ist die Hauptstadt Kataloniens und nach Madrid die zweitgrößte Stadt Spaniens. Sie liegt am Mittelmeer, circa 120 Kilometer südlich der Pyrenäen und der Grenze zu Frankreich. Barcelona ist Verwaltungssitz der gleichnamigen Provinz und der Comarca Barcelonès.</p>
            <p>Innerhalb des Stadtgebietes leben 1.731.649 Menschen (Stand: 2025). Damit ist Barcelona die neuntgrößte Gemeinde der Europäischen Union, nach Hamburg die zweitgrößte, die nicht die Hauptstadt eines Mitgliedstaates ist, und mit mehr als 16.000 Einwohnern pro Quadratkilometer nach Paris die am zweitdichtesten besiedelte Millionenstadt Europas. Zusammen mit den in der Àrea Metropolitana de Barcelona zusammengeschlossenen Gemeinden der Agglomeration beträgt die Einwohnerzahl 3,16 Millionen. Im weiteren Einzugsbereich der Metropolregion (Àmbit Metropolità de Barcelona) leben insgesamt 4,86 Millionen Menschen. Mit jährlich mehr als sieben Millionen Touristen aus dem Ausland (Stand 2015) zählt Barcelona überdies zu den drei meistbesuchten Städten Europas.</p>
            <p><a href="https://de.wikipedia.org/wiki/Barcelona" target="_blank rel='noopener noreferrer'">Erfahren Sie mehr</a></p>
        </div>
        <div class="content-img left"><img src="./src/Barcelona.png" alt="Barcelona"></div>
    </section>
    <section>
        <div class="content-text">
            <h2>Sehenswürdigkeiten</h2>
            <p>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.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="content-img right"><img src="./src/Barcelona2.png" alt="Arc de Triomf in Barcelona"></div>
    </section>
 </template>
 <template id="impressumTemplate">
    <section>
        <div class="content-text">
            <h2>Impressum</h2>
            <p>
                <strong>Anbieter:</strong><br>
                Max Mustermann<br>
                Musterstraße 1<br>
                80999 München
            </p>
            <p>
                <strong>Kontakt:</strong><br>
                Telefon: 089/1234567-8<br>
                Telefax: 089/1234567-9<br>
                E-Mail: mail@mustermann.de<br>
                Website: www.mustermann.de
            </p>
            <p>
                <strong>Bei redaktionellen Inhalten:</strong><br>
                Verantwortlich nach § 55 Abs.2 RStV<br>
                Moritz Schreiberling<br>
                Musterstraße 2<br>
                80999 München
            </p>
        </div>
    </section>
 </template>
 <!--
    Muster für Templates
    <template id="[seitenname*]Template">
        <section>
            <div class="content-text"></div>
            <div class="content-img [right/left**]></div>
        </section>
        ... (beliebig viele section-Elemente)
    </template>
    * Muss dem String entsprechen, mit dem der Button in der Navigationsliste loadPage aufruft
        -> z.B. loadPage(this, 'home') => "homeTemplate" / loadPage(this, 'berge') => "bergeTemplate")
    ** je nachdem auf welcher Seite das Bild erscheinen soll
 -->
 <script src="./script.js" defer></script>
 </body>
 </html>
@@ -0,0 +1,39 @@
 "use strict";
 let currentPage = null;
 /**
 * Diese Funktion wird beim Klick auf einen der Buttons im Header aufgerufen. Der geklickte Button erhält die Klasse
 * 'active' und kann dadurch in css separat angesprochen werden.
 * @param sourceElement Das Element, dessen Klick zum Aufruf der Funktion geführt hat
 * @param page Die Seite, die geladen werden soll
 */
 function loadPage(sourceElement, page){
    if (currentPage !== null) {
        currentPage.classList.remove("active");
    }
    currentPage = sourceElement;
    currentPage.classList.add("active");
    showPage(page);
 }
 /**
 * Setzt den Inhalt des #content-Bereichs auf die übergebene Seite.
 * Lädt die Inhalte aus dem entsprechenden <template> der index.html
 * @param page String, der die zu ladende Seite vorgibt
 */
 function showPage(page){
    const contentElement = document.querySelector("#content");
    const content = document.querySelector(`#${page}Template`);
    if (content !== null)
        contentElement.innerHTML = content.innerHTML;
    else {
        contentElement.innerHTML = "404 Page not found";
    }
 }
 // Lädt bei Aufruf der Seite die Startansicht
 loadPage(document.querySelector("#homeButton"), 'home');
@@ -0,0 +1,99 @@
 body {
    margin: 0 auto;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
 }
 header {
    margin: 0;
    text-align: center;
    padding: 1em 0 3em;
    background: linear-gradient(to top, deepskyblue, ivory);
 }
 footer {
    margin: 0;
    text-align: center;
    padding: 3em 0 1em;
    background-color: ivory;
 }
 footer > *, header > * {
    padding: .5rem;
 }
 button {
    border: none;
    background-color: inherit;
    transition: 0.5s ease;
 }
 button:hover {
    background-color: deepskyblue;
    border-radius: 0.5em;
    cursor: pointer;
 }
 .active {
    color: white;
    background-color: dodgerblue;
    border-radius: 0.5em;
    font-weight: 800;
 }
 main {
    background: linear-gradient(to bottom, deepskyblue, ivory);
    padding: 3rem 5vw;
    overflow-y: auto;
 }
 main section{
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 5rem;
    place-items: center;
 }
 .content-img{
    width: clamp(200px, 30vw, 500px);
 }
 main section .left{
    grid-column: 1;
    grid-row: 1;
 }
 main section .right{
    grid-column: 2;
    grid-row: 1;
 }
 .content-img img {
    max-width: 100%;
    transition: .5s ease;
    border: 2px solid dodgerblue;
    border-radius: .5rem;
 }
 .content-img img:hover {
    transform: scale(1.2);
 }
 .content-img.left img:hover {
    transform-origin: top left;
 }
 .content-img.right img:hover {
    transform-origin: top right;
 }
 a{
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    font-weight: bolder; /* Macht den Text fett */
    color: grey; /* Setzt die Textfarbe auf grau */
 }
 a:hover{
    color: black; /* Ändert die Textfarbe auf schwarz beim Hover */
 }
@@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funktionen in JavaScript</title>
 </head>
 <body>
 <script src="script.js" defer></script>
 <!--
    defer sorgt dafür, dass das Skript erst ausgeführt wird,
    nachdem das ganze HTML-Dokument geladen wurde.
 -->
 </body>
 </html>
@@ -0,0 +1,6 @@
 "use strict";
 function addiere(zahl1, zahl2){
    let summe = zahl1 + zahl2;
    return summe;
 }
@@ -0,0 +1,75 @@
 /* Wird für die Webseite allgemein angewendet */
 body {
    font-family: Noto SansSerif, sans-serif;    /* Verwendete Schriftfamilie */
    line-height: 1.6;                           /* erhöhter Zeilenabstand */
    color: #333;                                /* Textfarbe */
    max-width: 800px;                           /* Maximale Breite des Inhalts der Seite */
    margin: 0 auto;                             /* Inhalt wird automatisch mittig angeordnet */
    padding: 20px;                              /* Innenabstand des Body */
 }
 h1, h2, h3, h4 {
    color: deepskyblue;
    margin-bottom: 15px;                        /* Abstand unter der Überschrift */
 }
 h1 {
    color: darkblue;
    border-bottom: 2px solid deepskyblue;       /* Linie unter der Überschrift */
    padding-bottom: 10px;                       /* Abstand zur Unterlinie */
 }
 section {
    margin-bottom: 30px;                        /* Abstand unter Abschnitt */
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 0.7em;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
 }
 .info-box{
    padding: 10px;
    background-color: #f8f8cc;
    border-radius: 0.7em;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1);
 }
 .variable{
    background-color: rgba(0, 0, 0, 0.1);
    padding: .1em .5em;
    font-family: "Roboto Light", monospace;
 }
 .variablen-container {
    display: flex;
    flex-wrap: wrap;
 }
 .variablen-container > * {
    display: inline;
 }
 button {
    background-color: deepskyblue;
    color: white;
    border: none;
    padding: 1em;
    border-radius: 0.7em;
    transition: background-color 0.6s ease;
 }
 button:hover {
    background-color: darkblue;
    cursor: pointer;
 }
 .farbwechsel-element {
    width: 100px;
    height: 100px;
    background-color: firebrick;
    transition: background-color 0.5s ease;
 }
 .farbwechsel-element:hover {
    background-color: forestgreen;
 }
@@ -0,0 +1,143 @@
 <!DOCTYPE html>
 <!--
    Diese Zeile MUSS am Anfang jeder HTML-Datei stehen!
    Dies sagt dem Browser, dass es sich um ein HTML-Dokument handelt.
    Ohne diese Zeile könnte der Browser die Seite falsch anzeigen.
 -->
 <html lang="en">
 <!--
    <html> ist das Wurzelelement der gesamten Webseite
    lang="de" gibt die Sprache der Seite an; wichtig für Suchmaschinen, Screenreader, Browser
 -->
 <head>
    <!--
        Der <head>-Bereich enthält Metadaten.
        Diese Daten werden nicht auf der Webseite angezeigt.
        Sie sind aber wichtig für Browser, Suchmaschine und andere Programme
    -->
    <meta charset="UTF-8">
    <!--
        UTF-8 ist der Standardzeichensatz
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
        viewport passt die Webseite an die Bildschirmgröße an
        width=device-width → Legt Webseitenbreite auf Gerätebreite
        initial-scale=1.0 → Startgröße 100% (kein Zoom)
        Nötig für die Darstellung auf Mobilgeräten
    -->
    <meta name="description" content="Lerne HTML und CSS Grundlagen:
      Variablen, DOM-Manipulation und Kontrollstrukturen für Java-Script Einführung.">
    <!--
        description ist eine kurze Zusammenfassung des Seiteninhalts und wird von
        Suchmaschinen in den Suchergebnissen angezeigt.
        Sollte präzise und informativ sein, max. 160 Zeichen
    -->
    <meta name ="keywords" content="HTML, CSS, JavaScript, Variablen, DOM, Kontrollstrukturen, Programmieren lernen">
    <!--
        Heute weniger wichtig als früher, aber trotzdem relevant für Struktur und Zusammenspiel mit Description.
    -->
    <meta name ="author" content="Maximilian Brand">
    <!-- Gibt den Author der Seite an -->
    <title>HTML & CSS Grundlagen - Variablen, DOM & Kontrollstrukturen</title>
    <!--
        Der Titel erscheint in der Browser Tableiste.
        Wird von Suchmaschinen als Titel in den Ergebnissen verwendet
        Soll das Hauptthema der Seite beschreiben.
        Nur ein Titel pro Seite möglich.
    -->
    <link rel="stylesheet" href="./css/style.css">
    <!--
        rel="stylesheet" sagt dem Browser, dass es sich um eie css-Datei handelt.
        Sie gibt den Style der Webseite vor.
        CSS trennt Inhalt (HTML) und Design (CSS)
    -->
 </head>
 <body>
 <!--
    Der <body> enthält alles, was auf der Seite sichtbar ist.
    <body> ist Inhalt, <head> ist die Verpackung
 -->
 <h1>HTML & CSS Grundlagen für die JavaScript-Einführung</h1>
 <!--
    Hauptüberschrift, die das Thema der Seite beschreibt.
    h1 nur bewusst verwenden
 -->
 <section id="einleitung">
    <!--
        section ist thematische Gruppe von Inhalten.
        id gibt diesem Abschnitt einen eindeutigen Namen.
        Kann später mit css gezielt angesprochen werden
        z.B. #einleitung {background: red}
    -->
    <h2>Einführung in HTML und CSS</h2>
    <!-- h2 ist eine Unterüberschrift -->
    <p>
        HTML steht für <strong>HyperText Markup Language</strong> und ist die Sprache,
        mit der Webseiten strukturiert werden.
        <!-- p ist ein Absatz; visuelle und semantische Hervorhebungen über strong -->
    </p>
    <p>
        CSS steht für <strong>Cascading Style Sheets</strong> und wird verwendet, um das Aussehen
        von HTML-Elementen zu gestalten.
    </p>
    <div class="info-box">
        <!-- div ist ein allgemeines block-Element-->
        <p>Merke dir: </p>
        <ul>
            <!--
                ul erzeugt eine unsortierte Liste
                Durch li zeichnet man einen Listeneintrag ausgezeichnet
            -->
            <li>HTML = Struktur (Was steht auf der Seite?)</li>
            <li>CSS = Design (Wie sieht der Inhalt aus?)</li>
            <li>JavaScript = Verhalten (Was passiert bei einem Klick?)</li>
        </ul>
    </div>
 </section>
 <section id="variablen">
    <h2>Variablen in HTML und CSS</h2>
    <div class="variablen-container">
        <p>Benutzername: <span id="benutzername" class="variable">Max Mustermann</span></p>
        <!-- span ist ein allgemeines inline-Element -->
        <p>Alter: <span id="alter" class="variable">25 Jahre</span></p>
        <p>E-Mail: <span id="email" class="variable">max.mustermann@example.com</span></p>
    </div>
    <div class="variablen-beschreibung">
        <h3>Was sind Variablen?</h3>
        <p>
            Variablen sind wie <strong>Platzhalter</strong> für Werte. Sie helfen dabei,
            Informationen zu speichern und wiederzuverwenden.
        </p>
        <ul>
            <li><span class="variable">Max Mustermann</span> ist der Wert der Variablen "Benutzername"</li>
            <li><span class="variable">25 Jahre</span> ist der Wert der Variablen "Alter"</li>
            <li><span class="variable">max.mustermann@example.com</span> ist der Wert der Variablen "E-Mail"</li>
        </ul>
        <p>
            In echten Programmiersprachen würde man Variablen so definerieren: <code>let benutzername = "Max Mustermann";</code><br>
            Aber in HTML/CSS stellen wir sie einfach als Text dar.
        </p>
    </div>
 </section>
 <!-- Block 2: DOM-Manipulation -->
 <section id="dom-manipulation">
    <h2>DOM-Manipulation mit CSS</h2>
    <h3>Interaktive Elemente</h3>
    <p>Hier sieht man, wie man mit CSS schlichte Interaktivität erzeugen kann.</p>
    <button class="interaktiv">Klick mich!</button>
    <p class="ausgabe">Hier erscheint eine Nachricht</p>
    <div class="farbwechsel-container">
        <p>Farbwechsel Effekt</p>
        <div class="farbwechsel-element"></div>
    </div>
    <h2>Was ist das DOM?</h2>
    <p></p>
 </section>
 </body>
 </html>
@@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variablen in JavaScript</title>
 </head>
 <body>
 <script src="script.js" defer></script>
 <!--
    defer sorgt dafür, dass das Skript erst ausgeführt wird,
    nachdem das ganze HTML-Dokument geladen wurde.
 -->
 </body>
 </html>
@@ -0,0 +1,9 @@
 "use strict";
 /*
 * Durch "use strict" wirft JS Fehler bei einigen Mustern, die nicht gewollt, aber dennoch möglich sind:
 * - Verwendung von Variablen und Objekten ohne deren Deklaration
 * - Löschen (delete) von Variablen oder Funktionen
 * - Benennen von Variablen nach best. Schlüsselworten (eval, arguments)
 * - ...
 */