Add mobile tape shadows and center bank heading

assets/construction-tape.svg

@@ -1,7 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 254"><defs><clipPath id="clip_53">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 270"><defs>
+<filter id="tape-shadow" filterUnits="userSpaceOnUse" x="-20" y="-20" width="1240" height="310" color-interpolation-filters="sRGB">
+<feDropShadow dx="2.789536" dy="2.789536" stdDeviation="1.9725" flood-color="#000" flood-opacity="0.35" />
+</filter>
+<clipPath id="clip_53">
 <path transform="matrix(1,0,0,-1,0,900)" d="M452.348 900 1200 646.206V671.203L525.985 900Z" />
 </clipPath>
-</defs><path transform="matrix(1,0,0,-1,0,134.74762)" d="M0 0V-23.7L1200 36.564V60.264Z" fill="#fbbb0c" />
+</defs><g filter="url(#tape-shadow)">
+<path transform="matrix(1,0,0,-1,0,134.74762)" d="M0 0V-23.7L1200 36.564V60.264Z" fill="#fbbb0c" />
 <path transform="matrix(1,0,0,-1,0,134.74799)" d="M0 0V-2.6L23.626-22.513 78.499-19.757 51.961 2.609Z" fill="#0c0c0c" />
 <path transform="matrix(1,0,0,-1,105.8332,129.43299)" d="M0 0 26.538-22.367 81.411-19.611 54.872 2.756Z" fill="#0c0c0c" />
 <path transform="matrix(1,0,0,-1,214.5783,123.97168)" d="M0 0 26.538-22.367 81.41-19.611 54.872 2.756Z" fill="#0c0c0c" />
@@ -13,6 +18,7 @@
 <path transform="matrix(1,0,0,-1,867.0474,91.20422)" d="M0 0 26.538-22.367 81.411-19.611 54.872 2.756Z" fill="#0c0c0c" />
 <path transform="matrix(1,0,0,-1,975.7925,85.74292)" d="M0 0 26.538-22.367 81.41-19.611 54.872 2.756Z" fill="#0c0c0c" />
 <path transform="matrix(1,0,0,-1,1084.5376,80.28168)" d="M0 0 26.538-22.367 81.41-19.611 54.872 2.756Z" fill="#0c0c0c" />
+</g><g filter="url(#tape-shadow)">
 <path transform="matrix(1,0,0,-1,452.3481,0)" d="M0 0 747.652-253.794V-228.797L73.637 0Z" fill="#fbbb0c" />
 <path transform="matrix(1,0,0,-1,490.7219,0)" d="M0 0 8.561-15.932 60.587-33.593 44.16-3.02 35.263 0Z" fill="#0c0c0c" />
 <path transform="matrix(1,0,0,-1,602.3868,50.931276)" d="M0 0 52.026-17.661 35.599 12.912-16.427 30.573Z" fill="#0c0c0c" />
@@ -24,4 +30,5 @@
 <g clip-path="url(#clip_53)">
 <path transform="matrix(1,0,0,-1,1231.2191,200.76282)" d="M0 0-33.007-17.735 18.529-113.649 51.536-95.913Z" fill="#0c0c0c" />
 </g>
+</g>
 </svg>

assets/styles.css

