Opa Martins Foto, kräftigere Farben, Bugfixes

- Foto von Opa Martin eingesetzt (assets/opa-martin.jpg, 4:5)
- Pastelle eine Stufe kräftiger (sun-200, sky-100, coral-100), Icon-Chips im Vollton,
  Hero-Weißschleier auf kurze Kante gekürzt, Header deckend
- Kontraste auf den neuen Gründen neu gerechnet, Display-Typo dort dunklere Stufe
- E-Mail bricht auf dem Handy nach dem @ statt mitten in gmail.com
- Trust-Icons im Verein-Hero waren auf gleichfarbigem Grund unsichtbar
- Footer 'Über uns' springt zur Geschichte statt auf die Startseite

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

DESIGN.md

@@ -28,7 +28,9 @@ neuer Hand. Dazu der **Hilfe Verein** („Hilfe. Herz. Hoffnung."), **noch nicht
 eingetragen** — deshalb keine Spendenstufen, kein Zahlungsformular, kein
 Mitgliedschafts-Flow. Drei Hilfearten, genau wie vom Kunden benannt: Geldspenden,
 ehrenamtliche Helfer, Weitersagen. Kontakt nur über `tel:` und `mailto:`.
-**Opa Martin** ist der Inhaber; Bild und Name, kein Bildtext — Kundenvorgabe.
+**Opa Martin** ist der Inhaber; Bild und Name, kein Bildtext — Kundenvorgabe. Foto seit
+2026-09-24 in `assets/opa-martin.jpg`, 4:5 zugeschnitten, gleich behandelt wie das Story-Bild
+(gekippt, weiß gerahmt).
 Der Online-Shop ist bewusst geparkt. Tonalität: **Du-Form**, Satzkleinschreibung, keine Emoji.
 
 ## Drei Abweichungen vom Handoff
@@ -80,6 +82,35 @@ Coral bleibt unverändert **ausschließlich** Handlungsfarbe der primären Butto
 Eine bewusste Ausnahme: das Band *„Wo alles angefangen hat"* auf der Vereinsseite steht im
 Blau der Shop-Welt. Es verweist auf den Laden; die Tönung markiert den Themenwechsel.
 
+### 1b. Kräftigere Tönungen (2026-09-24)
+
+Zweite Rückmeldung des Auftraggebers: die Farben wirken **„zu transparent"**. Gemessen
+lag das an drei Stellen: den 50/100-Pastellen (`--sky-50`, `--sun-100`, `--coral-50`)
+mit Leuchtdichte nahe Weiß, dem halbtransparenten Weißschleier im Hero, der bis 820px
+über dem Foto lag, und dem durchscheinenden Header (`rgba(255,255,255,.92)`).
+
+Begründung aus derselben Referenz: [`emmas-schatzkiste-ds.md`](../design-references/entries/emmas-schatzkiste-ds.md)
+hält bereits fest, dass *Pastell allein in dieser Familie nicht trägt*. Das wird jetzt
+eine Stufe weiter gezogen, ohne neue Farbfamilie:
+
+| Rolle | vorher | jetzt |
+|---|---|---|
+| Creme-Flächen, Footer, Verein-Hero | `--sun-100` `#FDF4DC` | `--sun-200` `#FBE3A0` (neu) |
+| Blaue Flächen, Shop-Hero | `--sky-50` / Weiß | `--sky-100` `#CFE6F8` |
+| Rosa Kachel | `--coral-50` | `--coral-100` `#FFD8CE` (neu) |
+| Icon-Chips | Pastell mit farbigem Icon | Vollton `--accent`, weißes Icon (3.86 / 3.92) |
+| Hero-Verlauf | Weiß bis 430px, Schleier bis 820px | Fläche bis zur Textspalte, 90px Kante |
+| Header | 92 % Weiß mit Blur | deckend Weiß |
+
+Die Kacheln im gelben Band der Vereinsseite tragen jetzt ihre Tönung (rosa, blau, gelb)
+statt einheitlich Weiß.
+
+**Kontrast neu gerechnet.** Auf den kräftigeren Gründen fallen die hellen Buntwerte auf
+~3.0–3.1. Deshalb stehen H1-Zeilen, Band-Überschriften und der Name unter dem Porträt dort
+in der dunkleren Stufe derselben Familie: auf `--sun-200` `--sky-600` 4.43 · `--sun-700`
+4.11 · `--coral-600` 3.93; auf `--sky-100` 4.35 · 4.04 · 3.87. Fließtext auf getöntem Grund
+ist `--ink-700` (≥ 11.0).
+
 ### 2. Kontrast
 
 Guardrail: *„Graue Schrift auf farbigem Grund."* Gemessen statt geschätzt:

README.md

@@ -46,10 +46,7 @@ cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173
 
 ### Vom Kunden ausstehend
 
-3. **Foto von Opa Martin.** Der Slot auf der Startseite ist 1:1 und beschriftet. Bild
+3. ~~**Foto von Opa Martin.**~~ Erledigt 2026-09-24 (`assets/opa-martin.jpg`).
-   einsetzen: den `<div class="portrait__slot">` durch
-   `<img src="assets/opa-martin.jpg" alt="Opa Martin">` ersetzen — der Kommentar steht an
-   der Stelle. Bild und Name, kein Bildtext (Kundenvorgabe).
 4. **Zwei Audiodateien** — ein Lied für den Laden, eines für den Verein. Bis dahin ist der
    Player sichtbar deaktiviert, mit Badge „Audio folgt". Beim Einbau: je ein `<audio>`
    verdrahten, Button aktivieren, Fortschrittsbalken aus `timeupdate` treiben,

assets/site.css

@@ -43,6 +43,12 @@
      Neun gleichmäßige Stufen (56/42/32/24/19/17/15/13/11) auf sechs reduziert.
      Gestrichen: 42, 24, 19, 15. Bleibt: Display / 30 / 20 / 17 / 13 / 11.
 
+  4. KRÄFTIGERE TÖNUNGEN (2026-09-24) — zweite Kundenrückmeldung "zu transparent".
+     Referenz wie oben: der DS-Eintrag hält fest, dass Pastell allein nicht trägt.
+     sun-100 → sun-200, sky-50 → sky-100, coral-50 → coral-100, Icon-Chips im Vollton,
+     Hero-Schleier auf eine kurze Kante gekürzt, Header deckend. Auf den neuen Gründen
+     Display-Typo in der dunkleren Stufe (≥3.87). Messwerte in DESIGN.md, Abschnitt 1b.
+
   ASSETS: Die Client-Logos kamen als JPEG mit eingebackenem weissem Kasten, im Handoff
   per mix-blend-mode:multiply kaschiert — das bricht auf jedem dunkleren Grund. Beide sind
   jetzt echt freigestellt (Flood-Fill ueber randverbundenes Nahe-Weiss + weiche Kante,
@@ -67,17 +73,22 @@
   --coral-700:#B03422;  /* Hover: 6.25 */
   --coral-800:#A82F1E;  /* Press: 6.80 */
 
+  /* Kräftigere Tönungen — 2026-09-24, siehe Abweichung 4. Die 50/100-Pastelle
+     lasen gegen Weiß wie verwaschen ("zu transparent"). */
+  --sun-200:#FBE3A0;    /* ink-700 darauf 11.44 */
+  --coral-100:#FFD8CE;  /* ink-700 darauf 11.01 */
+
   /* Getönte Neutrale (blaustichig, kein reines Grau) */
   --ink-300:#8B94A0; --ink-500:#4A5560; --ink-700:#232A33;
   --line-soft:#EDEFF2; --line:#DFE3E8;
 
   --surface-page:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F5F7FA;
-  --surface-band:#FDF4DC; --surface-band-cool:#EAF4FC; --surface-footer:#FDF4DC;
+  --surface-band:var(--sun-200); --surface-band-cool:var(--sky-100); --surface-footer:var(--sun-200);
 
   /* Pro Seite überschrieben — genau ein Identitätsakzent */
   --accent:var(--sky-500);
   --accent-text:var(--sky-600);
-  --accent-soft:var(--sky-50);
+  --accent-soft:var(--sky-100);
   --accent-line:var(--sky-400);
 
   /* Typo — sechs Stufen */
@@ -114,7 +125,7 @@
 .page-verein{
   --accent:var(--sun-600);
   --accent-text:var(--sun-700);
-  --accent-soft:var(--sun-100);
+  --accent-soft:var(--sun-200);
   --accent-line:var(--sun-400);
 }
 
@@ -139,9 +150,9 @@ a:hover{color:var(--sky-600)}
 /* Getoente Vollflaechen statt durchgehendem Weiss. Geben der Seite Rhythmus und
    tragen den groessten Teil der Farbe — ohne einen einzigen Fliesstext einzufaerben. */
 .field{padding-block:var(--space-16)}
-.field--cool{background:var(--sky-50)}
+.field--cool{background:var(--sky-100)}
-.field--warm{background:var(--sun-100)}
+.field--warm{background:var(--sun-200)}
-.field--rose{background:var(--coral-50)}
+.field--rose{background:var(--coral-100)}
 .field--sunk{background:var(--surface-sunk)}
 
 /* Ein gesaettigtes Vollflaechen-Band pro Seite. Pastelltoene allein trugen die Seite
@@ -172,7 +183,7 @@ a:hover{color:var(--sky-600)}
 /* Weiß statt --sky-400: weiße Navigation auf Hellblau misst 2.87 und fällt durch. */
 .hdr{
   position:sticky; top:0; z-index:50; height:var(--header-h);
-  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
+  background:var(--surface-page);   /* deckend: das durchscheinende Weiß wirkte milchig */
   border-bottom:1px solid var(--line-soft);
 }
 .hdr__in{
@@ -276,6 +287,13 @@ a:hover{color:var(--sky-600)}
 .hl .c-sun{color:var(--sun-600)}
 .hl .c-coral{color:var(--coral-500)}
 .hl .on{color:var(--accent)}
+/* Beide Heros stehen seit 2026-09-24 auf getöntem Grund (sky-100 / sun-200). Dort
+   fielen die Buntwerte auf ~3.0-3.1 — knapp an der Schwelle. Deshalb die dunklere
+   Stufe derselben Familie: auf sky-100 4.35 / 4.04 / 3.87, auf sun-200 4.43 / 4.11 / 3.93. */
+.hero .hl .c-sky{color:var(--sky-600)}
+.hero .hl .c-sun{color:var(--sun-700)}
+.hero .hl .c-coral{color:var(--coral-600)}
+.hero .trust span{color:var(--ink-700)}
 
 .hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch}
 .hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
@@ -290,7 +308,7 @@ a:hover{color:var(--sky-600)}
 .trust{display:flex; align-items:center; gap:10px}
 .trust__chip{
   width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%);
-  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
+  display:grid; place-items:center; background:var(--accent); color:#fff;  /* Icon 3.86 / 3.92 */
 }
 .trust svg{width:15px; height:15px; flex:none}
 .trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
@@ -300,21 +318,26 @@ a:hover{color:var(--sky-600)}
    unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
    Text darunter auf voller Fläche. */
 @media (min-width:820px){
-  .hero{min-height:clamp(540px,64vw,680px); display:grid}
+  /* Kante der Fläche folgt der Textspalte: .wrap ist zentriert, die Spalte endet bei
+     50% - 590px + 24px + 560px. max() hält sie bei schmalen Fenstern bei 600px. */
+  .hero{min-height:clamp(540px,64vw,680px); display:grid; --scrim-edge:max(600px, calc(50% + 10px))}
   .hero__in{align-self:center}
   .hero--shop .hero__scrim{
-    background:linear-gradient(98deg,#FFF 0,#FFF 430px,rgba(255,255,255,.92) 560px,rgba(255,255,255,0) 820px);
+    /* Getönte Fläche statt Weiß, und eine kurze Kante statt eines langen Schleiers:
+       vorher lag bis 820px ein halbtransparenter Weißverlauf über dem Foto und nahm ihm
+       die Farbe. Jetzt deckt die Fläche die Textspalte, das Foto steht voll gesättigt. */
+    background:linear-gradient(98deg,var(--sky-100) 0,var(--sky-100) var(--scrim-edge),rgba(207,230,248,0) calc(var(--scrim-edge) + 90px));
   }
   .hero--verein .hero__scrim{
-    background:linear-gradient(100deg,var(--sun-100) 0,var(--sun-100) 430px,rgba(253,244,220,.92) 560px,rgba(253,244,220,0) 820px);
+    background:linear-gradient(100deg,var(--sun-200) 0,var(--sun-200) var(--scrim-edge),rgba(251,227,160,0) calc(var(--scrim-edge) + 90px));
   }
 }
 @media (max-width:819.98px){
   .hero__media{position:relative; inset:auto; height:clamp(200px,44vw,320px)}
   .hero__scrim{display:none}
   .hero__in{padding-block:var(--space-10)}
-  .hero--shop{background:var(--surface-page)}
+  .hero--shop{background:var(--sky-100)}
-  .hero--verein{background:var(--sun-100)}
+  .hero--verein{background:var(--sun-200)}
 }
 .hero--verein{border-bottom:6px solid var(--sun-400)}
 /* Seit im Hero ein echtes Foto liegt, braucht das Zeichen einen eigenen Grund —
@@ -331,10 +354,9 @@ a:hover{color:var(--sky-600)}
 .sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)}
 .sh__chip{
   width:44px; height:44px; flex:none; border-radius:var(--radius-m);
-  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
+  display:grid; place-items:center; background:var(--accent); color:#fff;  /* Icon: Grafik-Schwelle 3.0 */
   transform:rotate(-3deg);
 }
-.field--cool .sh__chip, .field--warm .sh__chip, .field--rose .sh__chip{background:var(--surface-card)}
 .sh svg{width:22px; height:22px; flex:none}
 .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start}
 .cols p{max-width:52ch}
