Webseiten: drop.two neu und lebendiger, Favicons, Kursiv-Anschnitt behoben

- drop.two: Animation 9:16 → 4:5, zerlegter Dateiname, Schritte, Fakten,
  Favicon; Schwarz/Gold bleibt
- apps.zielke.studio: Favicon (vier App-Farben), Apple-Touch-Icon
- Kursive Verlaufsschrift wurde an den Rändern abgeschnitten (Übersicht
  und Patchcord-Seite)

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

favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <rect width="1024" height="1024" rx="228" fill="#0B0B0C"/>
+  <rect x="310" y="152" width="404" height="718" rx="44" fill="none" stroke="#F5F5F4" stroke-width="44"/>
+  <rect x="328" y="281" width="368" height="460" rx="26" fill="#C8A96A"/>
+</svg>

index.html

@@ -5,129 +5,252 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex">
 <title>drop.two</title>
+<meta name="description" content="9:16 rein. 9:16 und 4:5 raus.">
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Instrument+Serif:ital@1&display=swap" rel="stylesheet">
+<!-- drop.two landing page, /var/www/updates/droptwo (droptwo.zielke.studio).
+     Source: patchcord repo, server/droptwo/. Version from appcast.xml. -->
 <style>
   :root {
     --dark: #0B0B0C;
+    --surface: #141416;
     --light: #F5F5F4;
     --mid: #B8B5B0;
     --gray: #8A8886;
+    --rule: #26262a;
     --gold: #C8A96A;
+    --gold-hi: #E4C98F;
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
+  html { background: var(--dark); }
   body {
-    background: var(--dark);
     color: var(--light);
     font-family: "Kanit", "Poppins", -apple-system, sans-serif;
     font-weight: 300;
     line-height: 1.65;
-    display: flex;
-    justify-content: center;
-    padding: 12vh 24px 8vh;
     -webkit-font-smoothing: antialiased;
+    padding: 0 16px 64px;
+    background:
+      radial-gradient(38vw 30vw at 85% 12%, rgba(200, 169, 106, .16), transparent 70%),
+      radial-gradient(30vw 30vw at 0% 60%, rgba(200, 169, 106, .07), transparent 70%),
+      var(--dark);
+    background-repeat: no-repeat;
   }
-  main { width: 100%; max-width: 460px; }
+  main { max-width: 1000px; margin: 0 auto; }
 
-  .mark { display: block; width: 56px; margin-bottom: 34px; }
+  nav { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; }
+  .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.05rem; color: var(--light); text-decoration: none; }
+  .brand svg { width: 30px; height: 30px; }
+  nav a.back { font-size: .85rem; color: var(--gray); text-decoration: none; }
+  nav a.back:hover { color: var(--light); }
 
