Website fertig: lokale Bilder und Schrift, Über mich, Datenschutz, 404, SEO

- Logo, Fotos und Questrial liegen lokal (WebP, zwei Größen) – keine Drittanbieter mehr
- Neue Seiten: Über mich (Aus- und Weiterbildungen), Datenschutz, 404
- Impressum nach DDG mit Aufsichtsbehörde (§ 11 TierSchG)
- Favicon, Apple-Icon, Vorschaubild, Canonical/Open Graph, robots.txt, sitemap.xml, .htaccess
- tools/optimize_images.py erzeugt die Web-Bilder aus tools/originals/

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

assets/site.css

@@ -1,3 +1,21 @@
+/* ===== Schrift (lokal, Questrial – SIL Open Font License) ===== */
+@font-face {
+  font-family: "Questrial";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/questrial-latin.woff2") format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Questrial";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/questrial-latin-ext.woff2") format("woff2");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
 /* ===== Farben – aus dem Schmacko-Napf-Branding ===== */
 :root {
   --bg: #fcfaf4;          /* Creme */
@@ -33,6 +51,15 @@ h1, h2, h3 { font-weight: 400; line-height: 1.05; letter-spacing: -.025em; margi
 p { margin: 0; }
 svg { flex: none; }
 
+/* Tastatur: direkt zum Inhalt */
+.skip {
+  position: fixed; left: 16px; top: 16px; z-index: 100;
+  padding: 12px 20px; border-radius: 999px;
+  background: var(--ink); color: var(--bg);
+  transform: translateY(-200%);
+}
+.skip:focus { transform: none; }
+
 /* ===== Header: Logo und Menü als zwei schwebende Elemente ===== */
 .site-header {
   position: sticky; top: 0; z-index: 50;
@@ -332,6 +359,8 @@ a.panel--photo:hover > img { transform: scale(1.04); }
 a.panel:hover .panel-arrow { background: var(--sage); border-color: var(--sage); color: var(--ink); }
 a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
 
+.panel-arrow--ink { background: var(--ink); border-color: var(--ink); }
+
 /* Kurze Fakten als Pillen */
 .facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
 .fact {
@@ -372,6 +401,29 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
 .words small { font-size: 1rem; letter-spacing: .1em; color: var(--sage); width: 2.2em; flex: none; }
 .words span { font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: 0; color: color-mix(in srgb, var(--bg) 70%, transparent); margin-left: auto; text-align: right; max-width: 26ch; line-height: 1.35; }
 
+/* Qualifikationen (auf dunkler Fläche) */
+.quals { list-style: none; padding: 0; margin: 10px 0 0; }
+.quals li {
+  display: grid; grid-template-columns: 9em 1fr auto; align-items: baseline; gap: 12px 32px;
+  padding: clamp(18px, 2vw, 28px) 0;
+  border-bottom: 1px solid rgba(255, 255, 255, .12);
+}
+.quals small { font-size: 1rem; letter-spacing: .06em; color: var(--sage); }
+.quals strong { font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; }
+.quals span { color: color-mix(in srgb, var(--bg) 70%, transparent); font-size: clamp(1.05rem, 1.4vw, 1.25rem); text-align: right; }
+
+/* Liste mit Jahreszahl (auf heller Fläche) */
+.list-big { list-style: none; padding: 0; margin: 10px 0 0; columns: 2; column-gap: clamp(32px, 5vw, 80px); }
+.list-big li {
+  break-inside: avoid;
+  display: flex; gap: 20px; align-items: baseline;
+  padding: 18px 0;
+  border-bottom: 1px solid var(--line);
+  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
+  line-height: 1.35;
+}
+.list-big small { flex: none; width: 3em; font-size: 1rem; color: var(--muted); }
+
 /* Schritte */
 .steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
 .steps li { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 22px; }
@@ -445,7 +497,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
 .page-hero h1 { font-size: clamp(3.2rem, 8vw, 8rem); letter-spacing: -.035em; line-height: .98; }
 
 /* Text-Seite (Impressum) */
-.legal { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.6; }
+.legal { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; max-width: 46em; margin-top: 48px; }
+.legal h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 52px 0 16px; letter-spacing: -.015em; }
+.legal a { text-decoration: underline; text-underline-offset: 3px; }
 .legal p + p { margin-top: 28px; }
 .legal b { font-weight: 400; display: block; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
 
@@ -478,6 +532,9 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
   .panel--photo.tall { min-height: 80svh; }
   .plate-panel { min-height: 0; padding-block: 56px; }
   .words span { display: none; }
+  .quals li { grid-template-columns: 1fr; gap: 6px; }
+  .quals span { text-align: left; }
+  .list-big { columns: 1; }
 }
 @media (max-width: 767px) {
   body { font-size: 18px; }