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 — zweierlei, je nach Reihe.
*
* Im Original traegt der Artikelteil die Klasse "ownersContent"; dort setzt
* das Theme Roboto in schwereren Schnitten, ueberall sonst Roboto Condensed
* in leichten. Zuerst hatte ich maxWidth als Unterscheidung genommen — das
* stimmte auf /rental-services/ und war auf /real-estate-agent-estepona/
* falsch, wo die Reihe eingeengt, aber kein Artikel ist.
*
* Gemessen am Original (1500 Fensterbreite, dieselben Stellen auf beiden
* Seiten):
*
* 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
*
* Versal sind h3 und h5, nicht h2 und h4.
*
* WICHTIG: Beide Regelsaetze sind gleich stark (je zwei Klassen und ein
* Element). Es entscheidet also die Reihenfolge — der Artikelteil muss
* hinten stehen. Genau daran hing es, dass die h4 auf /rental-services/
* trotz richtiger Regel in Condensed dastanden.
*/
/*
* Verweise im Fliesstext stehen im helleren Gold. Gemessen auf vier Seiten
* des Originals, immer #CCAB86 — das #AA8D70, das hier galt, kommt von der
* Startseite und war hier falsch.
*/
.inhaltsseite .start-text__inhalt a:not(.text-knopf):not(.kt-button) { color: #CCAB86; }
/* ---- ausserhalb des Artikels */
.inhaltsseite .start-text__inhalt h2 {
font-family: "Roboto Condensed", sans-serif;
font-size: 44.2px;
line-height: 53.04px;
font-weight: 300;
margin: 0 0 10px;
}
.inhaltsseite .start-text__inhalt h3 {
font-family: "Roboto Condensed", Roboto, sans-serif;
font-size: 30.6px;
line-height: 42.84px;
font-weight: 300;
text-transform: uppercase;
margin: 0 0 11.05px;
}
.inhaltsseite .start-text__inhalt h4 {
font-family: "Roboto Condensed", Roboto, sans-serif;
font-size: 23.8px;
line-height: 33.32px;
font-weight: 400;
margin: 0 0 10.2px;
}
/* ---- im Artikel */
/*
* 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;
}
.inhaltsseite .start-text__reihe--artikel h2,
.inhaltsseite .start-text__inhalt--artikel h2 {
font-family: Roboto, sans-serif;
font-size: 40.8px;
line-height: 48.96px;
font-weight: 600;
margin: 40px 0 10px;
}
.inhaltsseite .start-text__reihe--artikel h3,
.inhaltsseite .start-text__inhalt--artikel h3 {
font-family: Roboto, sans-serif;
font-size: 22.1px;
line-height: 30.94px;
font-weight: 600;
text-transform: uppercase;
margin: -6px 0 11.05px;
}
.inhaltsseite .start-text__reihe--artikel h4,
.inhaltsseite .start-text__inhalt--artikel h4 {
font-family: Roboto, sans-serif;
font-size: 20.4px;
line-height: 28.56px;
font-weight: 600;
margin: 30.6px 0 10.2px;
}
.inhaltsseite .start-text__reihe--artikel h5,
.inhaltsseite .start-text__inhalt--artikel h5 {
font-family: Roboto, sans-serif;
font-size: 20.4px;
line-height: 30.6px;
font-weight: 600;
text-transform: uppercase;
margin: 30.6px 0 10.2px;
}
/*
* 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;
}
@media (max-width: 767px) {
.inhaltsseite .start-text__inhalt h2 { font-size: 30px; line-height: 1.2; }
.inhaltsseite .start-text__inhalt h3 { font-size: 20px; line-height: 1.4; }
}
/*
* Eine h1 mitten im Fliesstext. Auf /sell-your-property/selling-property-in-
* estepona/ traegt der Text selbst die Ueberschrift; ohne eigene Regel fiel
* sie auf die globale Groesse (64.8) statt auf die des Artikels.
* Gemessen: Roboto 40.8 / 44.88 / Gewicht 600.
*/
.inhaltsseite .start-text__inhalt h1 {
font-family: Roboto, sans-serif;
font-size: 40.8px;
line-height: 44.88px;
font-weight: 600;
color: #202732;
margin: 0 0 14px;
}
/*
* 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; }
.inhaltsseite .start-text__inhalt h1 { font-size: 28px; line-height: 1.2; }
}
/*
* 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, #aa8d70);
border-color: var(--color-gold, #aa8d70);
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; }
/* === components/beitrag.css === */
/*
* Die Beitragsseite einer Meldung (/
/).
*
* Alles hier ist auf realestepona.com nachgemessen, am 2026-10-04 bei 1500
* Fensterbreite, am Beispiel der Meldung zum Muay-Thai-Abend:
*
* Rahmen 1200 breit, mittig (links 150), Polster 60 oben und unten
* zwei Spalten 733 und 367, Luecke 100, Polster 24 oben und unten
* Titel h1 Roboto Condensed 51 / 56.1 / 300, versal, 25.5 unter sich
* Titelbild volle Textbreite, 32 unter sich
* h2 im Text Roboto Condensed 44.2 / 53.04 / 300, 22.1 unter sich
* p im Text 17 / 28.9 / 300, 15 unter sich
* Abschnitte h2 Condensed 44.2 / 53.04 / 300, 60 oben und 30 unten
* Seitenspalte h3 Condensed 30.6 / 42.84 / 300, versal, 10 unter sich;
* die zweite Ueberschrift mit 40 Abstand nach oben
*/
.beitragsseite {
/* 1200 mittig in 1500: links und rechts je 150. */
max-width: 1200px;
margin: 0 auto;
padding: 60px 0;
}
/* --------------------------------------------------- Text und Seitenspalte */
.beitrag {
display: grid;
grid-template-columns: 733px 367px;
column-gap: 100px;
row-gap: 32px;
padding: 24px 0;
align-items: start;
}
/* --------------------------------------------------------------- Der Text */
.beitrag__titel {
margin: 0 0 25.5px;
font-family: "Roboto Condensed", sans-serif;
font-size: 51px;
line-height: 56.1px;
font-weight: 300;
text-transform: uppercase;
color: #202732;
}
.beitrag__bild {
margin: 0 0 32px;
}
.beitrag__bild-datei {
display: block;
width: 100%;
height: auto;
}
.beitrag__inhalt {
font-size: 17px;
line-height: 28.9px;
font-weight: 300;
color: #000;
}
.beitrag__inhalt h2 {
margin: 0 0 22.1px;
font-family: "Roboto Condensed", sans-serif;
font-size: 44.2px;
line-height: 53.04px;
font-weight: 300;
color: #202732;
}
.beitrag__inhalt h3 {
margin: 0 0 11.05px;
font-family: "Roboto Condensed", sans-serif;
font-size: 30.6px;
line-height: 42.84px;
font-weight: 300;
text-transform: uppercase;
color: #202732;
}
.beitrag__inhalt p { margin: 0 0 15px; }
.beitrag__inhalt a { color: #CCAB86; }
.beitrag__inhalt ul,
.beitrag__inhalt ol { margin: 0 0 15px; padding-left: 34px; }
/* ------------------------------------------------------- Die Seitenspalte */
.beitrag-spalte__titel {
margin: 0 0 10px;
font-family: "Roboto Condensed", sans-serif;
font-size: 30.6px;
line-height: 42.84px;
font-weight: 300;
text-transform: uppercase;
color: #202732;
}
/* Die zweite Ueberschrift steht 40 unter der letzten Kachel darueber. */
.beitrag-spalte__kacheln + .beitrag-spalte__titel { margin-top: 40px; }
/*
* Die Kacheln sind dieselben wie in den Listen, hier aber untereinander.
*
* Im Original ist die Kachel 387 breit und traegt 10 Innenabstand — das Bild
* darin ist also 367 breit, genau die Spaltenbreite. Dafuer ragt die Kachel
* links und rechts um 10 aus der Spalte heraus. Zwischen den Kacheln steht
* kein Abstand: die beiden Innenabstaende ergeben die 20.
*/
.beitrag-spalte__kacheln {
display: grid;
gap: 0;
margin-inline: -10px;
}
.beitrag-spalte__kacheln .objekt-karte { width: auto; }
/*
* Das Bild bleibt 305 hoch, auch wenn die Kachel breiter ist als in der
* Liste: im Original misst es hier 367 x 305. Mit dem Seitenverhaeltnis der
* Liste (320:305) waere es 350 hoch und die Kachel 437 statt 413.
*/
.beitrag-spalte__kacheln .objekt-karte__bild {
aspect-ratio: auto;
height: 305px;
}
/*
* Unter der Preiszeile stehen im Original 20 Punkte Luft — die Kachel misst
* damit 413 statt 392. (Auf den Listenseiten ist die Kachel ohnehin anders
* geschnitten, dort gilt das nicht.)
*/
.beitrag-spalte__kacheln .objekt-karte__zeile { padding-bottom: 20px; }
/* ------------------------------------------------- Abschnitte am Seitenfuss */
.beitrag__abschnitt {
margin: 60px 0 30px;
font-family: "Roboto Condensed", sans-serif;
font-size: 44.2px;
line-height: 53.04px;
font-weight: 300;
color: #202732;
}
/*
* "More news" ist ein Streifen, kein festes Raster: drei Kacheln sichtbar,
* wischbar, mit Pfeilen und einem Punkt je Meldung — wie im Original (dort
* zwoelf Punkte bei drei sichtbaren Kacheln).
*
* Gemessen: Kachel 373 breit, Luecke 40 — (1200 - 2 x 40) / 3 = 373.3.
* Das Einrasten und das Wischen macht der Browser; die Pfeile und Punkte
* setzt assets/js/src/news-slider.js, derselbe wie auf der Startseite.
*/
/*
* Die Neubau-Einheiten unter der Meldung. Dasselbe Raster wie in den Listen,
* nur dass der Innenabstand der Kacheln hier nach aussen ausgeglichen wird —
* sonst stuenden die Fotos 10 Punkte weiter innen als der Text darueber.
*
* Vier zu einem Viertel, nicht fuenf zu einem Fuenftel wie in den Listen: der
* Textbereich einer Meldung ist 1220 breit und nicht die ganze Seite, und ein
* Fuenftel davon laesst fuer das Foto 224 Punkte — zu wenig fuer eine Zeile
* "3 beds · 2 baths" unter dem Preis. Mit einem Viertel sind es 285, dasselbe
* Mass wie in einer Liste auf einem kleineren Schirm.
*/
/*
* Der Hinweis unter einer Meldung, die aus einer Pressemitteilung entstanden
* ist. Abgesetzt, aber nicht versteckt: eine Linie darueber, kleinere Schrift,
* und der Verweis auf die Quelle in Gold wie die uebrigen Verweise.
*/
.beitrag__hinweis {
margin: 32px 0 0;
padding-top: 16px;
border-top: 1px solid #e4e4e4;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 300;
color: #667;
}
.beitrag__hinweis a { color: #aa8d70; }
.beitrag__objekte {
margin: 0 -10px 40px;
}
.beitrag__objekte .objekt-karte { flex-basis: 25%; }
/*
* Auf dem Tablett zwei statt vier. Ab 1024 stehen Text und Objektspalte
* untereinander, der Textbereich ist dann nur noch so breit wie die Seite —
* vier Kacheln darin liessen bei 768 noch 157 Punkte fuer das Foto, weniger
* als die Haelfte des Masses, auf das die Kachel gezeichnet ist.
*/
@media (max-width: 1024px) {
.beitrag__objekte .objekt-karte { flex-basis: 50%; }
}
.beitrag__news-bereich { position: relative; }
.beitrag__news-buehne { position: relative; }
.beitrag__news {
display: flex;
gap: 40px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.beitrag__news::-webkit-scrollbar { display: none; }
.beitrag__news .news-karte {
flex: 0 0 calc((100% - 80px) / 3);
scroll-snap-align: start;
}
/*
* Die Pfeile liegen ueber dem Streifen, 15 von seinen Kanten entfernt und
* mittig in der Hoehe: 32 x 48, schwarz mit 0.8 Deckung, Ecken 3, das Ganze
* mit 0.75 Deckung — gemessen am Original.
*/
.beitrag__news-pfeile {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.beitrag__news-pfeil {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 3px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 22px;
line-height: 1;
opacity: 0.75;
cursor: pointer;
pointer-events: auto;
}
.beitrag__news-pfeil:hover { opacity: 1; }
.beitrag__news-pfeile [data-news-zurueck] { left: 15px; }
.beitrag__news-pfeile [data-news-vor] { right: 15px; }
/* Die Punkte stehen mittig, 8 unter dem Streifen. */
.beitrag__news-punkte {
display: flex;
justify-content: center;
align-items: center;
margin-top: 8px;
min-height: 17px;
}
/* ------------------------------------------------------------- Schmaler */
@media (max-width: 1240px) {
.beitragsseite { padding: 60px 40px; }
.beitrag {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
column-gap: 60px;
}
}
@media (max-width: 1024px) {
.beitrag { grid-template-columns: 1fr; }
.beitrag__titel { font-size: 38px; line-height: 1.15; }
.beitrag__inhalt h2 { font-size: 32px; line-height: 1.2; }
.beitrag__abschnitt { font-size: 32px; line-height: 1.2; }
.beitrag__news { gap: 24px; }
.beitrag__news .news-karte { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
/* 16 wie Logo und Brenner darueber — ein Seitenrand fuer die ganze Seite. */
.beitragsseite { padding: 40px 20px; }
.beitrag__titel { font-size: 30px; }
.beitrag__inhalt h2 { font-size: 26px; }
.beitrag__abschnitt { font-size: 26px; margin: 40px 0 20px; }
.beitrag__news .news-karte { flex: 0 0 86%; }
.beitrag__objekte { margin: 0 -6px 30px; }
.beitrag__objekte .objekt-karte { flex-basis: 100%; }
/*
* Die Pfeile liegen nicht mehr ueber dem Streifen, sondern darunter.
*
* Auf dem Schirm stehen drei Kacheln nebeneinander, und die Pfeile sitzen
* an den Raendern ueber den Fotos — so ist es am Original gemessen. Auf
* dem Telefon fuellt eine Kachel den Streifen, und dieselben Pfeile lagen
* mitten auf ihrer Ueberschrift (Kachel 20 bis 308, linker Pfeil 35 bis
* 67). Darunter ist Platz, und sie sehen aus wie die der Startseite:
* 40 x 40, weiss mit Rahmen statt schwarz halbdurchsichtig.
*/
.beitrag__news-pfeile {
position: static;
display: flex;
justify-content: center;
gap: 10px;
margin-top: 14px;
pointer-events: auto;
}
.beitrag__news-pfeil {
position: static;
transform: none;
width: 40px;
height: 40px;
border: 1px solid var(--color-border);
border-radius: 0;
background: #fff;
color: var(--color-heading);
opacity: 1;
}
.beitrag__news-pfeil:hover,
.beitrag__news-pfeil:focus-visible {
border-color: var(--color-gold);
color: var(--color-gold);
background: #fff;
}
.beitrag__news-punkte { margin-top: 12px; }
}
/* === components/objekt-detail.css === */
/* ------------------------------------------------- Detailseite eines Objekts */
/*
* Gemessen an realestepona.com/properties/… (1920):
* Galerie 1200 breit, mittig — Raster aus vier Spalten zu 293 und drei
* Reihen zu 250, Luecke 10. Das erste Bild nimmt zwei Spalten
* und zwei Reihen (595 x 510), acht Vorschauen den Rest
* Spalten links 779 (x 360), rechts 389 (x 1171) — Luecke 32
* Titel Roboto Condensed 44.2 / 53.04 / Gewicht 300 in #202732
* Preis Roboto 21.6 / 30.24 / Gewicht 700 in Schwarz
* Abschnitt Roboto Condensed 23.8 / 33.32 / Gewicht 400 in #AA8D70
* Zeilen Roboto 17 / 28.9 / Gewicht 300, Beschriftung links, Wert bei
* 171, Rhythmus 37
* Merkmale zwei Spalten, Roboto 17 / 27.2 / Gewicht 300, mit Haken davor
* Fliesstext Roboto 17 / 28.9, Absatz 15 unter sich
*/
.objektseite--detail {
padding: 100px 120px 120px;
}
/*
* Vier Spalten, drei Reihen, 10 Luecke — das erste Bild nimmt zwei Spalten
* und zwei Reihen. Die Reihen sind nicht in Punkten festgelegt, sondern
* gleich hoch innerhalb eines Seitenverhaeltnisses: so bleiben die
* gemessenen 293 x 250 je Feld auch in einem schmaleren Fenster erhalten,
* ohne dass eine Reihe springt.
*/
.objekt-galerie {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
aspect-ratio: 1200 / 770;
gap: 10px;
max-width: 1200px;
margin: 0 auto 60px;
/*
* Rund sind nur die vier Aussenecken des Blocks, jedes Foto also nur in
* seiner eigenen Ecke — so steht es auf der Live-Seite (15 Punkte, in den
* Eckbildern je eine Ecke). Der Rundung am Block mit Beschnitt statt
* vier Regeln an bestimmten Kindern: die greifen auch dann richtig, wenn
* ein Objekt weniger als neun Fotos hat oder das Raster im schmalen
* Fenster anders laeuft.
*/
border-radius: 15px;
overflow: hidden;
}
.objekt-galerie__feld {
overflow: hidden;
background: #333;
}
.objekt-galerie__feld:first-child {
grid-column: span 2;
grid-row: span 2;
}
.objekt-galerie__feld img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
cursor: pointer;
transition: transform 0.4s ease;
}
.objekt-galerie__feld img:hover { transform: scale(1.03); }
/* Die uebrigen Bilder stehen nur fuer die Lupe im Quelltext. */
.objekt-galerie__feld--verborgen { display: none; }
/* ------------------------------------------------------------ Zwei Spalten */
/*
* Gemessen: linke Spalte 779 (ab 360), Luecke 32, rechte 389 (ab 1171) —
* zusammen die 1200 der Galerie darueber. Die 327, die ich zuerst gemessen
* hatte, sind der Inhalt im Kasten: der traegt 30 Innenabstand und 1 Rahmen,
* macht 389.
*/
/*
* Drei Bereiche in einem Raster: Titel, Hauptspalte, Kasten.
*
* Am Schirm steht der Titel ueber der Hauptspalte und der Kasten rechts
* daneben ueber beide Zeilen — dasselbe Bild wie vorher mit zwei Spalten.
* Als Raster und nicht als Flex, weil sich die Reihenfolge damit auf dem
* Telefon aendern laesst, ohne den Quelltext umzustellen: dort kommt
* "seite" zwischen "titel" und "haupt" (siehe 1024).
*/
.objekt-spalten {
display: grid;
grid-template-columns: minmax(0, 779px) 389px;
grid-template-areas:
"titel seite"
"haupt seite";
align-items: start;
gap: 0 32px;
max-width: 1200px;
margin: 0 auto;
}
.objekt-kopf { grid-area: titel; min-width: 0; }
.objekt-haupt { grid-area: haupt; min-width: 0; }
.objekt-seite { grid-area: seite; }
.objekt-titel {
font-family: 'Roboto Condensed', sans-serif;
font-size: 44.2px;
font-weight: 300;
line-height: 53.04px;
color: #202732;
margin: 0 0 24px;
}
.objekt-hinweis {
margin: 0 0 20px;
padding: 12px 18px;
background: #f7f7f7;
border-left: 3px solid #aa8d70;
font-size: 17px;
font-weight: 400;
color: #202732;
}
.objekt-block__titel {
font-family: 'Roboto Condensed', sans-serif;
font-size: 23.8px;
font-weight: 400;
line-height: 33.32px;
color: #aa8d70;
margin: 0 0 10px;
}
.objekt-block__titel--merkmale { margin-top: 40px; }
/*
* Ueberschriften im Beschreibungstext.
*
* Der eigene Strom liefert die Beschreibung als fertiges HTML mit h2 und h3
* darin. Fuer die galt bisher nur die allgemeine Regel aus typography.css —
* h2 { font-size: 2.8em }, also 50.4 Punkt. Damit war eine Zwischenzeile im
* Beschreibungstext groesser als die H1 der Seite (44.2 am Schirm, 28 auf dem
* Telefon) und groesser als die Ueberschrift des Blocks, in dem sie steht
* ("Property Description", 23.8).
*
* Sie bekommen deshalb das Mass der Seite: h2 auf 23.8 wie die
* Blockueberschrift darueber, nur in Dunkel statt Gold, dann 20 und 18. Damit
* steht keine ueber der H1 (44.2 / 28) und keine unter dem h4 des grauen
* Rahmens (23.8) — bei 20 war der h4 dort groesser als ein h2 hier. Fest in
* Punkt und nicht in em, damit die allgemeine Regel nicht durchschlaegt.
*/
.objekt-beschreibung h2,
.objekt-beschreibung h3,
.objekt-beschreibung h4 {
font-family: 'Roboto Condensed', sans-serif;
color: #202732;
margin: 26px 0 8px;
}
.objekt-beschreibung > :first-child { margin-top: 0; }
.objekt-beschreibung h2 { font-size: 23.8px; line-height: 33.32px; font-weight: 400; }
.objekt-beschreibung h3 { font-size: 20px; line-height: 28px; font-weight: 400; }
.objekt-beschreibung h4 { font-size: 18px; line-height: 26px; font-weight: 500; }
.objekt-beschreibung p {
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #000;
margin: 0 0 15px;
}
/*
* Merkmale: zwei Spalten mit einem Haken davor. Der Haken ist gezeichnet und
* kein Zeichen aus einer Schrift — so sitzt er auf jedem Geraet gleich.
*/
.objekt-merkmale {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 30px;
margin: 0;
padding: 0;
list-style: none;
}
.objekt-merkmale li {
position: relative;
padding-left: 26px;
font-size: 17px;
font-weight: 300;
line-height: 27.2px;
color: #000;
}
.objekt-merkmale li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 12px;
height: 7px;
border-left: 2px solid #aa8d70;
border-bottom: 2px solid #aa8d70;
transform: rotate(-45deg);
}
/* ---------------------------------------------------------- Seitenkasten */
/* Die Telefonliste gilt nur dort; am Schirm steht der Kasten rechts. */
.objekt-eck { display: none; }
.objekt-preis {
font-size: 21.6px;
font-weight: 700;
line-height: 30.24px;
color: #000;
margin: 0 0 24px;
}
/* Am Schirm steht nur die Zahl — "Price:" sagt der Zusammenhang. */
.objekt-preis__name { display: none; }
.objekt-block { margin-bottom: 36px; }
/*
* Beschriftung und Wert stehen in einer Zeile: die Beschriftung links, der
* Wert bei 171. Jede Zeile ist ein eigenes Raster, damit sich jede zweite
* hell hinterlegen laesst.
*/
.objekt-block__liste {
margin: 0;
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #000;
}
/* ---------------------------------------------------- Kasten im Seitenteil */
/*
* Gemessen: 389 breit (also 31 breiter als die Spalte, weil der Rahmen
* aussen liegt), Rahmen 1 in #CCC, 30 gerundet, 30 Innenabstand, Schatten
* rgba(0,0,0,.1) 0 0 7.
*/
.objekt-seite__kasten {
border: 1px solid #ccc;
border-radius: 30px;
padding: 30px;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 7px 0;
}
/*
* Jede zweite Zeile hell hinterlegt (#F7FAFC), die erste jeder Gruppe mit
* mehr Luft nach oben — so steht es dort: 15 oben in der ersten Zeile, 3 in
* den uebrigen, 5 unten.
*/
.objekt-zeile {
display: grid;
grid-template-columns: 171px 1fr;
padding: 3px 0 5px;
}
.objekt-zeile:first-child { padding-top: 15px; }
.objekt-zeile:nth-child(even) { background: #f7fafc; }
/*
* Beschriftung mager, Wert halbfett. Bisher hatten beide dasselbe Gewicht,
* und die Spalte las sich als Fliesstext statt als Tabelle. 500 und nicht
* 700: das Fette der alten Seite ist uns zu laut.
*/
.objekt-zeile__name,
.objekt-zeile__wert { margin: 0; }
.objekt-zeile__name { font-weight: 300; }
.objekt-zeile__wert { font-weight: 500; }
/* ------------------------------------------------------------- Knoepfe */
/*
* Derselbe Knopf wie im Aufklappmenue: 44 hoch, 20 gerundet, #AA8D70,
* 15 in Versalien mit Sperrung 2.
*/
.objekt-knopf {
display: inline-block;
margin: 24px 0 30px;
padding: 11px 28px 9px;
border: 0;
border-radius: 20px;
background: #aa8d70;
color: #fff;
font-family: Roboto, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 24px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.objekt-knopf:hover,
.objekt-knopf:focus-visible { background: #202732; color: #fff; }
.objekt-knopf[disabled] { opacity: 0.6; cursor: default; }
/* --------------------------------------------------- Aufrufe unter dem Text */
/*
* Zwei Spalten zu 357 mit 65 Luecke, Ueberschrift in Roboto Condensed 30.6 /
* 42.84 / Gewicht 300 in #202732.
*/
/*
* Trennlinie zwischen Exposé und den beiden Angeboten: 1 Punkt in #CCC ueber
* die ganze Spalte, 49 darueber und 41 darunter — so gemessen.
*/
.objekt-trenner {
height: 0;
margin: 49px 0 41px;
border: 0;
border-top: 1px solid #ccc;
}
.objekt-aufrufe {
display: flex;
gap: 65px;
}
/*
* Gleiche Haelften, aber ohne Mass in der Grundbreite: flex-basis zaehlt
* immer auf der Hauptachse, und die kippt bei 1024 auf senkrecht (siehe
* unten). Aus 357 Punkt Breite wurden dort 357 Punkt *Hoehe* — die Bloecke
* sind 164 hoch, also standen 193 Punkt Leere in jedem. Mit Grundbreite 0
* teilen sich beide den Platz zu gleichen Teilen, am Schirm wieder 357, und
* senkrecht gibt es nichts zu verteilen.
*/
.objekt-aufruf { flex: 1 1 0; min-width: 0; }
.objekt-aufruf__titel {
font-family: 'Roboto Condensed', sans-serif;
font-size: 30.6px;
font-weight: 300;
line-height: 42.84px;
color: #202732;
margin: 0;
}
.objekt-aufruf__text {
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #000;
margin: 0 0 5px;
}
.objekt-aufruf .objekt-knopf { margin: 14px 0 0; }
/* ------------------------------------------------------------ Fussleiste */
/*
* Zurueck links, Weiterleiten rechts — auf einer Linie, 1200 breit wie der
* Inhalt darueber, Schrift Roboto 17 / Gewicht 300 in #202732 mit Symbol.
*/
.objekt-fuss {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 56px auto 0;
}
.objekt-fuss__zurueck,
.objekt-fuss__teilen {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: none;
font-family: Roboto, sans-serif;
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #202732;
text-decoration: none;
cursor: pointer;
}
.objekt-fuss__zurueck:hover,
.objekt-fuss__teilen:hover { color: #aa8d70; }
.objekt-fuss__symbol {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: #aa8d70;
}
/* --------------------------------------------------- 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: #aa8d70; }
.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 */
.objekt-formular__reihe {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.objekt-formular__reihe--drei { grid-template-columns: 100px 1fr 1fr; }
.objekt-formular input,
.objekt-formular select,
.objekt-formular textarea {
width: 100%;
min-height: 45px;
padding: 10px 14px;
border: 1px solid #bfbfbf;
border-radius: 0;
background: #fff;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 300;
color: #202732;
}
.objekt-formular textarea {
min-height: 110px;
margin-bottom: 12px;
resize: vertical;
}
.objekt-formular input:focus,
.objekt-formular select:focus,
.objekt-formular textarea:focus {
outline: 2px solid #aa8d70;
outline-offset: -2px;
}
.objekt-formular__wahl {
margin: 0 0 12px;
padding: 0;
border: 0;
}
.objekt-formular__wahl legend {
padding: 0;
font-size: 17px;
font-weight: 300;
color: #000;
}
.objekt-formular__wahl label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 6px 18px 0 0;
font-size: 17px;
font-weight: 300;
}
.objekt-formular__wahl input {
width: auto;
min-height: 0;
margin: 0;
}
.objekt-formular .objekt-knopf { margin: 6px 0 0; }
/*
* Der Honigtopf. Nicht display:none — manche Bots ueberspringen, was so
* verborgen ist. Aus dem Bild geschoben wird er dagegen ausgefuellt.
*/
.objekt-formular__honig {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.objekt-formular__meldung {
margin: 14px 0 0;
font-size: 17px;
font-weight: 400;
line-height: 28.9px;
}
.objekt-formular__meldung.ist-fertig { color: #2f7a3d; }
.objekt-formular__meldung.ist-fehler { color: #b23b3b; }
@media (max-width: 1024px) {
.objekt-aufrufe { flex-direction: column; gap: 32px; }
.objekt-fuss { margin-top: 40px; }
}
@media (max-width: 767px) {
/*
* Die Ueberschriften der beiden Angebote: 25.2 statt 30.6. Mit 30.6
* standen sie ueber der H1 der Seite (28) — auf der alten Seite sind es
* 25.2 bei einem Titel von 27, also klar darunter.
*/
.objekt-aufruf__titel { font-size: 25.2px; line-height: 35.28px; }
.objekt-fenster { padding: 20px 12px; }
.objekt-fenster__kasten { padding: 28px 20px; }
.objekt-fenster__titel { font-size: 24px; line-height: 1.25; }
.objekt-formular__reihe,
.objekt-formular__reihe--drei { grid-template-columns: 1fr; }
.objekt-fuss { gap: 16px; }
}
/* ------------------------------------------------------------- Schmaler */
@media (max-width: 1400px) {
.objektseite--detail { padding: 60px 40px 80px; }
.objekt-spalten { gap: 48px; }
}
@media (max-width: 1024px) {
.objektseite--detail { padding: 40px 24px 60px; }
/* Zwei Spalten, das grosse Bild oben ueber die ganze Breite. */
.objekt-galerie {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
aspect-ratio: auto;
}
.objekt-galerie__feld { aspect-ratio: 293 / 250; }
.objekt-galerie__feld:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 595 / 400; }
/*
* Eine Spalte, und der Kasten wandert nach oben: Titel, Eckdaten,
* Beschreibung — die Reihenfolge der alten Seite. Wer ein Objekt
* aufruft, will zuerst Preis, Lage und Zimmerzahl sehen und nicht
* tausend Punkte Text.
*/
.objekt-spalten {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"titel"
"seite"
"haupt";
gap: 32px;
}
.objekt-seite { width: 100%; }
.objekt-titel { font-size: 34px; line-height: 1.2; }
/*
* Der Eigenabstand des Titels entfaellt: untereinander zaehlt schon die
* Luecke des Rasters, und beides zusammen waren 56 Punkt zwischen Titel
* und erster Zeile — auf der alten Seite sind es 19.
*/
.objekt-kopf .objekt-titel { margin-bottom: 0; }
/*
* Der Kasten zusammengezogen: ueber die ganze Breite haben zwei Werte
* nebeneinander Platz. Das Zebra aus :nth-child entfaellt dabei — bei
* zwei Spalten traefe es jede zweite Zelle und nicht jede zweite Zeile,
* und daraus wuerde ein Schachbrett. Hier statt dessen eine Haarlinie
* unter jeder Zeile; auf dem Telefon kommt das durchgehende Streifen-
* muster der alten Seite (siehe unten, 767).
*/
.objekt-seite__kasten { padding: 24px; }
.objekt-block { margin-bottom: 24px; }
.objekt-block__liste {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
}
.objekt-seite__kasten .objekt-zeile {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid #ededed;
background: none;
}
.objekt-seite__kasten .objekt-zeile:first-child { padding-top: 6px; }
.objekt-zeile__wert { text-align: right; }
/*
* Die beiden Knoepfe im Kasten entfallen hier: dieselben stehen wenige
* Bildschirmhoehen weiter unten in "Download the Exposé!" und "Visit
* this Property?", und zweimal derselbe Knopf in einer Spalte ist einer
* zu viel.
*/
.objekt-seite__kasten > .objekt-knopf { display: none; }
}
/* ------------------------------------------- Telefon: Wischer mit Punkten */
/*
* Auf dem Telefon ist die Galerie kein Raster, sondern ein Wischer — so steht
* es auf der Live-Seite: ein Bild von 335 x 305 je Ansicht in einem Fenster
* von 350, also 15 Luecke, 10 gerundet, darunter Punkte zu 6 mit 18 Abstand.
*
* Gewischt wird mit Rastpunkten des Browsers und nicht mit einem Skript: das
* folgt dem Finger ohne Verzoegerung, laeuft auch ohne JavaScript und braucht
* keine fremde Bibliothek. Die Punkte darunter entstehen in
* assets/js/src/galerie-punkte.js.
*/
@media (max-width: 767px) {
.objektseite--detail { padding: 24px 20px 48px; }
.objekt-merkmale { grid-template-columns: 1fr; }
.objekt-titel { font-size: 28px; }
.objekt-spalten { gap: 24px; }
/*
* Die Eckdaten, abgelesen an realestepona.com bei 390.
*
* Drei Zeilen ueber die ganze Breite — Preis, Gemeinde, Objektnummer —
* und danach vier Reihen zu zweit. Kein Kasten: keine Rundung, kein
* Rahmen, kein Schatten. Jede zweite Reihe liegt auf #F7FAFC, und der
* Streifen laeuft ueber beide Haelften durch; deshalb steht zwischen den
* Spalten keine Luecke, sondern der Abstand sitzt als Innenabstand in den
* Zellen. Sonst liefe ein weisser Spalt mitten durch den Streifen.
*
* Der Abstand zwischen den beiden Paaren ist groesser als der zwischen
* Beschriftung und Wert (48 gegen 76 minus Textbreite): so sieht man auf
* einen Blick, welcher Wert zu welcher Beschriftung gehoert.
*
* Reihe 54 hoch bei 3 oben und 5 unten, Beschriftung 18 / Gewicht 300,
* Wert 18 / Gewicht 500, beide schwarz.
*/
.objekt-seite__kasten { display: none; }
.objekt-eck {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0;
margin: 0;
}
.objekt-eck__zeile {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-items: baseline;
min-height: 54px;
padding: 3px 0 5px;
font-size: 18px;
font-weight: 300;
line-height: 28.9px;
color: #000;
}
.objekt-eck__zeile--voll {
grid-column: 1 / -1;
grid-template-columns: 136px minmax(0, 1fr);
}
/*
* Eine kurze Angabe ohne Nachbarin: sie bleibt ein kleiner Block — die
* Beschriftung in ihren 76 Punkten, der Wert gleich daneben. Nur der
* Streifen nimmt die ganze Reihe, damit er nicht in der Mitte der Seite
* endet.
*/
.objekt-eck__zeile--allein { grid-column: 1 / -1; }
/* Der groessere Abstand zwischen den Paaren, ohne Loch im Streifen. */
.objekt-eck__zeile--links { padding-right: 24px; }
.objekt-eck__zeile--rechts { padding-left: 24px; }
.objekt-eck__zeile--hell { background: #f7fafc; }
.objekt-eck__name { margin: 0; font-weight: 300; }
.objekt-eck__wert { margin: 0; font-weight: 500; }
.objekt-galerie {
display: flex;
grid-template-columns: none;
grid-template-rows: none;
aspect-ratio: auto;
gap: 15px;
margin-bottom: 14px;
border-radius: 10px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.objekt-galerie::-webkit-scrollbar { display: none; }
/*
* Ein Bild je Ansicht, die Luecke bleibt sichtbar: 335 Bild und 15
* Luecke ergeben im Fenster von 350 genau einen Schritt.
*/
.objekt-galerie__feld {
flex: 0 0 calc(100% - 15px);
scroll-snap-align: start;
aspect-ratio: 335 / 305;
}
/* Hier gehoeren auch die Bilder dazu, die am Schirm verborgen sind. */
.objekt-galerie__feld--verborgen { display: block; }
.objekt-galerie__feld:first-child { grid-column: auto; grid-row: auto; }
.objekt-galerie__feld img:hover { transform: none; }
/*
* Die Standanzeige: eine Zahl unten rechts im Bild und ein Balken an
* seiner Unterkante.
*
* Vorher stand hier ein Punkt je Bild. Im Schnitt hat ein Objekt 29
* Fotos, das groesste 112 — daraus wurden fuenf Reihen Punkte von 62
* Punkt Hoehe, und jeder einzelne war 6 breit und damit als Schaltflaeche
* unbrauchbar. Die Zahl steht bei drei Fotos genauso wie bei
* hundertzwoelf und kostet nichts an Hoehe: sie liegt im Bild.
*/
.objekt-galerie__huelle { position: relative; }
.objekt-galerie__stand[hidden] { display: none; }
.objekt-galerie__zaehler {
position: absolute;
right: 27px;
bottom: 26px;
padding: 4px 10px 3px;
border-radius: 12px;
background: rgba(32, 39, 50, 0.72);
color: #fff;
font-family: Roboto, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0.02em;
}
/*
* Der Balken sitzt auf der Unterkante des Bildes, nicht darunter: so
* braucht er keine eigene Zeile. 15 Punkt schmaler als die Huelle, weil
* das Bild im Wischer seine Luecke rechts behaelt.
*/
.objekt-galerie__balken {
position: absolute;
left: 0;
right: 15px;
bottom: 14px;
height: 2px;
border-radius: 1px;
background: rgba(255, 255, 255, 0.45);
overflow: hidden;
}
.objekt-galerie__balken i {
display: block;
height: 100%;
background: #aa8d70;
transition: width 0.18s ease-out;
}
}
/*
* Am Schirm braucht es die Anzeige nicht — dort liegt alles gleichzeitig da.
* Als eigene Abfrage und nicht als Regel ohne Abfrage: eine spaetere Regel
* mit gleicher Spezifitaet gewinnt sonst gegen die des Telefons, und die
* Anzeige bliebe auch dort verborgen.
*/
@media (min-width: 768px) {
.objekt-galerie__stand { display: none; }
}
/* === components/fussrahmen.css === */
/* ------------------------------- Rahmen am Fuss: Fragen, Verkauf, Alarm */
/*
* Gemessen an realestepona.com (1920):
* Abschnitt volle Breite in #F2F2F2, 80 oben/unten, 120 seitlich
* Spalten zwei zu 808 mit 64 Luecke
* H2 Roboto Condensed 44.2 / 53.04 / Gewicht 300 in #202732
* H4 Roboto Condensed 23.8 / 33.32 / Gewicht 400 in Schwarz,
* 30 ueber sich, 10 darunter
* Zeilen Roboto 17 / 28.9 / Gewicht 300, Verweise in #CCAB86,
* Symbol links, Text bei 28
* Kaestchen 13 x 13 mit 5 Abstand, Beschriftung 15.3 / 28.9, zwei Spalten
* Felder 45 hoch, Innenabstand 6/15/5, 10 unter sich
* Knopf 150 x 39, 20 gerundet
*/
.fussrahmen {
/* Grauer Grund ueber die ganze Breite, der Innenabstand liegt darin — so
steht es dort. Die Felder des Formulars bleiben weiss. */
background: #f2f2f2;
padding: 80px 120px;
}
.fussrahmen__innen {
display: flex;
gap: 64px;
max-width: 1680px;
margin: 0 auto;
}
.fussrahmen__spalte { flex: 1 1 808px; min-width: 0; }
.fussrahmen__titel {
font-family: 'Roboto Condensed', sans-serif;
font-size: 44.2px;
font-weight: 300;
line-height: 53.04px;
color: #202732;
margin: 0;
}
.fussrahmen__titel--weiter { margin-top: 44px; }
.fussrahmen__text {
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #000;
margin: 0;
}
.fussrahmen__text strong { font-weight: 700; }
.fussrahmen__unter {
font-family: 'Roboto Condensed', sans-serif;
font-size: 23.8px;
font-weight: 400;
line-height: 33.32px;
color: #000;
margin: 30px 0 10px;
}
/*
* Erreichbarkeit: Symbol links, Text bei 28 — ohne Aufzaehlungspunkte.
* Zwischen den Zeilen 5 Punkte, gemessen am Original.
*/
.fussrahmen__wege {
display: grid;
gap: 5px;
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.fussrahmen__wege li {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
}
.fussrahmen__wege a {
color: #ccab86;
text-decoration: none;
overflow-wrap: anywhere;
}
.fussrahmen__wege a:hover { color: #aa8d70; }
.fussrahmen__symbol {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: #aa8d70;
}
.fussrahmen .objekt-knopf { margin: 18px 0 0; }
/* ------------------------------------------------------------ Alarm-Formular */
.fussrahmen__formular { margin-top: 10px; }
/*
* Der Baum der Objektarten: zwei Spalten mit je einem Ast. Oben die
* Kategorie in Gewicht 400, darunter eingerueckt ihre Untertypen.
*/
.fussrahmen__baum {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 10px;
margin-bottom: 20px;
}
.fussrahmen__zweige { margin-left: 18px; }
.fussrahmen__baum label,
.fussrahmen__gemeinden label {
display: flex;
align-items: center;
gap: 5px;
font-size: 15.3px;
font-weight: 300;
line-height: 28.9px;
color: #000;
cursor: pointer;
}
/* Die Kategorie steht etwas kraeftiger als ihre Untertypen. */
.fussrahmen__kategorie { font-weight: 400 !important; }
.fussrahmen__gemeinden {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 10px;
margin-bottom: 20px;
}
.fussrahmen__baum input,
.fussrahmen__gemeinden input {
width: 13px;
height: 13px;
flex: 0 0 13px;
margin: 0;
accent-color: #aa8d70;
}
.fussrahmen__reihe {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.fussrahmen__reihe--drei { grid-template-columns: 1fr 1fr 1fr; }
/*
* Eine Reihe mit einem einzelnen Feld. Auf dem Schirm behaelt es die Breite
* der uebrigen Zahlenfelder (die rechte Haelfte bleibt leer) — ueber die
* ganzen 801 Punkte gezogen saehe ein Feld fuer eine Quadratmeterzahl aus wie
* ein Textfeld. Auf dem Telefon nimmt es die Zeile.
*/
.fussrahmen__reihe--eins { grid-template-columns: 1fr 1fr; }
.fussrahmen__formular input[type="text"],
.fussrahmen__formular input[type="tel"],
.fussrahmen__formular input[type="email"],
.fussrahmen__formular select {
width: 100%;
height: 45px;
padding: 6px 15px 5px;
border: 1px solid #bfbfbf;
background: #fff;
font-family: Roboto, sans-serif;
font-size: 17px;
font-weight: 400;
color: #202732;
}
.fussrahmen__formular input:focus,
.fussrahmen__formular select:focus {
outline: 2px solid #aa8d70;
outline-offset: -2px;
}
/*
* Zwischentitel ueber den persoenlichen Angaben — eine Zeile, kein Feld.
* Im Original ohne Rand; der Abstand kommt aus dem Raster des Formulars.
*/
.fussrahmen__zwischen {
margin: 0;
padding: 5px 0;
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
color: #000;
}
/* Der Knopf des Alarms ist kleiner als die der Objektseite: 39 statt 44. */
.objekt-knopf--klein {
padding: 8px 15px 7px;
margin-top: 5px;
}
/* ---------------------------------------------------------------- Schmaler */
@media (max-width: 1400px) {
.fussrahmen { padding: 60px 40px; }
.fussrahmen__innen { gap: 40px; }
}
@media (max-width: 1024px) {
.fussrahmen { padding: 48px 24px; }
.fussrahmen__innen { flex-direction: column; gap: 48px; }
.fussrahmen__titel { font-size: 34px; line-height: 1.2; }
/*
* Untereinander wird aus der Basisbreite 808 eine Basis-HOEHE von 808 —
* die erste Spalte war damit 808 Punkte hoch, obwohl ihr Inhalt nach 527
* endete. Zwischen dem Knopf und der naechsten Ueberschrift klafften
* dadurch 329 Punkte leerer grauer Flaeche; genau das sah zerrissen aus.
* Hier zaehlt nur noch der Inhalt.
*/
.fussrahmen__spalte { flex: 0 0 auto; }
}
@media (max-width: 767px) {
/*
* 56 oben und unten statt 36/40. Darueber endet der Fliesstext mit 56
* Punkten Luft (objektliste.css); mit 36 sass der graue Block enger an
* seinem eigenen Inhalt als der weisse darueber, und die beiden Flaechen
* wirkten unterschiedlich gebaut.
*/
.fussrahmen { padding: 56px 20px; }
/*
* Die Ueberschrift braucht hier einen eigenen Abstand nach unten. Auf dem
* Schirm macht ihn die Zeilenhoehe: 53.04 bei 44.2 Punkten Schrift lassen
* rund 9 Punkte Luft unter der letzten Zeile. Mit 1.2 auf 28 sind es noch
* 3, und der Text klebte unter der Frage.
*/
.fussrahmen__titel { font-size: 28px; margin-bottom: 10px; }
/*
* 64 zwischen den beiden Bloecken — dieselbe Luecke, die auf dem Schirm
* zwischen den Spalten steht. Mit 40 lasen sie sich als ein
* durchgehender Block; es sind aber zwei Angebote, und das soll man sehen.
*/
.fussrahmen__innen { gap: 64px; }
/*
* Der Baum der Objektarten bleibt einspaltig — "Middle Floor Apartment"
* braucht mit Kaestchen und Einzug rund 200 Punkte, zwei davon passen
* nicht nebeneinander.
*
* Die Gemeinden bleiben zweispaltig: "Estepona", "Marbella", "Benahavis"
* sind kurz, und einspaltig wuerde die Liste doppelt so lang, ohne
* lesbarer zu sein.
*/
.fussrahmen__baum { grid-template-columns: 1fr; gap: 14px 10px; }
.fussrahmen__gemeinden { grid-template-columns: 1fr 1fr; }
/*
* Zahlenfelder bleiben zu zweit: "Min. Price" passt in 166 Punkte, und
* untereinander waeren es fuenf Zeilen fuer fuenf Zahlen.
*
* Die Felder mit Namen, Telefon und Mail bekommen die ganze Zeile — dort
* steht mehr drin, als auf eine halbe passt.
*/
.fussrahmen__reihe--text,
.fussrahmen__reihe--eins { grid-template-columns: 1fr; }
/*
* Anrede, Vorname, Nachname: die Anrede nimmt die ganze Zeile, die beiden
* Namen stehen darunter nebeneinander. Sie gehoeren zusammen und sind
* kurz genug; untereinander wurden aus drei Angaben drei Zeilen.
*/
.fussrahmen__reihe--drei { grid-template-columns: 1fr 1fr; }
.fussrahmen__reihe--drei > :first-child { grid-column: 1 / -1; }
/*
* Anhakfelder zum Antippen: 20 statt 13 Punkte, und die Zeile dazu auf
* 36 Punkte Hoehe. 13 Punkte trifft niemand mit dem Finger zuverlaessig —
* die Beschriftung daneben gehoert mit zur Flaeche, deshalb liegt die
* Hoehe am Etikett und nicht am Kaestchen.
*/
.fussrahmen__baum input,
.fussrahmen__gemeinden input {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.fussrahmen__baum label,
.fussrahmen__gemeinden label {
min-height: 36px;
gap: 10px;
font-size: 16px;
line-height: 1.3;
}
/* Der Einzug der Untertypen folgt dem groesseren Kaestchen. */
.fussrahmen__zweige { margin-left: 10px; }
/*
* Die Adressen der Kanaele laufen ueber zwei Zeilen. Mittig ausgerichtet
* schwebte das Symbol dann zwischen beiden; es gehoert auf die erste.
*/
.fussrahmen__wege li { align-items: flex-start; }
.fussrahmen__symbol { margin-top: 4px; }
}
/* ----------------------------------- Seite nach der Bestaetigung des Alarms */
/*
* api/alarm-bestaetigen.php zeigt eine eigene kleine Seite. Sie leiht sich
* dieses Stylesheet, braucht aber ihren eigenen Rahmen.
*/
.alarm-seite {
max-width: 700px;
margin: 0 auto;
padding: 80px 24px;
}
.alarm-seite h1 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 44.2px;
font-weight: 300;
line-height: 53.04px;
color: #202732;
margin: 0 0 16px;
}
.alarm-seite p {
font-size: 17px;
font-weight: 300;
line-height: 28.9px;
margin: 0 0 20px;
}
/* === components/blog.css === */
/* Blog Index */
.blog-grid-section { max-width: 1200px; margin: 0 auto; padding: 100px var(--container-padding); }
.blog-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* Blog Card */
.blog-card {
background: var(--color-white); overflow: hidden;
box-shadow: 0 0 5px rgba(0,0,0,0.25);
transition: box-shadow 0.3s, transform 0.3s;
}
.blog-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: translateY(-3px); }
.blog-card a { text-decoration: none; color: inherit; display: block; }
.blog-card__image { width: 100%; height: 220px; overflow: hidden; background: #e8e8e8; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.blog-card:hover .blog-card__image img { transform: scale(1.05); }
.blog-card__image--placeholder { background: linear-gradient(135deg, #202732 0%, #3a4555 100%); }
.blog-card__body { padding: 30px; }
.blog-card__title {
font-family: var(--font-heading); font-size: 21.6px; font-weight: 400;
color: #202732; margin: 0 0 12px; line-height: 1.25;
}
.blog-card__excerpt {
font-family: var(--font-body); font-size: 16px; font-weight: 300;
line-height: 1.6; color: #333; margin: 0 0 12px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__more {
display: block; font-family: var(--font-body); font-size: 16px;
font-weight: 300; color: var(--color-gold); margin-bottom: 14px;
}
.blog-card:hover .blog-card__more { color: var(--color-gold-hover); }
.blog-card__date {
display: block; font-family: var(--font-body); font-size: 14px;
font-weight: 300; color: var(--color-text-light);
}
/* Blog Post */
.blog-post-page { margin: 0 auto; }
/* Volle Breite wie im Original, Text in einer 1265px-Spalte */
.blog-post__hero {
width: 100%; aspect-ratio: 1425 / 579;
position: relative; overflow: hidden;
}
.blog-post__hero img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
}
/* Satzspiegel wie im Original: 900px. Begrenzt werden die Textbloecke,
nicht der Artikel — so kann die Galerie voll ausbrechen. */
.blog-post { margin: 0 auto; }
.blog-post__header,
.blog-post__block { max-width: 940px; margin: 0 auto; padding: 0 20px; }
.blog-post__header { padding: 50px 0 20px; }
.blog-post__meta {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px; font-size: 14px; color: var(--color-text-muted);
font-family: 'Roboto', sans-serif;
}
/*
* Verfasser und Datum stehen rechts in der Kopfzeile, durch einen Punkt
* getrennt. Zusammen in einem Element, weil sie dieselbe Frage beantworten:
* von wem und von wann ist der Text.
*/
.blog-post__autor {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.blog-post__autor-name { color: var(--color-text-light); }
.blog-post__autor-name::after {
content: '·';
margin-left: 10px;
color: var(--color-text-muted);
}
@media (max-width: 600px) {
/* Auf dem Telefon reicht die Breite nicht fuer Zurueck-Verweis, Name und
Datum in einer Zeile — dann untereinander, links ausgerichtet. */
.blog-post__meta {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.blog-post__back {
color: var(--color-gold); text-decoration: none; font-weight: 400;
transition: color 0.2s;
}
.blog-post__back:hover { color: #8a7058; }
.blog-post__header h1 {
font-family: var(--font-heading); font-size: 48px; font-weight: 300;
text-transform: none;
color: #202732; margin: 0 0 20px; line-height: 1.2;
}
.blog-post__note {
background: #f7f3ee; border-left: 4px solid var(--color-gold);
padding: 16px 20px; margin-bottom: 30px; border-radius: 0 4px 4px 0;
}
.blog-post__note p {
margin: 0; font-size: 15px; font-style: italic; color: #555;
font-family: 'Roboto', sans-serif; line-height: 1.5;
}
.blog-post__content {
font-family: var(--font-body); font-size: 18px;
line-height: 1.6; color: #000; font-weight: 300;
}
.blog-post__content h2 {
font-family: var(--font-heading); font-size: var(--schrift-untertitel); font-weight: 300;
color: var(--color-gold); margin: 30px 0 18px; line-height: 1.2;
}
.blog-post__content h3 {
font-family: var(--font-heading); font-size: 22px; font-weight: 400;
color: #202732; margin: 20px 0 11px; line-height: 1.2;
}
.blog-post__content p { margin: 0 0 18px; }
.blog-post__content a:not(.sell-btn) { color: var(--color-gold); text-decoration: none; }
.blog-post__content a:not(.sell-btn):hover { color: #8a7058; }
.blog-post__content ul, .blog-post__content ol { margin: 0 0 16px; padding-left: 24px; }
.blog-post__content li { margin-bottom: 6px; }
.blog-post__content img { max-width: 100%; height: auto; margin: 20px 0; }
.blog-post__content blockquote {
border-left: 3px solid var(--color-gold); margin: 20px 0;
padding: 10px 20px; font-style: italic; color: #555;
}
/* Exposé-Schaltflaeche nach jedem Textblock — nutzt den dunklen Button
der Verkaufsseite (.sell-btn) */
.blog-post__expose { padding: 12px 0 40px; }
.blog-post__gallery { margin: 10px 0 50px; }
/* Responsive */
@media (max-width: 900px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.blog-grid { grid-template-columns: 1fr; gap: 20px; }
.blog-hero { padding: 60px 20px 40px; }
.blog-hero h1 { font-size: 28px; }
.blog-post__header h1 { font-size: 30px; }
.blog-post__content { font-size: 16px; }
.blog-post__content h2 { font-size: 26px; }
.blog-post__hero { height: 240px; }
}
/* Verwandte Beitraege am Fuss des Artikels */
.blog-related { border-top: 1px solid var(--color-border); margin-top: 20px; }
.blog-related__inner {
/* volle Bildschirmbreite, nicht auf den Satzspiegel begrenzt */
max-width: none; margin: 0; padding: 100px var(--container-padding);
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.blog-related__item { text-decoration: none; display: block; }
.blog-related__image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 18px; }
.blog-related__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.blog-related__item:hover .blog-related__image img { transform: scale(1.05); }
.blog-related__title {
font-family: var(--font-heading); font-size: 27px; font-weight: 300;
color: var(--color-gold); margin: 0 0 8px; line-height: 1.2;
}
.blog-related__item:hover .blog-related__title { color: var(--color-gold-hover); }
.blog-related__date {
font-family: var(--font-body); font-size: 14px; font-weight: 300;
color: var(--color-text-light); margin: 0 0 10px;
}
.blog-related__excerpt {
font-family: var(--font-body); font-size: 16px; font-weight: 300;
line-height: 1.6; color: #000; margin: 0;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 900px) { .blog-related__inner { grid-template-columns: 1fr; gap: 30px; } }
/* Standortbild des Projekts als Trenner zwischen den letzten beiden Bloecken.
Linksbuendig auf der Textkante, wie im Original. */
.blog-post__divider {
max-width: 940px; margin: 0 auto 50px; padding: 0 20px;
text-align: left;
}
.blog-post__divider img { max-width: 100%; height: auto; display: inline-block; }
/* === components/blog-artikel.css === */
/* ============================================================
Blog-Artikel — Struktur aus dem aiadmin-Template, Stile/Palette
von newEstepona. Layout: Artikel links / Sidebar 350px rechts.
Keine erfundenen Kaesten, Mini-Headlines oder runden Bilder.
Projekt-Kacheln = unsere Standard-Kacheln (Slides im Text,
gestapelt in der Sidebar). Filter in der Sidebar = Mobil-Logik
(Suchfeld + Knopf -> Vollflaeche).
============================================================ */
/* Fixe Navi (100px) freihalten + 60px Luft nach oben */
.blog-artikel-page { padding-top: calc(var(--header-height) + 60px); }
/* ---- Breadcrumbs (volle 1200px, kein Seitenpadding) ---- */
.ne-breadcrumbs { border-bottom: 1px solid var(--color-border); }
.ne-breadcrumbs__inner { max-width: var(--container-width); margin: 0 auto; padding: 12px 0; font-size: 0.85rem; color: #6b7280; }
.ne-breadcrumbs a { color: #6b7280; }
.ne-breadcrumbs a:hover { color: var(--color-gold); }
.ne-breadcrumbs__sep { margin: 0 0.4rem; color: #d1d5db; }
/* ---- Grundraster: volle 1200px, kein Seitenpadding ---- */
.article-layout {
max-width: var(--container-width); margin: 0 auto;
padding: 60px 0 80px;
display: grid; grid-template-columns: minmax(0, 1fr) 350px;
gap: 92px; align-items: start;
}
.article-content { min-width: 0; }
/* ---- Artikelkopf ---- */
.article-header-top { margin-bottom: 1.5rem; }
.article-cat-link { display: inline-block; font-family: var(--font-heading); font-size: 18px; font-weight: 400; color: var(--color-gold); margin-bottom: 0.5rem; }
.article-cat-link:hover { color: var(--color-gold-hover); }
.article-title { font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 40px); font-weight: 300; line-height: 1.2; color: var(--color-heading); margin: 0 0 20px; }
.article-meta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: #9ca3af; margin: 0; }
.article-meta__sep { color: #d1d5db; }
.blog-artikel__updated { color: #9ca3af; }
/* ---- Hero-Bild im grauen Band (kein Radius/Schatten/Versatz) ---- */
/* Grauer Band voll breit; Bild laeuft 40px nach LINKS aus dem Satzspiegel
raus, rechts bleiben 40px Grau stehen (gleiche Breite). */
.article-hero-img { margin: 2rem 0 3rem; padding: 40px 0; background: var(--color-bg-light); overflow: visible; }
.article-hero-img img { width: 100%; margin-left: -40px; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--hero-bildlage, center); display: block; }
/* ---- Fliesstext ---- */
/* WICHTIG: nur direkte Prosa-Kinder ansprechen — niemals verschachtelte
Komponenten wie unsere Projekt-Kacheln (die im Text als Karussell stehen).
Sonst ueberschreibt .article-body h3/img/a die Kachel und reisst sie auf. */
.article-body { font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: #666; }
.article-body > p { margin: 0 0 1.5rem; }
.article-body > p a, .article-body > ul a, .article-body > ol a, .article-body > blockquote a, .article-body > .blog-box a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; }
.article-body > p a:hover, .article-body > ul a:hover, .article-body > ol a:hover, .article-body > blockquote a:hover, .article-body > .blog-box a:hover { color: var(--color-gold-hover); }
.article-body > p strong, .article-body > ul strong, .article-body > ol strong, .article-body li strong { color: var(--color-heading); font-weight: 600; }
.article-body > h2 { font-family: var(--font-heading); font-weight: 300; font-size: 30px; line-height: 1.25; color: var(--color-heading); margin: 53px 0 23px; scroll-margin-top: 120px; }
.article-body > h3 { font-family: var(--font-heading); font-weight: 400; font-size: 23px; color: var(--color-heading); margin: 31px 0 16px; }
.article-body > figure img { max-width: 100%; height: auto; }
/* Jedes Modul steht autark: 40px Luft oben+unten. Steht davor/danach eine
Ueberschrift mit eigener Marge, bleibt es durch margin-collapse bei 40px.
Nur Top-Level-Module (direkte Kinder), damit z. B. eine Liste IN einer Box
ihre normale Marge behaelt. */
.article-body > .blog-liste,
.article-body > .blog-check,
.article-body > .blog-schritte,
.article-body > .blog-timeline,
.article-body > .blog-box,
.article-body > .blog-tabelle,
.article-body > .blog-bild,
.article-body > .blog-zitat,
.article-body > .blog-marktkasten,
.article-body > .blog-cta,
.article-body > .blog-projekte,
.article-body > .blog-hinweis {
margin-top: 60px;
margin-bottom: 60px;
}
/* Steht eine Ueberschrift DIREKT vor einem Modul, gehoert sie zum Modul:
sie ruecken eng zusammen, die 60px liegen dann VOR der Ueberschrift. */
.article-body > :is(h2, h3) + :is(.blog-liste, .blog-check, .blog-schritte, .blog-timeline, .blog-box, .blog-tabelle, .blog-bild, .blog-zitat, .blog-marktkasten, .blog-cta, .blog-projekte, .blog-hinweis) {
margin-top: 0;
}
.article-body > :is(h2, h3):has(+ :is(.blog-liste, .blog-check, .blog-schritte, .blog-timeline, .blog-box, .blog-tabelle, .blog-bild, .blog-zitat, .blog-marktkasten, .blog-cta, .blog-projekte, .blog-hinweis)) {
margin-top: 60px;
}
/* Aufzaehlung (Modul .blog-liste), Fallback fuer klassenlose Listen im Text.
Schlicht, dezenter Gold-Punkt, KEIN linker Rahmen. */
.blog-liste, .article-body ul:not([class]) { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.blog-liste > li, .article-body ul:not([class]) > li { position: relative; padding-left: 26px; margin-bottom: 0.5rem; }
.blog-liste > li::before, .article-body ul:not([class]) > li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 7px; height: 7px; background: var(--color-gold); border-radius: 50%; }
.article-body ol:not([class]) { margin: 0 0 1.5rem 1.4em; padding: 0; }
.article-body ol:not([class]) > li { margin-bottom: 0.5rem; padding-left: 0.3em; }
.article-body ol:not([class]) > li::marker { color: var(--color-gold); font-family: var(--font-heading); }
/* Checkliste: hellgrauer Kreis mit beigem Haken */
.blog-check { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.blog-check > li { position: relative; padding-left: 34px; margin-bottom: 0.7rem; }
.blog-check > li::before { content: "\2713"; position: absolute; left: 0; top: 0.1em; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 13px; color: var(--color-gold); background: #ededed; border-radius: 50%; }
/* Nummerierte Schritte: Zahl oberkantenbuendig, Headline ueber Fliesstext */
.blog-schritte { list-style: none; counter-reset: schritt; margin: 0 0 1.6rem; padding: 0; }
.blog-schritte > li { position: relative; padding: 0 0 0 56px; margin-bottom: 1.5rem; min-height: 40px; }
.blog-schritte > li::before {
counter-increment: schritt; content: counter(schritt);
position: absolute; left: 0; top: 0; width: 40px; height: 40px; line-height: 38px; text-align: center;
background: #fff; border: 1px solid var(--color-gold-light); color: var(--color-heading);
border-radius: 50%; font-family: var(--font-heading); font-weight: 400; font-size: 17px;
}
/* Nur die Headline (erstes strong) wird Block; Betonungen im Fliesstext bleiben inline.
line-height 40px = Kreishoehe -> Headline vertikal mittig zum Zahlenkreis. */
.blog-schritte > li > strong:first-child { display: block; line-height: 40px; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--color-heading); margin-bottom: 4px; }
/* Timeline (Zeitpunkte) — vertikale Linie, Punkt je Eintrag, Zeit fett darueber */
.blog-timeline { list-style: none; margin: 0 0 1.6rem; padding: 0; border-left: 2px solid #ccc; }
.blog-timeline > li { position: relative; margin: 0 0 1.1rem; padding: 0 0 0 26px; }
.blog-timeline > li:last-child { margin-bottom: 0; }
/* 14px-Punkt, mittig auf der 2px-Linie: left = -1px(Linienmitte) - 7px(Radius) */
.blog-timeline > li::before { content: ""; position: absolute; left: -8px; top: 0.32em; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--color-gold); }
.blog-timeline__zeit { display: block; font-family: var(--font-heading); font-weight: 400; color: var(--color-heading); margin-bottom: 2px; }
/* Zitat / Pull-Quote */
.blog-zitat { position: relative; font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: 1.55rem; line-height: 1.4; color: var(--color-heading); margin: 2rem 0; padding-left: 40px; }
.blog-zitat::before { content: "\201C"; position: absolute; left: 0; top: 0.12em; font-family: var(--font-heading); font-size: 4.2rem; line-height: 0.9; color: var(--color-gold-light); }
/* Tabellen: Modul ist ein mit + optionaler figcaption */
.blog-tabelle { margin: 1.7rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.blog-tabelle table { width: 100%; border-collapse: collapse; background: #fff; font-size: 16px; }
.blog-tabelle thead th { background: #f4efe5; color: var(--color-heading); font-family: var(--font-body); font-weight: 700; font-size: 16px; text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--color-gold-light); }
.blog-tabelle th, .blog-tabelle td { vertical-align: top; }
.blog-tabelle td { padding: 13px 20px; color: #444; }
.blog-tabelle tbody tr:nth-child(even) { background: #f2f2f2; }
.blog-tabelle td:first-child { font-weight: 700; color: var(--color-heading); }
.blog-tabelle figcaption { margin-top: 8px; font-size: 13px; color: #9a9a9a; }
/* Hinweisbox im Text: schlicht, kein linker Rahmen, keine Mini-Headline */
.blog-box { background: #f7f7f7; padding: 40px; border-left: 3px solid var(--color-gold-light); margin: 1.8rem 0; }
.blog-box__titel { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; color: var(--color-heading); margin: 0 0 6px; }
.blog-box p { margin: 0; }
.blog-box--achtung .blog-box__titel { color: var(--color-red); }
/* Faktenbox: Titel als H3, 4 Fakten als 2x2-Karten (weiss, beige Kontur, 40px, gleiche Hoehe) */
.blog-box--fakten { background: none; padding: 0; border-left: none; }
.blog-fakten__titel { font-family: var(--font-heading); font-weight: 400; font-size: 23px; line-height: 1.3; color: var(--color-heading); margin: 0 0 16px; }
.blog-fakten__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; grid-auto-rows: 1fr; }
.blog-fakten__box { background: #f2f2f2; border: 1px solid var(--color-gold-light); padding: 40px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.blog-fakten__box strong { display: block; font-family: var(--font-body); font-weight: 700; font-size: 22px; color: var(--color-gold); margin-bottom: 8px; }
@media (max-width: 768px) { .blog-fakten__raster { grid-template-columns: 1fr; } }
/* Bild mit Bildunterschrift */
.blog-bild { margin: 1.8rem 0; }
.blog-bild img { width: 100%; display: block; border: 1px solid #ccc; }
.blog-bild figcaption { margin-top: 0.5rem; font-size: 14px; color: var(--color-text-light); text-align: center; }
/* Hochformat 4:5, das auf dem Desktop neben dem Text stehen darf */
.blog-bild--hoch { float: right; width: 320px; max-width: 45%; margin: 0.3rem 0 1rem 1.6rem; }
.blog-bild--hoch figcaption { text-align: left; }
/* Rechtshinweis: dezent, kleine Schrift, Rahmen */
.blog-hinweis { margin: 40px 0 0; padding: 16px 20px; border: 1px solid var(--color-border); background: #fafafa; font-size: 13px; line-height: 1.6; color: #777; }
.blog-hinweis p { margin: 0; }
.blog-hinweis strong { color: #555; }
/* Inhaltsverzeichnis: kein HG-Kasten, oben+unten 1px #ccc zum Abtrennen */
.blog-toc { margin: 2rem 0; padding: 24px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.blog-toc__titel { font-family: var(--font-heading); font-weight: 400; font-size: 23px; line-height: 1.3; color: var(--color-heading); margin: 0 0 12px; }
.blog-toc ol { margin: 0; padding-left: 1.2em; }
.blog-toc li { margin-bottom: 6px; }
.blog-toc a { color: var(--color-gold); }
.blog-toc a:hover { color: var(--color-gold-hover); }
/* Marktzahl (inline) + Marktkasten */
.blog-marktzahl__wert { font-family: var(--font-heading); font-weight: 400; color: var(--color-gold); }
.blog-marktzahl__label { font-size: 0.85em; color: #8a8a8a; }
.blog-marktkasten { background: #f7f7f7; padding: 22px 26px; margin: 1.8rem 0; }
.blog-marktkasten__ort { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; color: var(--color-heading); margin: 0 0 14px; }
.blog-marktkasten__zeile { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.blog-marktkasten__zeile:last-of-type { border-bottom: none; }
.blog-marktkasten__wert { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; color: var(--color-heading); }
.blog-marktkasten__label { color: #666; font-size: 15px; }
.blog-marktkasten__quelle { margin: 12px 0 0; font-size: 12px; color: #9a9a9a; }
/* CTA: hellbeige Karte, beige Kontur, Text links, Foto (freigestellt) unten rechts auf der Border */
.blog-cta { position: relative; min-height: 250px; background: #f6f1e8; border: 1px solid var(--color-gold-light); padding: 40px 240px 40px 40px; margin: 2.2rem 0; background-image: url('../images/Christiane-freigestellt-bust.webp'); background-repeat: no-repeat; background-position: right bottom; background-size: 210px auto; }
.blog-cta__titel { font-family: var(--font-heading); font-weight: 400; font-size: 1.3rem; color: var(--color-heading); margin: 0 0 6px; }
.blog-cta__satz { margin: 0 0 12px; color: #555; font-size: 16px; }
.blog-cta__person { margin: 0 0 16px; font-size: 15px; color: var(--color-heading); }
.blog-cta__person a { color: var(--color-gold); text-decoration: none; }
.blog-cta__person a:hover { color: var(--color-gold-hover); }
.blog-cta__sep { margin: 0 12px; color: #bbb; }
.blog-cta__aktion { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0; }
.blog-cta__wa { display: inline-block; background: var(--color-whatsapp); color: #fff; font-weight: 500; padding: 11px 24px; border-radius: 5px; font-size: 15px; }
.blog-cta__wa:hover { filter: brightness(0.94); color: #fff; }
.blog-cta__schreiben { display: inline-block; background: var(--color-gold); color: #fff; font-weight: 500; padding: 11px 24px; border-radius: 5px; font-size: 15px; text-decoration: none; }
.blog-cta__schreiben:hover { background: var(--color-gold-hover); color: #fff; }
/* Projekt-Slider im Text: unsere Standard-Kacheln, 2 je Ansicht, Pfeile blaettern */
.blog-projekte { margin: 2.2rem 0; }
.blog-projekte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 1rem; }
.blog-projekte__titel { font-family: var(--font-heading); font-weight: 300; font-size: 1.9rem; color: var(--color-heading); margin: 0; }
.blog-projekte__nav { display: flex; gap: 8px; flex-shrink: 0; }
.blog-projekte__pfeil { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: #fff; color: var(--color-heading); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.blog-projekte__pfeil:hover { border-color: var(--color-gold); color: var(--color-gold); }
.blog-projekte__pfeil:disabled { opacity: 0.35; cursor: default; border-color: var(--color-border); color: var(--color-heading); }
.blog-projekte__spur { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 8px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.blog-projekte__spur::-webkit-scrollbar { display: none; }
.blog-projekte__spur .project-grid-card { width: auto; scroll-snap-align: start; }
.blog-projekte__mehr { display: inline-block; margin-top: 0.8rem; color: var(--color-gold); font-weight: 500; }
@media (max-width: 768px) {
.blog-projekte__spur { grid-auto-columns: 100%; }
}
/* FAQ im Artikel */
.article-content .blog-artikel__faqs { padding: 36px 0 0; max-width: none; margin: 44px 0 0; border-top: 1px solid var(--color-border); }
.article-content .blog-artikel__faqs h2 { text-align: left; font-size: 30px; font-weight: 300; margin: 0 0 20px; }
/* Quellen */
.blog-quellen { margin: 40px 0 0; padding: 0; border-top: none; }
.blog-quellen summary { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--color-heading); margin: 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.blog-quellen summary::-webkit-details-marker { display: none; }
.blog-quellen summary::after { content: "+"; font-size: 20px; font-weight: 300; color: var(--color-gold); margin-left: 20px; line-height: 1; }
.blog-quellen[open] summary::after { content: "\2212"; }
.blog-quellen ul { list-style: none; margin: 16px 0 0; padding: 0; }
.blog-quellen li { margin-bottom: 8px; font-size: 15px; }
.blog-quellen a { color: var(--color-gold); }
.blog-quellen__datum { color: #9a9a9a; font-size: 13px; }
/* ============================================================
SIDEBAR — flach (keine Kaesten)
============================================================ */
.sidebar { min-width: 0; }
.sidebar-widget { background: transparent; border: none; padding: 0; box-shadow: none; }
/* NUR die eigene Widget-Ueberschrift (direktes Kind), niemals den verschachtelten
Kachel-Titel .project-grid-card__title (sonst 24px/Margin -> Kachel kaputt). */
.sidebar-widget > h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--color-heading); margin: 0 0 12px; }
.sidebar-widget + .sidebar-widget { margin-top: 76px; }
/* Autor = Kontaktframe 1:1 (Groessen/Abstaende), Foto als Hintergrund unten rechts */
/* Foto ~90% der Originalgroesse (256px -> 230px) und nach rechts rausgeschoben
(rechter Teil wird an der Box-Kante beschnitten). */
.blog-kontakt { position: relative; padding-bottom: 96px; border-bottom: 1px solid #ccc; background-image: url('../images/Christiane-freigestellt-bust.webp'); background-repeat: no-repeat; background-position: calc(100% + 40px) bottom; background-size: 230px auto; }
.blog-kontakt h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--color-heading); margin: 0 0 10.8px; }
.blog-kontakt__sub { font-family: var(--font-body); font-size: 16.2px; font-weight: 300; line-height: 1.6; color: #000; margin: 0 0 16.2px; }
.blog-kontakt__person { font-family: var(--font-body); font-size: 16.2px; font-weight: 300; line-height: 25.92px; color: #000; margin: 0 0 16.2px; }
.blog-kontakt__person strong { font-weight: 700; }
.blog-kontakt__person a { color: #000; text-decoration: none; }
.blog-kontakt__person a:hover { color: var(--color-gold); }
/* Kategorien untereinander */
.blog-kat { list-style: none; margin: 0; padding: 0; }
.blog-kat li { border-bottom: 1px solid var(--color-border); }
.blog-kat li:last-child { border-bottom: none; }
.blog-kat__link { display: block; padding: 9px 0; color: var(--color-heading); font-size: 16px; transition: color 0.2s, padding-left 0.2s; }
.blog-kat__link:hover { color: var(--color-gold); padding-left: 5px; }
.blog-kat__link.is-aktiv { color: var(--color-gold); font-weight: 600; }
/* Immobilien: unsere Standard-Kacheln gestapelt (grid-1col) */
.sidebar-immobilien__grid { margin-top: 16px; }
/* Kompaktansicht: quadratisches Thumb links, Ort/Titel/Preis in 3 Zeilen rechts */
.project-grid.grid-1col.project-grid--kompakt { gap: 0; }
.project-grid--kompakt .project-grid-card--kompakt { display: flex; gap: 14px; align-items: center; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); background: #fff; }
.project-grid--kompakt .project-grid-card--kompakt:last-child { border-bottom: none; }
.project-grid-card--kompakt .pk-thumb { flex: 0 0 auto; width: 92px; height: 92px; overflow: hidden; }
.project-grid-card--kompakt .pk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-grid-card--kompakt .pk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.project-grid-card--kompakt .pk-ort { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: #8a8a8a; }
.project-grid-card--kompakt .pk-titel { font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.12; color: var(--color-heading); text-transform: none; }
.project-grid-card--kompakt .pk-preis { font-size: 13px; color: #666; font-weight: 600; }
/* ---- Filter in der Sidebar: Mobil-Mechanik erzwingen (Suchfeld + Knopf,
Felder als Vollflaeche). Nur hier gescopt, andere Seiten unberuehrt. ---- */
/* 21px (kollabiert mit der 12px-Marge der h3) = gleicher Abstand wie
"Categories" zum ersten Punkt. */
.blog-filter { position: relative; margin: 21px 0 24px; }
.blog-filter .filter-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; padding: 0; margin: 0; }
.blog-filter .filter-suche { width: auto; flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--color-heading); border-radius: 0; background-color: #fff; background-position: left 15px center; }
.blog-filter .filter-knopf { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 46px; padding: 0 20px; border: none; background: var(--color-heading); color: #fff; font-family: var(--font-heading); font-size: 16px; font-weight: 400; text-transform: uppercase; cursor: pointer; }
.blog-filter .filter-knopf__zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--color-gold); color: #fff; font-family: var(--font-body); font-size: 12px; }
.blog-filter .filter-knopf__zahl[hidden] { display: none; }
/* Desktop: eleganter Popover unter dem Filter (kein Vollbild-Abdecker) */
.blog-filter .filter-bar__felder { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: 320px; max-width: calc(100vw - 40px); background: #fff; color: var(--color-text); border: 1px solid var(--color-border); box-shadow: 0 12px 40px rgba(0,0,0,0.16); padding: 16px 18px; max-height: 70vh; overflow-y: auto; }
.blog-filter .filter-bar__felder.ist-offen { display: block; }
.blog-filter .filter-flaeche__kopf { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 14px; }
.blog-filter .filter-flaeche__titel { font-family: var(--font-heading); font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-heading); }
.blog-filter .filter-flaeche__zu { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #9a9a9a; font-size: 26px; line-height: 1; cursor: pointer; }
.blog-filter .filter-flaeche__zu:hover { color: var(--color-gold); }
.blog-filter .filter-bar__filters, .blog-filter .filter-bar__sort { display: block; }
.blog-filter .filter-bar__felder select { width: 100%; height: 44px; margin-bottom: 10px; font-size: 15px; color: var(--color-text); background-color: #fff; border: 1px solid var(--color-border); padding: 0 14px; appearance: none; -webkit-appearance: none; 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='%23202732'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.blog-filter .filter-bar__felder select:focus { border-color: var(--color-gold); outline: none; }
.blog-filter .filter-flaeche__fuss { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.blog-filter .filter-flaeche__leeren { flex: 0 0 auto; padding: 0 16px; height: 44px; background: none; border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-body); font-size: 14px; cursor: pointer; }
.blog-filter .filter-flaeche__leeren:hover { border-color: var(--color-gold); color: var(--color-gold); }
.blog-filter .filter-flaeche__zeigen { flex: 1 1 auto; height: 44px; background: var(--color-gold); border: none; color: #fff; font-family: var(--font-heading); font-size: 15px; font-weight: 400; text-transform: uppercase; cursor: pointer; }
.blog-filter .filter-flaeche__zeigen:hover { background: var(--color-gold-hover); }
/* Mobil: echter Vollbild-Abdecker (dunkel) */
@media (max-width: 768px) {
.blog-filter .filter-bar__felder { position: fixed; inset: 0; width: auto; max-width: none; z-index: 1000; background: rgba(0,0,0,0.97); color: #fff; border: none; box-shadow: none; padding: 0 20px 20px; max-height: none; }
.blog-filter .filter-flaeche__kopf { min-height: var(--header-height); border-bottom-color: rgba(255,255,255,0.15); padding-bottom: 0; margin-bottom: 24px; }
.blog-filter .filter-flaeche__titel { font-size: 24px; letter-spacing: 0.06em; color: var(--color-gold); }
.blog-filter .filter-flaeche__zu { width: 44px; height: 44px; color: #fff; font-size: 34px; }
.blog-filter .filter-bar__felder select { height: 52px; margin-bottom: 14px; font-size: 16px; color: #fff; background-color: transparent; border-color: rgba(255,255,255,0.35); 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='%23fff'/%3E%3C/svg%3E"); }
.blog-filter .filter-bar__felder select option { color: #fff; background: #111; }
.blog-filter .filter-flaeche__fuss { margin-top: 26px; gap: 12px; }
.blog-filter .filter-flaeche__leeren { height: 52px; font-size: 16px; color: #fff; border-color: rgba(255,255,255,0.35); }
.blog-filter .filter-flaeche__leeren:hover { color: var(--color-gold-light); }
.blog-filter .filter-flaeche__zeigen { height: 52px; font-size: 17px; }
}
/* ============================================================
VERWANDTE ARTIKEL (volle 1200px)
============================================================ */
.blog-related { max-width: var(--container-width); margin: 0 auto; padding: 100px 0; border-top: none; }
.blog-related__titel { font-family: var(--font-heading); font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--color-heading); margin: 0 0 24px; }
/* Vertikal Luft ja, seitlich NICHT (ueberschreibt die alte blog.css-Regel mit var(--container-padding)) */
.blog-related__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; max-width: none; margin: 0; }
/* Overlay-Kachel wie im Magazin: BG-Bild, weisser Titel unten mit Dunkelverlauf */
.blog-related__item { position: relative; display: block; overflow: hidden; color: #fff; aspect-ratio: 4 / 3; }
.blog-related__item img, .blog-related__platzhalter { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-related__platzhalter { background: linear-gradient(135deg, #6b7280, #374151); }
.blog-related__overlay { position: absolute; inset: auto 0 0 0; padding: 48px 20px 18px; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0) 100%); }
.blog-related__title { font-family: var(--font-heading); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: #fff; margin: 0; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1280px) {
.ne-breadcrumbs__inner, .article-layout, .autor { padding-left: var(--container-padding); padding-right: var(--container-padding); }
}
@media (max-width: 1024px) {
.article-layout { grid-template-columns: 1fr; gap: 0; }
.article-layout .sidebar { margin-top: 48px; }
.blog-related__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.blog-artikel-page { padding-top: calc(var(--header-height) + 20px); }
.ne-breadcrumbs__inner, .article-layout { padding-left: var(--container-padding-mobile); padding-right: var(--container-padding-mobile); }
.article-hero-img { padding: 20px 0; }
.article-hero-img img { margin-left: -20px; }
.article-body { font-size: 17px; }
.blog-bild--hoch { float: none; width: auto; max-width: none; margin: 1.8rem 0; }
.blog-cta { padding: 32px 32px 200px; background-position: center bottom; background-size: 180px auto; min-height: 0; }
/* Mobile: seitlicher Gutter wie die anderen Sektionen, weniger Luft oben */
.blog-related { padding: 32px var(--container-padding-mobile) 40px; }
.blog-related__inner { grid-template-columns: 1fr; }
}
/* ============================================================
Autorenseite (verlinkt, nicht in Nav): freigestelltes Foto seitlich,
Text daneben. Person-Schema fuers E-E-A-T liegt im .
============================================================ */
.autor-page { padding-top: calc(var(--header-height) + 60px); }
/* Keine eigene Linie — das Foto setzt unten auf der Rahmenkante der
folgenden contact-section auf (die hat border-top: 1px #ccc). */
.autor { max-width: var(--container-width); margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 550px; gap: 56px; align-items: end; }
.autor__foto { align-self: end; margin-bottom: -1px; }
.autor__bild { width: 100%; height: auto; display: block; }
.autor__text { min-width: 0; align-self: end; padding-bottom: 100px; }
.autor__rolle { font-family: var(--font-heading); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gold); margin: 0 0 8px; }
.autor__name { font-family: var(--font-heading); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; color: var(--color-heading); margin: 0 0 24px; }
.autor__bio { font-family: var(--font-body); font-size: 18px; line-height: 1.8; color: #444; }
.autor__bio p { margin: 0 0 1.2em; }
.autor__kontakt { margin: 24px 0 16px; font-size: 16px; color: var(--color-heading); }
.autor__kontakt a { color: var(--color-gold); text-decoration: none; }
.autor__kontakt a:hover { color: var(--color-gold-hover); }
.autor__sep { margin: 0 12px; color: #bbb; }
.autor__aktion { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0; }
.autor__wa { display: inline-block; background: var(--color-whatsapp); color: #fff; font-weight: 500; padding: 11px 24px; border-radius: 5px; font-size: 15px; text-decoration: none; }
.autor__wa:hover { filter: brightness(0.94); color: #fff; }
.autor__schreiben { display: inline-block; background: var(--color-gold); color: #fff; font-weight: 500; padding: 11px 24px; border-radius: 5px; font-size: 15px; text-decoration: none; }
.autor__schreiben:hover { background: var(--color-gold-hover); color: #fff; }
@media (max-width: 900px) {
.autor { grid-template-columns: 1fr; gap: 24px; text-align: center; }
.autor__foto { max-width: 300px; margin: 0 auto; }
.autor__text { padding-bottom: 0; }
.autor__kontakt { display: flex; justify-content: center; flex-wrap: wrap; }
.autor__aktion { justify-content: center; }
}
@media (max-width: 768px) {
.autor-page { padding-top: calc(var(--header-height) + 20px); }
.autor { padding-left: var(--container-padding-mobile); padding-right: var(--container-padding-mobile); }
}
/* Autorenseite: Profil-/Marken-Links unter den Aktionen */
.autor__links { margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.autor__links-gruppe { font-size: 14px; color: #666; }
.autor__links-titel { display: inline-block; margin-right: 10px; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; color: #9a9a9a; }
.autor__links-gruppe a { color: var(--color-gold); text-decoration: none; margin-right: 14px; }
.autor__links-gruppe a:hover { color: var(--color-gold-hover); text-decoration: underline; }
@media (max-width: 900px) {
.autor__links { align-items: center; }
}
/* Autor-Byline verlinkt auf die Autorenseite */
.article-meta__autor a { color: var(--color-gold); text-decoration: none; }
.article-meta__autor a:hover { text-decoration: underline; }
/* === components/blog-index.css === */
/* ============================================================
Blog-Uebersicht (Magazin) — Aufbau 1:1 aiadmin-Startseite,
Farben/Fonts newEstepona. Alles unter .blog-index gescopt,
damit keine generischen Klassen (.container, .section-badge …)
mit dem Rest der Seite kollidieren.
============================================================ */
.blog-index .home-content { padding: 100px 0 80px; }
.blog-index .container { max-width: var(--container-width); margin: 0 auto; padding: 0; }
/* Desktop-/Mobile-Umschaltung (Markup-Swap) */
.blog-index .home-mobile { display: none; }
/* Section-Badge (Kategorie) */
.blog-index .section-badge {
display: inline-block; background: var(--color-heading); color: #fff;
padding: 8px 20px 6px; font-family: var(--font-heading); font-weight: 400;
font-size: 18px; line-height: 1.7em; text-transform: uppercase;
letter-spacing: 0.05em; margin: 0 0 -1px;
}
.blog-index a.section-badge:hover { opacity: 0.85; color: #fff; }
.blog-index .section-badge-line,
.blog-index .column-badge-line {
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem;
}
.blog-index .badge-all-link {
font-size: 14.58px; font-weight: 400; text-transform: none; letter-spacing: normal;
color: var(--color-gold); white-space: nowrap; padding-bottom: 6px;
}
.blog-index .badge-all-link:hover { color: var(--color-gold-hover); text-decoration: underline; }
/* Overlay-Kategorielabel */
.blog-index .card-cat { font-size: 14.4px; font-weight: 400; color: rgba(255,255,255,0.85); }
/* ===== Hero (1. Kategorie) ===== */
.blog-index .hero-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 490px; gap: 4px; margin-top: 1rem; }
.blog-index .hero-main { position: relative; display: block; overflow: hidden; color: #fff; }
.blog-index .hero-main img, .blog-index .hero-main-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
/* aus imageTagFuerBreite muss den fest hohen Slot fuellen, damit
img { height:100% } greift. */
.blog-index .hero-main picture, .blog-index .hero-grid-card picture { display: block; width: 100%; height: 100%; }
.blog-index .hero-main-placeholder, .blog-index .hero-grid-placeholder { background: linear-gradient(135deg, #6b7280, #374151); }
.blog-index .hero-main-overlay { position: absolute; inset: auto 0 0 0; padding: 56px 20px 22px; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.62) 42%, rgba(0,0,0,0) 100%); }
.blog-index .hero-main h2 { font-family: var(--font-heading); font-weight: 400; color: #fff; font-size: 25.2px; line-height: 1.3; margin: 0.3rem 0 0; }
.blog-index .hero-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.blog-index .hero-grid-card { position: relative; display: block; overflow: hidden; color: #fff; }
.blog-index .hero-grid-card img, .blog-index .hero-grid-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-index .hero-grid-overlay { position: absolute; inset: auto 0 0 0; padding: 44px 18px 18px; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.58) 48%, rgba(0,0,0,0) 100%); }
.blog-index .hero-grid-card h3 { font-family: var(--font-heading); font-weight: 400; color: #fff; font-size: 19.8px; line-height: 1.3; margin: 0.2rem 0 0; }
/* ===== 3-Spalten (restliche Kategorien) ===== */
.blog-index .columns-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem; margin-top: 5rem; margin-bottom: 3rem; }
.blog-index .columns-grid .column-section { padding: 0; }
.blog-index .column-featured { display: block; color: inherit; margin-bottom: 1.25rem; }
.blog-index .column-featured img, .blog-index .column-featured-placeholder { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-index .column-featured-placeholder { background: linear-gradient(135deg, #6b7280, #374151); }
.blog-index .column-featured-info { padding: 0.6rem 0 0; }
.blog-index .column-featured-cat, .blog-index .column-list-cat { display: block; font-size: 14.58px; font-weight: 400; color: var(--color-gold); margin-bottom: 0.15rem; }
.blog-index .column-featured h3 { font-family: var(--font-heading); font-weight: 400; color: var(--color-heading); font-size: 18px; line-height: 1.4; margin: 0; }
.blog-index .column-featured:hover h3 { color: var(--color-gold); }
/* Liste unter Featured */
.blog-index .column-list { list-style: none; margin: 0; padding: 0; }
.blog-index .column-list-item { display: flex; gap: 20px; padding: 0.85rem 0; color: inherit; align-items: center; }
.blog-index .column-list-thumb { flex-shrink: 0; width: 92px; height: 92px; overflow: hidden; aspect-ratio: 1/1; }
.blog-index .column-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-index .column-list-placeholder { width: 100%; height: 100%; background: #e5e7eb; }
.blog-index .column-list-info { flex: 1; min-width: 0; }
.blog-index .column-list-title { display: block; font-size: 16.2px; line-height: 1.3; color: #666; }
.blog-index .column-list-item:hover .column-list-title { color: var(--color-gold); }
/* 4.+ Kategorie: Vollbreiten-Raster 3xN */
.blog-index .trends-section { margin-top: 4rem; }
.blog-index .trends-fullwidth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.blog-index .trends-fullwidth .column-featured { margin-bottom: 0; }
/* ===== Responsive ===== */
@media (max-width: 1280px) {
.blog-index .container { padding-left: var(--container-padding); padding-right: var(--container-padding); }
}
@media (max-width: 1024px) {
.blog-index .columns-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.blog-index .trends-fullwidth { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.blog-index .home-content { padding-top: 48px; }
.blog-index .container { padding: 0 var(--container-padding-mobile); }
.blog-index .home-desktop { display: none; }
.blog-index .home-mobile { display: block; }
.blog-index .home-mobile .container:not(:first-child) { padding-top: 20px; }
.blog-index .home-mobile .column-featured { margin-bottom: 30px; }
.blog-index .trends-fullwidth { grid-template-columns: 1fr; }
}
/* === layouts/static-page.css === */
/* Static Page (Contact, Blog, Resales, Imprint) */
.static-hero {
padding: 160px var(--container-padding) 60px;
text-align: center;
max-width: 1200px;
margin: 0 auto;
}
.static-hero h1 {
font-size: var(--schrift-abschnitt);
font-weight: 300;
font-family: var(--font-heading);
text-transform: uppercase;
color: #202732;
margin: 0;
line-height: 1.1;
}
.static-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--container-padding) 60px;
}
.static-content h2 {
font-size: var(--schrift-untertitel);
font-weight: 300;
font-family: var(--font-heading);
color: #202732;
margin: 40px 0 16px;
}
.static-content p {
font-size: 16.2px;
font-weight: 300;
line-height: 1.7;
color: #333;
margin: 0 0 16px;
}
/* listing-content nested inside static-content: no double horizontal padding */
.static-content .listing-content {
padding: 100px 0;
}
/* About Estepona */
.about-video { margin: 60px 0; }
.about-video__frame {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.about-video__frame iframe {
position: absolute; inset: 0;
width: 100%; height: 100%; border: 0;
}
.about-video figcaption {
margin-top: 14px;
font-size: 16.2px; font-weight: 300; color: var(--color-text-light);
text-align: center;
}
.static-content h5 {
font-size: 27px; font-weight: 300; font-family: var(--font-heading);
color: #202732; margin: 60px 0 24px;
}
.about-advantages {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 40px;
}
.about-advantages li {
font-size: 16.2px; font-weight: 300; color: #333;
padding-left: 26px; position: relative;
}
.about-advantages li::before {
content: "✓"; position: absolute; left: 0; color: var(--color-gold);
}
.about-facts {
margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 40px;
}
.about-facts > div {
display: flex; justify-content: space-between; gap: 20px;
border-bottom: 1px solid var(--color-border); padding-bottom: 8px;
}
.about-facts dt { font-size: 16.2px; font-weight: 400; color: #202732; }
.about-facts dd { margin: 0; font-size: 16.2px; font-weight: 300; color: #333; }
@media (max-width: 768px) {
.about-advantages, .about-facts { grid-template-columns: 1fr; }
}
/* === layouts/sell-property.css === */
/* Sell your Property Page */
.sell-stats {
padding: 60px var(--container-padding);
max-width: 1200px;
margin: 0 auto;
}
.sell-stats__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
text-align: center;
}
.sell-stats__number {
display: block;
font-size: 90px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
color: #000;
line-height: 1;
}
.sell-stats__label {
display: block;
font-size: 18px;
font-weight: 300;
color: #000;
margin-top: 8px;
}
/* Service sections */
.sell-service {
position: relative;
overflow: hidden;
border-bottom: 1px solid #000;
}
/* Als CSS-Hintergrund kann der Browser keine Groesse waehlen — deshalb liegt
hier ein echtes ![]()
mit srcset hinter dem Text. */
.sell-service__image,
.sell-packages__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.sell-service__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1200px;
margin: 0 auto;
padding: 100px 0;
align-items: center;
}
.sell-service__text {
padding: 0;
}
.sell-service__spacer {}
.sell-service__text h2 {
font-size: var(--schrift-abschnitt);
font-weight: 300;
font-family: var(--font-heading);
color: #202732;
margin: 0 0 30px;
line-height: 60.48px;
}
.sell-service__text p {
font-size: 18px;
font-weight: 300;
line-height: 28.8px;
color: #000;
margin: 0 0 18px;
}
.sell-service__text .btn {
display: inline-flex;
align-items: center;
background: #202732;
color: #fff;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
padding: 7.2px 18px;
border-radius: 3px;
border: none;
margin-top: 10px;
width: auto;
}
.sell-service__text .btn:hover {
background: var(--color-gold);
}
/* Packages section */
.sell-packages {
position: relative;
overflow: hidden;
padding: 80px var(--container-padding);
border-bottom: 1px solid #000;
}
/* Full-width breakout from static-content container */
.static-content .sell-stats,
.static-content .sell-service,
.static-content .sell-packages {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.static-content .sell-stats {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
left: auto;
right: auto;
width: auto;
}
/*
* position und z-index sind hier nicht Zierde, sondern der Grund, dass man den
* Inhalt ueberhaupt sieht: das Hintergrundbild darueber ist absolut gesetzt,
* und ein positioniertes Element malt ueber Inhalt, der nicht positioniert
* ist — auch bei z-index: 0. Ohne diese zwei Zeilen zeigt der Rahmen nur das
* Bild, und Ueberschrift, Provisionsfrage und alle sechs Pakete verschwinden
* dahinter. Der Dienstleistungsrahmen darueber hat es deshalb ebenfalls.
*/
.sell-packages__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 100px 0;
text-align: center;
}
.sell-packages__inner h2 {
font-size: var(--schrift-abschnitt);
font-weight: 300;
font-family: var(--font-heading);
color: #fff;
margin: 0 0 10px;
}
/*
* Mit .static-content davor, nicht ohne: die Seite liegt in diesem Behaelter,
* und dessen Regel .static-content p traegt Klasse plus Element. Eine Regel
* aus nur einer Klasse verliert dagegen, egal wie weit hinten sie steht — die
* beiden Absaetze standen deshalb in der dunklen Fliesstextfarbe auf dem
* blauen Bild.
*/
.static-content .sell-packages__subtitle,
.sell-packages__subtitle {
font-size: 25.2px;
font-weight: 300;
color: var(--color-gold);
margin: 0 0 10px;
}
.sell-packages__inner h5 {
font-size: 19.8px;
font-weight: 400;
color: #fff;
margin: 0 0 20px;
text-transform: uppercase;
}
.sell-packages__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.sell-packages__card {
background: rgba(255,255,255,0.92);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 40px 30px;
text-align: center;
}
.sell-packages__pct {
display: block;
font-size: 70px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
color: var(--color-gold);
line-height: 1;
margin-bottom: 15px;
}
.sell-packages__card h4 {
font-size: 21.6px;
font-weight: 400;
font-family: var(--font-heading);
color: #000;
margin: 0 0 15px;
}
.sell-packages__card p {
font-size: 18px;
font-weight: 300;
line-height: 28.8px;
color: #000;
margin: 0;
}
.static-content .sell-packages__note,
.sell-packages__note {
font-size: 14px;
font-weight: 300;
color: #fff;
margin: 30px 0 20px;
}
.sell-packages .sell-btn {
margin-top: 10px;
background: var(--color-gold);
}
@media (max-width: 768px) {
.sell-stats__grid { grid-template-columns: 1fr; }
.sell-stats__number { font-size: 60px; }
.sell-service__inner { grid-template-columns: 1fr; padding: 40px 20px; }
.sell-service__spacer { display: none; }
.sell-packages__row { grid-template-columns: 1fr; }
.sell-packages__inner { padding: 30px 20px; }
}
/* Sell page CTA button */
.sell-btn {
display: inline-flex;
align-items: center;
background: #202732;
color: #fff !important;
font-size: 18px;
font-weight: 300;
text-transform: uppercase;
padding: 7.2px 18px;
border-radius: 3px;
margin-top: 10px;
text-decoration: none;
transition: background 0.2s;
}
.sell-btn:hover {
background: var(--color-gold);
color: #fff !important;
}
/* === responsive/responsive.css === */
/* Responsive Breakpoints */
@media (max-width: 1200px) {
.reasons-grid { grid-template-columns: repeat(2, 1fr); }
.equipment-distances-inner { grid-template-columns: 1fr; gap: 40px; }
.distances-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
/* wpMobPadding der alten Vorlage: 20px seitlich schon ab 768. */
:root { --container-padding: var(--container-padding-mobile); }
/*
* Die Kopfzeile ist auf dem Handy 30 Prozent flacher: 70 statt 100 Pixel.
* Die Hoehe steckt in --header-height, an ihr haengen auch das Menue und
* die Kopfzeile der Filterflaeche — eine Zahl, drei Stellen richtig.
*/
:root { --header-height: 70px; }
.site-header__grid { grid-template-columns: 1fr 1fr; }
.site-header__center { display: none; }
/*
* Projektseite auf dem Handy: Titelbild als Querformat-Streifen, darunter
* ein weisser Block mit Titel, Ort und Eckdaten - so wie es die alte Seite
* gemacht hat. Nachgemessen bei 390 Punkten Fensterbreite: Bild 375x338,
* Titel 28,8 px zentriert, Ort 21,6 px, Eckdaten 18 px.
*
* Ueber dem Bild liegend, wie auf dem grossen Schirm, hatte das Band einen
* 70vh hohen Bildbereich noetig - und dafuer wurde das Bild so weit
* hochgerechnet, dass nichts mehr zu erkennen war.
*/
.project-hero {
--hero-hoehe: auto;
/* Zeile "headlines": 60 oben, 20 seitlich. Unten mehr, auf Ansage. */
--hero-abstand: 60px 20px 60px;
--hero-deckkraft: 1;
}
.project-hero__image {
position: static;
width: 100%;
/* Feste 300 Pixel, nachgemessen an der mobilen Vorlage auf einem
iPhone. Vorher standen hier 338 - das war die Desktopvorlage mit
min-height 40vh, die ein schmales Fenster ausgeliefert bekommt. */
height: 300px;
object-fit: cover;
}
.project-title-overlay { position: static; }
/* Kein Hero-Titel mehr, sondern die Ueberschrift der Seite: feste Groesse
statt der mitwachsenden des Titelbands. */
.project-title-overlay h1 { font-size: 28.8px; }
.project-title-overlay__location { font-size: 21.6px; }
.project-title-overlay__meta { font-size: 18px; }
/* Galerie vor die Einleitung, ohne das Markup umzustellen. */
.project-page { display: flex; flex-direction: column; }
.project-page > .project-hero { order: 1; }
.project-page > .project-gallery { order: 2; }
.project-page > .project-description { order: 3; }
.project-page > * { order: 4; }
.project-description,
.project-description h2,
.project-description__text,
.project-description__text p { text-align: left; }
.project-location h2 { text-align: left; }
/*
* Vertikale Abstaende je Abschnitt, nachgemessen an der mobilen Vorlage
* (oben / seitlich / unten). Sie sind bewusst nicht einheitlich: Lage und
* Ausstattung stehen luftiger als Einleitung und FAQ.
*/
.project-gallery { padding: 0; }
.project-description { padding: 50px 20px 60px; }
.project-investment { padding: 60px 20px; }
.project-location { padding: 70px 20px; }
.project-faqs { padding: 60px 20px; }
.equipment-distances-section { padding: 70px 20px; }
/*
* Was die Mobilvorlage in diesen beiden Zeilen nicht zeigt, nachgemessen
* auf dem iPhone: die Einleitung hat dort kein Bild, und die Lage genau
* eines — die Karte. Ortsfoto und Untertitel stehen nur auf dem grossen
* Schirm. Ohne das ist die Seite auf dem Telefon 850 Pixel laenger als das
* Original, ohne dass ein Besucher etwas davon haette.
*/
.project-description__image { display: none; }
.project-location__images { display: none; }
.project-location__subtitle { display: none; }
/* Mobil ist eine Seite ein Bild, also rastet jedes Bild ein. */
.gallery__slide { flex: 0 0 100%; }
.gallery__slide:nth-child(even) { scroll-snap-align: start; scroll-snap-stop: always; }
.reasons-grid { grid-template-columns: 1fr; }
.project-location__grid { grid-template-columns: 1fr; }
.contact-section__inner { grid-template-columns: 1fr; }
/*
* Das Portraet liegt als Hintergrundbild in derselben Box wie der Text und
* ist unten rechts verankert. Auf dem grossen Schirm ist die Spalte breit
* genug, auf dem Handy legte es sich ueber Telefonnummer und
* WhatsApp-Knopf.
*
* Wie auf der alten Seite: Text links, Foto rechts daneben. Dafuer wird das
* Bild auf 140 Pixel Breite gebracht und der Text bekommt rechts so viel
* Abstand, dass er nicht darunter laeuft.
*/
.contact-section__left-bg {
/*
* Der Text laeuft ueber die volle Breite — kein Einruecken, keine
* zweite Spalte. Das Foto liegt als Hintergrund dahinter, unten rechts.
*
* Es steht ein paar Pixel ueber die Kante hinaus, rechts wie unten, so
* wie auf der alten Seite. Dafuer wird die Box um die 20 Pixel
* Sektionsabstand nach rechts herausgezogen und bekommt sie als eigenen
* Abstand zurueck, damit der Text stehen bleibt, wo er war.
*
* Der Abstand nach unten haelt den Text aus dem Gesicht: der
* WhatsApp-Knopf ist das letzte Element, darunter beginnt das Foto.
*/
margin-right: -20px;
padding-right: 20px;
padding-bottom: 105px;
background-size: auto 260px;
background-position: right -70px bottom -20px;
min-height: 260px;
}
.equipment-list { grid-template-columns: 1fr; }
/*
* Auf dem Handy steht jedes Feld auf einer eigenen Zeile. Telefon und
* E-Mail nebeneinander ergaben je 128 Pixel — zu schmal, um eine Nummer
* oder Adresse beim Tippen zu sehen. Die alte Seite hat dort 340.
*/
.form-row--3col,
.form-row--2col { grid-template-columns: 1fr; }
/*
* Der dunkle Formularblock laeuft ueber die volle Breite und traegt seinen
* Rand selbst. Vorher kamen 20 Pixel der Sektion und 40 des Blocks
* zusammen, dadurch waren die Felder nur 270 statt 350 Pixel breit.
*/
.contact-section__right {
margin: 0 -20px;
padding: 40px 20px;
}
/* Die Abstaende der Projektabschnitte stehen weiter oben einzeln — die
frueheren 60px fuer alle waren geraten, die neuen sind gemessen. Hier
bleibt nur der Kontaktbereich, den die Messung nicht erfasst hat. */
/* Nur oben und an den Seiten. Die Kurzschreibweise setzte auch unten
60px — sichtbar als Luft zwischen Formular und Trennlinie der
Fusszeile, wo die Grundregel ausdruecklich 0 vorsieht. */
.contact-section { padding: 60px 20px 0; }
/* Homepage */
/*
* Mobil steht das weisse Band unter dem Bild statt darueber. Das Bild
* bekommt dafuer eine feste Hoehe und laeuft im Fluss mit; der Rahmen
* richtet sich nach seinem Inhalt. Absolut gesetzt bliebe die letzte Zeile
* der Ueberschrift abgeschnitten.
*/
/*
* Der Schatten des Titelbands, fuer alle drei Heroes gemeinsam.
*
* Auf dem grossen Schirm schwebt das Band ueber einem hohen Bild und wirft
* seinen Schatten nach oben. Auf dem Handy ist seine Unterkante die Grenze
* zum weissen Grund darunter — also faellt er dort nach unten. Die Richtung
* haengt an dieser Lage, nicht am Seitentyp, deshalb steht sie hier einmal.
*
* "overflow: visible" muss dazu: der Rahmen schneidet sonst genau an der
* Kante ab, an der der Schatten anfangen soll. Und ohne eigene Stapelebene
* malt der folgende Abschnitt seinen Hintergrund darueber.
*/
.homepage-hero,
.listing-hero,
.project-hero {
--hero-schatten: 0 4px 8px -3px rgba(0, 0, 0, 0.25);
overflow: visible;
}
.homepage-hero__overlay,
.listing-hero__overlay,
.project-title-overlay { z-index: 2; }
.homepage-hero {
--hero-hoehe: auto;
--hero-abstand: 32px 16px 26px;
--hero-deckkraft: 1;
}
.homepage-hero__image { position: static; height: 250px; }
/*
* Listenseiten wie Startseite und Projektseiten: Bild oben im Fluss,
* Titelblock darunter auf weissem Grund. Vorher lag das Band ueber einem
* 400 bis 500 Pixel hohen Bild — damit gab es keine Kante, an der sich der
* Abschnitt vom Inhalt darunter absetzt.
*/
.listing-hero {
--hero-hoehe: auto;
--hero-abstand: 60px 20px 60px;
--hero-deckkraft: 1;
}
.listing-hero__image {
position: static;
width: 100%;
/* Wie die Startseite. */
height: 250px;
object-fit: cover;
}
.listing-hero__overlay { position: relative; }
/* Im Fluss, aber eine Ebene hoeher: sonst malt der folgende weisse
Abschnitt seinen Hintergrund ueber den Schatten des Bandes. */
.homepage-hero__overlay { position: relative; z-index: 2; }
.homepage-hero__overlay p { font-size: 18px; line-height: 28.8px; }
.category-cards-grid { grid-template-columns: 1fr; }
/* .project-grid ist ein Flexbox, kein Grid — grid-template-columns lief hier
ins Leere und die Karten blieben bei 33.333%, also 87px auf einem 375er
Display. Die Breite muss auf der Karte selbst zurueckgenommen werden. */
.project-grid-card,
.project-grid.grid-2col .project-grid-card { width: 50%; }
.search-section { padding: 40px 20px; }
/*
* Auf dem Telefon geht es nach dem Titelbild direkt in die Suche.
* Ueberschrift und Untertitel des Abschnitts kosten dort eine halbe
* Bildschirmhoehe, bevor der Besucher das erste Angebot sieht — und wer
* hier ankommt, kommt wegen der Angebote.
*
* Ausgenommen die Fehlerseite: sie nutzt dieselbe Vorlage, und bei ihr
* stehen an dieser Stelle der Hinweis und die Erklaerung.
*/
.homepage:not(.fehlerseite) > .search-section > h2,
.homepage:not(.fehlerseite) > .search-section > .search-section__subtitle {
display: none;
}
}
@media (max-width: 480px) {
/* Die 2col-Variante der Resales-Seite ist spezifischer als .project-grid-card
allein — ohne sie hier stehen auf dem Handy zwei 140px-Kacheln nebeneinander. */
.project-grid-card,
.project-grid.grid-2col .project-grid-card { width: 100%; }
/*
* Die Karte selbst traegt auf dem grossen Schirm 10 Pixel Innenabstand als
* Fuge zwischen den Spalten. Einspaltig gibt es keine Fuge, wohl aber den
* Versatz: die sichtbare Karte lief von 30 bis 360, waehrend Suchfeld,
* Ueberschrift und Filterknopf von 20 bis 370 laufen. Hier steht sie
* deshalb randlos im Satzspiegel, der Abstand nach unten bleibt.
*/
.project-grid-card { padding: 0 0 20px; }
/* Kein 70vh mehr: der Hero der Projektseite ist auf dem Handy Bild plus
Titelblock und richtet sich nach deren Hoehe. Mit der festen Hoehe lief
jede Aenderung am Innenabstand ins Leere — sie fuellte nur den Rest auf,
statt den Block wachsen zu lassen. */
.brochure-link { width: 140px; height: 140px; right: 20px; top: 100px; }
.brochure-link__label { font-size: 14px; }
.brochure-link__cta { font-size: 11px; }
}
/* Listing hero responsive */
@media (max-width: 768px) {
}
@media (max-width: 480px) {
}