@@ -363,9 +385,13 @@ a:hover{color:var(--sky-600)}
   padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
   transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
 }
-.tile--cool{background:var(--sky-50);   border-color:#D6E8F7; border-top-color:var(--sky-400)}
+/* Getönte Kacheln tragen auch auf dem gelben Vollband ihre Farbe (Spezifität 0,2,0,
-.tile--warm{background:var(--sun-100);  border-color:#F2E5C4; border-top-color:var(--sun-400)}
+   damit sie das Weiß von .field--solid-* .tile schlagen). Fließtext darin ink-700:
-.tile--rose{background:var(--coral-50); border-color:#F8DED8; border-top-color:var(--coral-400)}
+   Guardrail "keine graue Schrift auf farbigem Grund". */
+.tile.tile--cool{background:var(--sky-100);   border-color:var(--sky-100);   border-top-color:var(--sky-500)}
+.tile.tile--warm{background:var(--sun-200);   border-color:var(--sun-200);   border-top-color:var(--sun-600)}
+.tile.tile--rose{background:var(--coral-100); border-color:var(--coral-100); border-top-color:var(--coral-500)}
+.tile[class*="tile--"] p{color:var(--ink-700)}
 /* Auf getoentem Feld kehren sich die Kacheln um: weiss auf Farbe statt Farbe auf Weiss. */
 .field--cool .tile, .field--warm .tile, .field--rose .tile{background:var(--surface-card)}
 .tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
@@ -377,14 +403,13 @@ a:hover{color:var(--sky-600)}
    Auf 400px verkleinert und auf ein Cremefeld gesetzt, damit die Luecke wie ein
    vorbereiteter Rahmen liest und nicht wie ein Loch. */
 .portrait{max-width:400px; margin-inline:auto; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
-.portrait__slot{
+/* Gleiche Behandlung wie .story__img — gekippt, weiß gerahmt, wie ein aufgelegtes Foto. */
-  width:100%; aspect-ratio:1/1; border-radius:var(--radius-xl);
+.portrait__img{
-  background:var(--surface-card); border:2px dashed var(--sun-400);
+  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
-  display:grid; place-items:center; padding:var(--space-6);
+  border-radius:var(--radius-xl); border:6px solid var(--surface-card);
+  box-shadow:var(--shadow-band); transform:rotate(1.5deg);
 }
-.portrait__slot span{font:var(--t-small); color:var(--ink-700); max-width:22ch}
+.portrait__name{font:var(--t-h2); color:var(--accent-text); letter-spacing:var(--ls-display)}  /* 4.43 auf sun-200 */
-.portrait__slot img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-xl)}
-.portrait__name{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
 
 /* Audio */
 .song{
@@ -422,7 +447,7 @@ a:hover{color:var(--sky-600)}
 .band__copy{display:grid; gap:var(--space-4); justify-items:start}
 /* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */
 .band__copy p{color:var(--ink-700); max-width:46ch}
-.band__copy h2{color:var(--accent)}
+.band__copy h2{color:var(--accent-text)}  /* 4.43 bzw. 4.04 auf den kräftigeren Bändern */
 .band__copy .label{color:var(--ink-700)}
 .band img{width:100%; max-width:380px; justify-self:center}
 
@@ -434,7 +459,7 @@ a:hover{color:var(--sky-600)}
   border-radius:var(--radius-l); box-shadow:var(--shadow-card);
   padding:var(--space-6); display:grid; gap:var(--space-2);
 }
-.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); word-break:break-word}
+.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); overflow-wrap:break-word}  /* bricht am <wbr> nach dem @ */
 /* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch —
    einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am
    Handy zuverlaessig antippen. */

