planet: add handouts containing solutions

15 files changed, 474 insertions, 347 deletions

diff --git a/Info/9/3/Planet/.gitignore b/Info/9/3/Planet/.gitignore
index 4a1feadf..9a4abe7a 100644
--- a/Info/9/3/Planet/.gitignore
+++ b/Info/9/3/Planet/.gitignore
@@ -1,6 +1,7 @@
 plots/
 *.html
 !planet-mebis-page-template.html
+!planet-mebis-handout-template.html
 *.pdf
 *.log
 *.aux
diff --git a/Info/9/3/Planet/Makefile b/Info/9/3/Planet/Makefile
index be920b35..7a28a3c3 100644
--- a/Info/9/3/Planet/Makefile
+++ b/Info/9/3/Planet/Makefile
@@ -33,14 +33,20 @@ COMMON_PANDOC_OPTIONS := --embed-resources --standalone \
 
 PANDOC=pandoc $(COMMON_PANDOC_OPTIONS)
 
-all: $(PLOTS) $(SRC:.md=.html) $(PRINTOUT) slides.pdf slides.pptx glossar.xml
+all: $(PLOTS) $(SRC:.md=.html) $(PRINTOUT) $(PRINTOUT:.pdf=_handout.pdf) slides.pdf slides.pptx glossar.xml
 
 %.html: %.md templates/planet-mebis-page-template.html
 	$(PANDOC) --data-dir=$(MAKEFILE_DIR) --template=templates/planet-mebis-page-template.html --resource-path="$(@D):." $< > $@
 
+%_handout.html: %.md templates/planet-mebis-handout-template.html
+	$(PANDOC) --data-dir=$(MAKEFILE_DIR) --template=templates/planet-mebis-handout-template.html --resource-path="$(@D):." $< > $@
+
 %.pdf: %.html
 	chromium --headless --disable-gpu --print-to-pdf="$@" --generate-pdf-document-outline --no-pdf-header-footer $<
 
+%_handout.pdf: %_handout.html
+	chromium --headless --disable-gpu --print-to-pdf="$@" --generate-pdf-document-outline --no-pdf-header-footer $<
+
 %.svg: %.plantuml
 	plantuml --svg $< > $@ 
 
diff --git a/Info/9/3/Planet/algorithmik/for/variablen.md b/Info/9/3/Planet/algorithmik/for/variablen.md
index e8873813..30099161 100644
--- a/Info/9/3/Planet/algorithmik/for/variablen.md
+++ b/Info/9/3/Planet/algorithmik/for/variablen.md
@@ -9,14 +9,14 @@ Der Rover muss sich merken können wie viele Steine er bereits aufgehoben hat.
 :::
 
 Zum Speichern von Werten kann man Variablen verwenden.
-Eine Variable kann man sich wie eine [**Kiste**]{.solution} vorstellen, in der Werte abgelegt werden können.
-Jede Kiste hat einen eindeutigen [**Datentyp**]{.solution}.
+Eine Variable kann man sich wie eine [**Kiste**]{.gap} vorstellen, in der Werte abgelegt werden können.
+Jede Kiste hat einen eindeutigen [**Datentyp**]{.gap}.
 Das heißt, zum Speichern von Zahlen muss man andere Kisten (bzw. einen anderen Datentyp) verwenden als zum Speichern von Texten.
 
 :::{.tipp}
 Das Erzeugen einer Variable geschieht in zwei Schritten:
 
-##### 1. [Deklaration]{.solution}
+##### 1. [Deklaration]{.gap}
 
 Als erstes muss man den **Datentyp** und den **Namen** der Variable festlegen.
 
@@ -44,7 +44,7 @@ int zaehler;
 **Wichtig:** Der Datentyp wird nur einmal bei der "*Erstellung*" der Variable genannt, danach nie wieder!
 :::
 
-##### 2. [Initialisierung]{.solution}
+##### 2. [Initialisierung]{.gap}
 
 Nun muss man einen Anfangswert festlegen, den sogenannten **Initialwert**.
 
@@ -114,9 +114,6 @@ Erhöhe durch eine Zuweisung den Zähler um 1, wenn er auf einem Gestein steht:
 `zaehler = zaheler + 1`{.java}
 :::
 
-:::{.page-break}
-:::
-
 :::{.merke data-class="Merke: Variablen"}
 Eine Variable **speichert** einen Werte.
 
