Design: Textur, EB-Garamond/Cheltenham-Fonts & Designsprache aus Python-Branch

Concrete-Textur als Hintergrund, EB Garamond als Fließtext und Cheltenham
Classic für die Überschriften, weiße zentrierte Inhaltsspalte, umrandete
Buttons und Threadline-Optik fuer Ahnen/Antworten -- uebernommen aus der
verwaisten Python-Linie bb6b966.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/css/app.css

@@ -1,6 +1,215 @@
-.card { border: 1px solid; padding: 0.5em; margin-bottom: 1em; }
+/* Designsprache aus der alten Python-Version (verwaiste Linie bb6b966):
-.card img { max-width: 100%; }
+   EB Garamond als Fließtext, Cheltenham Classic für die Überschrift,
-.content { overflow-wrap: break-word; }
+   Concrete-Textur als Hintergrund, weiße zentrierte Inhaltsspalte. */
+
+@font-face {
+  font-family: "EB Garamond";
+  src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"),
+       url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "EB Garamond";
+  src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Italic.ttf"),
+       url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Italic.otf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Cheltenham Classic";
+  src: url("/static/assets/cheltenham/CheltenhamClassic.ttf"),
+       url("/static/assets/cheltenham/CheltenhamClassic.otf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+html {
+  background-image: url("/static/assets/concrete/Concrete012_1024p_Color.jpg");
+  font-family: "EB Garamond", serif;
+  font-optical-sizing: auto;
+}
+
+body {
+  margin: 0;
+}
+
+/* --- Kopf --- */
+header {
+  background-color: white;
+  margin: 0;
+  text-align: center;
+  padding: 0.5rem 0;
+}
+
+/* Rechtliche Links über der Überschrift. */
+#legal {
+  margin-bottom: 0.3rem;
+}
+
+#legal a {
+  font-size: 0.9rem;
+}
+
+/* Klick auf die Überschrift führt zurück zum Feed. */
+header > a {
+  text-decoration: none;
+}
+
+h1 {
+  font-family: "Cheltenham Classic", serif;
+  background-color: white;
+  display: inline-block;
+  margin: 0.2rem auto;
+}
+
+h2 {
+  font-family: "Cheltenham Classic", serif;
+  background-color: white;
+  display: inline-block;
+  padding: 0 0.3rem;
+}
+
+#headerbar {
+  background-color: white;
+  text-align: center;
+}
+
+#headerbar a {
+  background-color: white;
+}
+
+/* --- Inhaltsspalte --- */
+main {
+  max-width: 600px;
+  margin: auto;
+  padding: 0 0.5rem;
+}
+
+main > section,
+main > div,
+main > h2,
+main > p {
+  background-color: white;
+}
+
+main > section,
+main > h2 {
+  padding: 0.3rem 0.5rem;
+}
+
+span, a {
+  font-size: 1.2rem;
+}
+
+a {
+  color: black;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* --- Buttons --- */
+a.button, button {
+  padding: 4px 8px;
+  border: 1px solid black;
+  margin: 2px 0;
+  display: inline-block;
+  color: black;
+  text-decoration: none;
+  background-color: white;
+  font-family: "EB Garamond", serif;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+a.button:hover, button:hover {
+  text-decoration: underline;
+}
+
+/* --- Einträge --- */
+.card {
+  position: relative;
+  background-color: white;
+  padding: 0.5rem;
+  margin-bottom: 0;
+  font-size: 1.2rem;
+  border: none;
+  border-bottom: 1px solid #ccc;
+}
+
+.card .content {
+  padding: 0.5rem 0;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+}
+
+.card img {
+  display: block;
+  max-width: 300px;
+  margin: 0.5rem auto;
+}
+
+/* Fokussierter Beitrag zeigt das Bild in voller Breite. */
+#focus .card img {
+  max-width: 100%;
+}
+
+/* Ahnenkette / Antworten leicht eingerückt mit Threadline. */
+#ancestors .card,
+#replies .card {
+  border-left: 3px solid gray;
+  margin-left: 3%;
+  padding-left: 0.75rem;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .muted { color: gray; }
+.muted a { color: gray; font-size: 1rem; }
 .ghost.selected { font-weight: bold; }
 .msg { color: red; }
+
+p.warning {
+  background-color: #faa;
+  padding: 10px 15px;
+  font-weight: bold;
+}
+
+/* --- Formulare --- */
+form {
+  background-color: white;
+  margin: auto;
+  padding: 0.5rem 0;
+}
+
+form input,
+form textarea {
+  font-family: "EB Garamond", serif;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 4px 0;
+}
+
+form textarea {
+  padding: 5px;
+  border: 0;
+  outline: 1px solid black;
+  resize: vertical;
+}
+
+form input[type="file"] {
+  outline: none;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #ccc;
+}