datenschutz.html

@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -54,7 +54,7 @@
         <dt>Name</dt><dd>Martin Lindenau</dd>
         <dt>Anschrift</dt><dd>Hollerstraße 2, 84056 Rottenburg a.d. Laaber</dd>
         <dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
-        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
+        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></dd>
       </dl>
       <p>Eine Pflicht zur Benennung einer Datenschutzbeauftragten oder eines
       Datenschutzbeauftragten besteht bei dieser Größe nach § 38 BDSG nicht.</p>
@@ -155,7 +155,7 @@
       <div class="ftr__col">
         <h3>Über</h3>
         <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
           <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
           <li><a href="impressum.html">Impressum</a></li>
           <li><a href="datenschutz.html">Datenschutz</a></li>

hilfe-verein.html

@@ -10,7 +10,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
 </head>
 <body class="page-verein">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -144,7 +144,7 @@
       </div>
       <div class="contact">
         <span class="label">E-Mail</span>
-        <p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
+        <p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></p>
       </div>
     </div>
   </section>
@@ -173,7 +173,7 @@
       <div class="ftr__col">
         <h3>Über</h3>
         <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
           <li><a href="#kontakt">Kontakt</a></li>
           <li><a href="impressum.html">Impressum</a></li>
           <li><a href="datenschutz.html">Datenschutz</a></li>