diff --git a/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md b/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md
index 594c86ce..cf0adf11 100644
--- a/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md
+++ b/Info/9/3/Planet/algorithmik/if/bedingte-anweisung.md
@@ -84,11 +84,29 @@ Mit dem Methodenaufruf `huegelVorhanden("vorne")` kannst du prüfen, ob vor dem
 ::::: {.column width=50%}
 **Programmcode:**  
 
-<div style="height: 7cm;"></div>
+::::::{.solution}
+<code style="white-space: pre;">
+if([huegelVorhanden("vorne")]{color="magenta"})<br>
+{<br>
+[drehe("rechts");]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[drehe("links");]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[drehe("links");]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[drehe("rechts");]{style="color: orange; margin-left: 20px;"}<br>
+}
+</code>
+::::::
 :::::
 
 ::::: {.column width=50%}
 **Struktogramm:**  
+
+:::::{.solution}
+![](umfahren-struktogramm.svg)
+:::::
 :::::
 ::::
 :::
@@ -216,11 +234,31 @@ Dann fahre am Hügel vorbei!
 ::::: {.column width=50%}
 **Programmcode:**  
 
-<div style="height: 10cm;"></div>
+::::::{.solution}
+<code style="white-space: pre;">
+if([huegelVorhanden("vorne")]{color="magenta"})<br>
+{<br>
+[drehe("rechts");]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[drehe("links");]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[drehe("links");]{style="color: orange; margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+[drehe("rechts");]{style="color: orange; margin-left: 20px;"}<br>
+} else {<br>
+[fahre();]{style="color: orange; margin-left: 20px;"}<br>
+}
+</code>
+::::::
 :::::
 
 ::::: {.column width=50%}
 **Struktogramm:**  
+
+::::::{.solution}
+![](umfahren-else-struktogramm.svg)
+::::::
 :::::
 ::::
 :::
diff --git a/Info/9/3/Planet/algorithmik/if/logik-operatoren.md b/Info/9/3/Planet/algorithmik/if/logik-operatoren.md
index dcd27400..253f99a3 100644
--- a/Info/9/3/Planet/algorithmik/if/logik-operatoren.md
+++ b/Info/9/3/Planet/algorithmik/if/logik-operatoren.md
@@ -9,18 +9,20 @@ Sammle mit dem Rover nur das Gestein ein, das die besonderen Bedingungen erfüll
 [_]{.blink}
 :::
 
-Mit logischen Operatoren können mehrere [Bedingungen]{.solution} miteinander verbunden werden.
+Mit logischen Operatoren können mehrere [Bedingungen]{.gap} miteinander verbunden werden.
 
 #### Der UND-Operator
 
 In Java kann man zwei Bedingungen mit einem **UND** verknüpfen, indem man den `&&`-Operator verwendet, z. B.
 
+:::{style="padding-left: 3rem;"}
 ```java
 if(huegelVorhanden("rechts") && huegelVorhanden("links"))
 {
     ...
 }
 ```
+:::
 
 Die Bedingung `huegelVorhanden("rechts") && huegelVorhanden("links")`{.java} ist nur dann wahr, wenn beide Bedingungen `huegelVorhanden("rechts")`{.java} und `huegelVorhanden("links")`{.java} gleichzeitig wahr sind.
 
@@ -45,13 +47,13 @@ Ergänze die Wahrheitstabelle:
 -------------------------------------------------------------------------------------------------------------------------------------
 `huegelVorhanden("rechts")`{.java}  `huegelVorhanden("links")`{.java}  `huegelVorhanden("rechts") && huegelVorhanden("links")`{.java}
 ----------------------------------  ---------------------------------  -------------------------------------------------------------- 
-  wahr                                wahr
+  wahr                                wahr                               [wahr]{.solution}
 
-  wahr                                falsch
+  wahr                                falsch                             [falsch]{.solution}
 
-  falsch                              wahr
+  falsch                              wahr                               [falsch]{.solution}
 
-  falsch                              falsch
+  falsch                              falsch                             [falsch]{.solution}
 -------------------------------------------------------------------------------------------------------------------------------------
 :::
 
@@ -67,7 +69,7 @@ Was bezweckt der `||`-Operator?
 #### Der ODER-Operator
 
 Analog zum **UND**-Operator `&&` gibt es in Java den **ODER**-Operator `||`.
-Dieser verknüpft zwei Bedingungen so miteinander, dass [mindestens eine]{.solution} wahr sein muss, damit die Gesamtaussage wahr ist.
+Dieser verknüpft zwei Bedingungen so miteinander, dass [mindestens eine]{.gap} wahr sein muss, damit die Gesamtaussage wahr ist.
 
 :::{.tipp}
 **Achtung**: Der **ODER**-Operator ist kein entweder/oder, d. h. auch beide Bedingungen können wahr sein.
@@ -94,13 +96,13 @@ Ergänze die Wahrheitstabelle:
 -------------------------------------------------------------------------------------------------------------------------------------
 `huegelVorhanden("rechts")`{.java}  `huegelVorhanden("links")`{.java}  `huegelVorhanden("rechts") || huegelVorhanden("links")`{.java}
 ----------------------------------  ---------------------------------  -------------------------------------------------------------- 
-  wahr                                wahr
+  wahr                                wahr                               [wahr]{.solution}
 
-  wahr                                falsch
+  wahr                                falsch                             [wahr]{.solution}
 
-  falsch                              wahr
+  falsch                              wahr                               [wahr]{.solution}
 
-  falsch                              falsch
+  falsch                              falsch                             [falsch]{.solution}
 -------------------------------------------------------------------------------------------------------------------------------------
 :::
 
@@ -114,9 +116,9 @@ Ergänze die Wahrheitstabelle:
 -----------------------------------------------------------------------
 `huegelVorhanden("rechts")`{.java}  `!huegelVorhanden("rechts")`{.java}  
 ----------------------------------  -----------------------------------
-  wahr
+  wahr                                [falsch]{.solution}
 
-  falsch
+  falsch                              [wahr]{.solution}
 -----------------------------------------------------------------------
 :::
 
@@ -159,6 +161,10 @@ Planet: Logische Operatoren
 ::::
 :::
 
+<!-- :::{.merke} -->
+<!-- TODO: Merke für die drei Operatoren. -->
+<!-- ::: -->
+
 :::{.erledigt}
 :::
 
diff --git a/Info/9/3/Planet/algorithmik/if/umfahren-else-struktogramm.tikz b/Info/9/3/Planet/algorithmik/if/umfahren-else-struktogramm.tikz
new file mode 100644
index 00000000..bae8867a
--- /dev/null
+++ b/Info/9/3/Planet/algorithmik/if/umfahren-else-struktogramm.tikz
@@ -0,0 +1,14 @@
+\begin{struktogramm}(70,30)
+  \ifthenelse[12]{1}{1}{\textcolor{magenta}{Hügel vorne}}{\hspace{-15mm}wahr}{\hspace{15mm}falsch}
+    \assign{\textcolor{orange}{rechts drehen}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{links drehen}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{links drehen}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{rechts drehen}}
+  \change
+    \assign{\textcolor{orange}{fahren}}
+  \ifend
+\end{struktogramm}
diff --git a/Info/9/3/Planet/algorithmik/if/umfahren-struktogramm.tikz b/Info/9/3/Planet/algorithmik/if/umfahren-struktogramm.tikz
new file mode 100644
index 00000000..92654d67
--- /dev/null
+++ b/Info/9/3/Planet/algorithmik/if/umfahren-struktogramm.tikz
@@ -0,0 +1,13 @@
+\begin{struktogramm}(70,30)
+  \ifthenelse[12]{1}{1}{\textcolor{magenta}{Hügel vorne}}{\hspace{-15mm}wahr}{\hspace{15mm}falsch}
+    \assign{\textcolor{orange}{rechts drehen}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{links drehen}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{links drehen}}
+    \assign{\textcolor{orange}{fahren}}
+    \assign{\textcolor{orange}{rechts drehen}}
+  \change
+  \ifend
+\end{struktogramm}
diff --git a/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md b/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md
index 6cc9026c..f142a63d 100644
--- a/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md
+++ b/Info/9/3/Planet/algorithmik/while/bedingte-wiederholung.md
@@ -107,15 +107,33 @@ In Java kann das **kein** in "*kein Gestein*" durch ein Ausrufezeichen `!`{style
 ::::: {.column width=33%}
 **Programmcode:**  
 
-<div style="height: 10cm;"></div>
+::::::{.solution}
+<code style="white-space: pre;">
+void sucheStein() {<br>
+[while([!gesteinVorhanden()]{color="magenta"})]{style="margin-left: 20px;"}<br>
+[{]{style="margin-left: 20px;"}<br>
+[fahre();]{style="color: orange; margin-left: 40px;"}<br>
+[}]{style="margin-left: 20px;"}<br>
+[nimmGestein();]{style="margin-left: 20px;"}<br>
+}
+</code>
+::::::
 :::::
 
 ::::: {.column width=33%}
 **Programmablauf:**  
+
+::::::{.solution}
+![](sucheStein-flowchart.svg)
+::::::
 :::::
 
 ::::: {.column width=33%}
 **Struktogramm:**  
+
+::::::{.solution}
+![](sucheStein-struktogramm.svg)
+::::::
 :::::
 ::::
 :::
diff --git a/Info/9/3/Planet/algorithmik/while/sucheStein-flowchart.tikz b/Info/9/3/Planet/algorithmik/while/sucheStein-flowchart.tikz
index 393e85df..b46112fe 100644
--- a/Info/9/3/Planet/algorithmik/while/sucheStein-flowchart.tikz
+++ b/Info/9/3/Planet/algorithmik/while/sucheStein-flowchart.tikz
@@ -29,13 +29,15 @@
 \begin{tikzpicture}
   \node (start) {};
   \node[decision, below=of start] (decision1) {\textcolor{magenta}{Kein Gestein vorhanden}};
-  \node[process, below=of decision1] (process2) {\textcolor{orange}{fahre()}};
+
+  \node[process, below=of decision1] (process) {\textcolor{orange}{fahre()}};
+  \node[process, below=2cm of process] (process2) {nimmGestein()};
 
   % Arrows
   \draw[arrow] (start) -- (decision1);
-  \draw[arrow] (decision1) -- node[right] {Wahr} (process2);
+  \draw[arrow] (decision1) -- node[right] {Wahr} (process);
 
   % Decision branch
-  \draw[arrow] (decision1) -- node[above] {Falsch} ($(decision1.east) + (1cm, 0)$) -- ($(decision1.east) + (1cm, -3cm)$);
-  \draw[arrow] (process2.west) -| (-3, -2.4) |- (decision1.west);
+  \draw[arrow] (decision1) -- node[above] {Falsch} ($(decision1.east) + (1cm, 0)$) -- ($(decision1.east) + (1cm, -4cm)$) -- ($(decision1) + (0, -4cm)$) -- (process2);
+  \draw[arrow] (process.west) -| (-3, -2.4) |- (decision1.west);
 \end{tikzpicture}
diff --git a/Info/9/3/Planet/algorithmik/while/sucheStein-struktogramm.tikz b/Info/9/3/Planet/algorithmik/while/sucheStein-struktogramm.tikz
index 1ca2403a..1f2c2f4c 100644
--- a/Info/9/3/Planet/algorithmik/while/sucheStein-struktogramm.tikz
+++ b/Info/9/3/Planet/algorithmik/while/sucheStein-struktogramm.tikz
@@ -2,4 +2,5 @@
   \while{solange \textcolor{magenta}{kein Gestein vorhanden}}
     \assign{\textcolor{orange}{fahre()}}
   \whileend
+  \assign{nimmGestein()}
 \end{struktogramm}
diff --git a/Info/9/3/Planet/modellierung/landung/modellierung.md b/Info/9/3/Planet/modellierung/landung/modellierung.md
index 2a1b2194..fa20b3f1 100644
--- a/Info/9/3/Planet/modellierung/landung/modellierung.md
+++ b/Info/9/3/Planet/modellierung/landung/modellierung.md
@@ -115,19 +115,19 @@ Fülle mit deinen gewonnenen Informationen nachfolgende Übersicht über Datenty
 :::{.merke data-class="Merke: Datentypen"}
 Ein Datentyp gibt an, welche Art von Wert eine Variable hat. Z. B. ob es sich bei dem Wert um einen Text, Zahl oder Wahrheitswert handelt.
 
----------------------------------------------------------------------
-Datentyp       Bedeutung               Beispiel
-------------   ----------------------- ------------------------------
-`String`       Zeichenkette bzw. Text  "Hallo", "Informatik ist toll"
+---------------------------------------------------------------------------
+Datentyp       Bedeutung                  Beispiel
+------------   -------------------------- ---------------------------------
+`String`       Zeichenkette bzw. Text     "Hallo", "Informatik ist toll"
 
-`int`
+`int`          [Ganzzahl]{.solution}      [1,7,-42]{.solution}
 
-`double`
+`double`       [Kommazahl]{.solution}     [1.5, 0.2, -3.141]{.solution}
 
-`boolean`
+`boolean`      [Wahrheitswert]{.solution} [true, false]{.solution}
 
-`char`
----------------------------------------------------------------------
+`char`         [Zeichen]{.solution}       ['A', 'c', '0' '$']{.solution}
+---------------------------------------------------------------------------
 :::
 
 :::{.aufgabe data-class="Aufgabe 0.2"}
diff --git a/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md b/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md
index 0a5b4e35..a291355d 100644
--- a/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md
+++ b/Info/9/3/Planet/modellierung/zwischenlager/methoden-testen.md
@@ -130,13 +130,13 @@ Fülle die Tabelle auf deinem Aufgabenblatt und sortiere alle Methoden aus der v
 -------------------------------- -------------------------------------
  `void fahre()`{.java}            `boolean huegelVorhanden()`{.java}
 
- [drehe]{color="white"}
+ [drehe]{.solution}
 
- [nimmGestein]{color="white"}
+ [nimmGestein]{.solution}
 
- [setzeMarke]{color="white"}
+ [setzeMarke]{.solution}
 
- [entferneMarke]{color="white"}
+ [entferneMarke]{.solution}
 
 -----------------------------------------------------------------------
 :::
diff --git a/Info/9/3/Planet/templates/planet-mebis-handout-template.html b/Info/9/3/Planet/templates/planet-mebis-handout-template.html
new file mode 100644
index 00000000..2977362a
--- /dev/null
+++ b/Info/9/3/Planet/templates/planet-mebis-handout-template.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="de">
+<head>
+<style>
+${ planet-mebis-page-template.css() }
+.gap { color: unset; }
+.solution { visibility: visible; }
+.merke-content { visibility: visible; }
+</style>
+</head>
+<body>
+$if(title)$
+<h2 class="only-print">$title$</h2>
+$endif$
+$for(include-before)$
+$include-before$
+$endfor$
+
+$body$
+
+$for(include-after)$
+$include-after$
+$endfor$
+</body>
+</html>
diff --git a/Info/9/3/Planet/templates/planet-mebis-page-template.css b/Info/9/3/Planet/templates/planet-mebis-page-template.css
new file mode 100644
index 00000000..0a10283d
--- /dev/null
+++ b/Info/9/3/Planet/templates/planet-mebis-page-template.css
@@ -0,0 +1,312 @@
+@media (max-width: 600px) {
+  body {
+    font-size: 0.9em;
+    padding: 12px;
+  }
+  h1 {
+    font-size: 1.8em;
+  }
+}
+body {
+  max-width: 80%;
+  margin: 0 auto;
+  hyphens: auto;
+  overflow-wrap: break-word;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+.only-print {
+  display: none;
+}
+@media print {
+  @page {
+    size: A4;
+    margin: 1.5cm;
+    @bottom-right {
+       content: counter(page) ' von ' counter(pages);
+    }
+  }
+  html {
+    background-color: white;
+  }
+  body {
+    background-color: transparent;
+    color: black;
+    font-size: 12pt;
+    max-width: 100%;
+  }
+  .terminal {
+    display: none;
+  }
+  .merke-content {
+    visibility: hidden;
+    font-size: 14pt;
+  }
+  ::-webkit-scrollbar { display: none; }
+  .page-break { break-after: page; }
+  .no-print { display: none; }
+  .only-print { display: initial; }
+  .gap { color: rgba(0, 0, 0, 0); font-size: 20pt; padding: 0 5px}
+  div.completion-info {
+    display: none;
+  }
+}
+p {
+  margin: 1em 0;
+}
+a {
+  color: #1a1a1a;
+}
+a:visited {
+  color: #1a1a1a;
+}
+img {
+  max-width: 100%;
+}
+svg {
+  height: auto;
+  max-width: 100%;
+}
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 1.4em;
+  margin-bottom: -0.5em;
+}
+h5, h6 {
+  font-size: 1em;
+  font-style: italic;
+}
+h6 {
+  font-weight: normal;
+}
+ol, ul {
+  padding-left: 1.7em;
+  margin-top: 1em;
+}
+li > ol, li > ul {
+  margin-top: 0;
+}
+blockquote {
+  margin: 1em 0 1em 1.7em;
+  padding-left: 1em;
+  border-left: 2px solid #e6e6e6;
+  color: #606060;
+}
+code {
+  font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
+  font-size: 85%;
+  margin: 0;
+  hyphens: manual;
+}
+pre {
+  margin: 1em 0;
+  overflow: visible;
+}
+pre code {
+  padding: 0;
+  overflow: visible;
+  overflow-wrap: normal;
+}
+.sourceCode {
+ background-color: transparent;
+ overflow: visible;
+}
+hr {
+  background-color: #1a1a1a;
+  border: none;
+  height: 1px;
+  margin: 1em 0;
+}
+table {
+  margin: 1em 0;
+  overflow-x: auto;
+  display: table;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+thead {
+  border-bottom: solid
+}
+table caption {
+  margin-bottom: 0.75em;
+}
+tbody {
+  margin-top: 0.5em;
+  border-top: 1px solid #1a1a1a;
+  border-bottom: 1px solid #1a1a1a;
+}
+th {
+  border-top: 1px solid #1a1a1a;
+  padding: 0.25em 0.5em 0.25em 0.5em;
+}
+td {
+  padding: 0.125em 0.5em 0.25em 0.5em;
+}
+header {
+  margin-bottom: 4em;
+  text-align: center;
+}
+code{white-space: pre-wrap;}
+span.smallcaps{font-variant: small-caps;}
+div.columns{display: flex; gap: min(4vw, 1.5em);}
+div.column{flex: auto; overflow-x: auto;}
+.display.math{display: block; text-align: center; margin: 0.5rem auto;}
+html { -webkit-text-size-adjust: 100%; }
+pre > code.sourceCode { white-space: pre; position: relative; }
+pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
+pre > code.sourceCode > span:empty { height: 1.2em; }
+.sourceCode { overflow: visible; }
+code.sourceCode > span { color: inherit; text-decoration: inherit; }
+div.sourceCode { margin: 1em 0; }
+pre.sourceCode { margin: 0; }
+@media screen {
+  div.sourceCode { overflow: visible; }
+}
+@media print {
+  div.sourceCode { font-size: small; }
+  pre > code.sourceCode { white-space: pre-wrap; }
+  pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
+}
+pre.numberSource code { counter-reset: source-line 0; }
+pre.numberSource code > span {
+  position: relative;
+  left: -4em;
+  counter-increment: source-line;
+}
+pre.numberSource code > span > a:first-child::before {
+  content: counter(source-line);
+  position: relative; left: -1em; text-align: right; vertical-align: baseline;
+  border: none; display: inline-block;
+  -webkit-touch-callout: none; -webkit-user-select: none;
+  -khtml-user-select: none; -moz-user-select: none;
+  -ms-user-select: none; user-select: none;
+  padding: 0 4px; width: 4em;
+  color: #aaaaaa;
+}
+pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
+div.sourceCode
+{ }
+@media screen {
+  pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
+}
+code span.al { color: #ff0000; font-weight: bold; } 
+code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } 
+code span.at { color: #7d9029; } 
+code span.bn { color: #40a070; } 
+code span.bu { color: #008000; } 
+code span.cf { color: #007020; font-weight: bold; } 
+code span.ch { color: #4070a0; } 
+code span.cn { color: #880000; } 
+code span.co { color: #60a0b0; font-style: italic; } 
+code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } 
+code span.do { color: #ba2121; font-style: italic; } 
+code span.dt { color: #902000; } 
+code span.dv { color: #40a070; } 
+code span.er { color: #ff0000; font-weight: bold; } 
+code span.ex { } 
+code span.fl { color: #40a070; } 
+code span.fu { color: #06287e; } 
+code span.im { color: #008000; font-weight: bold; } 
+code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } 
+code span.kw { color: #007020; font-weight: bold; } 
+code span.op { color: #666666; } 
+code span.ot { color: #007020; } 
+code span.pp { color: #bc7a00; } 
+code span.sc { color: #4070a0; } 
+code span.ss { color: #bb6688; } 
+code span.st { color: #4070a0; } 
+code span.va { color: #19177c; } 
+code span.vs { color: #4070a0; } 
+code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } 
+.terminal {
+  border: 3px solid #c8c8c8;
+  border-radius: 8px;
+  border-radius: 25px;
+  background-color: black;
+  background-image: radial-gradient(
+    rgba(0, 150, 0, 0.75), black 120%
+  );
+  margin: 2em;
+  padding: 0.8rem 2rem 1rem;
+  color: white;
+  font: 1.1rem Inconsolata, monospace;
+  text-shadow: 0 0 5px #C8C8C8;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(black, 0.15),
+      rgba(black, 0.15) 1px,
+      transparent 1px,
+      transparent 2px
+    );
+    pointer-events: none;
+  }
+}
+.terminal > p:first-child {
+  margin: 0 0;
+}
+.gap {
+  border-bottom: 1.5px solid black;
+}
+.solution {
+  visibility: hidden;
+}
+::selection {
+  background: #0080FF;
+  text-shadow: none;
+}
+.oide-login {
+  font: 1.3rem Inconsolata, monospace;
+}
+.tipp {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  border: 2px solid darkgray;
+  border-radius: 8px;
+}
+.merke {
+  margin-top: 1.5rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  border: 2px solid orange;
+  border-radius: 8px;
+  position: relative;
+}
+.merke::before {
+  content: attr(data-class);
+  position: absolute;
+  top: -0.8em;
+  padding: 0 10px;
+  border: 2px solid orange;
+  border-radius: 8px;
+  background: orange;
+}
+.aufgabe {
+  margin-top: 1.5rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  border: 2px solid magenta;
+  border-radius: 8px;
+  position: relative;
+}
+.aufgabe::before {
+  content: attr(data-class);
+  position: absolute;
+  top: -0.8em;
+  padding: 0 10px;
+  border: 2px solid magenta;
+  border-radius: 8px;
+  background: magenta;
+}
+.blink {
+  animation: blinker 1s step-start infinite;
+}
+@keyframes blinker {
+  50% {
+    opacity:0;
+  }
+}
diff --git a/Info/9/3/Planet/templates/planet-mebis-page-template.html b/Info/9/3/Planet/templates/planet-mebis-page-template.html
index fb9b2355..70c1e3b7 100644
--- a/Info/9/3/Planet/templates/planet-mebis-page-template.html
+++ b/Info/9/3/Planet/templates/planet-mebis-page-template.html
@@ -2,313 +2,7 @@
 <html lang="de">
 <head>
 <style>
-@media (max-width: 600px) {
-  body {
-    font-size: 0.9em;
-    padding: 12px;
-  }
-  h1 {
-    font-size: 1.8em;
-  }
-}
-body {
-  max-width: 80%;
-  margin: 0 auto;
-  hyphens: auto;
-  overflow-wrap: break-word;
-  text-rendering: optimizeLegibility;
-  font-kerning: normal;
-}
-.only-print {
-  display: none;
-}
-@media print {
-  @page {
-    size: A4;
-    margin: 1.5cm;
-    @bottom-right {
-       content: counter(page) ' von ' counter(pages);
-    }
-  }
-  html {
-    background-color: white;
-  }
-  body {
-    background-color: transparent;
-    color: black;
-    font-size: 12pt;
-    max-width: 100%;
-  }
-  .terminal {
-    display: none;
-  }
-  .merke-content {
-    visibility: hidden;
-    font-size: 14pt;
-  }
-  ::-webkit-scrollbar { display: none; }
-  .page-break { break-after: page; }
-  .no-print { display: none; }
-  .only-print { display: initial; }
-  .solution { color: white; font-size: 20pt; padding: 0 5px}
-  div.completion-info {
-    display: none;
-  }
-}
-p {
-  margin: 1em 0;
-}
-a {
-  color: #1a1a1a;
-}
-a:visited {
-  color: #1a1a1a;
-}
-img {
-  max-width: 100%;
-}
-svg {
-  height: auto;
-  max-width: 100%;
-}
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 1.4em;
-  margin-bottom: -0.5em;
-}
-h5, h6 {
-  font-size: 1em;
-  font-style: italic;
-}
-h6 {
-  font-weight: normal;
-}
-ol, ul {
-  padding-left: 1.7em;
-  margin-top: 1em;
-}
-li > ol, li > ul {
-  margin-top: 0;
-}
-blockquote {
-  margin: 1em 0 1em 1.7em;
-  padding-left: 1em;
-  border-left: 2px solid #e6e6e6;
-  color: #606060;
-}
-code {
-  font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
-  font-size: 85%;
-  margin: 0;
-  hyphens: manual;
-}
-pre {
-  margin: 1em 0;
-  overflow: visible;
-}
-pre code {
-  padding: 0;
-  overflow: visible;
-  overflow-wrap: normal;
-}
-.sourceCode {
- background-color: transparent;
- overflow: visible;
-}
-hr {
-  background-color: #1a1a1a;
-  border: none;
-  height: 1px;
-  margin: 1em 0;
-}
-table {
-  margin: 1em 0;
-  overflow-x: auto;
-  display: table;
-  font-variant-numeric: lining-nums tabular-nums;
-}
-thead {
-  border-bottom: solid
-}
-table caption {
-  margin-bottom: 0.75em;
-}
-tbody {
-  margin-top: 0.5em;
-  border-top: 1px solid #1a1a1a;
-  border-bottom: 1px solid #1a1a1a;
-}
-th {
-  border-top: 1px solid #1a1a1a;
-  padding: 0.25em 0.5em 0.25em 0.5em;
-}
-td {
-  padding: 0.125em 0.5em 0.25em 0.5em;
-}
-header {
-  margin-bottom: 4em;
-  text-align: center;
-}
-code{white-space: pre-wrap;}
-span.smallcaps{font-variant: small-caps;}
-div.columns{display: flex; gap: min(4vw, 1.5em);}
-div.column{flex: auto; overflow-x: auto;}
-.display.math{display: block; text-align: center; margin: 0.5rem auto;}
-html { -webkit-text-size-adjust: 100%; }
-pre > code.sourceCode { white-space: pre; position: relative; }
-pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
-pre > code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode > span { color: inherit; text-decoration: inherit; }
-div.sourceCode { margin: 1em 0; }
-pre.sourceCode { margin: 0; }
-@media screen {
-  div.sourceCode { overflow: visible; }
-}
-@media print {
-  div.sourceCode { font-size: small; }
-  pre > code.sourceCode { white-space: pre-wrap; }
-  pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
-}
-pre.numberSource code { counter-reset: source-line 0; }
-pre.numberSource code > span {
-  position: relative;
-  left: -4em;
-  counter-increment: source-line;
-}
-pre.numberSource code > span > a:first-child::before {
-  content: counter(source-line);
-  position: relative; left: -1em; text-align: right; vertical-align: baseline;
-  border: none; display: inline-block;
-  -webkit-touch-callout: none; -webkit-user-select: none;
-  -khtml-user-select: none; -moz-user-select: none;
-  -ms-user-select: none; user-select: none;
-  padding: 0 4px; width: 4em;
-  color: #aaaaaa;
-}
-pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
-div.sourceCode
-{ }
-@media screen {
-  pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
-}
-code span.al { color: #ff0000; font-weight: bold; } 
-code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } 
-code span.at { color: #7d9029; } 
-code span.bn { color: #40a070; } 
-code span.bu { color: #008000; } 
-code span.cf { color: #007020; font-weight: bold; } 
-code span.ch { color: #4070a0; } 
-code span.cn { color: #880000; } 
-code span.co { color: #60a0b0; font-style: italic; } 
-code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } 
-code span.do { color: #ba2121; font-style: italic; } 
-code span.dt { color: #902000; } 
-code span.dv { color: #40a070; } 
-code span.er { color: #ff0000; font-weight: bold; } 
-code span.ex { } 
-code span.fl { color: #40a070; } 
-code span.fu { color: #06287e; } 
-code span.im { color: #008000; font-weight: bold; } 
-code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } 
-code span.kw { color: #007020; font-weight: bold; } 
-code span.op { color: #666666; } 
-code span.ot { color: #007020; } 
-code span.pp { color: #bc7a00; } 
-code span.sc { color: #4070a0; } 
-code span.ss { color: #bb6688; } 
-code span.st { color: #4070a0; } 
-code span.va { color: #19177c; } 
-code span.vs { color: #4070a0; } 
-code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } 
-.terminal {
-  border: 3px solid #c8c8c8;
-  border-radius: 8px;
-  border-radius: 25px;
-  background-color: black;
-  background-image: radial-gradient(
-    rgba(0, 150, 0, 0.75), black 120%
-  );
-  margin: 2em;
-  padding: 0.8rem 2rem 1rem;
-  color: white;
-  font: 1.1rem Inconsolata, monospace;
-  text-shadow: 0 0 5px #C8C8C8;
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: repeating-linear-gradient(
-      0deg,
-      rgba(black, 0.15),
-      rgba(black, 0.15) 1px,
-      transparent 1px,
-      transparent 2px
-    );
-    pointer-events: none;
-  }
-}
-.terminal > p:first-child {
-  margin: 0 0;
-}
-.solution { border-bottom: 1.5px solid black; }
-::selection {
-  background: #0080FF;
-  text-shadow: none;
-}
-.oide-login {
-  font: 1.3rem Inconsolata, monospace;
-}
-.tipp {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  border: 2px solid darkgray;
-  border-radius: 8px;
-}
-.merke {
-  margin-top: 1.5rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  border: 2px solid orange;
-  border-radius: 8px;
-  position: relative;
-}
-.merke::before {
-  content: attr(data-class);
-  position: absolute;
-  top: -0.8em;
-  padding: 0 10px;
-  border: 2px solid orange;
-  border-radius: 8px;
-  background: orange;
-}
-.aufgabe {
-  margin-top: 1.5rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  border: 2px solid magenta;
-  border-radius: 8px;
-  position: relative;
-}
-.aufgabe::before {
-  content: attr(data-class);
-  position: absolute;
-  top: -0.8em;
-  padding: 0 10px;
-  border: 2px solid magenta;
-  border-radius: 8px;
-  background: magenta;
-}
-.blink {
-  animation: blinker 1s step-start infinite;
-}
-@keyframes blinker {
-  50% {
-    opacity:0;
-  }
-}
+${ planet-mebis-page-template.css() }
 </style>
 </head>
 <body>