/* ========================
🎨 Unsere Werkstatt bekommt Farbe
   ======================== */
/* Heute streichen wir gemeinsam unsere Werkstatt.

🪵 Heute steht auf unserer Werkbank
Die style.css
Sie bestimmt das Aussehen der ganzen Werkstatt.
Mit ihr bekommen alle Seiten dieselben Farben, Abstände und Schriften.
HTML macht den Bau.
CSS zieht ihm die Arbeitskleidung an. 😂🛠️

 🪵 Brett 1 – Die ganze Werkstatt 
	Das body ist die ganze Werkstatt.
Hier legen wir fest:
☑ Schrift
☑ Hintergrund
☑ Grundfarbe
☑ Abstände*/
body {
    font-family: "Consolas", monospace;
    font-size: 14px;
    color: #000000;
    line-height: 1.5;
    margin: 0;
    padding: 0 0 0 40px;
    margin-top: 15px;
    background: linear-gradient(
        to top,
        #2f5b2f 10%,   /* dunkelgrün */
        #6f8f5a 30%,   /* grün */
        #b9b08a 55%,   /* zart braun */
        #eae1ca 70%,   /* creme */
        #fdfcf3 90%    /* hellgelb */
    );
}

.frosch {
    margin-top: 15px;
}

/* 🪵 Brett 2
   Das Werkstattschild
h1 = Die großen Überschriften.*/
 h1 {
  font-size: 2.2em;
  color: #000000;
  margin: 0;  
  letter-spacing: 0.4px;
}

/* 🪵 Brett 3 
Die Raumüberschriften
Untertilel, Heute streichen wir gemeinsam unsere Werkstatt.*/
 h2 {
  font-size: 1.4em;
  font-weight: normal;
  color: #000000;
  margin-top: 5px;
}

/* 🪵 Brett 4 
ich hab das Brett h3 */
h3 {
    font-size: 1.2em;
    color: #000000;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 4px;
}
/* 🪵 Brett – versetztes Herz der Werkstatt */
.herz-versetzt {
    margin-left: 38px;    /* 🪵  Brett rückt etwas ein */
	margin-top: 30px;
}

/* 🪵 Brett 5 
ich hab das Brett h4 Feierabend */
h4 {
    font-size: 1.0em;
    color: #000000;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 4px;
}
/* 🪵 Brett – versetztes Feierabend in der Werkstatt */
.abend-versetzt {
    margin-left: 38px;      /* 🪵  Brett rückt etwas ein */
	margin-top: 30px;
}

/* 🪵 Brett 6 
Die Bretter mit Text
p
1.Der Abstand zwischen den Zeilen,
2.Der Text bleibt schön lesbar */
p {
  margin: 2px 0;
  line-height: 1.6;
}

/* 🪵 Kleine Versetzer – jedes zweite Brett rückt etwas ein */
.versetzt {
    margin-left: 25px;    /* 🪵  Brett rückt etwas ein */
}

/* 🪵 Grosse Versetzer – Brett rückt etwas ein-keks-pfötchen verstecken */
.versetzt-weit {
    margin-left: 305px;
}

/* 🪵 Kleiner Freiraum abstand-klein → Luft unten */
.abstand-klein {
    margin-bottom: 10px;     
}
 /* 🪵 Kleiner Freiraum abstand-klein → Luft oben */
.abstand-oben-klein {        
    margin-top: 10px;
}

/* 🪵 Größerer Freiraum  abstand-gross → Luft unten */
.abstand-gross {               
    margin-bottom: 20px;
}
/* abstand-gross → Luft oben */
.abstand-oben-gross { 
    margin-top: 20px;
}

/* 🪵 kleiner als h3  → mit <strong> fett */
.spruch {
    font-size: 0.9em;
}

/* 🪵 Brett – Bauplan-Überschriften */
.bauplan-titel {
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 4px;
	margin-left: 21px;       /* 🪵  Brett rückt ein */
}

