Gestaltungsraster für HTML-Ausgaben

Farben

Markenfarben bleiben in beiden Modi identisch. Nur Flächen- und Text-Tokens werden im Dark Mode überschrieben — deshalb nie eine Farbe hart notieren, immer den Token verwenden.

Markenfarben

Die vier Balkenfarben

Eigene Reihe für das Balken- und Ring-Motiv. --bar-2 gibt es in keinem anderen Token — es ist der dunkelste Ton der Marke.

Der Ring

Der Ring ist der aufgerollte Balken — dieselben Proportionen, dieselben Farben. Er greift die Bildmarke auf und ist das einzige bewegte Element im Layout.

Vier Lücken à 5,69°. Summe exakt 360°.

Umsetzung

pathLength="360" ist der Trick: dadurch sind stroke-dasharray und stroke-dashoffset unmittelbar Gradzahlen, die Tabelle oben steht also 1:1 im CSS. Die Gruppe wird um −90° gedreht, damit 0° auf 12 Uhr liegt.

<svg class="ring" viewBox="0 0 200 200" aria-hidden="true">
  <g transform="rotate(-90 100 100)">   <!-- 0 Grad = 12 Uhr -->
    <circle class="seg s1" cx="100" cy="100" r="94" pathLength="360"/>
    <circle class="seg s2" cx="100" cy="100" r="94" pathLength="360"/>
    <circle class="seg s3" cx="100" cy="100" r="94" pathLength="360"/>
    <circle class="seg s4" cx="100" cy="100" r="94" pathLength="360"/>
  </g>
</svg>

/* fill:none gehoert auf die gemeinsame Klasse, nicht auf einen Elternselektor */
.seg { fill: none; stroke-width: 2.2; stroke-linecap: round; }

/* dank pathLength="360" sind die Werte direkt Gradzahlen */
.s1 { stroke: var(--bar-1); stroke-dasharray:  40.39 319.61; stroke-dashoffset:    0; }
.s2 { stroke: var(--bar-2); stroke-dasharray:  82.61 277.39; stroke-dashoffset:  -46.07; }
.s3 { stroke: var(--bar-3); stroke-dasharray:  82.34 277.66; stroke-dashoffset: -134.37; }
.s4 { stroke: var(--bar-4); stroke-dasharray: 131.91 228.09; stroke-dashoffset: -222.40; }

.ring { animation: ring-spin 70s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

Icons

Zwei Quellen mit klarer Aufgabenteilung: eigene Fachsymbole für medizinische Inhalte, Phosphor für die Bedienoberfläche. Alle inline eingebunden und über currentColor umfärbbar — nie als Hintergrundbild, sonst lässt sich nichts umfärben.

Eigene Fachsymbole

Stethoskop

Kardiogramm

Lunge

Blutdruck

Termine

Bedienoberfläche · Phosphor

Badges & Tags

Kleine Auszeichnungen für Status, Kategorien und Leistungs-Schlagworte. Farbe nach --karte, damit die Zuordnung zu einer Leistung erhalten bleibt.

Abstände

Grundmaß ist 8px. Sektionen atmen mit 66–100 px — die Ruhe ist Teil der Wirkung und wird nicht aus Platzmangel verkleinert.

Komponenten

Jede Karte bekommt ihre Farbe über eine lokale Variable --karte. Das CSS bleibt dadurch farbagnostisch — eine Karte umzufärben heißt, ein Attribut zu ändern.

<a class="karte" href="..." style="--karte: var(--bar-3)">
  <span class="karte-icon"><svg viewBox="0 0 24 24">...</svg></span>
  <h3>Titel</h3>
  <p>Beschreibung.</p>
  <ul class="tags"><li>Stichwort</li></ul>
</a>

<style>
.karte { position: relative; overflow: hidden; padding-top: 38px; }
.karte::before {                       /* Akzentbalken oben links */
  content: ""; position: absolute; top: 0; left: 0;
  height: 6px; width: 64px; background: var(--karte);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.karte:hover::before { width: 100%; }
.karte-icon {                          /* Farbe bei 18 %, mit Fallback */
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--karte) 18%, transparent);
  color: var(--karte);
}
.karte:hover .karte-icon { background: var(--karte); color: #fff; }
</style>

Buttons

Icons

Ausschließlich Inline-SVG mit stroke: currentColor, Strichstärke 1,6, runde Enden. Als <img> geladene SVGs sind nicht per CSS umfärbbar und verschwinden im Dark Mode — deshalb inline einbetten.

Sieben Regeln

1. Keine harten Farbwerte. Alles über Tokens, sonst bricht der Dark Mode.
2. Markenfarben nie als Textfarbe auf hellem Grund — nur Flächen, Rahmen, Icons.
3. Balkenlängen sind ungleich. 154 : 315 : 314 : 503, nicht vier gleiche Blöcke.
4. Der Ring braucht vier Lücken, nicht drei. Faktor 0,98341 einrechnen.
5. Icons inline, nie als <img> — sonst nicht umfärbbar.
6. overflow-x: clip statt hidden auf html und body. hidden macht position: sticky kaputt.
7. Floating-Elemente brauchen pointer-events: none am Container, auto nur auf den sichtbaren Teilen — sonst schluckt die unsichtbare Fläche Klicks auf allem darunter.

Design Tokens

Alle Werte, Texte, Assets und Links dieses Projekts als strukturierte Datei — als Grundlage für KI-Werkzeuge, Übersetzungen und die Weitergabe an Dienstleister.