.
-------------------------------------------------------------------------- */
.ma-profile-formwrap{min-width:0}
.ma-profile-form .form-group{min-width:0}
.ma-profile-form .span2 .form-group{margin:0}
/* Spam-Falle des Plugins: muss im DOM bleiben und befuellbar sein, darf aber
weder sichtbar sein noch eine Rasterzelle belegen. Kein display:none –
manche Bots fuellen genau die Felder, die so ausgezeichnet sind, nicht aus,
und dann greift die Falle nicht mehr. */
/* Bewusst px und nicht rem: das ist keine Gestaltungsgroesse, sondern eine
Positionierung aus dem sichtbaren Bereich heraus. In rem haenge der Wert
an der Schriftgroesse – aendert die sich, wandert das Feld unter Umstaenden
zurueck ins Bild. */
.ma-profile-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Pflichtfeld-Markierung. Gilt fuer beide Formulare: das Objektformular auf
der Detailseite liefert dasselbe Markup (.form-group.is-required >
label.control-label), CasaWP setzt die Klasse dort aus dem serverseitigen
InputFilter - die Sternchen stimmen also immer mit dem ueberein, was das
Formular tatsaechlich verlangt, und muessen nicht von Hand gepflegt werden.
Land traegt die Klasse ebenfalls, ist aber ausgeblendet und vorbelegt. */
.ma-profile-form .form-group.is-required>.control-label::after,
.ms-contact .form-group.is-required>.control-label::after{content:"*";margin-left:4px}
/* Feldfehler und Statusmeldungen */
.ma-profile-form .help-block,
.ma-profile-error{display:block;font-size:calc(var(--ma-text) * 0.8);font-weight:var(--ma-fw-light);color:#8b1a1a;margin-top:6px}
.ma-profile-form .form-group.has-error .form-control{box-shadow:inset 0 0 0 2px #8b1a1a}
/* Diagnoseblock der Sammelmeldung - nur fuer angemeldete Administratoren im
Markup, siehe custom-form-ma-suchprofil.phtml. */
.ma-profile-debug{margin-top:10px;padding:12px 14px;background:var(--ma-white);color:#8b1a1a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;line-height:1.4;white-space:pre-wrap;overflow-x:auto}
.ma-profile-success{font-family:var(--ma-font);font-weight:var(--ma-fw-light);font-size:var(--ma-text);color:var(--ma-green);line-height:1.5;margin:0}
.ma-profile-form--sent{background:var(--ma-secondary);padding:48px;display:block}
/* Einwilligung
--------------------------------------------------------------------------
Kaestchen links, Text rechts – als Raster, damit die zweite Zeile des
Textes unter der ersten steht und nicht unter der Checkbox.
Die Breitenregel der uebrigen Felder (`.ma-profile-form input{width:100%}`)
wuerde das Kaestchen auf Feldbreite ziehen; die Ausnahme steht auf .ma
(0,2,1), schlaegt damit auch die Haertungsregel gegen reset.css. */
.ma-profile-consent-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer;font-family:var(--ma-font);font-weight:var(--ma-fw-light);font-size:calc(var(--ma-text) * 0.85);line-height:1.45;color:var(--ma-green)}
.ma .ma-profile-consent input[type="checkbox"]{width:18px;height:18px;min-width:18px;margin:2px 0 0;padding:0;background:var(--ma-white);border:none;border-radius:0;box-shadow:none;appearance:none;-webkit-appearance:none;cursor:pointer}
/* Haken als Grafik statt als Innenkontur – ein gefuelltes Kaestchen allein
liest sich auf den ersten Blick wie ein deaktiviertes Feld. Aufbau wie beim
Pfeil der Auswahlfelder weiter oben. */
.ma .ma-profile-consent input[type="checkbox"]:checked{background-color:var(--ma-green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px 9px}
/* Das Hidden-Feld gehoert zur Checkbox (Laminas schickt darueber den
unchecked-Wert mit) und darf keine Rasterspalte belegen. */
.ma-profile-consent input[type="hidden"]{display:none}
.ma .ma-profile-consent input[type="checkbox"]:focus{box-shadow:inset 0 0 0 2px var(--ma-green-reduced)}
.ma .ma-profile-consent.has-error input[type="checkbox"]{box-shadow:inset 0 0 0 2px #8b1a1a}
/* Der Link zur Datenschutzerklaerung lief in der Sekundaerfarbe - also
beige auf beigem Panel und damit unsichtbar. Quelle ist das Elementor-Kit:
`.elementor-kit-12 a{color:var(--e-global-color-secondary)}` liegt bei
0,1,1, genau wie das frühere `.ma-profile-consent a`, steht als Inline-
Style aber spaeter im und gewann den Gleichstand. Mit `.ma` davor
(0,2,1) ist das entschieden.
Ruhezustand ohne Unterstrich; Unterstrich erst beim Hover/Fokus, sonst
waere der Link von der umgebenden Zeile nicht zu unterscheiden - die
traegt dieselbe gruene Farbe.
.ms-contact-form-wrapper steht mit drin: dort rendert CASAMAIL dasselbe
Einwilligungsfeld, aktuell ohne Link, aber mit derselben Kit-Regel im
Ruecken, falls einer dazukommt. */
.ma .ma-profile-consent a,
.mossinger-single .ms-contact-form-wrapper a{color:var(--ma-green);text-decoration:none}
.ma .ma-profile-consent a:hover,
.ma .ma-profile-consent a:focus-visible,
.mossinger-single .ms-contact-form-wrapper a:hover,
.mossinger-single .ms-contact-form-wrapper a:focus-visible{color:var(--ma-green-dark);text-decoration:underline;text-underline-offset:2px}
/* Submit-Button des Suchprofils
--------------------------------------------------------------------------
Die Selektoren tragen bewusst das .ma-Präfix. hello-elementor bringt in
reset.css eigene Regeln für `button` und `[type="submit"]` mit (1px Kontur
und Text in #CC3366) – `[type="submit"]` liegt mit 0,1,0 gleichauf mit
`.ma-profile-submit`, und reset.css wird nach der Child-style.css geladen,
gewinnt den Gleichstand also. Mit `.ma .ma-profile-submit` (0,2,0) bzw.
`:hover` (0,2,1) ist das eindeutig entschieden.
Flacher Button auf dem beigen Formular: grüner Text ohne Fläche, füllt sich
beim Hover grün und dreht den Text auf Weiss. */
/* Layout und Typografie bleiben bei 0,1,0, damit die Mobile-Regel weiter
greift (`.ma-profile-submit{grid-column:1/2}` im 768px-Block).
Gefuellt gruen mit weisser Schrift und Papierflieger, linksbuendig – wie
"NACHRICHT SENDEN" auf der Kontaktseite. Die angeschraegte clip-path-Form
entfaellt hier, der Button ist ein Rechteck. */
.ma-profile-submit{grid-column:span 10;gap:12px;font-family:var(--ma-font);font-weight:var(--ma-fw-light);font-size:var(--ma-text);letter-spacing:.02em;text-transform:uppercase;padding:10px 20px;cursor:pointer;justify-self:start;transition:background .15s,color .15s}
.ma-profile-submit-icon{width:20px;height:20px;flex-shrink:0}
/* Nur die Eigenschaften, die reset.css überschreibt, laufen erhöht.
`display` gehoert dazu: reset.css setzt `[type="submit"], button
{display:inline-block}` (0,1,1) und schlaegt `.ma-profile-submit`
(0,1,0). Ohne Flex-Container lief `align-items:center` ins Leere und
das Pfeil-SVG stand als Inline-Element auf der Schriftlinie statt
mittig - live gemessen 4.5px zu hoch. */
.ma .ma-profile-submit{display:inline-flex;align-items:center;background:var(--ma-green);color:var(--ma-secondary);border:none;border-radius:0;outline:none;box-shadow:none}
/* Beim Hover tauschen Flaeche und Schrift die Rollen: Sekundaerfarbe als
Grund, Primaerfarbe als Schrift. Der Pfeil ist ein Inline-SVG mit
currentColor und geht ohne Zutun mit. */
.ma .ma-profile-submit:hover,
.ma .ma-profile-submit:focus-visible{background:var(--ma-secondary);color:var(--ma-green)}
.ma .ma-profile-submit:disabled{opacity:.55;cursor:default;background:var(--ma-green);color:var(--ma-secondary)}
.ma-profile .ma-inner{max-width:var(--ma-max-w);margin:0 auto;padding-left:var(--ma-pad-h);padding-right:var(--ma-pad-h)}
@media(max-width:1024px){
.ma{--ma-pad-h:2rem}
.ma-filters-grid{grid-template-columns:1fr 1fr}
.ma-map{height:18.75rem}
.ma-profile-grid{gap:32px}
.ma-profile-form{padding:32px}
/* 60/40 bleibt, nur die Spalten ruecken zusammen. Schriftgroessen brauchen
hier keine Sonderwerte: Karten haengen an --ma-text, die Titel an
--ma-h3, die Ueberschrift an --ma-h2. Alle bringen ihre Stufen aus dem
Elementor-Kit mit. */
.ma-grid{column-gap:32px}
.ma-grid-col{gap:32px}
}
@media(max-width:767px){
.ma{--ma-pad-h:1rem}
.ma-filters-grid{grid-template-columns:1fr}
.ma-search-btn{width:100%;justify-content:center}
.ma-map{height:15rem}
.ma-grid-wrap{padding:2rem 0 3rem}
/* Mobil eine Spalte. Die Zeilenplatzierung der Featured-Karte muss dabei
explizit zurueckgesetzt werden – ohne `grid-row:auto` spannt sie weiter
ueber 100 Zeilen und die uebrigen Karten landen unter ihr im Nichts.
Hier greift wieder row-gap statt margin-top, weil es nur noch eine
Spalte mit lauter belegten Zeilen gibt. */
/* Eine Spalte. Die Spalten-Container loesen sich per display:contents auf,
ihre Karten werden damit direkte Grid-Items und stapeln in DOM- und
damit Objektreihenfolge. Der Abstand kommt jetzt vom row-gap des Grids,
der gap der Container ist mit display:contents wirkungslos. */
.ma-grid{grid-template-columns:1fr;column-gap:0;row-gap:40px}
.ma-grid-col{display:contents}
/* Auf Handybreite ist quadratisch zu hoch – alle Bilder auf 3:2. */
.ma-grid .ma-card-img,
.ma-grid-col-side .ma-card-img{aspect-ratio:3/2}
.ma-card-info{padding:20px 0 0}
.ma-card-facts{row-gap:14px;padding:16px 0 0}
.ma-card-cta{margin-top:24px;padding:14px 20px}
.ma-filters-grid select,.ma-filter-slot select,.ma-filter-slot .form-control{font-size:1rem!important;padding:0.875rem 2.25rem 0.875rem 1rem!important;min-height:2.5rem!important}
.ma .ma-select-trigger{font-size:1rem;padding:0.875rem 1rem;min-height:2.5rem}
.ma .ma-select-option{font-size:0.9375rem;padding:0.625rem 1rem}
.ma-profile-grid{grid-template-columns:1fr;gap:32px}
/* Kein Panel mehr, also auch kein Innenabstand – der Text sitzt frei. */
.ma-profile-text{padding:0}
/* Gestapelt: eine Spur, jedes Feld ueber die volle Breite. Die
:has()-Regeln fuer PLZ und Ort muessen mit zurueckgesetzt werden, sonst
verlangten sie 3 bzw. 7 Spuren in einem einspurigen Raster. */
.ma-profile-form{grid-template-columns:1fr;padding:24px}
.ma-profile-form > .form-group,
.ma-profile-form > .form-group:has(input[name="postal_code"]),
.ma-profile-form > .form-group:has(input[name="locality"]),
.ma-profile-form .span2,
.ma-profile-submit{grid-column:span 1}
}
/* ==========================================================================
4. DETAILSEITE
--------------------------------------------------------------------------
Markup: single.phtml. Durchgängig gegen --ms-* geschrieben; diese sind in
Abschnitt 2 als Aliase auf die kanonischen Tokens definiert.
========================================================================== */
.mossinger-single *,
.mossinger-single *::before,
.mossinger-single *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.mossinger-single {
font-family: var(--ms-font);
font-weight: var(--ms-fw-light);
font-size: var(--ms-body);
color: var(--ms-black);
width: 100%;
}
/* Inhalt = min(1600px, 100vw - 2x Seitenabstand).
Der Deckel liegt auf max-width inklusive Padding, sonst schrumpfte der
Inhalt auf 1600 minus Rand statt auf glatte 1600. */
.ms-container {
width: 100%;
max-width: calc(var(--ms-max-width) + var(--ms-pad-h) * 2);
margin: 0 auto;
padding: 0 var(--ms-pad-h);
}
/* ═══════════════════════
HERO
═══════════════════════ */
/* Objekttitel unter dem Slider: Titelgroesse (h2 = primary) in der
Primaerfarbe. Steht nicht mehr im Bild, also keine weisse Schrift und
keine Abdunklung mehr noetig. */
.ms-objecttitle {
padding: 48px 0 0;
}
/* Silbentrennung nach deutschen Regeln.
Objekttitel wie "3,5-Zimmer Eigentumswohnung mit Garten" enthalten lange
Komposita, die als ein unbrechbares Wort gelten - auf schmalen Displays
ragten sie ueber den Rand hinaus.
`hyphens: auto` trennt sauber, weil das Dokument lang="de" traegt; ohne
diese Sprachangabe kennt der Browser keine Trennstellen. `overflow-wrap`
ist der Notnagel fuer Woerter ohne gueltige Trennstelle.
Die Objektkarten im Archiv arbeiten seit jeher so - der Detailseite fehlte
es. */
.ms-object-title,
.ms-contact-title,
.ms-allgemeines p,
.ms-allgemeines li,
.ms-fact-label,
.ms-fact-value {
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
/* Objekttitel auf der Primaer-Typografie (--ms-h2 zeigt auf
--e-global-typography-primary-font-size, 3rem) - so stand es hier immer.
Gerendert wurde er aber in der eigenen H1-Stufe des Kits: der Titel ist ein
, und `.elementor-kit-12 h1{font-size:var(--e-global-typography-
3a235ad-font-size)}` liegt mit (0,1,1) ueber dem blossen .ms-object-title
(0,1,0) - live gemessen 59.2px statt 48px.
Mit .mossinger-single davor (0,2,0) ist das entschieden. Dieselbe Stelle
wie bei den Kartentiteln im Archiv, dort war es die h3-Regel des Kits.
Das Schriftgewicht war nie betroffen, die Kit-Regel setzt fuer h1 keins. */
.mossinger-single .ms-object-title {
font-family: var(--ms-font);
font-weight: var(--ms-fw-bold);
font-size: var(--ms-h2);
line-height: var(--ma-lh-h2);
letter-spacing: 0.02em;
text-transform: var(--ms-tt);
color: var(--ms-green);
margin: 0;
}
/* ═══════════════════════
ALLGEMEINES
═══════════════════════ */
/* Seitenabstand kommt vom .ms-container darin, nicht von der Sektion. */
.ms-allgemeines {
padding: var(--ms-pad-v) 0;
}
/* Zwischen Faktenblock und Text standen zweimal --ms-pad-v, also 160px: das
Bodenpadding des einen plus das Kopfpadding des anderen. Seit der
Faktenblock keine eigene Flaeche mehr hat, liest sich das als eine Luecke -
und die war zu gross.
Nur die Kombination der beiden wird zusammengezogen, nicht .ms-allgemeines
allgemein: hat ein Objekt keine Beschreibung, folgt auf die Fakten direkt
die Karte, und dort sollen die 80px stehen bleiben. */
.ms-facts + .ms-allgemeines {
padding-top: 0;
}
/* Kurzfassung und Volltext liegen beide im DOM, sichtbar ist immer genau
eine. Die Klasse .ms-text--gekuerzt setzt ms-text.js beim Aufbau - ohne
JavaScript existiert weder die Kurzfassung noch der Knopf, dann steht
schlicht der ganze Text da. */
.ms-text-kurz { display: none; }
.ms-text--gekuerzt .ms-text-kurz { display: block; }
.ms-text--gekuerzt .ms-text-voll { display: none; }
/* Die Kurzfassung ist ein einzelnes ohne die Absatzabstaende des
Volltexts - sie soll sich vom gerenderten Inhalt nicht unterscheiden. */
.ms-text .ms-text-kurz {
font-family: var(--ms-font);
font-weight: var(--ms-fw-light);
font-size: var(--ms-body);
line-height: var(--ma-lh-text);
color: var(--ms-black);
margin: 0;
}
/* Textzeile statt Flaeche: der Block liegt frei auf dem Seitenhintergrund,
ein gefuellter Knopf saesse dort zu schwer. Der Selektor nennt
.mossinger-single mit, weil reset.css `[type="button"], button` bei
(0,1,1) trifft und ein blosses .ms-text-more (0,1,0) verloere. */
.mossinger-single .ms-text-more {
display: inline-block;
margin-top: 1rem;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
box-shadow: none;
font-family: var(--ms-font);
font-weight: var(--ms-fw-light);
font-size: var(--ms-body);
letter-spacing: 0.02em;
text-transform: var(--ms-tt);
color: var(--ms-green);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: color 0.15s;
}
.mossinger-single .ms-text-more:hover,
.mossinger-single .ms-text-more:focus-visible { color: var(--ms-green-dark); }
/* Ueberschriften im Beschreibungstext laufen auf Textgroesse, nur fett -
sie sollen den Objekttitel darueber nicht konkurrenzieren. */
.ms-allgemeines h2,
.ms-allgemeines h3,
.ms-allgemeines h4 {
font-family: var(--ms-font);
font-weight: var(--ms-fw-bold);
font-size: var(--ms-body);
letter-spacing: 0.03em;
text-transform: var(--ms-tt);
line-height: var(--ma-lh-text);
color: var(--ms-green);
margin-bottom: 0;
}
.ms-allgemeines hr {
border: none;
margin: 24px 0 40px;
}
.ms-allgemeines p {
font-size: var(--ms-body);
font-weight: var(--ms-fw-light);
line-height: 1.75;
color: var(--ms-black);
max-width: 100%;
margin-bottom: 1.2em;
}
.ms-allgemeines p:last-child {
margin-bottom: 0;
}
/* ═══════════════════════
FACTS & FIGURES
═══════════════════════ */
/* Volle Flaeche in der Sekundaerfarbe, Schrift in der Primaerfarbe.
Das fruehere Bild links ist entfallen, damit auch das 40%/1fr-Raster. */
/* Ohne eigene Flaeche: der Block steht frei auf dem Seitenhintergrund, wie
der Textabschnitt darunter. Das Padding bleibt und haelt den Abstand zum
Titel darueber und zum Text darunter. */
.ms-facts {
display: block;
padding: var(--ms-pad-v) 0;
}
/* Inhalt liegt im normalen Seitenraster - die Flaeche traegt .ms-facts. */
.ms-facts-content {
width: 100%;
max-width: calc(var(--ms-max-width) + var(--ms-pad-h) * 2);
margin: 0 auto;
padding: 0 var(--ms-pad-h);
color: var(--ms-green);
}
/* Zweiteilige Titel: erster Teil fett, zweiter leicht (200) und kursiv -
dieselbe Figur wie im Suchprofil der Archivseite
(.ma-profile-title-strong / .ma-profile-title-light). */
.ms-title-strong { font-weight: var(--ms-fw-bold); font-style: normal; }
.ms-title-light { font-weight: var(--ms-fw-light); font-style: italic; }
.ms-facts-datapoints {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 48px;
}
/* Die Ausstattung ist eine Aufzaehlung und keine einzelne Kennzahl - sie
laeuft ueber alle Spalten, sonst quetscht sich eine lange Komma-Liste in
ein Drittel der Breite. */
.ms-fact-row--breit { grid-column: 1 / -1; }
.ms-fact-row {
display: flex;
flex-direction: column;
padding: 10px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ms-green) 25%, transparent);
}
.ms-fact-row:last-child {
border-bottom: none;
}
.ms-fact-label {
font-family: var(--ms-font);
font-weight: var(--ms-fw-bold);
font-size: var(--ms-body);
letter-spacing: 0.1em;
text-transform: var(--ms-tt);
color: var(--ms-green);
margin-bottom: 2px;
}
.ms-fact-value {
font-family: var(--ms-font);
font-weight: var(--ms-fw-light);
font-size: var(--ms-body);
color: var(--ms-green);
}
/* ═══════════════════════
LIGHTBOX
───────────────────────
Oeffnet per Klick auf ein Sliderbild. Bewusst ohne Thumbnail-Leiste:
auf dem Handy frisst die Bildflaeche, die man eigentlich sehen will.
═══════════════════════ */
.ms-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--ms-black) 94%, transparent);
padding: 64px 88px;
}
.ms-lightbox.is-open {
display: flex;
}
.ms-lightbox-stage {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ms-lightbox-stage img {
max-width: 100%;
max-height: calc(100vh - 128px);
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* Nur das Icon: keine Flaeche, keine Kontur.
Der Selektor traegt den Container mit (0,2,0). Eine einzelne Klasse
verliert hier gegen hello-elementors reset.css, die nach dem
Child-Stylesheet laedt und `button` eine 1px-Kontur in #CC3366 gibt -
live nachgemessen, mit 0,2,0 reicht die Spezifitaet ohne !important. */
.ms-lightbox .ms-lightbox-close,
.ms-lightbox .ms-lightbox-arrow {
position: absolute;
background: none;
border: 0;
border-radius: 0;
color: var(--ms-white);
cursor: pointer;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s;
}
/* Schliessen ist weiterhin ein Strich-Icon, die Pfeile sind Flaechen-Icons
- deshalb getrennte Regeln statt einer gemeinsamen. */
.ms-lightbox-close svg {
width: 28px;
height: 28px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
}
.ms-lightbox-arrow svg {
width: 34px;
height: 34px;
fill: currentColor;
stroke: none;
}
.ms-lightbox-close { top: 16px; right: 20px; }
.ms-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ms-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
/* Hover und Tastaturfokus wechseln auf die Primaerfarbe - kein Rahmen,
keine Flaeche. Der Fokus nutzt bewusst dieselbe Rueckmeldung wie der
Hover: eine Kontur waere hier genau das, was gestalterisch weg soll. */
.ms-lightbox .ms-lightbox-close:hover,
.ms-lightbox .ms-lightbox-arrow:hover,
.ms-lightbox .ms-lightbox-close:focus-visible,
.ms-lightbox .ms-lightbox-arrow:focus-visible {
color: var(--ms-green);
outline: none;
}
.ms-lightbox-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin: 0;
font-family: var(--ms-font);
font-weight: var(--ms-fw-light);
font-size: var(--ms-body);
color: var(--ms-white);
letter-spacing: 0.08em;
}
/* Zeigt an, dass sich das Bild oeffnen laesst - der einzige Hinweis, da
bewusst kein Button im Slider sitzt.
Auf dem Slide, nicht auf dem
. Andersherum -
Klasse fuers Verbergen - blitzte der Header beim Laden kurz auf, bevor das
Skript liefe.
Gegriffen wird auf
selbst und nicht auf die Container darin:
Elementors Sticky-Funktion legt vom Header zur Laufzeit eine fixierte Kopie
an, es gibt also mehr Container als im Quelltext stehen und ihre Klassen
wechseln beim Scrollen. visibility vererbt sich von nach unten und
erreicht damit Original wie Kopie, ohne dass hier eine einzige
Container-Klasse genannt werden muesste.
opacity und nicht transform: ein transform auf dem Header wuerde fuer die
fixierten Kinder einen neuen Bezugsrahmen aufspannen - sie wuerden am
Header kleben statt am Fenster und beim Scrollen mitwandern. opacity
erzeugt nur einen Stapelkontext, keinen Bezugsrahmen, und laesst das
Sticky-Verhalten damit unangetastet.
Der Wert multipliziert sich mit dem der Kinder - Elementors
Motion-Effects schreiben der Sticky-Kopie beim Scrollen ein eigenes
Inline-opacity; das bleibt erhalten, sobald der Header auf 1 steht.
visibility zusaetzlich zu opacity, damit die Links waehrend des
Verbergens aus der Tabulatorreihenfolge fallen. Der Platz im Fluss bleibt
erhalten, der Seiteninhalt springt beim Umschalten also nicht. */
body.single-casawp_property .elementor-location-header {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s;
}
body.single-casawp_property.ms-header-sichtbar .elementor-location-header {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
body.single-casawp_property .elementor-location-header {
transition: none;
}
}
/* ═══════════════════════
KARTE
═══════════════════════ */
.ms-map {
width: 100%;
height: 50vh;
min-height: 360px;
background: #e8e8e0;
position: relative;
}
.ms-map iframe {
width: 100%;
height: 100%;
border: none;
filter: saturate(0.65);
}
/* Aufgezogen werden nur die Container, die CasaWP selbst liefert
(.casawp-map und #map-canvas mit seiner Inline-Hoehe von 400px). Die
Ebenen darunter gehoeren der Google-Maps-API: deren Panes sind absolut
positioniert und werden per transform verschoben. Die frueheren
Selektoren `.casawp-map > div > div`, `[aria-label="Karte"]` und `canvas`
haben genau diese Ebenen auf `position:relative` und eine feste Groesse
gezwungen - damit war die Karte weder zu ziehen noch zu zoomen. */
.ms-map > *,
.ms-map .casawp-map,
.ms-map #map-canvas {
width: 100% !important;
height: 100% !important;
}
.ms-map .casawp-map {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
.ms-map #map-canvas { position: relative !important; }
/* ═══════════════════════
KONTAKT
═══════════════════════ */
/* Kontaktformular – Aufbau identisch zum Suchprofil der Archivseite
(.ma-profile): der ganze Block trägt den Hintergrund, der Text steht frei
darauf, nur das Formular sitzt auf der volldeckenden beigen Fläche.
Die beiden früheren bündigen Panels (grün links, beige rechts) entfallen.
Farbwerte von der Kontaktseite übernommen und nachgemessen: Block
--ms-secondary bei 30%, Formularfläche volles --ms-secondary.
Der Block läuft über die volle Breite und schliesst ohne Abstand an die
Karte darüber an – das frühere margin-top:200px ist weg. Die Breiten-
begrenzung sitzt jetzt innen, sonst stünde der Hintergrund als
zentriertes Band mit weissen Rändern. */
.ms-contact {
background: color-mix(in srgb, var(--ms-secondary) 30%, transparent);
padding: var(--ms-pad-v) 0;
margin: 0;
max-width: none;
width: 100%;
display: block;
}
/* Seitenpadding sitzt innen, nicht am Block: nur so deckt sich die
Inhaltskante mit .ms-container, dem Standardcontainer der übrigen
Sektionen. Läge es aussen, wäre der Inhalt hier um --ms-pad-h breiter als
überall sonst auf der Seite. */
.ms-contact-inner {
display: grid;
/* Text und Formular je zur Haelfte. minmax(0,…) haelt lange Woerter im
Titel davon ab, die Spalte aufzuziehen. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
width: 100%;
/* Dieselbe Rechnung wie .ms-container und .ms-facts-content: das Padding
gehoert in die Obergrenze hinein, sonst begrenzt sie den Inhalt und
nicht den Kasten.
Vorher stand hier die nackte --ms-max-width. Der Kontaktblock war damit
um zweimal --ms-pad-h schmaler als der uebrige Inhalt - auf 1440px
faellt das nicht auf, weil dort ohnehin beide an der Fensterbreite
haengen, ab rund 1800px lief er aber sichtbar eingerueckt mit. */
max-width: calc(var(--ms-max-width) + var(--ms-pad-h) * 2);
margin: 0 auto;
padding: 0 var(--ms-pad-h);
}
.ms-contact-left {
background: transparent;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.ms-contact-form-wrapper {
background: var(--ms-secondary);
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.ms-contact-title {
font-family: var(--ms-font);
font-weight: var(--ms-fw-bold);
font-size: var(--ms-h2);
line-height: 1.0;
text-transform: var(--ms-tt);
letter-spacing: 0.02em;
color: var(--ms-green);
margin-bottom: 24px;
}
.ms-contact-text {
font-family: var(--ms-font);
font-weight: var(--ms-fw-light);
font-size: var(--ms-body);
color: var(--ms-green);
line-height: var(--ma-lh-text);
}
/* Dasselbe zehnspurige Raster wie im Suchprofil - die beiden Formulare
sollen sich gleich lesen. Vorher lief hier alles untereinander.
CASAMAIL liefert seine Felder teils in .casawp-row-Zeilen verpackt; die
loesen sich weiter unten per display:contents auf, damit ihre Felder
direkte Rasterzellen werden und mitmachen. */
.ms-contact .casawp-contact-form,
.ms-contact .casawp-contactform-form,
.ms-contact-form-wrapper form {
display: grid !important;
grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
column-gap: 1.25rem !important;
row-gap: 0 !important;
align-content: start !important;
}
/* Standardbreite halb; danach die Ausnahmen je Feld.
Die Reihenfolge steht explizit als `order` und nicht implizit im Markup:
CASAMAIL gibt Telefon vor E-Mail aus, gewuenscht ist es umgekehrt. Mit
durchnummerierten Werten bleibt die Abfolge auch dann stabil, wenn das
Plugin seine Feldreihenfolge aendert. */
.ms-contact .casawp-contactform-form > .form-group,
.ms-contact .casawp-contact-form > .form-group,
.ms-contact-form-wrapper form > .form-group,
.ms-contact [class*="casawp-col-"] {
grid-column: span 5;
/* Auffangwert. Ohne ihn stehen unbenannte Rasterzellen bei order 0 und
damit vor allen nummerierten Feldern - so landete CASAMAILs Hinweis
"Bitte füllen Sie alle Felder aus." ganz oben im Formular. Alles ohne
eigene Nummer sammelt sich jetzt am Ende. */
order: 20;
}
/* CASAMAIL setzt den Hinweis in eine eigene Spalte neben dem Absenden-Knopf,
ohne Eingabefeld darin - deshalb ueber die Abwesenheit von Feldern
gegriffen und nicht ueber einen Feldnamen. Volle Breite direkt ueber dem
Knopf, dort steht er im gestapelten Raster am sinnvollsten. */
.ms-contact .casawp-contactform-form [class*="casawp-col-"]:not(:has(input)):not(:has(select)):not(:has(textarea)) {
grid-column: span 10;
order: 10;
}
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="firstname"]) { grid-column: span 5; order: 1; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="lastname"]) { grid-column: span 5; order: 2; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="street"]) { grid-column: span 10; order: 3; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="postal_code"]) { grid-column: span 3; order: 4; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="locality"]) { grid-column: span 7; order: 5; }
/* Land ausgeblendet. Bewusst display:none auf der Huelle und nicht
`disabled` oder ein Entfernen aus dem Markup: das bleibt damit im
Formular und schickt seinen vorausgewaehlten Wert (CH) weiter mit - CasaWP
fuehrt das Feld serverseitig als Pflichtangabe, ohne Wert im POST
scheiterte die Pruefung. Ein leeres Pflichtfeld haette ausserdem die
Browserpruefung blockiert ("invalid form control is not focusable"); hier
ist es vorbelegt, der Fall tritt nicht ein.
Soll das Feld wieder sichtbar werden, reicht es, diese Regel gegen die
frueheren Werte `grid-column: span 10; order: 6;` zu tauschen. */
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(select[name="country"]) { display: none !important; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="emailreal"]) { grid-column: span 5; order: 7; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[name="phone"]) { grid-column: span 5; order: 8; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(textarea) { grid-column: span 10; order: 9; }
.ms-contact .casawp-contactform-form :is(.form-group, [class*="casawp-col-"]):has(input[type="submit"]) { grid-column: span 10; order: 11; }
/* Der Aufraeum-Div der Bootstrap-Zeilen ist im Raster eine leere Zelle. */
.ms-contact .clearBoth { display: none !important; }
.ms-contact .casawp-contact-form .form-group,
.ms-contact .casawp-contactform-form .form-group,
.ms-contact-form-wrapper .form-group {
margin: 0 0 1.5625rem !important; /* 25px – exakt wie Kontakt-Seite */
}
.ms-contact .casawp-contact-form input[type="text"],
.ms-contact .casawp-contact-form input[type="email"],
.ms-contact .casawp-contact-form input[type="tel"],
.ms-contact .casawp-contact-form textarea,
.ms-contact .casawp-contactform-form input[type="text"],
.ms-contact .casawp-contactform-form input[type="email"],
.ms-contact .casawp-contactform-form input[type="tel"],
.ms-contact .casawp-contactform-form textarea,
.ms-contact-form-wrapper input[type="text"],
.ms-contact-form-wrapper input[type="email"],
.ms-contact-form-wrapper input[type="tel"],
.ms-contact-form-wrapper textarea {
/* Felderoptik wie im Suchprofil der Archivseite: weisse Fläche, keine
Kontur, normale Schriftgrösse und Schreibweise.
!important bleibt nötig, weil CASAMAIL eigene Inline-/Plugin-Styles
mitbringt (u. a. height:30px). */
width: 100% !important;
height: auto !important;
min-height: 0 !important;
background: var(--ms-white) !important;
border: none !important;
border-radius: 0 !important;
color: var(--ms-green) !important;
font-family: var(--ms-font) !important;
font-weight: var(--ms-fw-light) !important;
font-size: var(--ms-body) !important;
line-height: 1.4 !important;
padding: 8px 16px !important;
letter-spacing: normal !important;
text-transform: none !important;
box-sizing: border-box !important;
box-shadow: none !important;
outline: none !important;
appearance: none !important;
-webkit-appearance: none !important;
transition: background 0.2s !important;
}
.ms-contact input::placeholder,
.ms-contact textarea::placeholder {
color: var(--ma-green-reduced) !important;
opacity: 1 !important;
}
/* Fokus färbt die Fläche nicht mehr ein – auf Weiss wäre das ein Rückschritt
in der Lesbarkeit. Stattdessen eine Innenkontur. */
.ms-contact input:focus,
.ms-contact textarea:focus,
.ms-contact select:focus {
background-color: var(--ms-white) !important;
box-shadow: inset 0 0 0 2px var(--ma-green-reduced) !important;
}
.ms-contact textarea {
resize: vertical !important;
min-height: 7.5rem !important;
}
/* Textarea traegt live ein eigenes, engeres Padding als die Einzeiler
(5px/14px statt 8px/16px). Der Selektor wiederholt die Kette der
Feldregel weiter oben: die liegt bei 0,3,1 und ist ebenfalls !important –
ein kurzes `.ms-contact textarea` (0,1,1) verliert dagegen. Gleichstand
plus spaetere Position entscheidet hier fuer diese Regel. */
.ms-contact .casawp-contact-form textarea,
.ms-contact .casawp-contactform-form textarea,
.ms-contact-form-wrapper textarea {
padding: 5px 14px !important;
}
.ms-contact .casawp-contact-form button[type="submit"],
.ms-contact .casawp-contactform-form button[type="submit"],
.ms-contact .casawp-contactform-form input[type="submit"],
.ms-contact-form-wrapper button[type="submit"],
.ms-contact-form-wrapper input[type="submit"] {
/* Identisch zum Submit des Suchprofils: gefüllt grün, weisse Schrift,
linksbündig. Die angeschrägte clip-path-Form entfällt.
Der Papierflieger läuft über background-image und nicht über ein
eingebettetes SVG: CASAMAIL rendert hier ein