/*
Theme Name: Rasha Immobilien
Theme URI: https://www.immobilien-rashagmbh.de
Description: Child-Theme für Kadence. Enthält die Farbpalette und Typografie der Rasha GmbH Immobilien und färbt zugleich die Arokora-Plugins mit.
Author: Arokora Webdesign
Author URI: https://arokora.com
Template: kadence
Version: 1.0.0
Text Domain: rasha-immobilien
*/
/* ==========================================================================
1. Farbpalette
Abgeleitet aus Logo und Flyer. Das metallische Gold des Logos lässt sich
in Flächen nicht abbilden – dafür gibt es zwei Goldtöne: einen helleren
für dunkle Untergründe, einen dunkleren für helle. Der dunklere hat auf
Creme genug Kontrast, um lesbar zu sein.
========================================================================== */
:root {
--rasha-gold: #c9a227; /* Akzent auf hellem Grund */
--rasha-gold-hell: #d9b96a; /* Akzent auf dunklem Grund */
--rasha-gold-tief: #8a6a1c; /* Hover, Linien, Ränder */
--rasha-schwarz: #101010; /* Panels, Header, Footer */
--rasha-schwarz-weich: #1c1c1c; /* abgesetzte dunkle Flächen */
--rasha-creme: #f6f2ea; /* Seitenhintergrund */
--rasha-creme-tief: #ebe5d9; /* abgesetzte helle Flächen */
--rasha-text: #1a1a1a;
--rasha-text-leise: #6b6459; /* warmes Grau, kein kaltes Grau */
--rasha-linie: #ddd5c6;
--rasha-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--rasha-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
/* ==========================================================================
2. Arokora-Plugins mitfärben
Die drei Plugins lesen dieselben Variablennamen. Einmal hier gesetzt,
passen Objektliste, Exposé, Suchauftrag und Kontaktformular zum Rest.
========================================================================== */
.arokora-immo,
.arokora-sa,
.arokora-forms {
--ai-ink: var(--rasha-text);
--ai-muted: var(--rasha-text-leise);
--ai-accent: var(--rasha-schwarz);
--ai-accent-ink: var(--rasha-gold-hell);
--ai-line: var(--rasha-linie);
--ai-surface: #ffffff;
--ai-surface-alt: var(--rasha-creme);
--ai-display: var(--rasha-display);
--ai-radius: 2px;
--ai-wrap: 1200px;
}
/* Badges auf den Objektkarten im Flyer-Look: schwarz mit Goldschrift. */
.arokora-immo .ai-badge {
background: var(--rasha-schwarz);
color: var(--rasha-gold-hell);
border: 1px solid var(--rasha-gold);
}
.arokora-immo .ai-badge--muted {
background: var(--rasha-text-leise);
color: #ffffff;
border-color: transparent;
}
/* Preis und Kicker in Gold – wie die Zahlenblöcke auf dem Flyer. */
.arokora-immo .ai-card-price,
.arokora-immo .ai-pricebox-value {
color: var(--rasha-gold-tief);
}
.arokora-immo .ai-card-kicker,
.arokora-immo .ai-eyebrow,
.arokora-immo .ai-pricebox-label,
.arokora-immo .ai-contact-label {
color: var(--rasha-gold-tief);
}
/* Aufzählungsstriche und Trenner in Gold. */
.arokora-immo .ai-features li::before {
background: var(--rasha-gold);
height: 2px;
}
/* Auswahlchips im Suchauftrag. */
.arokora-sa .sa-choice:has( input:checked ) {
background: var(--rasha-schwarz);
color: var(--rasha-gold-hell);
border-color: var(--rasha-gold);
}
/* ==========================================================================
3. Typografie
Der Flyer arbeitet mit kräftigen Versalien und einer zweifarbigen
Überschrift: erste Zeile schwarz, zweite Zeile gold. Das ist das
markanteste Gestaltungsmerkmal und wird hier aufgegriffen.
========================================================================== */
.rasha-eyebrow {
display: block;
margin-bottom: 12px;
color: var(--rasha-gold-tief);
font-family: var(--rasha-display);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* Zweifarbige Überschrift: Mehrfamilienhaus mit 5 Einheiten
*/
.rasha-gold {
color: var(--rasha-gold-tief);
}
.rasha-dunkel .rasha-gold,
.rasha-dunkel .rasha-eyebrow {
color: var(--rasha-gold-hell);
}
/* Goldene Haarlinie als Trenner, wie die Linien unter dem Logo. */
.rasha-linie::after {
content: "";
display: block;
width: 64px;
height: 2px;
margin-top: 18px;
background: linear-gradient( 90deg, var(--rasha-gold) 0%, rgba( 201, 162, 39, 0 ) 100% );
}
/* ==========================================================================
4. Dunkle Abschnitte
Für Hero, Zahlen-Streifen und Call-to-Action – das schwarze Panel mit
Goldrahmen ist das wiederkehrende Element des Flyers.
========================================================================== */
.rasha-dunkel {
background: var(--rasha-schwarz);
color: #f0ece4;
}
.rasha-dunkel h1,
.rasha-dunkel h2,
.rasha-dunkel h3 {
color: #ffffff;
}
.rasha-panel {
border: 1px solid var(--rasha-gold-tief);
border-radius: 2px;
padding: 32px;
background: var(--rasha-schwarz-weich);
}
/* Zahlenblock: große Zahl in Gold, Bezeichnung darunter. */
.rasha-stat-zahl {
display: block;
font-family: var(--rasha-display);
font-size: clamp( 2.2rem, 5vw, 3.4rem );
font-weight: 700;
line-height: 1;
color: var(--rasha-gold-hell);
}
.rasha-stat-label {
display: block;
margin-top: 6px;
font-size: 0.86rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #c8c2b6;
}
/* Runde Icon-Plakette wie auf dem Flyer. */
.rasha-icon-kreis {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--rasha-gold);
color: var(--rasha-schwarz);
}
.rasha-dunkel .rasha-icon-kreis {
background: var(--rasha-gold);
color: var(--rasha-schwarz);
}
/* ==========================================================================
5. Kadence-Schaltflächen angleichen
========================================================================== */
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill,
.kadence-button-primary {
background: var(--rasha-schwarz);
color: var(--rasha-gold-hell);
border: 1px solid var(--rasha-gold);
border-radius: 2px;
letter-spacing: 0.04em;
}
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill:hover,
.kadence-button-primary:hover {
background: var(--rasha-gold);
color: var(--rasha-schwarz);
border-color: var(--rasha-gold);
}
/* ==========================================================================
6. Barrierefreiheit
Gold auf Weiß reicht für Fließtext nicht aus. Deshalb: Gold nur für
Akzente, Linien, Icons und einzelne Überschriftenteile – niemals für
längere Textpassagen. Diese Regel macht das sichtbar, falls es doch
jemand versucht.
========================================================================== */
p.rasha-gold,
li.rasha-gold {
color: var(--rasha-text);
}
:where( a, button, input, select, textarea ):focus-visible {
outline: 2px solid var(--rasha-gold);
outline-offset: 3px;
}
@media ( prefers-reduced-motion: reduce ) {
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ==========================================================================
7. Klassennamen der Editor-Blockstile
register_block_style() erzeugt Klassen nach dem Muster is-style-.
========================================================================== */
.is-style-rasha-eyebrow {
margin-bottom: 12px;
color: var(--rasha-gold-tief);
font-family: var(--rasha-display);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.is-style-rasha-linie::after {
content: "";
display: block;
width: 64px;
height: 2px;
margin-top: 18px;
background: linear-gradient( 90deg, var(--rasha-gold) 0%, rgba( 201, 162, 39, 0 ) 100% );
}
.is-style-rasha-dunkel {
background: var(--rasha-schwarz);
color: #f0ece4;
}
.is-style-rasha-dunkel h1,
.is-style-rasha-dunkel h2,
.is-style-rasha-dunkel h3 {
color: #ffffff;
}
.is-style-rasha-dunkel .is-style-rasha-eyebrow {
color: var(--rasha-gold-hell);
}
.is-style-rasha-panel {
padding: 32px;
border: 1px solid var(--rasha-gold-tief);
border-radius: 2px;
background: var(--rasha-schwarz-weich);
color: #f0ece4;
}