ganz oben in der Karte —
* ohne Klasse, weil Kadence ihre Groesse ueber eine Regel je Block setzt und
* die beim Import faellt.
*/
.start-text__reihe:not(.start-text__reihe--1) .start-text__box > div:first-child {
font-family: var(--font-body);
font-size: 70px;
line-height: 1;
font-weight: 300;
color: var(--color-gold);
margin-bottom: 14px;
}
.inhaltsseite .start-text__reihe:not(.start-text__reihe--1) .start-text__box h4 {
margin: 0 0 14px;
font-family: "Roboto Condensed", sans-serif;
font-size: 23.8px;
line-height: 1.4;
font-weight: 400;
color: #000;
}
.start-text__reihe:not(.start-text__reihe--1) .start-text__box p { margin: 0; }
.start-text__reihe:not(.start-text__reihe--1) .start-text__box p + p { margin-top: 14px; }
@media (max-width: 1024px) {
.start-text__reihe { gap: 24px; }
.start-text__reihe--3,
.start-text__reihe--4,
.start-text__reihe--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
/*
* Der Titel im Kasten muss mit: seit die Ueberschriften der Leiter aus
* components/seitentext.css auf dem Telefon kleiner werden (h2 20, h3
* 18), stand er mit seinen 23.8 Punkten groesser da als die
* Kapitelueberschrift darueber. Er folgt jetzt den Stufen der h3, in
* deren Groesse er auch am Schreibtisch liegt.
*/
.inhaltsseite .start-text__reihe:not(.start-text__reihe--1) .start-text__box h4 { font-size: 20px; }
}
@media (max-width: 600px) {
.start-text__reihe,
.start-text__reihe--2,
.start-text__reihe--3,
.start-text__reihe--4,
.start-text__reihe--5 { grid-template-columns: 1fr; }
.start-text__reihe:not(.start-text__reihe--1) .start-text__box > div:first-child { font-size: 54px; }
.inhaltsseite .start-text__reihe:not(.start-text__reihe--1) .start-text__box h4 { font-size: 18px; }
}
/* ------------------------------------------------ Aufzaehlung mit Symbol */
/*
* Kadence legt im Export nur eine leere Huelle ab und zeichnet das Symbol
* erst im Browser. Ohne das Plugin blieben die Haken vor den Vorzuegen leer.
* build/kadence.js setzt die drei Zeichnungen ein, die vorkommen, und
* benennt die Klassen auf unsere eigenen um.
*
* Gemessen an realestepona.com/sell-your-property/:
* Liste Raster, Abstand 10, ohne Punkte
* Symbol 20 x 20, Strich rgb(105, 164, 59), 10 Luecke zum Text
* Text 20 / 28.9
*/
.start-text__inhalt .text-symbolliste {
display: grid;
gap: 10px;
/* Im Original ohne Rand — die 10 unten kamen oben auf das Polster der Karte. */
margin: 0;
padding: 0;
list-style: none;
}
.start-text__inhalt .text-symbolliste > li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 0;
/*
* Die Groesse kommt vom Block selbst (siehe symbollistenMassnehmen in
* build/kadence.js): 18px in der Gegenueberstellung auf
* /real-estate-agent-estepona/, 20px in den Vorzuegen auf
* /sell-your-property/. 20px ist der Rueckfall, wenn der Block keine
* nennt.
*/
font-size: inherit;
/*
* Die Zeilenhoehe kommt aus dem Fliesstext und wird nicht mit der
* Schriftgroesse groesser — im Original stehen die Punkte der
* Gegenueberstellung in 18px auf 28.9px Zeile.
*/
line-height: inherit;
list-style: none;
}
.start-text__inhalt .text-symbolliste { font-size: 20px; }
.start-text__inhalt .text-symbolliste > li::marker { content: none; }
.text-symbol {
flex: 0 0 20px;
width: 20px;
height: 20px;
/* Auf die erste Textzeile ausgerichtet, nicht auf den Kastenanfang. */
margin-top: 4px;
color: rgb(105, 164, 59);
}
@media (max-width: 767px) {
.start-text__inhalt .text-symbolliste { font-size: 17px; }
}
/* --------------------------------------------------------- Knopf im Text */
/*
* Knoepfe, die im Text stehen ("Get into contact"). Kadence legt sie teils
* nur als Blockangabe ab; build/kadence.js baut daraus ein
. Aussehen wie
* die uebrigen Knoepfe der Seite.
*/
.start-text__inhalt .text-knopf,
.start-text__inhalt .kt-button {
display: inline-block;
/* Ohne eigenen Rand: der Abstand kommt aus dem Polster der Reihe. */
margin: 0;
/* Gemessen am Original: 44px hoch, 2px Sperrung, Zeile 24. */
padding: 11px 28px 9px;
border-radius: 20px;
background: var(--color-gold);
color: #fff;
font-size: 15px;
font-weight: 400;
line-height: 24px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s;
}
.start-text__inhalt .text-knopf:hover,
.start-text__inhalt .kt-button:hover { background: #202732; color: #fff; }
/* Steht der Knopf allein in seinem Absatz, sitzt er mittig wie im Original. */
/*
* Steht der Knopf allein in seinem Absatz, sitzt er mittig wie im Original —
* ohne eigenen Rand. Der Abstand kommt aus dem Polster der Reihe.
*/
.start-text__inhalt .text-knopf:only-child { display: block; width: max-content; margin-inline: auto; }
/* --------------------------------- Textspalte und Schriften der Inhalte */
/*
* Die Inhaltsseiten sind breiter gesetzt als die Listenseiten. Gemessen an
* realestepona.com bei 1600 Fensterbreite, jeweils dieselbe Textstelle:
*
* Reihe ohne maxWidth 1360 breit, linker Rand 120 (Einleitung)
* Reihe mit maxWidth 1200, darin 3 Karten zu 379 (Preispakete)
* H2 Roboto Condensed 44.2 / 53.04 / Gewicht 300
*
* Auf den Listenseiten bleibt es bei 960 — dort ist der Text ein Artikel
* und keine Seitenanlage.
*/
.inhaltsseite .start-text__inhalt {
max-width: none;
/*
* Das Mass des Fliesstextes, damit auch blosse aus dem Export es
* erben. Ohne das fielen sie auf die Groesse des Dokuments (18) zurueck,
* waehrend im Original 17 dastand — zu sehen an "Selling your Property
* with" ueber der Gegenueberstellung.
*/
font-size: 17px;
line-height: 28.9px;
}
/*
* Die Ueberschriften der Inhaltsseiten stehen in
* components/seitentext.css — dieselbe Leiter wie auf allen anderen Seiten.
*
* Hier standen zwei Saetze nebeneinander, beide am Original gemessen:
*
* ausserhalb des Artikels im Artikel
* h2 Condensed 44.2 / 53.04 / 300 Roboto 40.8 / 48.96 / 600
* h3 Condensed 30.6 / 42.84 / 300 Roboto 22.1 / 30.94 / 600
* h4 Condensed 23.8 / 33.32 / 400 Roboto 20.4 / 28.56 / 600
* h5 — Roboto 20.4 / 30.6 / 600
*
* Der Unterschied kam aus dem alten Theme: der Artikelteil trug dort die
* Klasse "ownersContent" und damit Roboto in schweren Schnitten. Auf
* /rental-services/ standen deshalb drei Schriftbilder auf einer Seite. Das
* ist aufgegeben; es gilt die Leiter der Listenseiten, auch das Versal der
* h3 und h5 faellt weg.
*/
/*
* Verweise im Fliesstext stehen im helleren Gold. Gemessen auf vier Seiten
* des Originals, immer #CCAB86 — das var(--color-gold), das hier galt, kommt von der
* Startseite und war hier falsch.
*/
.inhaltsseite .start-text__inhalt a:not(.text-knopf):not(.kt-button) { color: #CCAB86; }
/*
* Eine Seite, die ganz Artikel ist: /sell-your-property/selling-property-
* in-estepona/. Im Original steht sie in 800 Punkten, mittig — gemessen
* bei 1500 Fensterbreite, Inhalt von 350 bis 1150.
*/
.inhaltsseite .start-text__inhalt--artikel {
max-width: 800px;
margin-inline: auto;
}
/*
* Ein durchlaufender Rechtstext (Datenschutz) hat keine Reihen, die den
* Abstand tragen: dort steht jede Ueberschrift mitten im Fluss und braucht
* ihn selbst. Auf den uebrigen Seiten waere das falsch — da kommt die Luft
* aus dem Polster der Reihe, und die Ueberschrift sitzt mit -6 sogar leicht
* darueber.
*
* Muss hinter den Artikelregeln stehen: beide sind gleich stark, es
* entscheidet die Reihenfolge.
*/
.inhaltsseite .rechtstext h1 { margin-bottom: 24px; }
.inhaltsseite .rechtstext h2 { margin-top: 48px; }
.inhaltsseite .rechtstext h3 { margin-top: 32px; }
/*
* Keine Regel fuer das erste Kind mehr: Rand und Polster der Ueberschriften
* stehen am Block und werden uebernommen (siehe ueberschriftenMassnehmen in
* build/kadence.js). Eine Regel hier riete nur daran herum — auf
* /sell-your-property/ hat die zweite h2 im Original 40 oben, obwohl sie das
* erste Kind ihrer Spalte ist.
*/
/*
* Eine eingeengte Reihe mit einer Spalte ist der Artikelteil: Reihe 1200,
* Seitenabstand 120, innen also 960 — wie auf der Live-Seite. Eine
* eingeengte Reihe mit mehreren Spalten sind die Karten, die stehen in
* vollen 1200.
*/
.inhaltsseite .start-text__reihe--schmal {
max-width: 1200px;
margin-inline: auto;
}
/*
* Kartenreihen auf dem Telefon: im Satzspiegel, und sechs Kaesten statt
* zweimal drei.
*
* Der Export gibt ihnen dort ein eigenes Seitenpolster von 20, waehrend
* Ueberschrift und Fliesstext darueber bis an den Rand der Spalte laufen —
* die Kaesten standen eingerueckt unter einem Text, der weiter nach aussen
* reicht. Die Breite am Schirm (1200, eingerueckt) bleibt wie im Original.
*
* Und zwei Reihen zu dreien sind sechs Kaesten und nicht zwei Gruppen: ihr
* Abstand untereinander kam aus zwei Polstern des Exports und war 30 gegen
* 32 zwischen den Spalten. Jetzt traegt ihn der Rasterabstand — dafuer
* faellt das Polster unter einer Reihe weg, *die eine weitere vor sich hat*,
* und die folgende bekommt ihre 32 oben. Das Polster unter der letzten
* bleibt stehen: es traegt den Abstand zur Fussnote darunter.
*/
.inhaltsseite .start-text__reihe--2:has(.start-text__box),
.inhaltsseite .start-text__reihe--3:has(.start-text__box),
.inhaltsseite .start-text__reihe--4:has(.start-text__box) {
padding-inline: 0;
}
.inhaltsseite .start-text__reihe--2:has(.start-text__box):has(+ .start-text__reihe--2),
.inhaltsseite .start-text__reihe--3:has(.start-text__box):has(+ .start-text__reihe--3),
.inhaltsseite .start-text__reihe--4:has(.start-text__box):has(+ .start-text__reihe--4) {
padding-bottom: 0;
}
.inhaltsseite .start-text__reihe--2:has(.start-text__box)
+ .start-text__reihe--2:has(.start-text__box),
.inhaltsseite .start-text__reihe--3:has(.start-text__box)
+ .start-text__reihe--3:has(.start-text__box),
.inhaltsseite .start-text__reihe--4:has(.start-text__box)
+ .start-text__reihe--4:has(.start-text__box) {
padding-top: 32px;
}
/* Schmaler ist der Rasterabstand 24 — dann auch der zwischen den Reihen. */
@media (max-width: 1024px) {
.inhaltsseite .start-text__reihe--2:has(.start-text__box)
+ .start-text__reihe--2:has(.start-text__box),
.inhaltsseite .start-text__reihe--3:has(.start-text__box)
+ .start-text__reihe--3:has(.start-text__box),
.inhaltsseite .start-text__reihe--4:has(.start-text__box)
+ .start-text__reihe--4:has(.start-text__box) {
padding-top: 24px;
}
}
/*
* Nur Reihen, die im Export ein maxWidth tragen, werden eingeengt. Die
* Einleitungsreihen haben keines und laufen ueber die volle Breite — 1360
* bei 1600 Fensterbreite.
*/
.start-text__reihe--schmal {
max-width: 1200px;
margin-inline: auto;
}
/*
* Spalten, die im Export auf Mitte stehen. Das betrifft die Einleitung von
* /sell-your-property/ und /rental-services/ — dort ist alles zentriert,
* waehrend der Fliesstext darunter linksbuendig bleibt.
*/
.start-text__spalte--mitte,
.start-text__spalte--mitte h2,
.start-text__spalte--mitte h3,
.start-text__spalte--mitte p { text-align: center; }
/*
* In einer zentrierten Spalte steht die Aufzaehlung mittig, ihr Text aber
* weiter linksbuendig: der Punkt laeuft ueber die volle Breite und schiebt
* Symbol und Text zusammen in die Mitte. Nachgemessen auf der Live-Seite —
* dort ist das li 1360 breit und sein Text links ausgerichtet.
*/
.start-text__spalte--mitte .text-symbolliste > li {
justify-content: center;
text-align: left;
}
/*
* Die h1 mitten im Fliesstext — auf /sell-your-property/selling-property-in-
* estepona/ traegt der Text selbst die Ueberschrift — und die Groessen fuer
* das Telefon stehen in components/seitentext.css. Hier lagen sie bei
* Roboto 40.8 / 44.88 / Gewicht 600.
*/
/*
* Die Fragen stehen auf Artikelbreite, nicht ueber die ganze Seite — auf
* /rental-services/ gemessen: 960 statt 1345.
*
* Das gilt fuer den Aufklappteil, der fuer sich steht. Steht er im Text, hat
* die Spalte diese Breite schon; siehe weiter unten.
*/
.inhaltsseite .objekt-faq {
max-width: 1200px;
margin-inline: auto;
padding-inline: 120px;
}
@media (max-width: 1400px) {
.inhaltsseite .objekt-faq { padding-inline: 40px; }
}
@media (max-width: 767px) {
.inhaltsseite .objekt-faq { padding-inline: 0; }
}
/*
* Im Text zaehlt die Spalte.
*
* Seit der Aufklappteil an seiner Stelle im Text steht und nicht mehr am
* Seitenende, sitzt er in einer Spalte, die schon auf 960px eingeengt ist.
* Seine eigene Einengung kaeme oben drauf: gemessen 720px statt 960px, und
* die Fragen sprangen 113px nach rechts weg von ihrer Ueberschrift.
*/
.inhaltsseite .start-text__spalte .objekt-faq {
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
/* --------------------------------------------- Karten mit eigener Flaeche */
/*
* Die Gegenueberstellung auf /real-estate-agent-estepona/: jede Zeile ist
* eine eigene Flaeche. Die Farbe steht am Block (sie wechselt je Zeile), das
* Mass steht hier.
*
* Gemessen am Original, 1500 Fensterbreite:
* Polster innen 24px (Kadence: padding "sm" an der Spalte)
* Abstand zur naechsten 8px (Kadence: margin "xxs" an der Reihe)
* Ecken eckig
* Andere Masse kommen im ganzen Export nicht vor; taucht eines auf, faellt
* es im Seitenvergleich auf (node tests/vergleich.js).
*/
/*
* Innerhalb einer Karte sitzt der Inhalt ohne weiteren Abstand: das Polster
* der Karte ist der Abstand.
*/
.start-text__reihe--kasten > .start-text__spalte > :first-child { margin-top: 0; }
/*
* Steht die Flaeche voll im Ton der Marke, traegt sie weisse Schrift — so die
* Zeile "Potential Client Reach in 3 months" im Original.
*/
.start-text__reihe--kasten[style*="rgb(170, 141, 112)"],
.start-text__reihe--kasten[style*="rgb(136, 136, 136)"] {
color: #fff;
}
.start-text__reihe--kasten[style*="rgb(170, 141, 112)"] *,
.start-text__reihe--kasten[style*="rgb(136, 136, 136)"] * { color: inherit; }
/*
* Ein Knopf gleich hinter der Hakenliste klebte an ihr — weder die Liste noch
* die Knopfhuelle bringen einen Abstand mit. Im Original sind es 10 Punkte;
* das ist hier zu wenig, weil unsere Eintraege oft zweizeilig umbrechen und
* der Knopf dann zur letzten Zeile zu gehoeren scheint. 24, wie die uebrigen
* senkrechten Abstaende der Inhaltsseiten.
*/
.wp-block-kadence-iconlist + .wp-block-kadence-advancedbtn { margin-top: 24px; }
/* ------------------------------------------ Umschalter der Gegenueberstellung */
/*
* Am Schirm stehen beide Listen nebeneinander, der Umschalter ist dort
* ueberfluessig. Auf dem Telefon ist es umgekehrt: dort traegt er die Wahl,
* und die Ueberschriftskaesten der Spalten entfallen — ihre Worte stehen auf
* den Knoepfen.
*/
.vergleich-schalter { display: none; }
@media (max-width: 767px) {
.vergleich-schalter {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0 0 16px;
}
.vergleich-schalter__knopf {
min-height: 48px;
padding: 8px 10px;
border: 1px solid #d8cec2;
border-radius: 24px;
background: #fff;
color: #202732;
font-family: 'Roboto Condensed', Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
}
.vergleich-schalter__knopf.ist-aktiv {
background: var(--color-gold, var(--color-gold));
border-color: var(--color-gold, var(--color-gold));
color: #fff;
}
/* Die abgewaehlte Spalte ist weg, die gewaehlte nimmt die Breite. */
[data-vergleich][data-vergleich-aktiv="0"] > .start-text__spalte:nth-of-type(2),
[data-vergleich][data-vergleich-aktiv="1"] > .start-text__spalte:nth-of-type(1) {
display: none;
}
/*
* Der erste Kasten jeder Spalte ist ihre Ueberschrift ("Selling your
* Property with realEstepona"). Sie steht jetzt auf dem Knopf darueber
* und waere hier ein zweites Mal dasselbe.
*/
[data-vergleich-aktiv] > .start-text__spalte > .start-text__reihe--kasten:first-child {
display: none;
}
}
/* ------------------------------------------- Kontaktformular im Fenster */
/*
* Auf /rental-services/, /sell-your-property/ und /premium-partner/ liegt das
* Formular im Original nicht im Seitenfluss, sondern in einem Fenster: die
* Seite endet mit dem Knopf "Get into contact", und erst der oeffnet es.
*
* Die Flaeche selbst kommt aus objekt-detail.css — es ist dieselbe wie bei
* Exposé und Besichtigung. Hier steht nur, was ein Knopf im Text braucht.
*/
.start-text__inhalt .text-knopf[data-fenster-auf],
.start-text__inhalt .kt-button[data-fenster-auf] { cursor: pointer; }
/*
* Der Abschluss der Seite.
*
* Im Original traegt die letzte Reihe 100px Polster nach unten, und nichts
* darin hat einen eigenen Abstand. Bei uns kommen die 100px vom Abschnitt —
* der Abstand der letzten Reihe und der des letzten Knopfes darin kaemen also
* oben drauf. Gemessen: 164px statt 100px Luft vor dem Fussbereich.
*/
.start-text__inhalt > .start-text__reihe:last-child { margin-bottom: 0; }
.start-text__inhalt > .start-text__reihe:last-child .start-text__spalte > :last-child,
.start-text__inhalt > .start-text__reihe:last-child .text-knopf:only-child { margin-bottom: 0; }
/* ---- aus realEstepona components/objekt-detail.css (Fenster) ---- */
/* --------------------------------------------------- Fenster ueber der Seite */
/*
* Gemessen: Grund rgba(0,0,0,.6) ueber dem ganzen Fenster, darueber eine
* weisse Flaeche von 600 Breite. Sie liegt oben und nicht mittig, damit ein
* langes Formular auf kleinen Schirmen nicht oben abgeschnitten wird.
*/
.objekt-fenster {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 40px 20px;
overflow-y: auto;
}
.objekt-fenster[hidden] { display: none; }
.objekt-fenster__grund {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.objekt-fenster__kasten {
position: relative;
width: 600px;
max-width: 100%;
background: #fff;
padding: 40px;
}
/* Die Seite darunter steht still, solange ein Fenster offen ist. */
body.fenster-offen { overflow: hidden; }
.objekt-fenster__zu {
position: absolute;
top: 10px;
right: 14px;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: none;
font-size: 30px;
line-height: 1;
color: #202732;
cursor: pointer;
}
.objekt-fenster__zu:hover { color: var(--color-gold); }
.objekt-fenster__titel {
font-family: 'Roboto Condensed', sans-serif;
font-size: 30.6px;
font-weight: 300;
line-height: 42.84px;
color: #202732;
margin: 0 30px 0 0;
}
.objekt-fenster__text {
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #000;
margin: 0 0 22px;
}
/* ------------------------------------------------------------- Formular */
@media (max-width: 767px) {
.objekt-fenster { padding: 20px 12px; }
.objekt-fenster__kasten { padding: 28px 20px; }
.objekt-fenster__titel { font-size: 24px; line-height: 1.25; }
}
/* Luxury Marbella: das Verkaufsformular (contact-form) im weissen Fenster —
im Kontaktframe steht es auf Navy, die Beschriftungen sind dort weiss. */
.objekt-fenster .form-field label { color: #202732; }
.objekt-fenster .contact-form { margin-top: 18px; }
/* === components/luxury-marbella.css === */
/*
* Luxury Marbella: die "negative" Optik der Startseite.
*
* Alles darueber ist newEstepona 1:1. Diese Datei steht als letzte im Bundle
* (build/assets.js) und haelt nur die Abweichungen — so bleiben die
* newEstepona-Dateien unveraendert und mit dem Schwesterprojekt vergleichbar.
*
* Vorbild ist die alte WordPress-Startseite (Kadence-Export + Messung am
* 17.10.2026): Hero-Banner, Kachelzeile und der Block "Find your luxury
* property" mit Filtern und Raster stehen auf Navy (palette1). Der Block geht
* ueber die volle Breite, mit 100px Innenabstand links und rechts; die Karten
* bleiben weiss. SEO-Text, FAQ und Fuss bleiben hell wie dort. Dasselbe gilt
* fuer die Kategorieseiten; das dunkle Banner auch fuer das Expose.
*/
:root {
--lm-navy: var(--global-palette1);
--lm-navy-tief: #23262c; /* Kachel-Unterschriften der alten Seite */
--lm-feld: #3a414d; /* Filterfelder auf Navy */
--lm-kontur: #3f4958; /* 1px-Kontur von Karten und Hero-Banner der alten Seite */
--lm-text-hell: #ffffff;
--lm-text-gedimmt: rgba(255, 255, 255, 0.78);
/* CI-Farbe von Luxury Marbella ist #ccab86 (palette3) — ueberall, wo
newEstepona sein Gold (#aa8d70) nimmt. Hover eine Stufe dunkler. */
--color-gold: var(--global-palette3);
--color-gold-hover: var(--global-palette2);
}
/* Pfeil und Lupe der Filterfelder stecken als SVG in der Adresse, dort greift
kein Token — darum hier dieselben Bilder in der CI-Farbe. */
.filter-bar select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23ccab86'/%3E%3C/svg%3E");
}
.filter-suche {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8' fill='none' stroke='%23ccab86' stroke-width='1.6'/%3E%3Cpath d='M10.4 10.4 L14.6 14.6' stroke='%23ccab86' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Hero: Banner dunkel statt weiss, Ueberschrift weiss, Unterzeile in CI-Farbe.
Verlauf und Kontur wie auf der alten Seite (unten Navy, oben 70 %). */
.homepage .homepage-hero__overlay,
.listing-hero__overlay,
.project-title-overlay {
background: linear-gradient(0deg, var(--lm-navy) 0%, rgba(32, 39, 50, 0.7) 100%);
border: 1px solid var(--lm-kontur);
}
.homepage .homepage-hero__overlay h2,
.listing-hero__overlay h1,
.listing-hero__overlay h2,
.project-title-overlay h1 { color: var(--lm-text-hell); }
.homepage .homepage-hero__overlay p,
.listing-hero__overlay p,
.project-title-overlay p { color: var(--color-gold); }
/* Kachelzeile auf Navy, ueber die volle Breite. */
.homepage > .category-cards-section {
background: var(--lm-navy);
padding: 20px 20px 0;
}
.homepage .category-card {
box-shadow: none;
border: 1px solid var(--lm-kontur);
}
.homepage .category-card__text {
background: linear-gradient(0deg, var(--lm-navy-tief) 0%, var(--lm-navy) 100%);
}
.homepage .category-card__title { color: var(--lm-text-hell); }
.homepage .category-card__desc { color: var(--color-gold); }
/* Suche + Raster: volle Breite statt 1220px, 100px Rand, Navy. */
:is(.homepage, .listing-page) > .search-section {
max-width: none;
margin: 0;
padding: 100px 100px 80px;
background: var(--lm-navy);
}
:is(.homepage, .listing-page) > .search-section h2 { color: var(--lm-text-hell); }
:is(.homepage, .listing-page) > .search-section .search-section__subtitle { color: var(--lm-text-gedimmt); }
:is(.homepage, .listing-page) > .search-section .filter-bar { max-width: none; }
:is(.homepage, .listing-page) > .search-section .project-grid__leer { color: var(--lm-text-gedimmt); }
/* Filterfelder dunkel mit heller Schrift, wie auf der alten Seite. */
:is(.homepage, .listing-page) > .search-section .filter-bar select,
:is(.homepage, .listing-page) > .search-section .filter-suche {
background-color: var(--lm-feld);
border-color: var(--lm-feld);
color: var(--lm-text-hell);
}
:is(.homepage, .listing-page) > .search-section .filter-suche::placeholder { color: var(--lm-text-gedimmt); }
:is(.homepage, .listing-page) > .search-section .filter-bar select option {
background: var(--lm-feld);
color: var(--lm-text-hell);
}
/* Karten auf Navy: der helle Schatten verschwindet, ein dunkler hebt sie ab. */
:is(.homepage, .listing-page) > .search-section .project-grid-card__inner { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* Tablet und Telefon: der Rand schrumpft mit, die Flaeche bleibt dunkel. */
@media (max-width: 1024px) {
:is(.homepage, .listing-page) > .search-section { padding: 60px 50px; }
}
@media (max-width: 768px) {
:is(.homepage, .listing-page) > .search-section { padding: 40px 20px; }
.homepage > .category-cards-section { padding: 20px 20px 0; }
}
/* Info-Text: so breit wie der Kontaktrahmen (1200, ohne seitlichen Innenabstand),
Ueberschriften ohne Versalien und deutlich abgestuft — H1 > H2 > H3 erkennbar. */
.info-text__content-inner {
padding-left: 0;
padding-right: 0;
}
.info-text__content h1 {
font-size: 36px;
line-height: 1.2;
font-weight: 300;
text-transform: none;
margin: 0 0 14px;
}
.info-text__content h2 {
font-size: 28px;
line-height: 1.25;
font-weight: 300;
text-transform: none;
margin: 40px 0 12px;
}
.info-text__content h3 {
font-size: 21.6px;
line-height: 1.3;
font-weight: 500;
text-transform: none;
margin: 26px 0 8px;
}
/* Expose: H1 im Hero wie die H2 "Find your luxury property" auf der Startseite —
ohne Versalien, gleiche Groesse (--schrift-abschnitt, mobil kleiner) und Staerke. */
.objekt-seite .project-title-overlay h1 {
font-family: var(--font-heading);
font-size: var(--schrift-abschnitt);
font-weight: 300;
line-height: 1.2;
text-transform: none;
}
/* Expose: Text im Hero-Banner im Satzspiegel von 1200 px (Banner selbst bleibt vollbreit). */
.objekt-seite .project-title-overlay > * {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* ------------------------------------------------------------------------
* Expose-Aufbau (Absprache 18.10.2026)
* Hero: Titel, darunter Ort · Preis. Dann Beschreibung links und Eckdaten
* als Tabelle rechts, die Galerie, und die Ausstattung vierspaltig im
* dunklen Rahmen. Markup: api/objekt-ansicht.php.
* ------------------------------------------------------------------------ */
.objekt-ueberblick { padding: 100px var(--container-padding); background: #fff; }
.objekt-ueberblick__inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 100px; align-items: start;
}
/* Ueberschriften des Exposes nach der Leiter von realEstepona (components/seitentext.css):
h2 36/1.2, h3 23/1.4, alle Gewicht 300, ohne Versal; Absatz 17/1.7/300 in #333.
Mobil 23/20 bzw. 20/18 wie dort. */
:where(.objekt-ueberblick, .objekt-ausstattung) :is(h2, h3) {
font-family: var(--font-heading); font-weight: 300; text-transform: none; color: #202732;
}
:where(.objekt-ueberblick, .objekt-ausstattung) h2 { font-size: 36px; line-height: 1.2; margin: 30px 0 10px; }
:where(.objekt-ueberblick, .objekt-ausstattung) h3 { font-size: 23px; line-height: 1.4; margin: 20px 0 8px; }
/* Spaltenkoepfe "Property Description" und "Property Details": keine Ueberschrift, sondern
ein Etikett in der CI-Farbe, in Versalien. */
.objekt-ueberblick__kopf {
font-family: var(--font-heading); font-size: 24px; font-weight: 400; line-height: 1.3;
text-transform: uppercase; color: var(--color-gold); margin: 0 0 18px;
}
/* Beschreibung: linksbuendig, ruhige Lesegroesse; Zwischenueberschriften des Textes abgestuft. */
.objekt-beschreibung { font-size: 17px; font-weight: 300; line-height: 1.7; color: #333; }
.objekt-beschreibung p { margin: 0 0 14px; }
.objekt-beschreibung > :first-child { margin-top: 0; }
/* Gekappt mit weichem Uebergang (assets/js/src/objekt-beschreibung.js). */
.objekt-beschreibung.lm-klappe { position: relative; overflow: hidden; }
.objekt-beschreibung.lm-klappe::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none;
}
.objekt-beschreibung.lm-klappe.offen { overflow: visible; }
.objekt-beschreibung.lm-klappe.offen::after { display: none; }
/* Knopf in der CI-Knopfklasse der Seite (.btn.btn--primary, components/buttons.css). */
.lm-klappe-knopf { margin-top: 18px; }
/* Eckdaten: Tabelle im Zebra, feine Linien in der CI-Farbe oben und unten. */
.objekt-daten {
width: 100%; border-collapse: collapse;
border-top: 2px solid var(--color-gold); border-bottom: 1px solid var(--color-gold);
}
.objekt-daten tr:nth-child(odd) { background: #f7f3ee; }
.objekt-daten tr:nth-child(even) { background: #fff; }
.objekt-daten th, .objekt-daten td { padding: 13px 18px; vertical-align: baseline; }
.objekt-daten th {
text-align: left; font-family: var(--font-body); font-size: 12.6px; font-weight: 400;
letter-spacing: .1em; text-transform: uppercase; color: #6b6f76; white-space: nowrap;
}
.objekt-daten td { text-align: right; font-size: 16px; font-weight: 400; color: #202732; }
.objekt-daten tr:first-child td { font-size: 19px; font-weight: 600; color: #202732; }
/* Ausstattung: vierspaltig im dunklen Rahmen. */
.objekt-ausstattung { padding: 90px var(--container-padding); background: var(--lm-navy); }
.objekt-ausstattung__inner { max-width: 1200px; margin: 0 auto; }
.objekt-ausstattung h2 { color: var(--lm-text-hell); margin: 0 0 30px; }
.objekt-ausstattung__gruppen {
padding: 32px 36px; border: 1px solid var(--lm-kontur);
column-count: 4; column-gap: 36px;
}
/* Eine Kategorie bricht nie ueber zwei Spalten. */
.objekt-ausstattung__gruppe { break-inside: avoid; margin: 0 0 26px; }
.objekt-ausstattung__kategorie {
font-family: var(--font-body); font-size: 12.6px; font-weight: 500; line-height: 1.4;
letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 8px;
}
.objekt-ausstattung__liste { list-style: none; margin: 0; padding: 0; }
.objekt-ausstattung__liste li {
position: relative; padding-left: 22px; font-size: 15.3px; font-weight: 300; line-height: 1.7;
color: var(--lm-text-gedimmt);
}
.objekt-ausstattung__liste li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-gold); font-weight: 700; }
@media (max-width: 1024px) {
.objekt-ausstattung__gruppen { column-count: 3; }
:where(.objekt-ueberblick, .objekt-ausstattung) h2 { font-size: 23px; }
:where(.objekt-ueberblick, .objekt-ausstattung) h3 { font-size: 20px; }
}
@media (max-width: 900px) {
.objekt-ueberblick { padding: 50px 20px 60px; }
.objekt-ueberblick__inner { grid-template-columns: 1fr; gap: 44px; }
.objekt-ausstattung { padding: 60px 20px; }
.objekt-ausstattung__gruppen { column-count: 2; padding: 24px 20px; }
}
@media (max-width: 600px) {
:where(.objekt-ueberblick, .objekt-ausstattung) h2 { font-size: 20px; }
:where(.objekt-ueberblick, .objekt-ausstattung) h3 { font-size: 18px; }
}
@media (max-width: 480px) {
.objekt-ausstattung__gruppen { column-count: 1; }
.objekt-daten th, .objekt-daten td { padding: 11px 12px; }
}
/* Banner-Ueberschrift der Listenseiten als H2, sobald der Info-Text die H1 traegt —
dieselbe Gestalt wie die H1 (components/hero.css). */
.listing-hero__overlay h2 {
font-family: var(--font-heading);
font-size: clamp(28px, 9vw, var(--hero-max));
font-weight: 300;
text-transform: uppercase;
line-height: 1.1;
margin: 0;
}
/* Lagefeld: Hauptorte (Gemeinden) in 500, Stadtteile bleiben duenn. */
.filter-bar select option.ist-hauptort { font-weight: 500; }
/* Sprungziel der Filterleiste (action="#objekte"): nicht unter dem festen Kopf verschwinden. */
#objekte { scroll-margin-top: calc(var(--header-height) + 20px); }
/* Ohne Sprachwahl (nur eine Sprache) bleibt kein leerer Platz im Kopf. */
.nav-lang:empty { display: none; }