Logo

blue neu

Logo Farbe

HEX: #084FC5 (blau)

HEX: #010101 (schwarz)

Auszeichung Farbe

HEX: FFA502 (orange)

HEX: FAFAFA (hellgrau)


2. Schriften

Schrift-Familie: Lato, sans-serif

H1

Stärke 400 | Desktop 51px | Tablet 44px | Mobil 37px

H4

Stärke 600 | Desktop 23px | Tablet 22px | Mobil 21px

H2

Stärke 700 | Desktop 32px | Tablet 30px | Mobil 28px
H5
Stärke 600 | Desktop 21px | Tablet 20px | Mobil 19px

H3

Stärke 600 | Desktop 27px | Tablet 26px | Mobil 25px

P Fließtext

Stärke 400 | Desktop 18px | Tablet 18px | Mobil 18px
Schrift-Farbe

Schwarz

Hervorhebungen

Hintergrund Farbe

HEX: #EBEBF0

CMYK: 2 / 2 / 0 / 6

RGB: 235 / 235 / 240 (Transparent 0.6)

HEX: #BA8F32

CMYK: 0 / 23 / 73 / 27

RGB: 186 / 143 / 50 (Transparent 0.16)

HEX: #dde6f2

CMYK: 9 / 5 / 0 / 5

RGB: 221 / 230 / 242

Navigation / Header / Footer Farbe

HEX: #335fba

CMYK: 73 / 49 / 0 / 27

RGB: 51 / 95 / 186

HEX: #4A4A49

CMYK: 0 / 0 / 1 / 71

RGB: 74 / 74 / 73

HEX: #fafbfe

CMYK: 2 / 1 / 0 / 0

RGB: 250 / 251 / 254

4. Button

Farbe + Schrift

Textbeispiel >>

Rand + Hover

Textbeispiel >>

5. Icons

Farbe blau oder schwarz (außer Sterne)

MA-Vorstellung

Aufzählung Hervorhebungen

Produkt Features

Teaser Hervorhebung

Teaser Hervorhebung

Aufzählung Fließtext

Kundenmeinungen

Produktsterne

Bild-Icons
graph 1
support 1
geld 1

6. Stil-Elemente

Container

Rundungen

Rahmenradius: 7px

Rand

Stärke: 1px

Schatten

Horizontal/ Vertical: 12px

Verschwommen: 7px

Weite: -8px

Trenn-Linie


Vor – und Nachteile

Infoboxen

1. Standard-Info-Box (neutral, für Tipps und allgemeine Hinweise)

Tipp zur Auswahl:
Dies ist ein Platzhaltertext für eine neutrale Info-Box.

<div style="border:1px solid #ccc; border-left:5px solid #0044cc; padding:16px; background:#f9f9f9; margin-top:24px; border-radius:6px; max-width:100%;">
<strong>Tipp zur Auswahl:</strong><br>
Dies ist ein Platzhaltertext für eine neutrale Info-Box.
</div>

 2. Blaue Infobox (wichtig, aber sachlich)

Wichtiger Hinweis

Dies ist ein Beispieltext für eine hervorgehobene Infobox mit sachlichem Fokus.

<div style="border:2px solid #0044cc; padding:24px; background:#eef3fc; margin-top:32px; border-radius:8px; max-width:100%;">
<h3 style="margin-top:0; color:#0044cc;">Wichtiger Hinweis</h3>
<p>Dies ist ein Beispieltext für eine hervorgehobene Infobox mit sachlichem Fokus.</p>
</div>

3. Orange Infobox (Hinweise, rechtliche Inhalte, sanfte Warnung)

Hinweis:
Dies ist ein Beispieltext für einen warnenden Hinweis.

<div style="border:1px solid #ccc; border-left:5px solid #ff9900; padding:16px; background:#fff8e5; margin-top:24px; border-radius:6px; max-width:100%;">
<strong>Hinweis:</strong><br>
Dies ist ein Beispieltext für einen warnenden Hinweis.
</div>

Styleguide für Grafiken (Kagels Trading)

Styleguide für Grafiken (Kagels Trading)

Hier ein kleiner Styleguide für die Gestaltung unserer Grafiken. Ich benutze dafür hauptsächlich CanvaCanva Pro lohnt sich, es macht das Arbeiten deutlich einfacher und effektiver.

Die Beispielgrafiken könnt ihr als Inspiration verwenden oder auch direkt als Template übernehmen.