@@ -310,9 +310,9 @@ address {
 
   body {
     isolation: auto;
-    background-image: url("./construction-tape.svg"), url("./background-mobile.webp");
+    background-image: url("./construction-tape.svg?v=561024d6e6b4"), url("./background-mobile.webp");
     background-position: center top;
-    background-size: 1200px 254px, cover;
+    background-size: 1200px 270px, cover;
     background-repeat: no-repeat;
   }
 
@@ -428,6 +428,10 @@ address {
     padding-block-start: 0;
   }
 
+  .bank h2 {
+    text-align: center;
+  }
+
   .paypal {
     justify-self: center;
     text-align: center;

docs/implementation.md

@@ -4,7 +4,7 @@ The supplied 1200 × 900 PDF and its IDML source define the desktop composition.
 
 CSS lives in `assets/styles.css`; all colors are CSS custom properties. Its link in `index.html` carries a content-hash query parameter; update that value when the CSS changes to avoid stale browser caches. Layout scales with the design above 1024 px. At smaller sizes the type becomes larger and wraps; at 600 px the bank and PayPal details stack in their original reading order. The mobile background separates the supplied tape from the photograph so that it remains above the logo while the photo fills a tall page. `assets/app.mjs` only enhances the IBAN with clipboard support and an accessible selection fallback. Contact and payment links work without JavaScript.
 
-At 1024 px and below, both decorative images are ordinary `body` backgrounds. The desktop pseudo-elements and isolated stacking context are disabled, leaving mobile touch scrolling to the document without separate decorative layers.
+At 1024 px and below, both decorative images are ordinary `body` backgrounds. The tape SVG applies the original shadow settings to each strip, including their overlap. Its 270 pt view box leaves room for the shadow without moving or scaling the artwork. The desktop pseudo-elements and isolated stacking context are disabled, leaving mobile touch scrolling to the document without separate decorative layers. At 600 px and below, the Kontodaten heading is centered above the bank details.
 
 ## Preview and deployment
 

docs/verification.md

@@ -35,6 +35,11 @@ Desktop band follow-up on 2026-09-07:
 
 Mobile touch follow-up on 2026-09-07:
 
-- The reported blocked scrolling was not reproduced with touch events in current desktop Chrome's mobile simulation or native swipes in Android 14 with Chrome 113. The user's physical phone was not available.
+- The reported blocked scrolling was not reproduced with touch events in current desktop Chrome's mobile simulation or native swipes in Android 14 with Chrome 113. The user's physical phone was not available; the user subsequently suspected their browser had hung.
 - Simplified mobile decoration to normal body backgrounds and removed its pseudo-elements and isolated stacking context as a compatibility measure. Native Android swipes reach the bottom of the updated page (scroll position 538.18 px, viewport 760 px, document 1298 px).
 - Updated desktop (1200 px) and mobile (390 px) scrolled screenshots are pixel-identical to the previous rendering. Checks at 1025 and 1024 px retain the desktop/mobile breakpoint and show no horizontal overflow.
+
+Mobile shadow and heading follow-up on 2026-09-07:
+
+- Added each strip's shadow to the separate mobile tape SVG. At 390 px, initial screenshot differences are confined to the tape and shadow area (the top 146 px); content positions are unchanged. The 1200 px desktop screenshot remains pixel-identical.
+- At 390 px, the Kontodaten heading's text center is 194.99 px against the viewport center of 195 px. Desktop keeps its original alignment. No horizontal overflow is present.

index.html

@@ -35,7 +35,7 @@
     <link rel="manifest" href="./site.webmanifest">
     <link rel="preload" href="./assets/fonts/roboto-italic-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="./assets/fonts/roboto-latin.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="stylesheet" href="./assets/styles.css?v=92d977816ce0">
+    <link rel="stylesheet" href="./assets/styles.css?v=216cfd1888ba">
     <script type="module" src="./assets/app.mjs"></script>
     <script type="application/ld+json">
       {

scripts/prepare-assets.py

@@ -91,9 +91,26 @@ for width in [1200, 2400]:
 # On tall screens the photo fills the page and the tape stays above the logo.
 background.crop((0, 340, 2400, 1800)).resize((1200, 730), Image.Resampling.LANCZOS).save(
     ASSETS / 'background-mobile.webp', quality=89, method=6)
-tape = artwork([*list(source)[12:24], *list(source)[41:50]], (0, 0, 1200, 254))
+tape = artwork([*list(source)[12:24], *list(source)[41:50]], (0, 0, 1200, 270))
 tape = tape.replace('#fdc200', '#fbbb0c').replace('#020102', '#0c0c0c')
-(ASSETS / 'construction-tape.svg').write_text(tape)
+tape_root = ET.fromstring(tape)
+# Original IDML shadow, applied separately so the diagonal tape shadows the lower tape.
+shadow = ET.SubElement(tape_root[0], f'{{{SVG}}}filter', {
+    'id': 'tape-shadow', 'filterUnits': 'userSpaceOnUse',
+    'x': '-20', 'y': '-20', 'width': '1240', 'height': '310',
+    'color-interpolation-filters': 'sRGB',
+})
+ET.SubElement(shadow, f'{{{SVG}}}feDropShadow', {
+    'dx': '2.789536', 'dy': '2.789536', 'stdDeviation': '1.9725',
+    'flood-color': '#000', 'flood-opacity': '0.35',
+})
+tape_paths = list(tape_root)[1:]
+for paths in [tape_paths[:12], tape_paths[12:]]:
+    group = ET.SubElement(tape_root, f'{{{SVG}}}g', {'filter': 'url(#tape-shadow)'})
+    for path in paths:
+        tape_root.remove(path)
+        group.append(path)
+(ASSETS / 'construction-tape.svg').write_text(ET.tostring(tape_root, encoding='unicode'))
 
 logo_paths = list(source[50])
 logo = artwork(logo_paths, (507.62, 142, 184.76, 146.67))