Alle ausstehenden Aenderungen (Bilder, Texte) fuer den Server-Umzug uebernommen

profil.html

@@ -12,7 +12,7 @@
 <meta property="og:site_name" content="DOGFATHER UNIVERSE" />
 <meta property="og:title" content="Profil — DOGFATHER UNIVERSE" />
 <meta property="og:description" content="Team Dogi — persönliche Vorstellung." />
-<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="robots" content="noindex" /> <!-- generische URL, echte Team-Seiten verlinken hierher -->
 
@@ -26,6 +26,17 @@
   .profil-badge { display: none; margin-bottom: .6rem; }
   .profil-role { color: var(--accent); font-weight: 600; margin-bottom: 1.1rem; }
   .profil-bio { font-size: 1.05rem; line-height: 1.7; }
+  /* profil-bio ist jetzt ein <div> statt <p> (kann selbst mehrere <p>
+     enthalten, z.B. bei mehrabsätzigen intro-Texten wie bei Patrick/
+     Bananenstift) — Absatzabstand hier nachbilden, sonst kleben die
+     Absätze aneinander. */
+  .profil-bio p { margin: 0 0 1rem; }
+  .profil-bio p:last-child { margin-bottom: 0; }
+  .profil-bio .quote { display: block; margin-top: 1rem; }
+  /* Namen/Hervorhebungen im Fließtext (z.B. "Bananenstift", Datumsangaben)
+     sollen sich deutlicher vom umgebenden Text abheben als reines Fett auf
+     hellem Grund es tut — daher zusätzlich Akzentfarbe. */
+  .profil-bio strong { color: var(--accent); }
   .profil-quote { display: none; font-style: italic; font-size: 1.05rem; margin-top: 1.2rem; color: var(--text-muted); }
   .profil-social { margin-top: 1.4rem; }
   @media (max-width: 760px) { .profil-photo { max-width: 320px; } }
@@ -57,7 +68,7 @@
     color: var(--accent);
   }
   .profil-bio-rich h3:first-child { margin-top: 0; }
-  .profil-bio-rich strong { color: var(--text); }
+  .profil-bio-rich strong { color: var(--accent); }
   /* Aufzählungen (z.B. Bananenstifts "Dabei helfe ich unter anderem
      bei:"-Liste) wirkten ohne eigene Regeln optisch "fett", weil sie —
      anders als <p> — keine gedimmte Textfarbe geerbt hatten und dadurch
@@ -96,7 +107,7 @@
           <span class="badge rank-1 profil-badge" id="profil-badge"></span>
           <h2 id="profil-name" style="margin-top:0;"></h2>
           <div class="profil-role" id="profil-role"></div>
-          <p class="profil-bio" id="profil-bio"></p>
+          <div class="profil-bio" id="profil-bio"></div>
           <p class="profil-quote" id="profil-quote"></p>
           <div class="btn-row profil-social" id="profil-social"></div>
         </div>
@@ -236,15 +247,23 @@ document.addEventListener("DOMContentLoaded", () => {
     document.getElementById("profil-hero-role").textContent = feld(person.role);
     document.getElementById("profil-role").textContent = feld(person.role);
 
+    // intro (kurz, beim Foto) und bioHtml (lang, breiter Bereich darunter)
+    // sind unabhängig voneinander nutzbar: eine Person kann NUR intro haben
+    // (die komplette Vorstellung erscheint dann direkt neben dem Foto),
+    // NUR bioHtml (Vorstellung komplett unten im breiten Bereich), oder
+    // beides zusammen (kurzer Teaser neben dem Foto + ausführlicher Text
+    // darunter, siehe Bananenstift).
     const introText = feld(person.intro);
     const bioHtmlText = feld(person.bioHtml);
-    if (bioHtmlText) {
-      if (introText) document.getElementById("profil-bio").innerHTML = introText;
-      document.getElementById("profil-bio-rich").innerHTML = bioHtmlText;
-    } else {
+    if (introText) {
+      document.getElementById("profil-bio").innerHTML = introText;
+    } else if (!bioHtmlText) {
       document.getElementById("profil-bio").textContent =
         feld(person.bio) || t("pr_bio_fallback").replace("{name}", person.name);
     }
+    if (bioHtmlText) {
+      document.getElementById("profil-bio-rich").innerHTML = bioHtmlText;
+    }
 
     const kurzbeschreibung = feld(person.bio)
       || (bioHtmlText ? bioHtmlText.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim().slice(0, 160) : "")
@@ -287,9 +306,14 @@ document.addEventListener("DOMContentLoaded", () => {
     // normalen Outline-Button-Stil.
     if (plattform === "tiktok") {
       a.className = "btn-tiktok";
+      const note = document.createElement("span");
+      note.className = "btn-tiktok-note";
+      note.setAttribute("aria-hidden", "true");
+      note.textContent = "♪";
       const span = document.createElement("span");
+      span.className = "btn-tiktok-text";
       span.textContent = socialLabels[plattform];
-      a.appendChild(span);
+      a.append(note, span);
       socialWrap.appendChild(a);
       return;
     }