kalina-ci/templates/page.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>«Seitentitel» — KALINA</title>
<!-- Einzelne Datei, keine fremden Hosts: keine CDN-Links, keine externen Schriften,
     keine Bilder von außen. Der Stil steht inline, damit die Seite überall gleich aussieht. -->
<style>
  :root{--ink:#0b0f14;--bone:#f5f5ef;--rot:#c1121f;--rot-dunkel:#a50f1a;--steel:#3a4250;
        --muted:#8a94a2;--sans:"DejaVu Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bone);color:var(--ink);font:400 17px/1.6 var(--sans)}
  .kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
        padding:10px 24px;background:var(--bone);border-bottom:1px solid var(--steel)}
  .kopf svg{display:block;width:34px;height:34px}
  .wortmarke{font-weight:900;font-size:21px;letter-spacing:.04em}
  .wortmarke i{font-style:normal;color:var(--rot)}
  main{max-width:52rem;margin:0 auto;padding:40px 24px 64px}
  .kicker{font:700 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rot)}
  h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.01em;margin:14px 0 8px}
  .lead{font-size:19px;color:var(--steel);margin:0 0 28px}
  h2{font-size:20px;margin:36px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--steel)}
  h2::after{content:"";display:block;width:42px;height:3px;background:var(--rot);margin-top:-2px}
  ul{padding-left:20px}
  table{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0}
  thead th{background:var(--ink);color:var(--bone);text-align:left;padding:8px 10px}
  td{border-bottom:1px solid var(--steel);padding:8px 10px;vertical-align:top}
  .plakette{border:1px solid var(--steel);border-top:3px solid var(--rot);background:#fff;
            padding:20px;margin:28px 0;display:flex;gap:18px;align-items:flex-start}
  .plakette svg{width:96px;height:96px;flex:0 0 auto}
  footer{border-top:1px solid var(--steel);margin-top:48px;padding:16px 24px;color:var(--muted);
         font-size:13px;display:flex;justify-content:space-between;gap:12px}
</style>
</head>
<body>

<header class="kopf">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" aria-label="KALINA Mark">
    <circle cx="120" cy="120" r="112" fill="#0e1419" stroke="#2a323c" stroke-width="2"/>
    <g fill="none" stroke="#f5f5ef" stroke-width="30" stroke-linecap="square" stroke-linejoin="miter">
      <path d="M84,72 L84,168"/><path d="M100,120 L176,64"/><path d="M100,124 L176,176"/>
    </g>
    <g fill="#c1121f">
      <circle cx="176" cy="64" r="2.2"/><circle cx="189" cy="64" r="2.2"/><circle cx="182.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="75.3" r="2.2"/><circle cx="182.5" cy="75.3" r="2.2"/>
      <circle cx="176" cy="176" r="2.2"/><circle cx="189" cy="176" r="2.2"/><circle cx="182.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="187.3" r="2.2"/><circle cx="182.5" cy="187.3" r="2.2"/>
    </g>
    <circle cx="100" cy="122" r="4.5" fill="#c1121f"/>
  </svg>
  <span class="wortmarke">KAL<i>I</i>NA</span>
</header>

<main>
  <p class="kicker">«Rubrik, z. B. Bericht»</p>
  <h1>«Seitentitel»</h1>
  <p class="lead">«Ein Absatz, der den Inhalt in zwei Sätzen zusammenfasst.»</p>

  <h2>«Abschnitt»</h2>
  <p>«Text. Belegte Zahlen mit Quelle nennen; Schätzungen als Schätzung kennzeichnen.»</p>
  <ul><li>«Punkt»</li><li>«Punkt»</li></ul>

  <h2>«Abschnitt mit Tabelle»</h2>
  <table>
    <thead><tr><th>Position</th><th>Wert</th></tr></thead>
    <tbody>
      <tr><td>«…»</td><td>«…»</td></tr>
      <tr><td>«…»</td><td>«…»</td></tr>
    </tbody>
  </table>

  <aside class="plakette">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" aria-label="KALINA Mark">
      <circle cx="120" cy="120" r="112" fill="#0e1419" stroke="#2a323c" stroke-width="2"/>
      <g fill="none" stroke="#f5f5ef" stroke-width="30" stroke-linecap="square" stroke-linejoin="miter">
        <path d="M84,72 L84,168"/><path d="M100,120 L176,64"/><path d="M100,124 L176,176"/>
      </g>
      <g fill="#c1121f">
        <circle cx="176" cy="64" r="2.2"/><circle cx="189" cy="64" r="2.2"/><circle cx="182.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="52.7" r="2.2"/><circle cx="169.5" cy="75.3" r="2.2"/><circle cx="182.5" cy="75.3" r="2.2"/>
        <circle cx="176" cy="176" r="2.2"/><circle cx="189" cy="176" r="2.2"/><circle cx="182.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="164.7" r="2.2"/><circle cx="169.5" cy="187.3" r="2.2"/><circle cx="182.5" cy="187.3" r="2.2"/>
      </g>
      <circle cx="100" cy="122" r="4.5" fill="#c1121f"/>
    </svg>
    <div>
      <strong>«Was die Marke bedeutet»</strong>
      <p>Kalina = Vogelbeere (Viburnum): Ausdauer, Lebenskraft, Jugend. Das K im Siegel ist der Name,
      das i der Wortmarke ist die Beere. «Nur setzen, wenn die Seite die Marke erklären soll.»</p>
    </div>
  </aside>
</main>

<footer>
  <span>KALINA · «Seitentitel»</span>
  <span>Stand «TT.MM.JJJJ» · © «JJJJ» kalina.si</span>
</footer>

</body>
</html>