/* 🪵 Brett – Raum-Überschriften */
.raum-titel {
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 4px;
	margin-left: 21px;
}

.code-brett {
margin-top: 10px;
margin-bottom: 10px;
color: #6b3f75;
}

/* 🪵 Brett 7 
Unsere Bilder
img */
img {
  max-width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: 14px;
}
/* 🪵 Rundgangbild – Brett */
.rundgang-bild {
    width: 40px;
    height: auto;
    vertical-align: middle;
}

/* Brett 8  
Unser Werkstatt Lageplan. */
.lageplan {
    text-align: center;
    margin: 25px auto;
}

.lageplan-box {
    display: inline-block;
    padding: 10px 14px;
    margin: 5px;
    border: 1px solid;
    border-radius: 8px;
    background-color: #ffffff;
}

.lageplan-box a {
    text-decoration: none;
}

.lageplan-pfeil {
    font-size: 20px;
    margin: 3px 0;
}

.lageplan-reihe {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px 0;
}

.lageplan-titel {
    margin-top: 25px;
}

/* 🪵 Brett 9 Werkstatt-Navigation */
   🪵 Wo möchtest du als Nächstes hin? */
.werkstatt-nav {
	list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    list-style: none;
    margin: 20px 0;
    padding: 0;
}
/* 🪵 Brett 
ich hab das Brett h5 🪵 Wo möchtest du als Nächstes hin? */
h5 {
    font-size: 1.2em;
    color: #000000;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 4px;
}

.werkstatt-nav .reihe-trenner {
    flex-basis: 100%;
    height: 0;
    padding: 0;
}
.werkstatt-nav .werkzeug-start {
    margin-left: auto;
}

.werkstatt-nav .werkzeug-ende {
    margin-right: auto;
}

.werkstatt-nav li {
    flex: 0 0 auto;
}

.werkstatt-nav img {
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
}

.werkstatt-nav a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    padding: 5px 4px;
}

.werkstatt-nav a:hover {
    color: #efe5d5;
    text-shadow: 1px 1px 2px #2f5b2f;
}

/* Brett 10 
Die Fußzeile. */
footer {
  text-align: center;
  padding: 15px;
  color: #000000;
  margin-top: 20px;
  border-top: 3px solid;
}

footer a {
  color: #000000;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* 🍪 Kleines Werkstattgeschenk */
.keks-geschenk {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 330px;
    max-width: 85%;
    padding: 18px;
    background: #fff;
    border: 3px solid #c99acb;
    border-radius: 14px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.35);
    text-align: center;
}

.keks-geschenk img {
    max-width: 100%;
    height: auto;
    border: 0;
}

.keks-geschenk p {
    margin: 10px 0;
}

.keks-schliessen {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #eee;
    cursor: pointer;
}

.keks-hintergrund {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: rgba(0,0,0,0.35);
}

/* Werkstattmusik */
#musikHinweis {
    text-align: center;
    margin: 10px auto 15px auto;
    font-size: 12px;
}

#musikStart {
    margin-left: 8px;
    padding: 4px 9px;
    border: 1px solid #999;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    font-size: 12px;
}

#musikStart:hover {
    transform: scale(1.15);
}


/* 🪵 Brett 11 - 😂 
    🌿 Feierabend in der Werkstatt
🔩 Die Farben bekommen den Deckel drauf.
☕ Der Kaffee ist ausgetrunken.
💻 Notepad++ steht auf der Werkbank.

💛 Heute geschafft:</p> 
✔️ Die Werkstatt  gemütlicher gemacht.</p>
✔️ Das Werkstattgebäude gestrichen und aufgeräumt.</p> 
✔️ Ein neues Werkzeug kennengelernt.
😂 Vielleicht einmal gelächelt.
    ✅ Wenn du heute etwas verstanden hast, war der Tag erfolgreich.

Und am Ende...
...gehen wir mit einem guten Gefühl nach Hause.

Die Werkstatt läuft nicht weg. Sie wartet auf dich.
Bis zum nächsten Bauprojekt. ☕🛠️ */