Steckbriefvorlage - Druckversion

Code:
<style>.olympus-dossier{font-family:Montserrat,sans-serif;max-width:800px;margin:20px auto;background-color:#232121;color:#b3b2b2;border:3px solid #623146;position:relative;box-shadow:0 0 15px rgba(98,49,70,.5);padding-bottom:20px;background-image:url(https://i.imgur.com/rJVhGaj.png);background-blend-mode:overlay;background-size:cover}.dossier-header{background-color:#623146;padding:15px 20px;border-bottom:2px solid #b3b2b2;position:relative;overflow:hidden}.dossier-title{font-size:28px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:3px;text-shadow:2px 2px 0 #232121}.dossier-subtitle{font-size:12px;font-weight:600;color:#b3b2b2;letter-spacing:1px;margin-top:-3px}.dossier-watermark,.section-title{font-weight:700;text-transform:uppercase}.dossier-watermark{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:14px;color:rgba(179,178,178,.2);letter-spacing:2px}.dossier-section{margin:20px;border:1px solid #623146;background-color:rgba(35,33,33,.8)}.section-header{background-color:#623146;padding:8px 15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #b3b2b2}.section-number{font-size:18px}.section-title{font-size:16px;color:#fff;flex-grow:1}.section-subtitle{font-size:12px;color:#b3b2b2;font-style:italic;text-align: justify;}.section-content{padding:15px}.info-row{display:flex;margin-bottom:8px;align-items:center}.info-label{font-size:12px;font-weight:600;color:#623146;width:180px;text-transform:uppercase;letter-spacing:.5px}.info-separator{font-size:14px;margin:0 10px;color:#623146}.info-value{font-size:13px;flex-grow:1}.borough-select,.domain-select{background-color:#232121;border:1px solid #623146;color:#b3b2b2;padding:5px;width:100%;font-family:Montserrat,sans-serif;font-size:12px}.pantheon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:10px}.pantheon-card{border:1px solid #623146;background-color:rgba(35,33,33,.9)}.card-header{background-color:#623146;padding:5px 10px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase}.footer-seal,.sign-icon{color:#623146;font-weight:600;text-transform:uppercase}.card-content{padding:10px;font-size:11px;min-height:80px}.signs-container{display:grid;grid-template-columns:1fr 1fr;gap:15px}.sign-column{display:flex;flex-direction:column;gap:10px}.sign-item{display:flex;align-items:center}.sign-icon{font-size:12px;width:120px}.sign-desc{font-size:12px;flex-grow:1}.dossier-footer{margin-top:30px;padding:0 20px;text-align:center}.footer-seal{font-size:10px;letter-spacing:1px;border-top:1px dashed #623146;border-bottom:1px dashed #623146;padding:5px 0;margin-bottom:5px}.footer-warning{font-size:9px;color:#b3b2b2;font-style:italic}@media (max-width:700px){.pantheon-grid,.signs-container{grid-template-columns:1fr}.info-label{width:140px;font-size:11px}}</style><div class="olympus-dossier">

  <!-- Kopfbereich -->

  <div class="dossier-header">

    <div class="dossier-title">GÖTTERDOSSIER</div>

    <div class="dossier-subtitle">New Yorker Götterregister • Vertraulich</div>

    <div class="dossier-watermark">NYPD MYTHOS ABTEILUNG</div>

  </div>



  <!-- Göttliche Manifestation -->

  <div class="dossier-section">

    <div class="section-header">

      <span class="section-number">⚡</span>

      <span class="section-title">GÖTTLICHES PROFIL</span>

      <span class="section-subtitle">[welcher alte Gott | Halbgott oder welches andere Wesen erwacht in mir, oder ist längst erwacht?]</span>

    </div>

    

    <div class="section-content">

      <div class="info-row">

        <span class="info-label">MENSCHLICHE IDENTITÄT</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Aktueller menschlicher Name]</span>

      </div>

      

      <div class="info-row">

        <span class="info-label">WAHRER NAME</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Göttlicher Name oder Andere]</span>

      </div>



      <div class="info-row">

        <span class="info-label">ALTER</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Menschliches Alter]</span>

      </div>



      <div class="info-row">

        <span class="info-label">WOHNORT</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Wo wohnt euer Charakter?]</span>

      </div>

      

      <div class="info-row">

        <span class="info-label">BERUF</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Beruf]</span>

      </div>

      

      <div class="info-row">

        <span class="info-label">SPEZIES</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Mythische Wesen •  Gott •  Dämonen/Geister •  Experimentelle Wesen •  Halbgott  • Mensch ]</span>

      </div>

      

      <div class="info-row">

        <span class="info-label">DOMÄNE (Göttern)</span>

        <span class="info-separator">→</span>

        <span class="info-value">

          <select class="domain-select">

            <option>Donner & Blitz</option>

            <option>Weisheit & Strategie</option>

            <option>Wein & Ekstase</option>

            <option>Unterwelt & Reichtum</option>

            <option>Krieg & Blutrausch</option>

          </select>

        </span>

      </div>

      

         <div class="info-row">

        <span class="info-label">WISSENSWERTES ZU DEINER SPEZIES</span>

        <span class="info-separator">→</span>

        <span class="info-value">[Wer ist dein Charakter und was kann er? Welche Mächte schlummern in ihm, oder sind sie bereits ajtiv? Gibt es noch anderes über deinen Charakter zu sagen? ]</span>

      </div>

    </div>

  </div>



  <!-- Modernes Pantheon -->

  <div class="dossier-section">

    <div class="section-header">

      <span class="section-number">⚡</span>

      <span class="section-title">LEBENSLAUF</span>

      <span class="section-subtitle">[erzähle etwas über dein bisheriges, menschliches Leben]</span>

    </div>

    

    <div class="section-content">

      <div class="pantheon-grid">

        <div class="pantheon-card">

          <div class="card-header">Vorlieben & Abneigungen</div>

          <div class="card-content">[Stichpunkte mind. 5 Stück oder Fließtext]</div>

        </div>

        

        <div class="pantheon-card">

          <div class="card-header">Stärken & Schwächen</div>

          <div class="card-content">[Stichpunkte mind. 5 Stück oder Fließtext]</div>

        </div>

        

        <div class="pantheon-card">

          <div class="card-header">Wichtige Informationen</div>

          <div class="card-content">[Was gibt es noch WICHTIGES zu wissen?]</div>

        </div>

      </div>

    </div>

  </div>



  <!-- Zeichen des Erwachens -->

  <div class="dossier-section">

    <div class="section-header">

      <span class="section-number">⚡</span>

      <span class="section-title">ZEICHEN DES ERWACHENS</span>

      <span class="section-subtitle">[wie erwacht dein Charakter? Ist er schon erwacht, oder merkt er erst erste Anzeichen?]</span>

    </div>

    

    <div class="section-content">

      <div class="signs-container">

        <div class="sign-column">

          <div class="sign-item">

            <span class="sign-icon">☇ Avatarperson:</span>

            <span class="sign-desc">[Avatarperson]</span>

          </div>

          <div class="sign-item">

            <span class="sign-icon">Weitergabe?</span>

            <span class="sign-desc">[JA | NEIN]</span>

          </div>

        </div>

        

        <div class="sign-column">

          <div class="sign-item">

            <span class="sign-icon">Gesuch?</span>

            <span class="sign-desc">[Ist dein Charakter ein Gesuch?]</span>

          </div>

        </div>

      </div>

    </div>

  </div>



  <!-- Fußzeile -->

  <div class="dossier-footer">

    <div class="footer-seal">NYC GÖTTER-KLAUSEL 23-12: "Alle Götter müssen Steuererklärungen abgeben"</div>

    <div class="footer-warning">⚠️ WARNUNG: Unkontrolliertes Götterdasein kann lokale Realitätsverzerrungen verursachen</div>

  </div>

</div>
CHARACTERSTUFF
