Hinweise Entwürfe Layouts

1. Standard (grau, neutral)

Ergebnis: grauer Balken, hellgraues Icon, kein Hintergrund

Info: Dies ist eine neutrale Hinweisbox ohne Hintergrundfarbe.

<div class="tip-text-car tip-text-car--gray">
  <div class="tip-text-car__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="tip-text-car__content">
    <strong>Info:</strong> Dies ist eine neutrale Hinweisbox ohne Hintergrundfarbe.
  </div>
</div>

✅ Stil: dezent, neutral, ideal für normale Hinweise
🎨 Farben: Grautöne (#ddd / #444)
💫 Hover: aktiv (leichtes Anheben)

2. Info (blauer Balken + blaues Icon)

Ergebnis: blauer Balken, hellblaues Icon, kein Hintergrund

Info: Dies ist eine Informationsbox mit PS-Consulting-Blau.

<div class="tip-text-car tip-text-car--blue">
  <div class="tip-text-car__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="tip-text-car__content">
    <strong>Info:</strong> Dies ist eine Informationsbox mit PS-Consulting-Blau.
  </div>
</div>

✅ Stil: seriös, ruhig
🎨 Farben: Markenblau (#12204F)
💫 Hover: aktiv

3. Warn-/Hinweisbox mit rotem Balken

Ergebnis: roter Balken, hellrotes Icon, kein Hintergrund

Hinweis: Diese Version nutzt das Markenrot ohne Hintergrund.

<div class="tip-text-car tip-text-car--red">
  <div class="tip-text-car__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="tip-text-car__content">
    <strong>Hinweis:</strong> Diese Version nutzt das Markenrot ohne Hintergrund.
  </div>
</div>

✅ Stil: aufmerksam, aber nicht aufdringlich
🎨 Farben: Rot (#bd121f)
💫 Hover: aktiv

4. Hervorgehobener Hinweis (hellroter Hintergrund)

Ergebnis: roter Balken, hellroter Hintergrund, rotes Icon

Hinweis: Dieses Seminar ist besonders empfehlenswert, wenn du dich erstmals auf eine PMI®-Prüfung vorbereitest.

<div class="tip-text-car tip-text-car--gray">
  <div class="tip-text-car__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="tip-text-car__content">
    <strong>Hinweis:</strong> Dieses Seminar ist besonders empfehlenswert, wenn du dich erstmals auf eine PMI®-Prüfung vorbereitest.
  </div>
</div>

✅ Stil: deutliche Hervorhebung (z. B. für wichtige Informationen)
🎨 Farben: Hellrot (#fdf4f4 Hintergrund + #bd121f Balken/Icon)
💫 Hover: aktiv

5. Ruhige, statische Variante (kein Hover)

Ergebnis: grauer Balken, kein Icon, kein Hover

Info: Diese Box ist statisch – ohne Hover-Effekte.

<div class="tip-text-car tip-text-car--static-blue">
  <div class="tip-text-car__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="tip-text-car__content">
    <strong>Info:</strong> Diese Box ist statisch – ohne Hover-Effekte.
  </div>
</div>

✅ Stil: ruhig, neutral, keine Bewegung
🎨 Farben: Grauer Balken + blaues Icon
💫 Hover: deaktiviert

6. Kombi: Grauer Balken + graues Icon + hellroter Hintergrund

Ergebnis: grauer Balken, hellgraues Icon, hellroter Hintergrund

Hinweis: Grauer Rahmen mit leicht rotem Hintergrund zur dezenten Hervorhebung.

<div class="tip-text-car tip-text-car--highlight-grayred">
  <div class="tip-text-car__icon">
    <i class="fas fa-info-circle"></i>
  </div>
  <div class="tip-text-car__content">
    <strong>Hinweis:</strong> Grauer Rahmen mit leicht rotem Hintergrund zur dezenten Hervorhebung.
  </div>
</div>

✅ Stil: neutral, aber leicht hervorgehoben
🎨 Farben: hellrot (#fdf4f4) + Grau (#ddd / #444)
💫 Hover: aktiv

(CSS siehe voriger Schritt mit .tip-text-car–highlight-grayred)

7. Ruhige, statische Variante (kein Hover), Kein Icon

Ergebnis: blauer Balken, kein Icon, kein Hover

Info: Diese Box ist statisch – ohne Icon, mit blauem Balken.

<div class="tip-text-car tip-text-car--static-blue tip-text-car--noicon">
  <div class="tip-text-car__content">
    <strong>Info:</strong> Diese Box ist statisch – ohne Icon, mit blauem Balken.
  </div>
</div>

✅ Stil: ruhig, neutral, keine Bewegung
🎨 Farben: GBlauer Balken + kein Icon
💫 Hover: deaktiviert

8. Ruhige, statische Variante (kein Hover), Kein Icon

Ergebnis: roter Balken, kein Icon, kein Hover

Hinweis: Diese Box ist statisch – ohne Icon, mit rotem Balken.

<div class="tip-text-car tip-text-car--static-red tip-text-car--noicon">
  <div class="tip-text-car__content">
    <strong>Hinweis:</strong> Diese Box ist statisch – ohne Icon, mit rotem Balken.
  </div>
</div>

✅ Stil: ruhig, neutral, keine Bewegung
🎨 Farben: roter Balken + kein Icon
💫 Hover: deaktiviert

9. Ruhige, statische Variante (kein Hover), Kein Icon

Ergebnis: grauer Balken, kein Icon, kein Hover

Info: Diese Box ist statisch – ohne Icon, mit grauem Balken.

<div class="tip-text-car tip-text-car--static-gray tip-text-car--noicon">
  <div class="tip-text-car__content">
    <strong>Info:</strong> Diese Box ist statisch – ohne Icon, mit grauem Balken.
  </div>
</div>

✅ Stil: ruhig, neutral, keine Bewegung
🎨 Farben: grauer Balken + kein Icon
💫 Hover: deaktiviert

📋 Kurzüberblick

Variante	Klassenkombination	Wirkung	Hover
Standard grau	`tip-text-car tip-text-car--gray`	neutral	✅
Info blau	`tip-text-car tip-text-car--blue`	ruhig, informativ	✅
Hinweis rot	`tip-text-car tip-text-car--red`	auffällig, aufmerksam	✅
Highlight rot	`tip-text-car tip-text-car--highlight-red`	stark hervorgehoben	✅
Statisch blau	`tip-text-car tip-text-car--static-blue`	neutral, ohne Hover	❌
Grau + hellrot	`tip-text-car tip-text-car--highlight-grayred`	dezent hervorgehoben	✅
Blau	`tip-text-car tip-text-car--static-blue tip-text-car--noicon`	#12204F	❌
Rot	`tip-text-car tip-text-car--static-red tip-text-car--noicon`	#bd121f	❌
Grau	`tip-text-car tip-text-car--static-gray tip-text-car--noicon`	#ddd	❌