-  h1 {
-    font-size: 2.4rem;
-    font-weight: 500;
-    letter-spacing: -0.02em;
-    margin-bottom: 10px;
-  }
+  /* Hero */
+  .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 88px; }
+  .eyebrow { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
+  h1 { font-size: clamp(2.5rem, 5.5vw, 3.8rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; }
   .em {
-    font-family: "Instrument Serif", Georgia, serif;
-    font-style: italic;
-    font-weight: 400;
-    color: var(--gold);
+    font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
+    background: linear-gradient(90deg, var(--gold), var(--gold-hi), var(--gold));
+    background-size: 200% 100%;
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+    padding: 0 .16em; margin: 0 -.16em;
+    -webkit-box-decoration-break: clone; box-decoration-break: clone;
+    animation: shimmer 6s ease-in-out infinite;
   }
-  .lede { color: var(--mid); margin-bottom: 40px; }
-
+  @keyframes shimmer { 50% { background-position: 100% 0; } }
+  .lede { color: var(--mid); font-size: 1.08rem; max-width: 30em; margin-bottom: 34px; }
   .download {
-    display: inline-block;
-    background: var(--gold);
-    color: var(--dark);
-    text-decoration: none;
-    font-weight: 500;
-    padding: 13px 30px;
-    border-radius: 7px;
-    transition: opacity .15s ease;
+    display: inline-flex; align-items: center; gap: 10px;
+    background: var(--gold); color: var(--dark); text-decoration: none; font-weight: 500;
+    padding: 13px 28px; border-radius: 999px;
+    box-shadow: 0 10px 34px rgba(200, 169, 106, .28);
+    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
   }
-  .download:hover { opacity: .85; }
+  .download:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(200, 169, 106, .38); }
+  .version { font-size: .8rem; color: var(--gray); margin-top: 14px; min-height: 1.2em; }
 
-  .version {
-    font-size: .8rem;
-    color: var(--gray);
-    margin-top: 14px;
-    min-height: 1.2em;
+  /* Demo: 9:16 master, the 4:5 frame lands on it, the 4:5 cut slides out. */
+  .demo { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
+  .frame { position: relative; border-radius: 18px; overflow: hidden; background: #1a1a1d; }
+  .master { width: 176px; aspect-ratio: 9 / 16; border: 3px solid var(--light); }
+  .cut { width: 176px; aspect-ratio: 4 / 5; border: 3px solid var(--gold); box-shadow: 0 0 40px rgba(200, 169, 106, .35); animation: slide 5s ease-in-out infinite; }
+  .scene { position: absolute; inset: 0; }
+  .master .scene { background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
+  /* The 4:5 cut shows the middle of the same scene (full width, centered). */
+  .cut .scene { inset: -21.1% 0; background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
+  .sun { position: absolute; left: 50%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 40px #ffcf87; transform: translateX(-50%); animation: sun 5s ease-in-out infinite; }
+  .master .sun { top: 36%; }
+  .cut .sun { top: 36%; }
+  .person { position: absolute; bottom: 22%; left: 50%; width: 30%; height: 34%; transform: translateX(-50%); background: #151418; border-radius: 40% 40% 12% 12% / 30% 30% 10% 10%; }
+  .person::before { content: ""; position: absolute; top: -34%; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); background: #151418; border-radius: 50%; }
+  .crop {
+    position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4 / 5; transform: translateY(-50%);
+    border: 3px solid var(--gold); border-radius: 12px;
+    box-shadow: 0 0 0 999px rgba(11, 11, 12, .55);
+    animation: crop 5s ease-in-out infinite;
   }
+  .label { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: .78rem; letter-spacing: .12em; color: var(--gray); }
+  .wrap-master, .wrap-cut { position: relative; }
+  .arrow { color: var(--gold); font-size: 1.6rem; animation: nudge 5s ease-in-out infinite; }
 
-  .rule { border: 0; border-top: 1px solid #26262a; margin: 48px 0 34px; }
+  @keyframes crop {
+    0%, 12% { opacity: 0; transform: translateY(-50%) scale(1.25); }
+    26%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
+    100% { opacity: 0; transform: translateY(-50%) scale(1); }
+  }
+  @keyframes slide {
+    0%, 30% { opacity: 0; transform: translateX(-40px) scale(.9); }
+    44%, 88% { opacity: 1; transform: translateX(0) scale(1); }
+    100% { opacity: 0; transform: translateX(0) scale(1); }
+  }
+  @keyframes nudge { 0%, 30% { opacity: .2; transform: translateX(-6px); } 44%, 88% { opacity: 1; transform: none; } 100% { opacity: .2; } }
+  @keyframes sun { 50% { transform: translateX(-50%) translateY(-6%); } }
 
-  dl { display: grid; gap: 26px; }
-  dt {
-    font-size: .74rem;
-    font-weight: 500;
-    letter-spacing: .1em;
-    text-transform: uppercase;
-    color: var(--gold);
-    margin-bottom: 5px;
+  /* Filename */
+  .file {
+    margin: 0 auto; max-width: 760px; padding: 28px; border-radius: 20px;
+    background: var(--surface); border: 1px solid var(--rule);
+    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(.8rem, 2.2vw, 1.05rem);
   }
-  dd { color: var(--mid); font-size: .93rem; }
-  dd a { color: var(--light); }
+  .file .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
+  .file .in { color: var(--light); }
+  .seg { padding: 2px 6px; border-radius: 6px; }
+  .seg.project { background: rgba(200, 169, 106, .18); color: var(--gold-hi); }
+  .seg.format { background: rgba(245, 245, 244, .1); }
+  .seg.new { background: var(--gold); color: var(--dark); }
+  .file .to { color: var(--gold); }
+  .file .out { display: grid; gap: 6px; color: var(--mid); }
+  .legend { margin-top: 16px; font-family: "Kanit", sans-serif; font-size: .85rem; color: var(--gray); }
+
+  /* Steps & facts */
+  section.how { padding: 88px 0 24px; }
+  h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 26px; }
+  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; }
+  .step { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); transition: border-color .15s ease, transform .15s ease; }
+  .step:hover { border-color: rgba(200, 169, 106, .5); transform: translateY(-2px); }
+  .step .num { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--gold); display: block; margin-bottom: 12px; }
+  .step h3 { font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; }
+  .step p { color: var(--mid); font-size: .92rem; }
+  .facts { display: flex; flex-wrap: wrap; gap: 10px; }
+  .fact { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--mid); font-size: .88rem; }
+  .fact b { color: var(--light); font-weight: 400; }
 
-  footer {
-    margin-top: 52px;
-    font-size: .78rem;
-    color: #55534f;
+  /* Info */
+  .info { max-width: 560px; margin: 0 auto; padding: 72px 0 0; }
+  .info h2 { margin-bottom: 24px; }
+  dl { display: grid; gap: 24px; }
+  dt { font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; }
+  dd { color: var(--mid); }
+  dd strong { color: var(--light); font-weight: 400; }
+  footer { margin-top: 56px; font-size: .78rem; color: var(--gray); }
+
+  @media (max-width: 800px) {
+    .hero { grid-template-columns: 1fr; gap: 64px; padding-top: 32px; }
+    .master, .cut { width: 132px; }
+    .steps { grid-template-columns: 1fr; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; }
+    .crop, .cut { opacity: 1; }
   }
 </style>
 </head>
 <body>
 <main>
+  <nav>
+    <a class="brand" href="./">
+      <svg viewBox="0 0 1024 1024" aria-hidden="true">
+        <rect x="310" y="152" width="404" height="718" rx="44" fill="none" stroke="#F5F5F4" stroke-width="44"/>
+        <rect x="328" y="281" width="368" height="460" rx="26" fill="#C8A96A"/>
+      </svg>
+      drop.two
+    </a>
+    <a class="back" href="https://apps.zielke.studio/">← Alle Apps</a>
+  </nav>
 
-  <svg class="mark" viewBox="0 0 1024 1024" aria-hidden="true">
-    <rect x="310" y="152" width="404" height="718" rx="44"
-          fill="none" stroke="#F5F5F4" stroke-width="36"/>
-    <rect x="328" y="281" width="368" height="460" rx="26" fill="#C8A96A"/>
-  </svg>
-
-  <h1>drop.two <span class="em">beta</span></h1>
-  <p class="lede">9:16 rein. 9:16 und 4:5 raus.</p>
-
-  <a class="download" href="drop.two-latest.dmg">Für macOS laden</a>
-  <p class="version" id="version"></p>
-
-  <hr class="rule">
-
-  <dl>
-    <div>
-      <dt>Installation</dt>
-      <dd>DMG öffnen, <strong>drop.two</strong> in den Programme-Ordner ziehen. Beim ersten Start kann macOS kurz prüfen — das dauert einen Moment und passiert nur einmal.</dd>
-    </div>
+  <section class="hero">
     <div>
-      <dt>Updates</dt>
-      <dd>Kommen automatisch. Die App meldet sich, wenn eine neue Version bereitsteht. Diese Seite brauchst du danach nicht mehr.</dd>
+      <p class="eyebrow">Beta · für macOS</p>
+      <h1>9:16 rein. <span class="em">9:16 und 4:5 raus.</span></h1>
+      <p class="lede">Fertige Hochkant-Master reinziehen – drop.two schneidet die 4:5-Fassung sauber aus der Mitte und legt beide ordentlich im Projektordner ab. Keine Timeline, kein Export-Dialog.</p>
+      <a class="download" href="drop.two-latest.dmg">Für macOS laden <span aria-hidden="true">↓</span></a>
+      <p class="version" id="version"></p>
     </div>
-    <div>
-      <dt>Voraussetzung</dt>
-      <dd>macOS 13 oder neuer.</dd>
+
+    <div class="demo" aria-label="Animation: aus einem 9:16-Video entsteht ein 4:5-Ausschnitt">
+      <div class="wrap-master">
+        <div class="frame master">
+          <div class="scene"><div class="sun"></div><div class="person"></div></div>
+          <div class="crop"></div>
+        </div>
+        <span class="label">9×16</span>
+      </div>
+      <span class="arrow" aria-hidden="true">→</span>
+      <div class="wrap-cut">
+        <div class="frame cut">
+          <div class="scene"><div class="sun"></div><div class="person"></div></div>
+        </div>
+        <span class="label">4×5</span>
+      </div>
     </div>
-    <div>
-      <dt>Fehler gefunden?</dt>
-      <dd>Kurze Nachricht an Samuel — am besten mit dem Dateinamen, bei dem es geklemmt hat.</dd>
+  </section>
+
+  <div class="file" aria-label="Beispiel: aus SOMOS-9x16-v3-DE.mp4 werden zwei Dateien im Ordner SOMOS">
+    <div class="row">
+      <span class="in"><span class="seg project">SOMOS</span>-<span class="seg format">9x16</span>-v3-DE.mp4</span>
+      <span class="to">→</span>
+      <span class="out">
+        <span><span class="seg project">SOMOS</span>/SOMOS-9x16-v3-DE.mp4</span>
+        <span><span class="seg project">SOMOS</span>/SOMOS-<span class="seg new">4x5</span>-v3-DE.mp4</span>
+      </span>
     </div>
-  </dl>
+    <p class="legend">Das Projekt steht im Dateinamen: <code>[Projekt]-[Format]-[Version]-[Sprache]</code>. drop.two liest von rechts, damit auch Projekte mit Bindestrich heil bleiben.</p>
+  </div>
 
-  <footer>Interne Beta &middot; bitte nicht weitergeben</footer>
+  <section class="how">
+    <h2>So einfach geht's</h2>
+    <div class="steps">
+      <div class="step"><span class="num">1</span><h3>Reinziehen</h3><p>Eine oder gleich viele 9:16-Dateien per Drag &amp; Drop – oder im Dialog auswählen.</p></div>
+      <div class="step"><span class="num">2</span><h3>Erkannt</h3><p>drop.two liest Projekt, Version und Sprache aus dem Namen und prüft das Seitenverhältnis.</p></div>
+      <div class="step"><span class="num">3</span><h3>Abgelegt</h3><p>Original und 4:5-Fassung landen zusammen im Projektordner. Fertig zum Weitergeben.</p></div>
+    </div>
+    <div class="facts">
+      <span class="fact"><b>ProRes</b> bleibt ProRes</span>
+      <span class="fact"><b>Ton</b> ohne Neukodierung</span>
+      <span class="fact"><b>Volle Breite</b>, mittig beschnitten</span>
+      <span class="fact"><b>1080×1920</b> → 1080×1350</span>
+      <span class="fact"><b>Fehler</b> werden gezeigt, nicht verschluckt</span>
+    </div>
+  </section>
 
+  <section class="info">
+    <h2>Loslegen</h2>
+    <dl>
+      <div>
+        <dt>Installation</dt>
+        <dd>DMG öffnen, <strong>drop.two</strong> in den Programme-Ordner ziehen. Beim ersten Start kann macOS kurz prüfen – das dauert einen Moment und passiert nur einmal.</dd>
+      </div>
+      <div>
+        <dt>Updates</dt>
+        <dd>Kommen automatisch. Die App meldet sich, wenn eine neue Version bereitsteht. Diese Seite brauchst du danach nicht mehr.</dd>
+      </div>
+      <div>
+        <dt>Voraussetzung</dt>
+        <dd>macOS 13 oder neuer.</dd>
+      </div>
+      <div>
+        <dt>Fehler gefunden?</dt>
+        <dd>Kurze Nachricht an Samuel oder an <a href="mailto:app-feedback@zielke.studio" style="color: var(--light)">app-feedback@zielke.studio</a> – am besten mit dem Dateinamen, bei dem es geklemmt hat.</dd>
+      </div>
+    </dl>
+    <footer>Interne Beta &middot; bitte nicht weitergeben</footer>
+  </section>
 </main>
 
 <script>
-// Versionsnummer aus dem appcast lesen — eine Quelle der Wahrheit.
+// Version from the appcast: one source of truth.
 fetch("appcast.xml")
   .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
   .then(function (t) {
@@ -136,10 +259,9 @@ fetch("appcast.xml")
     if (!items.length) return;
     var el = items[0].getElementsByTagName("sparkle:shortVersionString")[0]
           || items[0].getElementsByTagName("title")[0];
-    if (el) document.getElementById("version").textContent = "Version " + el.textContent.trim();
+    if (el) document.getElementById("version").textContent = "Version " + el.textContent.trim() + " · macOS 13+";
   })
-  .catch(function () { /* still bleiben, der Link funktioniert trotzdem */ });
+  .catch(function () { /* stay quiet, the link works anyway */ });
 </script>
-
 </body>
 </html>