Die Hauptfarbe von Kagels Trading ist Blau. Das ist die Farbe, die User auf der Website immer wieder sehen und mit Kagels verbinden. Deshalb sollten die Primärfarben in den Grafiken ebenfalls Blau sein. Natürlich muss es nicht immer exakt derselbe Blauton sein – man kann hier gut mit verschiedenen Abstufungen und Tönungen arbeiten. Im unteren Bild seht ihr z. B. eine Übersicht mit verschiedenen Blautönen, die sich am Logo orientieren. Diese eignen sich super für Hintergründe, Schattierungen, Ränder oder Icons.

Als Akzentfarbe wird Orange verwendet (#FFA500). Diese bitte sparsam einsetzen – z. B. für Hervorhebungen, Unterstreichungen oder kleine Elemente wie Labels oder Pfeile.

Die Bilder dienen generell nur als Inspiration, wie man Dinge gestalten kann. Seid gerne kreativ – wichtig ist vor allem, dass die Farbwelt zur Marke passt und wiedererkennbar bleibt. Wenn ihr mit Icons arbeitet (wie z. B. in Bild 7), achtet bitte darauf, dass der Icon-Stil einheitlich ist. Am besten funktionieren simple Outline-Icons oder flache Symbole – Hauptsache, sie passen optisch zusammen.

Bildschirmfoto 2025 05 23 um 16.10.06
Blau-Tönungen von der Logo Farbe

Tabelle

<style>
:root {
--orange: #ffa800;
--brand-blue: #3366cc;
--bg-light: #f8f9fa;
--border: #e5e5e5;
--text-main: #333;
--text-secondary: #666;
--positive: #ffa800;
--ftmo-highlight: rgba(51, 102, 204, 0.08);
--topstep-highlight: rgba(51, 102, 204, 0.08);
}
.vergleichstabelle {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.5;
color: var(--text-main);
margin: 0;
padding: 0;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
background: white;
border-radius: 6px;
overflow: hidden;
font-size: 15px;
}
.comparison-table th {
background: linear-gradient(to right, var(--brand-blue), #4b7ddb);
color: white;
font-weight: 600;
text-align: left;
padding: 12px 15px;
}
.comparison-table tbody tr:nth-child(even) {
background-color: var(--bg-light);
}
.comparison-table tbody tr:hover {
background-color: #f0f7ff;
}
.comparison-table td {
padding: 12px 15px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.company-container {
display: flex;
flex-direction: column;
position: relative;
}
.company-logo {
width: 80px;
height: 60px;
border-radius: 5px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: white;
border: 1px solid #eee;
}
.company-logo img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 5px;
}
.company-name {
font-weight: 600;
font-size: 16px;
margin-bottom: 5px;
}
.review-link {
font-size: 13px;
color: var(--brand-blue);
text-decoration: none;
}
.review-link:hover {
text-decoration: underline;
}
.capital-label, .profit-label, .cost-label {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 2px;
}
.capital-value, .profit-value, .cost-value {
font-weight: 500;
font-size: 15px;
margin-bottom: 10px;
}
.trader-advantages {
list-style: none;
padding: 0;
margin: 0;
}
.advantage-item {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
}
.advantage-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 8px;
flex-shrink: 0;
color: var(--text-main);
font-weight: bold;
font-size: 10px;
background-color: var(--positive);
}
.markets {
font-size: 13px;
color: var(--text-secondary);
margin-top: 8px;
}
.cta-container {
display: flex;
flex-direction: column;
align-items: center;
}
.cta-button {
display: inline-block;
width: 100%;
padding: 10px 0;
background: linear-gradient(to bottom, #424242, #333333);
color: white;
text-align: center;
text-decoration: none;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
margin-bottom: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
border: none;
position: relative;
overflow: hidden;
}
.cta-button:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: all 0.6s;
}
.cta-button:hover {
background: var(--lime);
color: var(--text-main);
box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.3);
transform: translateY(-1px);
}
.cta-button:hover:before {
left: 100%;
}
.discount {
font-size: 12px;
color: var(--text-secondary);
}
.discount-code {
font-weight: 600;
color: var(--text-main);
}
/* Hervorhebung für FTMO und Topstep */
.highlighted-row {
border-left: 4px solid var(--brand-blue);
background-color: var(--ftmo-highlight) !important;
}
.highlight-badge {
position: absolute;
top: -12px;
right: -12px;
background: linear-gradient(to right, #ff9800, #ff5722);
color: white;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 1;
transform: rotate(15deg);
}
/* Mobile Überschriften standardmäßig ausblenden */
.mobile-section-title {
display: none;
}
/* Mobile Optimierung */
@media (max-width: 767px) {
/* Verstecke Tabellen-Header auf mobilen Geräten */
.comparison-table thead {
display: none;
}
/* Konvertiere Tabellenzeilen zu Karten */
.comparison-table, 
.comparison-table tbody, 
.comparison-table tr {
display: block;
width: 100%;
}
/* Jeden Anbieter als Karte darstellen */
.comparison-table tr {
margin-bottom: 20px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Jede Zelle als Block darstellen */
.comparison-table td {
display: block;
position: relative;
padding: 15px;
border-bottom: 1px solid var(--border);
overflow: hidden;
}
/* Letzte Zelle ohne Border */
.comparison-table td:last-child {
border-bottom: none;
}
/* CTA Container Zentrierung aufheben */
.cta-container {
align-items: flex-start;
}
/* Highlight-Badge-Position anpassen */
.highlight-badge {
position: relative;
top: 0;
right: 0;
display: inline-block;
background: linear-gradient(to right, #ff9800, #ff5722);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: bold;
margin-top: 6px;
margin-bottom: 8px;
transform: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
text-align: center;
}
/* Abschnittstitel für mobile Ansicht einblenden */
.mobile-section-title {
display: block;
font-weight: 600;
margin-bottom: 10px;
color: var(--brand-blue);
font-size: 16px;
}
/* Abstand für mobile Ansicht */
.mobile-divider {
margin: 10px 0;
border-top: 1px solid #eee;
}
/* Logos auf mobilen Geräten größer machen */
.company-logo {
width: 60px;
height: 60px;
}
/* Firmenname in mobiler Ansicht */
.company-name {
font-size: 20px;
margin-top: 5px;
}
}
</style>
<div class="prop-comparison">
<table class="comparison-table">
<thead>
<tr>
<th width="20%">Anbieter</th>
<th width="25%">Kosten & Gewinnanteil</th>
<th width="35%">Trader-Vorteile</th>
<th width="20%">Zur Anmeldung</th>
</tr>
</thead>
<tbody>
<!-- FTMO (Hervorgehoben) -->
<tr class="highlighted-row">
<td>
<div class="company-container">
<div class="company-logo">
<img src="https://www.kagels-trading.de/wp-content/uploads/2024/08/ftmo-logo.png" alt="FTMO Logo">
</div>
<div class="company-name">FTMO</div>
<span class="highlight-badge">Beste Forex Firma</span>
<a href="https://www.kagels-trading.de/ftmo/" class="review-link">Testbericht lesen</a>
</div>
</td>
<td>
<span class="mobile-section-title">Kosten & Gewinnanteil</span>
<div class="capital-label">Startkapital:</div>
<div class="capital-value">10.000 $ - 200.000 $</div>
<div class="profit-label">Gewinnanteil:</div>
<div class="profit-value">Bis zu 90 %</div>
<div class="cost-label">Kosten:</div>
<div class="cost-value">155 $ - 1.080 $</div>
</td>
<td>
<span class="mobile-section-title">Trader-Vorteile</span>
<ul class="trader-advantages">
<li class="advantage-item">
<span class="advantage-icon">✓</span>
Kapital bis zu 400.000 $
</li>
<li class="advantage-item">
<span class="advantage-icon">✓</span>
Keine Zeitbegrenzung in der Challenge
</li>
<li class="advantage-item">
<span class="advantage-icon">✓</span>
Positionen über Nacht & Wochenende
</li>
<li class="advantage-item">
<span class="advantage-icon">✓</span>
MetaTrader 4, 5 & cTrader
</li>
<li class="advantage-item">
<span class="advantage-icon">✓</span>
Automatisierter Handel erlaubt
</li>
<li class="advantage-item">
<span class="advantage-icon">✓</span>
Auszahlungen in 1–2 Tagen
</li>
</ul>
<div class="markets">Forex, Indizes, Rohstoffe, Krypto</div>
</td>
<td>
<span class="mobile-section-title">Zur Anmeldung</span>
<div class="cta-container">
<a href="https://ftmo.com/de/" class="cta-button">Zum Anbieter</a>
<div class="discount">Rabatt: <span class="discount-code">FTMO5 (5%)</span></div>
</div>
</td>
</tr>
Anbieter Kosten & Gewinnanteil Trader-Vorteile Zur Anmeldung
FTMO
Beste Forex Firma Testbericht lesen
Kosten & Gewinnanteil
Startkapital:
10.000 $ – 200.000 $
Gewinnanteil:
Bis zu 90 %
Kosten:
155 $ – 1.080 $
Trader-Vorteile
  • Kapital bis zu 400.000 $
  • Keine Zeitbegrenzung in der Challenge
  • Positionen über Nacht & Wochenende
  • MetaTrader 4, 5 & cTrader
  • Automatisierter Handel erlaubt
  • Auszahlungen in 1–2 Tagen
Forex, Indizes, Rohstoffe, Krypto
Zur Anmeldung
Zum Anbieter
Rabatt: FTMO5 (5%)