impressum.html

@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -47,7 +47,7 @@
         <dt>Anbieter</dt><dd>Martin Lindenau</dd>
         <dt>Anschrift</dt><dd>Hollerstraße 2<br />84056 Rottenburg a.d. Laaber<br />Deutschland</dd>
         <dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
-        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
+        <dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@<wbr>gmail.com</a></dd>
       </dl>
       <p>Eine ladungsfähige Anschrift ist zwingend — ein Postfach genügt nicht.</p>
 
@@ -122,7 +122,7 @@
       <div class="ftr__col">
         <h3>Über</h3>
         <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
           <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
           <li><a href="impressum.html">Impressum</a></li>
           <li><a href="datenschutz.html">Datenschutz</a></li>

index.html

@@ -10,7 +10,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
 </head>
 <body class="page-shop">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -64,7 +64,7 @@
     </div>
   </section>
 
-  <section class="wrap section">
+  <section class="wrap section" id="ueber-uns">
     <div class="sh">
       <span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
       <h2>Wie alles angefangen hat</h2>
@@ -81,8 +81,7 @@
   <section class="field field--warm">
     <div class="wrap">
       <div class="portrait">
-        <!-- Foto ausstehend. Sobald da: <img src="assets/opa-martin.jpg" alt="Opa Martin"> in den Slot. -->
+        <img class="portrait__img" src="assets/opa-martin.jpg" alt="Opa Martin" width="800" height="1000" loading="lazy" />
-        <div class="portrait__slot"><span>Bild von Opa Martin folgt</span></div>
         <p class="portrait__name">Opa Martin</p>
       </div>
     </div>
@@ -162,7 +161,7 @@
       <div class="ftr__col">
         <h3>Über</h3>
         <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
           <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
           <li><a href="impressum.html">Impressum</a></li>
           <li><a href="datenschutz.html">Datenschutz</a></li>

shop.html

@@ -11,7 +11,7 @@
 <link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
-<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
+<link rel="stylesheet" href="assets/site.css?v=e4c8b78b" />
 </head>
 <body class="page-shop parked">
 <a class="skip" href="#inhalt">Zum Inhalt springen</a>
@@ -65,7 +65,7 @@
       <div class="ftr__col">
         <h3>Über</h3>
         <ul>
-          <li><a href="index.html">Über uns</a></li>
+          <li><a href="index.html#ueber-uns">Über uns</a></li>
           <li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
           <li><a href="impressum.html">Impressum</a></li>
           <li><a href="datenschutz.html">Datenschutz</a></li>