/* ===============================================================
* Gojani Immobilien — Theme-Ergaenzungen
*
* Baut auf den Variablen aus style.css auf (Farben, Radius, Schatten).
* Enthaelt alles, was der Vanilla-Entwurf noch nicht hatte:
* Dropdown-Navigation, Objektlisten, Objekt-Detailseite, Lightbox,
* Leistungsseiten.
* =============================================================== */
/* ---------------------------------------------------------------
* Hilfsklassen
* --------------------------------------------------------------- */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 999;
padding: .7rem 1.2rem;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-sm);
}
.skip-link:focus {
top: 1rem;
}
.container-schmal {
max-width: 820px;
}
/* ---------------------------------------------------------------
* Navigation mit Dropdown
* --------------------------------------------------------------- */
.nav-links .has-dropdown {
position: relative;
}
.nav-links .has-dropdown > a {
display: inline-flex;
align-items: center;
gap: .3rem;
}
.dropdown-caret {
width: 14px;
height: 14px;
transition: transform var(--transition);
}
.nav-links .has-dropdown:hover .dropdown-caret,
.nav-links .has-dropdown:focus-within .dropdown-caret {
transform: rotate(180deg);
}
.nav-links .dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 220px;
margin-top: .5rem;
padding: .5rem;
list-style: none;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
z-index: 60;
}
.nav-links .has-dropdown:hover .dropdown,
.nav-links .has-dropdown:focus-within .dropdown {
opacity: 1;
visibility: visible;
}
.nav-links .dropdown li {
margin: 0;
}
.nav-links .dropdown a {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
padding: .6rem .8rem;
border-radius: var(--radius-sm);
font-size: .9rem;
white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.nav-links .dropdown a:hover {
background: var(--color-bg-alt);
color: var(--color-primary);
}
.dropdown-count {
min-width: 22px;
padding: .1rem .4rem;
border-radius: 99px;
background: var(--color-bg-alt);
color: var(--color-muted);
font-size: .74rem;
font-weight: 600;
text-align: center;
}
.nav-links .is-current > a {
color: var(--color-primary);
}
/* ---------------------------------------------------------------
* Objektkacheln
* --------------------------------------------------------------- */
.objekt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 1.8rem;
}
.objekt-card {
display: flex;
flex-direction: column;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
/* Bewusst kein Hover-Effekt auf der Kachel selbst — beim Ueberfahren
bewegt sich nur das Bild (siehe .objekt-card-media img). */
.objekt-card.is-inaktiv {
opacity: .78;
}
.objekt-card-media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-bg-alt);
}
.objekt-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.objekt-card:hover .objekt-card-media img {
transform: scale(1.04);
}
.objekt-card-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: var(--color-border);
}
.objekt-card-placeholder svg {
width: 64px;
height: 64px;
}
.objekt-badge {
position: absolute;
top: .8rem;
padding: .32rem .7rem;
border-radius: 99px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.objekt-badge-art {
left: .8rem;
background: rgba(255, 255, 255, .92);
color: var(--color-dark);
}
.objekt-badge-status {
right: .8rem;
color: #fff;
}
.status-verfuegbar { background: #0a7c42; }
.status-reserviert { background: #b57500; }
.status-verkauft,
.status-vermietet { background: #6b6b6b; }
.objekt-badge-nummer {
position: static;
background: rgba(255, 255, 255, .18);
color: #fff;
text-transform: none;
letter-spacing: 0;
}
.objekt-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.4rem 1.4rem 1.2rem;
}
.objekt-card-ort {
display: flex;
align-items: center;
gap: .35rem;
margin-bottom: .5rem;
color: var(--color-muted);
font-size: .84rem;
}
.objekt-card-ort svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.objekt-card-titel {
margin-bottom: .6rem;
font-size: 1.15rem;
line-height: 1.3;
}
.objekt-card-titel a {
color: inherit;
transition: color var(--transition);
}
.objekt-card-titel a:hover {
color: var(--color-primary);
}
.objekt-card-text {
margin-bottom: 1rem;
color: var(--color-mid);
font-size: .9rem;
line-height: 1.55;
}
.objekt-card-daten {
display: flex;
flex-wrap: wrap;
gap: .4rem 1.4rem;
margin: 0 0 1.2rem;
padding: .9rem 0 0;
border-top: 1px solid var(--color-border);
list-style: none;
}
.objekt-card-daten li {
display: flex;
flex-direction: column;
gap: .1rem;
}
.objekt-card-daten-label {
color: var(--color-primary);
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
.objekt-card-daten-wert {
font-weight: 600;
font-size: .92rem;
font-variant-numeric: tabular-nums;
}
.objekt-card-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
}
.objekt-card-preis {
display: flex;
flex-direction: column;
}
.objekt-card-preis-label {
color: var(--color-muted);
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.objekt-card-preis strong {
color: var(--color-primary);
font-size: 1.25rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.objekt-card-btn {
padding: .6rem 1.4rem;
background: var(--color-primary);
color: #fff;
font-size: .85rem;
text-decoration: none;
text-underline-offset: 3px;
transition: background var(--transition);
}
/* Hover: nur ein Strich unter der Beschriftung, kein Farbwechsel,
kein Verschieben. */
.objekt-card-btn:hover,
.objekt-card-btn:focus-visible {
background: var(--color-primary);
color: #fff;
text-decoration: underline;
}
/* ---------------------------------------------------------------
* Objektuebersicht
* --------------------------------------------------------------- */
.objekt-archiv-head {
padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3rem);
text-align: center;
background: var(--color-bg);
}
.objekt-archiv-titel {
margin: .6rem 0 1rem;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.15;
}
.objekt-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2.2rem;
padding-bottom: 1.4rem;
border-bottom: 1px solid var(--color-border);
}
.objekt-filter-gruppe {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
/* Kaufen oder Mieten steht als eigene Reihe unter der Objektart, links
buendig mit ihr. Rechts angesetzt sah die Gruppe aus, als gehoere sie
nicht dazu; nebeneinander wird es ab fuenf Objektarten ohnehin zu eng.
Die feine Linie darueber trennt die beiden Entscheidungen. */
.objekt-filter-gruppe-angebot {
width: 100%;
margin-top: .3rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
/* Diese Reihe sind Schaltflaechen, keine Verweise - das Filtern passiert
im Browser. Die Angleichung an die Knoepfe daneben muss deshalb hier
von Hand passieren. */
.objekt-filter-gruppe-angebot .objekt-filter-btn {
cursor: pointer;
font: inherit;
font-weight: 600;
font-size: .88rem;
background: var(--color-bg);
}
.objekt-filter-gruppe-angebot .objekt-filter-btn.is-active {
background: var(--color-primary);
}
.objekt-filter-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .55rem 1.1rem;
border: 1px solid var(--color-border);
border-radius: 99px;
background: var(--color-bg);
color: var(--color-mid);
font-size: .88rem;
font-weight: 600;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.objekt-filter-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.objekt-filter-btn.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.objekt-filter-count {
padding: .05rem .4rem;
border-radius: 99px;
background: var(--color-bg-alt);
color: var(--color-muted);
font-size: .72rem;
}
.objekt-filter-btn.is-active .objekt-filter-count {
background: rgba(255, 255, 255, .2);
color: #fff;
}
.objekt-filter-tools {
display: flex;
flex-wrap: wrap;
gap: .6rem;
}
.objekt-filter-suche {
position: relative;
display: flex;
align-items: center;
}
.objekt-filter-suche svg {
position: absolute;
left: .8rem;
width: 16px;
height: 16px;
color: var(--color-muted);
pointer-events: none;
}
.objekt-filter-suche input {
padding: .6rem 1rem .6rem 2.4rem;
border: 1px solid var(--color-border);
border-radius: 99px;
background: var(--color-bg);
font: inherit;
font-size: .88rem;
min-width: 220px;
}
.objekt-filter-sort select {
padding: .6rem 1rem;
border: 1px solid var(--color-border);
border-radius: 99px;
background: var(--color-bg);
font: inherit;
font-size: .88rem;
cursor: pointer;
}
.objekt-filter-suche input:focus,
.objekt-filter-sort select:focus {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
.objekt-leer {
margin-top: 2rem;
padding: 2rem;
text-align: center;
color: var(--color-mid);
}
.objekt-leer-block {
max-width: 620px;
margin: 0 auto;
padding: clamp(2rem, 6vw, 3.5rem);
text-align: center;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
}
.objekt-leer-block h2,
.objekt-leer-block h3 {
margin-bottom: .8rem;
}
.objekt-leer-block p {
margin-bottom: 1.6rem;
color: var(--color-mid);
}
.objekt-card.is-hidden {
display: none;
}
.objekte-alle {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.2rem;
margin-top: 2.4rem;
}
.objekte-arten {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.objekte-art-link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1rem;
border: 1px solid var(--color-border);
border-radius: 99px;
font-size: .86rem;
font-weight: 600;
color: var(--color-mid);
transition: border-color var(--transition), color var(--transition);
}
.objekte-art-link:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.objekte-art-link span {
color: var(--color-muted);
font-size: .76rem;
}
/* ---------------------------------------------------------------
* Objekt-Detailseite
* --------------------------------------------------------------- */
.objekt-hero {
position: relative;
min-height: clamp(380px, 52vh, 560px);
display: flex;
align-items: flex-end;
background: var(--color-dark);
color: #fff;
overflow: hidden;
}
.objekt-hero-bild {
position: absolute;
inset: 0;
}
.objekt-hero-bild img {
width: 100%;
height: 100%;
object-fit: cover;
}
.objekt-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(27, 22, 20, .35) 0%, rgba(27, 22, 20, .82) 100%);
}
.objekt-hero-ohne-bild {
min-height: 320px;
background: linear-gradient(135deg, var(--color-primary-dk) 0%, var(--color-dark) 100%);
}
.objekt-hero-ohne-bild::after {
display: none;
}
.objekt-hero-inhalt {
position: relative;
z-index: 2;
width: 100%;
padding: 2.5rem 0;
}
.objekt-brotkrumen {
display: flex;
gap: .5rem;
margin-bottom: 1rem;
font-size: .85rem;
opacity: .85;
}
.objekt-brotkrumen a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--transition);
}
.objekt-brotkrumen a:hover {
border-bottom-color: currentColor;
}
.objekt-hero-badges {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1rem;
}
.objekt-hero-badges .objekt-badge {
position: static;
}
.objekt-titel {
max-width: 20ch;
margin-bottom: .8rem;
font-size: clamp(1.9rem, 4.5vw, 3rem);
line-height: 1.12;
color: #fff;
}
.objekt-ort {
display: flex;
align-items: center;
gap: .45rem;
font-size: 1rem;
opacity: .92;
}
.objekt-ort svg {
width: 18px;
height: 18px;
}
.objekt-strasse {
opacity: .8;
}
.objekt-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: start;
}
.objekt-block {
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.objekt-block h2 {
margin-bottom: 1.2rem;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}
/* Die Trennlinien liegen als Umriss an den Feldern selbst, nicht als
eingefaerbter Zwischenraum des Rasters. Grund: Bei einer nicht voll
besetzten letzten Reihe blieb sonst ein eingefaerbter Rest stehen,
der wie ein leeres Feld aussah. Wie viele Spalten das Raster bildet,
haengt von der Fensterbreite ab - es laesst sich also nicht
auffuellen. Umrisse ueberlagern sich an gemeinsamen Kanten zu genau
einer Linie und kosten keinen Platz. */
.objekt-eckdaten {
display: grid;
/* 200 statt frueher 180: bei 180 entstanden auf dem Handy zwei
Spalten, die fuer "Renovierungsbeduerftig" gerade nicht reichten.
Ab dieser Breite kippt das Raster dort auf eine Spalte. */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0;
margin: 0;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
}
.objekt-eckdaten-item {
padding: 1rem 1.1rem;
background: var(--color-bg);
outline: 1px solid var(--color-border);
}
/* Lange Woerter ohne Trennstelle - "Renovierungsbeduerftig",
"Sanierungsbeduerftig", "Mehrfamilienhaus" - sind auf dem Handy
breiter als eine Rasterspalte. Sie liefen bisher aus dem Feld heraus
und wurden vom "overflow: hidden" des Rasters abgeschnitten: aus
"Renovierungsbeduerftig" wurde "Renovierungsbeduerft". Die Trennung
setzt am Wort an, der Umbruch an beliebiger Stelle faengt den Rest. */
.objekt-eckdaten dt,
.objekt-eckdaten dd {
hyphens: auto;
overflow-wrap: break-word;
}
.objekt-eckdaten dt {
margin-bottom: .2rem;
color: var(--color-muted);
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.objekt-eckdaten dd {
margin: 0;
font-size: 1.02rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.objekt-eckdaten-schmal {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.objekt-galerie {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: .8rem;
}
.objekt-galerie-item,
.objekt-grundriss {
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
overflow: hidden;
cursor: zoom-in;
transition: border-color var(--transition), box-shadow var(--transition);
}
.objekt-galerie-item:hover,
.objekt-grundriss:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow);
}
.objekt-galerie-item img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.objekt-grundriss {
display: block;
width: 100%;
cursor: zoom-in;
}
.objekt-grundriss img {
display: block;
width: 100%;
height: auto;
background: #fff;
}
/* Zeilen ohne Wert stehen trotzdem da, damit die Liste bei jedem Objekt
gleich aussieht. Der Strich tritt zurueck, damit er nicht wie eine
Angabe wirkt. */
.objekt-eckdaten-item.ist-leer dd {
color: var(--color-muted);
font-weight: 400;
}
/* ===============================================================
* Bandtacho des Energieausweises
*
* Neun Stufen von A+ bis H, gefaerbt wie auf dem amtlichen Ausweis.
* Die zutreffende Stufe wird zum vollflaechigen Feld, alle anderen
* zeigen nur ihren Farbbalken unter dem Buchstaben - genau die
* Lesart, die man vom Papierausweis kennt.
*
* Die Farbe kommt je Stufe als --stufe-farbe aus dem Template. So
* steht die Skala an einer Stelle in PHP und nicht neunmal hier.
* =============================================================== */
.energie-skala {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 4px;
margin-bottom: 1.5rem;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
}
.energie-stufe {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 8px 2px;
border-radius: 5px;
}
.energie-buchstabe {
font-size: .82rem;
font-weight: 700;
line-height: 1;
color: var(--color-mid);
}
.energie-balken {
width: 100%;
height: 9px;
border-radius: 2px;
background: var(--stufe-farbe);
}
/* Die zutreffende Stufe: ganzes Feld in der Farbe, Buchstabe darauf.
Der Balken verschwindet, er waere auf gleichem Grund unsichtbar. */
.energie-stufe.ist-aktiv {
justify-content: center;
background: var(--stufe-farbe);
box-shadow: 0 2px 8px rgba(20, 16, 14, .18);
}
.energie-stufe.ist-aktiv .energie-buchstabe {
font-size: 1.05rem;
color: #fff;
}
/* Der Balken waere auf gleichfarbigem Grund ohnehin unsichtbar */
.energie-stufe.ist-aktiv .energie-balken {
visibility: hidden;
}
/* Auf Gelb und dem blassen Gruen in der Mitte geht Weiss unter.
Welche Stufen das sind, rechnet PHP aus der Farbe aus. */
.energie-stufe.ist-aktiv.ist-hell .energie-buchstabe {
color: var(--color-dark);
}
@media (max-width: 720px) {
.energie-skala {
gap: 3px;
padding: 9px;
}
.energie-stufe {
padding: 6px 1px;
gap: 6px;
}
.energie-buchstabe {
font-size: .68rem;
}
.energie-stufe.ist-aktiv .energie-buchstabe {
font-size: .82rem;
}
.energie-balken {
height: 7px;
}
}
/* Sidebar */
.objekt-sidebar-inner {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.objekt-preis-box {
display: flex;
flex-direction: column;
gap: .2rem;
padding: 1.5rem;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius);
}
.objekt-preis-label {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .85;
}
.objekt-preis-wert {
font-size: 1.9rem;
font-weight: 800;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.objekt-preis-zusatz,
.objekt-preis-provision {
font-size: .8rem;
opacity: .85;
}
.objekt-preis-provision {
margin-top: .5rem;
padding-top: .5rem;
border-top: 1px solid rgba(255, 255, 255, .2);
}
.objekt-hinweis-inaktiv {
padding: 1rem 1.2rem;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius);
color: var(--color-mid);
font-size: .88rem;
line-height: 1.55;
}
.objekt-kontakt-box {
display: flex;
flex-direction: column;
gap: .6rem;
padding: 1.5rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
text-align: center;
}
.objekt-kontakt-foto {
width: 76px;
height: 76px;
margin: 0 auto .4rem;
border-radius: 50%;
object-fit: cover;
}
.objekt-kontakt-name {
font-weight: 700;
font-size: 1.05rem;
}
.objekt-kontakt-rolle {
margin-bottom: .6rem;
color: var(--color-muted);
font-size: .82rem;
}
.objekt-kontakt-btn {
width: 100%;
}
.btn-expose {
width: 100%;
background: var(--color-dark);
color: #fff;
border: 1px solid var(--color-dark);
}
.btn-expose:hover {
background: var(--color-dark-2);
border-color: var(--color-dark-2);
color: #fff;
}
/* Kleingedrucktes unter dem Knopf: Wer darauf klickt, verlaesst die
Seite. Das gehoert dazugesagt, bevor jemand klickt - nicht danach. */
.expose-quelle {
margin: .45rem 0 0;
font-size: .76rem;
line-height: 1.45;
color: var(--color-muted);
text-align: center;
}
/* ---------------------------------------------------------------
* Lightbox
* --------------------------------------------------------------- */
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
background: rgba(20, 16, 14, .93);
}
.lightbox[hidden] {
display: none;
}
.lightbox-bild {
max-width: min(1200px, 92vw);
max-height: 86vh;
object-fit: contain;
border-radius: var(--radius-sm);
}
.lightbox button {
position: absolute;
display: grid;
place-items: center;
background: rgba(255, 255, 255, .1);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background var(--transition);
}
.lightbox button:hover {
background: rgba(255, 255, 255, .22);
}
.lightbox-close {
top: 1.2rem;
right: 1.2rem;
width: 44px;
height: 44px;
font-size: 1.8rem;
line-height: 1;
}
.lightbox-prev,
.lightbox-next {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
font-size: 2.2rem;
line-height: 1;
}
.lightbox-prev { left: 1.2rem; }
.lightbox-next { right: 1.2rem; }
.lightbox-zaehler {
position: absolute;
bottom: 1.4rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, .8);
font-size: .85rem;
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------
* Leistungsseiten
* --------------------------------------------------------------- */
.card-link {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.card-mehr {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem;
margin-top: auto;
padding-top: 1.1rem;
color: var(--color-primary);
font-size: .86rem;
font-weight: 600;
}
.card-mehr svg {
width: 14px;
height: 14px;
transition: transform var(--transition);
}
.card-link:hover .card-mehr svg {
transform: translate(2px, -2px);
}
.leistung-hero {
padding: clamp(3rem, 8vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
text-align: center;
background: var(--color-bg-alt);
}
.leistung-hero .objekt-brotkrumen {
justify-content: center;
color: var(--color-muted);
}
.leistung-hero-icon {
display: grid;
place-items: center;
width: 68px;
height: 68px;
margin: 0 auto 1.2rem;
border-radius: var(--radius);
background: var(--color-bg);
border: 1px solid var(--color-border);
color: var(--color-primary);
}
.leistung-hero-icon svg {
width: 32px;
height: 32px;
}
.leistung-titel {
margin-bottom: 1rem;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.15;
}
.leistung-einleitung {
max-width: 62ch;
margin: 0 auto;
color: var(--color-mid);
font-size: 1.08rem;
line-height: 1.65;
}
.leistung-bild {
margin-bottom: 2.5rem;
border-radius: var(--radius);
overflow: hidden;
}
.leistung-bild img {
display: block;
width: 100%;
height: auto;
}
.leistung-block {
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.leistung-block h2 {
margin-bottom: 1.2rem;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}
.leistung-vorteile {
display: grid;
gap: .7rem;
margin: 0;
padding: 0;
list-style: none;
}
.leistung-vorteile li {
display: flex;
align-items: flex-start;
gap: .7rem;
line-height: 1.55;
}
.leistung-vorteile svg {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: .25rem;
color: var(--color-primary);
}
.leistung-ablauf {
display: grid;
gap: 1.4rem;
margin: 0;
padding: 0;
list-style: none;
counter-reset: schritt;
}
.leistung-ablauf li {
display: flex;
gap: 1.2rem;
}
.leistung-schritt-nr {
flex-shrink: 0;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
color: var(--color-primary);
font-weight: 700;
font-size: .9rem;
font-variant-numeric: tabular-nums;
}
.leistung-ablauf h3 {
margin-bottom: .3rem;
font-size: 1.05rem;
}
.leistung-ablauf p {
color: var(--color-mid);
line-height: 1.6;
}
.leistung-faq {
display: grid;
gap: .6rem;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
overflow: hidden;
}
.faq-item summary {
padding: 1rem 1.2rem;
font-weight: 600;
cursor: pointer;
list-style: none;
transition: background var(--transition);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
float: right;
color: var(--color-primary);
font-size: 1.3rem;
line-height: 1;
}
.faq-item[open] summary::after {
content: "–";
}
.faq-item summary:hover {
background: var(--color-bg-alt);
}
.faq-antwort {
padding: 0 1.2rem 1.2rem;
color: var(--color-mid);
line-height: 1.65;
}
.leistung-cta {
margin-top: clamp(2.5rem, 6vw, 4rem);
padding: clamp(2rem, 5vw, 3rem);
text-align: center;
background: var(--color-bg-alt);
border-radius: var(--radius);
}
.leistung-cta h2 {
margin-bottom: .7rem;
}
.leistung-cta p {
max-width: 52ch;
margin: 0 auto 1.6rem;
color: var(--color-mid);
line-height: 1.6;
}
.leistung-cta-btns {
display: flex;
flex-wrap: wrap;
gap: .8rem;
justify-content: center;
}
/* ---------------------------------------------------------------
* Inhaltsseiten
* --------------------------------------------------------------- */
.seite-inhalt {
padding-top: clamp(2.5rem, 7vw, 4.5rem);
}
.seite-titel {
margin-bottom: 1.6rem;
font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}
.inhalt-text {
line-height: 1.7;
color: var(--color-mid);
}
.inhalt-text h2 {
margin: 2rem 0 .8rem;
color: var(--color-text);
font-size: 1.4rem;
}
.inhalt-text h3 {
margin: 1.5rem 0 .6rem;
color: var(--color-text);
font-size: 1.15rem;
}
.inhalt-text p {
margin-bottom: 1rem;
}
.inhalt-text ul,
.inhalt-text ol {
margin: 0 0 1.2rem 1.2rem;
}
.inhalt-text li {
margin-bottom: .4rem;
}
.inhalt-text a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.inhalt-liste ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: .3rem 1.5rem;
margin-left: 1.1rem;
}
/* ---------------------------------------------------------------
* Kontaktmeldung
* --------------------------------------------------------------- */
.kontakt-meldung {
margin-bottom: 1.4rem;
padding: 1rem 1.2rem;
border-radius: var(--radius);
font-size: .92rem;
line-height: 1.55;
}
.kontakt-meldung-erfolg {
background: #e8f5ee;
border: 1px solid #0a7c42;
color: #05532c;
}
.kontakt-meldung-fehler {
background: #fdecec;
border: 1px solid #c0392b;
color: #8b241a;
}
/* ---------------------------------------------------------------
* Mobil
* --------------------------------------------------------------- */
@media (max-width: 980px) {
.objekt-layout {
grid-template-columns: 1fr;
}
.objekt-sidebar-inner {
position: static;
}
}
@media (max-width: 860px) {
/* Im aufgeklappten Mobilmenue klappen Dropdowns immer auf */
.nav-links .dropdown {
position: static;
transform: none;
opacity: 1;
visibility: visible;
min-width: 0;
margin: .3rem 0 .6rem;
padding: .3rem 0 .3rem .8rem;
border: 0;
border-left: 2px solid var(--color-border);
border-radius: 0;
box-shadow: none;
background: transparent;
}
.dropdown-caret {
display: none;
}
.objekt-filter {
flex-direction: column;
align-items: stretch;
}
.objekt-filter-tools {
flex-direction: column;
}
.objekt-filter-suche input,
.objekt-filter-sort select {
width: 100%;
}
.objekt-grid {
grid-template-columns: 1fr;
}
.lightbox-prev,
.lightbox-next {
width: 44px;
height: 44px;
}
}
/* Touch-Geraete: Untermenue per Tipp geoeffnet (siehe main.js) */
.nav-links .has-dropdown.is-offen .dropdown {
opacity: 1;
visibility: visible;
}
/* Expose-Vorschau: Button sieht fertig aus, laedt aber noch nichts */
.expose-vorschau-hinweis {
margin-top: -.2rem;
padding: .7rem .9rem;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-mid);
font-size: .82rem;
line-height: 1.5;
text-align: left;
}
.expose-vorschau-admin {
margin-top: .2rem;
color: var(--color-muted);
font-size: .74rem;
font-style: italic;
line-height: 1.4;
}
/* Portrait-Platzhalter, solange unter Seitendaten kein Foto hinterlegt ist */
.objekt-kontakt-foto-leer {
display: grid;
place-items: center;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
color: var(--color-primary);
}
.objekt-kontakt-foto-leer svg {
width: 38px;
height: 38px;
}
/* Weiterempfehlen — dezenter als die anderen Buttons, damit die
Reihenfolge Anrufen, Anfrage, Expose ihre Gewichtung behaelt */
.btn-empfehlen {
width: 100%;
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-mid);
font-weight: 500;
text-underline-offset: 3px;
transition: border-color var(--transition), color var(--transition);
}
.btn-empfehlen svg {
width: 16px;
height: 16px;
}
.btn-empfehlen:hover,
.btn-empfehlen:focus-visible {
border-color: var(--color-primary);
color: var(--color-primary);
text-decoration: underline;
}
/* ===============================================================
* Kopfbereich zentriert
*
* Logo mittig und gross, Navigation darunter. Beim Scrollen schrumpft
* der Block, sonst wuerde ein sticky Header von ~200 px die halbe
* Bildschirmhoehe belegen. Ausgeloest ueber .scrolled, das main.js
* ab 10 px Scrollhoehe setzt.
* =============================================================== */
.nav {
flex-direction: column;
justify-content: center;
height: auto;
gap: .6rem;
padding: 1.4rem 0 .5rem;
transition: padding var(--transition);
}
.nav-logo {
justify-content: center;
}
.nav-links {
justify-content: center;
flex-wrap: wrap;
gap: .1rem .25rem;
}
/* Kompakter Zustand beim Scrollen */
#header.scrolled .nav {
padding: .5rem 0 .3rem;
}
/* Der Termin-Button sass rechts aussen, mittig braucht er keinen Extra-Abstand */
.nav-links .btn-nav {
margin-left: .6rem;
}
/* Dropdowns oeffnen mittig unter ihrem Punkt */
.nav-links .dropdown {
margin-top: .35rem;
}
@media (max-width: 680px) {
.nav {
position: relative;
padding: 1rem 0 .6rem;
gap: .5rem;
}
/* Burger rechts neben dem zentrierten Logo */
.nav-toggle {
position: absolute;
top: 1.1rem;
right: 0;
}
/* Aufgeklapptes Menue laeuft im Fluss mit, statt fix unter einer
festen Kopfhoehe zu haengen — die gibt es hier nicht mehr. */
.nav-links {
position: static;
top: auto;
max-height: 70vh;
box-shadow: none;
border-bottom: 0;
padding: .5rem 0 0;
}
}
/* Footer: das Logo steht jetzt gestapelt, bei 68 px wurde die Wortmarke
darunter zu klein. Der weisse Kasten bleibt — das Logo ist dunkelrot
und waere auf dem dunklen Footer sonst kaum zu sehen. */
.footer-logo-img {
height: 96px;
padding: 10px 14px;
}
/* ===============================================================
* Topbar: Kontaktdaten mittig, Terminbutton daneben
* (Der Claim steht weiter im Footer, nur hier oben ist er raus.)
* =============================================================== */
.topbar-inner {
justify-content: center;
min-height: 46px;
flex-wrap: wrap;
}
.topbar-right {
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1.6rem;
}
.topbar-cta {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .4rem 1.1rem;
border-radius: 99px;
background: var(--color-primary);
color: #fff !important;
font-size: .8rem;
font-weight: 600;
white-space: nowrap;
transition: background var(--transition);
}
.topbar-cta:hover,
.topbar-cta:focus-visible {
background: var(--color-primary-lt);
color: #fff !important;
}
.topbar-cta svg {
width: 13px;
height: 13px;
color: currentColor !important;
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.topbar-cta:hover svg {
transform: rotate(45deg);
}
/* Logo etwas praesenter */
@media (max-width: 700px) {
.topbar-right {
gap: .8rem 1.2rem;
padding: .5rem 0;
}
.topbar-cta {
order: 3;
width: auto;
padding: .35rem 1rem;
font-size: .76rem;
}
}
@media (max-width: 680px) {
}
/* ===============================================================
* Navigationszeile mit eigenem Platz
*
* Direkt unter dem Logo wirkte die Navigation verloren. Eine Trennlinie
* ueber die volle Breite gibt ihr eine eigene Zone, Versalien und mehr
* Laufweite lassen sie gesetzt statt hingerutscht wirken.
* =============================================================== */
.nav-links {
width: 100%;
margin-top: .5rem;
padding-top: .85rem;
border-top: 1px solid var(--color-border);
gap: .1rem 1rem;
}
.nav-links > li > a {
padding: .5rem .2rem .6rem;
font-size: .82rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--color-dark);
}
.nav-links > li > a:hover {
color: var(--color-primary);
}
/* Der Unterstrich sass auf dem alten Innenabstand */
.nav-links > li > a::after {
left: .2rem;
right: .2rem;
bottom: .1rem;
}
/* Im Dropdown bleibt es bei normaler Schreibweise */
.nav-links .dropdown a {
font-size: .88rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color-mid);
padding: .6rem .8rem;
}
/* Kompakter Zustand: Zeile ruecken zusammen, Trennlinie bleibt */
#header.scrolled .nav-links {
margin-top: .3rem;
padding-top: .5rem;
}
@media (max-width: 680px) {
/* Im Klappmenue wieder untereinander und ohne Versalien-Optik */
.nav-links > li > a {
padding: .85rem 1rem;
font-size: .95rem;
letter-spacing: .02em;
text-transform: none;
}
.nav-links {
margin-top: 0;
gap: .15rem;
}
}
/* ===============================================================
* Kopfbereich, zweiter Anlauf
*
* Die Navigation sitzt jetzt in einem eigenen Streifen (.nav-bar) statt
* im Logo-Container. Nur so laeuft die Trennlinie ueber die ganze
* Fensterbreite und endet nicht an den 1180 px des Containers.
* =============================================================== */
.nav {
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1.3rem 0 1rem;
gap: 0;
}
.nav-bar {
border-top: 1px solid var(--color-border);
}
.nav-links {
width: 100%;
margin-top: 0;
padding-top: .5rem;
padding-bottom: .5rem;
border-top: 0;
}
/* Alle Punkte auf gleiche Hoehe.
Die Eintraege mit Untermenue standen versetzt, weil nur sie als
Flex-Element gesetzt waren — ihre Grundlinie richtete sich am
Pfeilsymbol aus, die der uebrigen Links an der Textgrundlinie. */
.nav-links > li {
display: flex;
align-items: center;
}
.nav-links > li > a {
display: inline-flex;
align-items: center;
line-height: 1.2;
}
#header.scrolled .nav {
padding: .45rem 0 .4rem;
}
#header.scrolled .nav-links {
margin-top: 0;
padding-top: .35rem;
padding-bottom: .35rem;
}
@media (max-width: 680px) {
.nav {
padding: .9rem 0 .8rem;
}
.nav-links {
padding-top: .4rem;
padding-bottom: .6rem;
}
.nav-links > li {
display: block;
}
.nav-links > li > a {
display: block;
}
/* Der Pfeil beim Untermenue braucht im Klappmenue keinen Platz */
.nav-links .has-dropdown > a {
display: block;
}
}
/* ===============================================================
* Logo-Aufbau im Kopfbereich
*
* Das Logo liegt als drei Ebenen vor. Beim ersten Aufruf einer Sitzung
* bauen sie sich von unten nach oben auf: erst die Grundlinie, dann der
* Schriftzug, zuletzt setzt die Bildmarke auf und laesst die Zeilen
* darunter kurz mitschwingen.
*
* Ohne die Klasse auf steht das Logo sofort fertig da — das ist
* der Normalfall ab dem zweiten Seitenaufruf.
* =============================================================== */
.nav-logo-bau {
position: relative;
display: block;
height: 148px;
aspect-ratio: 5325 / 3949;
transition: height var(--transition);
}
.logo-ebene {
position: absolute;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* Massverhaeltnisse aus dem Originallogo */
.logo-marke {
left: 21.52%;
top: 0;
width: 56.96%;
aspect-ratio: 261 / 242;
background-image: url("../images/logo-teile/marke.webp");
}
.logo-wortmarke {
left: 0;
top: 77.99%;
width: 100%;
aspect-ratio: 455 / 39;
background-image: url("../images/logo-teile/wortmarke.webp");
}
.logo-immobilien {
left: 11.81%;
top: 95.52%;
width: 76.36%;
aspect-ratio: 345 / 15;
background-image: url("../images/logo-teile/immobilien.webp");
}
#header.scrolled .nav-logo-bau {
height: 68px;
}
@media (max-width: 680px) {
.nav-logo-bau { height: 104px; }
#header.scrolled .nav-logo-bau { height: 58px; }
}
/* --- Der Aufbau, nur beim ersten Aufruf einer Sitzung ------------ */
.gi-logo-aufbau .logo-immobilien {
animation: gi-legen .5s cubic-bezier(.5, .02, .72, .2) both,
gi-mitschwingen .55s 1.15s cubic-bezier(.25, .9, .35, 1) both;
}
.gi-logo-aufbau .logo-wortmarke {
animation: gi-legen .5s .24s cubic-bezier(.5, .02, .72, .2) both,
gi-mitschwingen .55s 1.12s cubic-bezier(.25, .9, .35, 1) both;
}
.gi-logo-aufbau .logo-marke {
animation: gi-fallen .66s .46s cubic-bezier(.5, .02, .72, .2) both,
gi-aufschlag .5s 1.12s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes gi-legen {
from { transform: translateY(-26%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes gi-fallen {
from { transform: translateY(-58%); opacity: 0; }
60% { opacity: 1; }
to { transform: translateY(0); opacity: 1; }
}
/* Der Aufprall staucht kurz und federt nur wenige Promille nach.
Ein weicher Bounce wuerde nach Spielzeug aussehen, nicht nach Gewicht. */
@keyframes gi-aufschlag {
0% { transform: translateY(0) scale(1, 1); }
16% { transform: translateY(1.8%) scale(1.018, .968); }
44% { transform: translateY(-.8%) scale(.994, 1.01); }
72% { transform: translateY(.3%) scale(1.002, .997); }
100% { transform: translateY(0) scale(1, 1); }
}
@keyframes gi-mitschwingen {
0% { transform: translateY(0); }
22% { transform: translateY(.9%); }
55% { transform: translateY(-.35%); }
100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.gi-logo-aufbau .logo-ebene {
animation: none !important;
}
}
/* ===============================================================
* Navigations-Hover im hellen Logo-Rot
*
* Das kraeftige Rot aus der Bildmarke (#d81208) statt des dunklen
* Weinrots. Es hebt sich beim Ueberfahren deutlicher ab und stellt den
* Bezug zum Logo darueber her.
* =============================================================== */
:root {
/* Seit die Grundfarbe des Themes selbst dieses Rot ist, zeigt der
Name nur noch auf sie - damit es eine einzige Quelle gibt. */
--color-logo-rot: var(--color-primary);
}
.nav-links > li > a:hover,
.nav-links > li > a:focus-visible {
color: var(--color-logo-rot);
}
/* Der Unterstrich faehrt in derselben Farbe auf */
.nav-links > li > a::after {
background: var(--color-logo-rot);
}
/* Auch im Untermenue */
.nav-links .dropdown a:hover,
.nav-links .dropdown a:focus-visible {
color: var(--color-logo-rot);
}
/* Der Punkt, auf dessen Seite man gerade ist */
.nav-links .is-current > a {
color: var(--color-logo-rot);
}
/* Kein Unterstrich beim Ueberfahren der Navigation — der Farbwechsel
ins Logo-Rot traegt den Hover allein. */
.nav-links > li > a::after {
display: none;
}
/* Die Zahlen im Untermenue sind aus dem Markup verschwunden;
die Regel dafuer wird nicht mehr gebraucht. */
.dropdown-count {
display: none;
}
/* Auch im Untermenue kein Unterstrich beim Ueberfahren.
Die Regel weiter oben greift nur fuer die oberste Ebene (> li > a),
die Eintraege im Aufklappmenue liegen eine Ebene tiefer. */
.nav-links .dropdown a::after {
display: none;
}
.nav-links .dropdown a:hover,
.nav-links .dropdown a:focus-visible {
background: var(--color-bg-alt);
color: var(--color-logo-rot);
}
/* Portrait in der Objekt-Sidebar — groesser, damit das Gesicht wirkt */
.objekt-kontakt-foto {
width: 104px;
height: 104px;
margin-bottom: .6rem;
object-fit: cover;
object-position: center 22%;
border: 3px solid var(--color-bg);
box-shadow: 0 0 0 1px var(--color-border);
}
.objekt-kontakt-foto-leer svg {
width: 46px;
height: 46px;
}
/* ===============================================================
* Kontaktbox in der Objekt-Sidebar, Feinschliff
* =============================================================== */
/* Portrait so breit wie der Name darunter */
.objekt-kontakt-foto {
width: 148px;
height: 148px;
margin-bottom: .5rem;
}
.objekt-kontakt-foto-leer svg {
width: 64px;
height: 64px;
}
/* Der Weg von der Rolle zur Telefonnummer war zu weit */
.objekt-kontakt-box {
gap: .45rem;
}
.objekt-kontakt-rolle {
margin-bottom: .1rem;
}
/* Die Telefonnummer ist der wichtigste Kontaktweg — entsprechend groß */
.objekt-kontakt-box .btn.objekt-kontakt-btn[href^="tel:"] {
padding: .35rem .6rem .6rem;
font-size: 1.12rem;
font-weight: 700;
color: var(--color-dark);
letter-spacing: .01em;
transition: color var(--transition);
}
.objekt-kontakt-box .btn.objekt-kontakt-btn[href^="tel:"]:hover,
.objekt-kontakt-box .btn.objekt-kontakt-btn[href^="tel:"]:focus-visible {
color: var(--color-logo-rot);
}
.objekt-kontakt-box .btn.objekt-kontakt-btn[href^="tel:"] svg {
width: 17px;
height: 17px;
}
/* Die Symbole bleiben beim Überfahren stehen. Das Wandern kam aus einer
allgemeinen Regel für Pfeile in Buttons — bei Hörer, Umschlag und
Download-Pfeil wirkt es wie ein Wackeln. */
.objekt-kontakt-box .btn svg,
.btn-expose svg,
.btn-empfehlen svg {
transition: none;
}
.objekt-kontakt-box .btn:hover svg,
.btn-expose:hover svg,
.btn-empfehlen:hover svg {
transform: none;
}
/* Der Preis steht als erste Zelle in den Eckdaten und darf sich
von Baujahr und Zimmerzahl abheben. */
.objekt-eckdaten-item.ist-preis dd {
color: var(--color-primary);
font-size: 1.15rem;
font-weight: 700;
}
/* Provision und Mietzusatz stehen jetzt klein unter dem Preis in den
Eckdaten — die eigene Preisbox in der Sidebar ist entfallen. */
.eckdaten-zusatz {
display: block;
margin-top: .15rem;
color: var(--color-muted);
font-size: .76rem;
font-weight: 400;
line-height: 1.35;
letter-spacing: 0;
}
/* Name in der Kontaktbox etwas kräftiger */
.objekt-kontakt-name {
font-size: 1.24rem;
line-height: 1.25;
}
/* Das Portrait ist jetzt quadratisch zugeschnitten und schon mit Luft
um den Kopf — es muss im Rahmen nicht mehr verschoben werden. */
.objekt-kontakt-foto {
object-position: center;
}
/* Die Kontaktbox soll oben mit dem Eckdaten-Kasten abschliessen, nicht
mit dessen Ueberschrift. Der Platzhalter nimmt genau eine Zeile
Ueberschrift plus deren Abstand ein. Er sitzt am aeusseren Element,
damit der klebende Innenteil beim Scrollen trotzdem oben andockt. */
@media (min-width: 981px) {
.objekt-sidebar::before {
content: "";
display: block;
height: calc(clamp(1.3rem, 2.6vw, 1.7rem) * 1.2 + 1.2rem);
}
}
/* ===============================================================
* Kontakt-Lasche am rechten Rand
*
* Ersetzt die dunkle Leiste über der Navigation. Der Knopf bleibt beim
* Scrollen stehen, das Fenster fährt nach links auf.
* =============================================================== */
.kontakt-lasche {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 95;
}
.kontakt-knopf {
display: grid;
place-items: center;
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: 4px 0 0 4px;
background: var(--color-primary);
color: #fff;
cursor: pointer;
box-shadow: -2px 4px 16px rgba(20, 16, 14, .18);
transition: background var(--transition);
}
.kontakt-knopf:hover {
background: var(--color-primary-dk);
}
.kontakt-knopf:focus-visible {
outline: 3px solid var(--color-dark);
outline-offset: 2px;
}
/* Beide Symbole liegen übereinander, sichtbar ist je nach Zustand eines */
.kontakt-knopf svg {
grid-area: 1 / 1;
width: 24px;
height: 24px;
transition: opacity var(--transition), transform var(--transition);
}
/* --- Das Fenster --------------------------------------------------- */
.kontakt-panel {
position: absolute;
right: calc(100% + 10px);
top: 50%;
width: 272px;
padding: 1.3rem 1.4rem 1.4rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: 0 14px 40px rgba(20, 16, 14, .16);
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(14px);
transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.kontakt-lasche.ist-offen .kontakt-panel {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
.kontakt-panel-titel {
margin: 0 0 .9rem;
color: var(--color-muted);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.kontakt-panel-zeile {
display: flex;
align-items: center;
gap: .7rem;
padding: .55rem 0;
color: var(--color-text);
border-bottom: 1px solid var(--color-border);
transition: color var(--transition);
}
.kontakt-panel-zeile:last-of-type {
border-bottom: 0;
}
.kontakt-panel-zeile:hover,
.kontakt-panel-zeile:focus-visible {
color: var(--color-primary);
}
.kontakt-panel-zeile svg {
flex-shrink: 0;
width: 19px;
height: 19px;
color: var(--color-primary);
}
.kontakt-panel-zeile span {
display: flex;
flex-direction: column;
font-size: .92rem;
font-weight: 600;
line-height: 1.3;
word-break: break-word;
}
.kontakt-panel-zeile small {
color: var(--color-muted);
font-size: .68rem;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
}
.kontakt-panel-btn {
width: 100%;
margin-top: 1rem;
padding: .6rem 1rem;
background: var(--color-primary);
color: #fff;
font-size: .86rem;
}
.kontakt-panel-btn:hover {
background: var(--color-primary-dk);
color: #fff;
}
@media (max-width: 560px) {
.kontakt-knopf {
width: 46px;
height: 46px;
}
/* Auf schmalen Geräten passt das Fenster nicht mehr neben den Knopf */
.kontakt-panel {
right: calc(100% + 8px);
width: min(268px, calc(100vw - 5rem));
}
}
@media (prefers-reduced-motion: reduce) {
.kontakt-panel,
.kontakt-knopf svg {
transition: none;
}
}
/* --- Kontakt-Lasche: Portrait und ruhigere Zeilen ------------------- */
.kontakt-panel-foto {
display: block;
width: 84px;
height: 84px;
margin: 0 auto .9rem;
border-radius: 50%;
object-fit: cover;
object-position: center;
border: 3px solid var(--color-bg);
box-shadow: 0 0 0 1px var(--color-border);
}
.kontakt-panel-titel {
text-align: center;
}
/* Nummer, Adresse und Instagram-Name treten zurück — sie sollen lesbar
sein, aber nicht mit dem Terminbutton darunter konkurrieren. */
.kontakt-panel-zeile span {
font-size: .82rem;
font-weight: 500;
color: var(--color-mid);
}
.kontakt-panel-zeile small {
font-size: .64rem;
letter-spacing: .1em;
}
.kontakt-panel-zeile svg {
width: 17px;
height: 17px;
}
.kontakt-panel-zeile:hover span,
.kontakt-panel-zeile:focus-visible span {
color: var(--color-primary);
}
/* ===============================================================
* Die beiden festen Knöpfe am Rand einheitlich halten
*
* Beide hatten schon dieselbe Grundfarbe. Unterschiedlich wirkten sie
* aus zwei Gründen:
*
* 1. Um den Nach-oben-Knopf lag ein roter Schein. Auf hellem Grund
* hellt der die Umgebung auf und lässt den Knopf selbst heller und
* größer erscheinen als die Kontakt-Lasche.
* 2. Auf Touch-Geräten bleibt der Hover-Zustand nach dem Antippen
* hängen, bis woanders getippt wird. Der Knopf blieb also im
* dunkleren Hover-Rot stehen — auf dem Handy der auffälligere
* der beiden Effekte.
* =============================================================== */
.scroll-top {
box-shadow: 0 4px 14px rgba(20, 16, 14, .18);
}
/* Ohne echten Zeiger gibt es keinen Hover-Zustand, der hängen bleiben kann */
@media (hover: none) {
.scroll-top:hover,
.kontakt-knopf:hover {
background: var(--color-primary);
}
}
/* ===============================================================
* Kopfbild
*
* Das Bild kommt als CSS-Variable aus dem Template — ein Bild für alle
* Bildschirmgrößen. Eine kleinere Handy-Variante hätte 29 KB gespart,
* wäre dort aber unscharf geworden: durch den Zuschnitt ist auf dem
* Handy nur gut ein Drittel der Bildbreite zu sehen.
* =============================================================== */
.hero-slide {
background-image: var(--hero-bild);
}
@media (max-width: 700px) {
.hero-slide {
/* Das Motiv - Hand, Schlüssel und Holzhaus - sitzt im rechten
Drittel der Aufnahme. Bei einem hochformatigen Handybildschirm
bleibt nur ein schmaler senkrechter Streifen übrig; mittig
ausgerichtet zeigt der bloß den Anzug. Der Ausschnitt wandert
deshalb nach rechts, das Bild also nach links. */
background-position: 70% center;
}
}
/* Der Textblock im Kopfbild sitzt jetzt in einem eigenen Container und
beginnt damit am selben linken Raster wie der übrige Seiteninhalt. */
.hero-slide-content {
margin-inline: 0;
}
/* Die beiden Schaltflächen im Kopfbild bleiben beim Überfahren, wie sie
sind — keine Farbe, kein Schatten, keine Bewegung. */
.hero-cta .btn:hover,
.hero-cta .btn:focus-visible {
background: var(--color-primary);
color: #fff;
box-shadow: 0 4px 14px rgba(216, 18, 8, .25);
}
.hero-cta .btn-light:hover,
.hero-cta .btn-light:focus-visible {
background: #fff;
color: var(--color-dark);
box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.hero-cta .btn:hover svg {
transform: none;
}
/* Umbrüche nur auf schmalen Bildschirmen. Auf dem Desktop fließt der
Satz normal — das
ist dort ausgeblendet, das Leerzeichen davor
hält die Wörter auseinander. */
.br-handy {
display: none;
}
@media (max-width: 700px) {
.br-handy {
display: inline;
}
/* Ohne diese Grenze bricht der Satz zusätzlich an eigenen Stellen um */
.hero-slide-content p {
max-width: none;
}
}
/* ===============================================================
* Kontakt-Reiter: erkennbar machen, dass er sich öffnen lässt
*
* Drei Signale statt eines Symbols:
* 1. Beschriftung — Text wird zuverlässiger als Bedienelement gelesen
* als jedes Symbol.
* 2. Pfeil nach links — zeigt, in welche Richtung sich etwas öffnet.
* 3. Der Reiter fährt beim Überfahren ein Stück heraus und gibt damit
* zu erkennen, dass er beweglich ist.
* =============================================================== */
.kontakt-knopf {
display: flex;
flex-direction: column;
align-items: center;
gap: .45rem;
width: auto;
height: auto;
padding: .85rem .55rem 1rem;
border-radius: 5px 0 0 5px;
transition: background var(--transition), transform var(--transition);
}
@media (hover: hover) {
.kontakt-knopf:hover {
transform: translateX(-5px);
}
}
.kontakt-pfeil {
width: 21px;
height: 21px;
transition: transform var(--transition);
}
.kontakt-lasche.ist-offen .kontakt-pfeil {
transform: rotate(180deg);
}
/* Info- und Schließen-Symbol liegen übereinander */
.kontakt-knopf-text {
writing-mode: vertical-rl;
font-size: .7rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
line-height: 1;
}
/* Einmal pro Sitzung kurz herauslugen, damit der Reiter überhaupt
bemerkt wird. Danach nie wieder. */
.kontakt-lasche.lugt {
animation: kontakt-lugen 1.6s .9s cubic-bezier(.3, .8, .4, 1) both;
}
@keyframes kontakt-lugen {
0%, 100% { transform: translateY(-50%) translateX(0); }
22% { transform: translateY(-50%) translateX(-11px); }
46% { transform: translateY(-50%) translateX(-4px); }
66% { transform: translateY(-50%) translateX(-9px); }
}
@media (max-width: 560px) {
.kontakt-knopf {
padding: .7rem .45rem .8rem;
gap: .35rem;
}
.kontakt-knopf-text {
font-size: .64rem;
letter-spacing: .12em;
}
}
@media (prefers-reduced-motion: reduce) {
.kontakt-lasche.lugt {
animation: none;
}
}
/* ===============================================================
* Partner
* =============================================================== */
.partner-liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.2rem;
margin: 0;
padding: 0;
list-style: none;
}
.partner-kachel {
display: flex;
align-items: center;
justify-content: center;
min-height: 138px;
padding: 1.3rem 1.1rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
text-align: center;
transition: border-color var(--transition);
}
/* Die Vorlagen sind 600 x 250 px, also 2,4:1. Bei dieser Höhengrenze
nutzt das Logo die Kachelbreite aus, ohne dass links und rechts Luft
bleibt. */
.partner-kachel img {
max-width: 100%;
max-height: 92px;
width: auto;
height: auto;
object-fit: contain;
}
/* Die Logos liegen in Graustufen und bekommen beim Überfahren ihre
Farbe zurück. Vier Marken in vier kräftigen Eigenfarben nebeneinander
ziehen sonst mehr Aufmerksamkeit auf sich als die Objekte darüber;
entfärbt treten sie zurück und wirken als geschlossene Reihe.
Der rote Rahmen beim Überfahren entfällt dafür - der Farbwechsel im
Logo ist das deutlichere Signal, beides zusammen wäre zu viel.
Nur dort, wo es überhaupt ein Überfahren gibt: Auf dem Handy bliebe
sonst jedes Logo für immer grau, und gerade dort lebt der Beweis von
der Wiedererkennung der Marke. */
@media (hover: hover) {
.partner-kachel img {
filter: grayscale(1);
opacity: .72;
transition: filter var(--transition), opacity var(--transition);
}
.partner-kachel:hover img,
a.partner-kachel:focus-visible img {
filter: grayscale(0);
opacity: 1;
}
}
.partner-name {
color: var(--color-mid);
font-size: 1.02rem;
font-weight: 700;
letter-spacing: .01em;
line-height: 1.3;
}
a.partner-kachel:hover .partner-name {
color: var(--color-primary);
}
/* Der Schriftzug bleibt für Partner ohne hinterlegtes Logo */
.partner-name {
display: block;
}
/* ===============================================================
* Filterleiste der Objektübersicht, überarbeitet
*
* Reihenfolge: erst suchen und sortieren, darunter die Objektart wählen.
* Beides sitzt in einer eigenen Karte, damit die Bedienelemente als
* zusammengehörige Einheit lesbar sind und nicht im Weißraum schweben.
* =============================================================== */
.objekt-filter {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 1.1rem;
margin-bottom: 2.4rem;
padding: 1.3rem 1.4rem 1.4rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* Suche nimmt den Platz, Sortierung bleibt schmal */
.objekt-filter-tools {
display: flex;
flex-wrap: wrap;
gap: .7rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--color-border);
}
.objekt-filter-suche {
flex: 1 1 260px;
}
/* Sobald die Leiste auf Spalten umschaltet, muss diese Grundgroesse
weg. "flex: 1 1 260px" misst entlang der Hauptachse - nebeneinander
ist das die Breite, untereinander ploetzlich die Hoehe. Das Suchfeld
wurde dadurch auf dem Handy 260 Pixel hoch, das Eingabefeld schwamm
mittendrin, und darueber wie darunter klaffte Leere.
Die Regel muss hier stehen und nicht bei den uebrigen Handy-Regeln
weiter oben: Eine Medienabfrage erhoeht das Gewicht einer Regel
nicht: bei gleichem Gewicht entscheidet die Reihenfolge, und die
Zeile darueber stuende sonst spaeter. */
@media (max-width: 760px) {
.objekt-filter-suche {
flex: 0 0 auto;
}
}
.objekt-filter-suche svg {
left: 1rem;
width: 18px;
height: 18px;
}
.objekt-filter-suche input {
width: 100%;
min-width: 0;
padding: .8rem 1.1rem .8rem 2.9rem;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
border-color: transparent;
font-size: .94rem;
transition: background var(--transition), border-color var(--transition);
}
.objekt-filter-suche input::placeholder {
color: var(--color-muted);
}
.objekt-filter-suche input:focus {
outline: none;
background: var(--color-bg);
border-color: var(--color-primary);
}
/* Eigenes Pfeilsymbol statt des Systemdreiecks */
.objekt-filter-sort {
position: relative;
display: flex;
align-items: center;
flex: 0 1 auto;
}
.objekt-filter-sort select {
appearance: none;
-webkit-appearance: none;
padding: .8rem 2.6rem .8rem 1.1rem;
border-radius: var(--radius-sm);
background: var(--color-bg-alt);
border-color: transparent;
font-size: .92rem;
font-weight: 600;
color: var(--color-text);
}
.objekt-filter-sort select:focus {
outline: none;
background: var(--color-bg);
border-color: var(--color-primary);
}
.objekt-filter-sort-pfeil {
position: absolute;
right: 1rem;
width: 15px;
height: 15px;
color: var(--color-muted);
pointer-events: none;
}
/* Die Auswahl der Objektart darunter */
.objekt-filter-gruppe {
gap: .45rem;
}
.objekt-filter-btn {
padding: .5rem 1rem;
font-size: .86rem;
}
@media (max-width: 860px) {
.objekt-filter {
padding: 1.1rem;
}
.objekt-filter-tools {
flex-direction: row;
}
.objekt-filter-sort,
.objekt-filter-sort select {
width: 100%;
}
}
@media (max-width: 560px) {
.objekt-filter-tools {
flex-direction: column;
}
}
/* ===============================================================
* Ausstattungsmerkmale mit Haken
*
* Die Liste kommt aus dem Editor, dort steht eine gewöhnliche
* Aufzählung. Hier stehen nur Abstand und Raster - das Zeichen selbst
* setzt weiter unten die Regel "inhalt-liste ul li::before". Sie muss
* dort stehen, weil sie sonst von der Punkt-Regel geschlagen wird.
* =============================================================== */
.inhalt-liste ul {
margin-left: 0;
list-style: none;
}
.inhalt-liste li {
position: relative;
margin-bottom: .5rem;
padding-left: 1.75rem;
line-height: 1.5;
}
/* Instagram und Facebook teilen sich eine Zeile. Sie ist kein Link mehr,
sondern trägt zwei - deshalb hängt der Farbwechsel an den Links selbst. */
.kontakt-panel-social {
cursor: default;
}
.kontakt-panel-netzwerke {
display: flex;
align-items: center;
gap: .45rem;
}
.kontakt-panel-netzwerke a {
color: var(--color-mid);
transition: color var(--transition);
}
.kontakt-panel-netzwerke a:hover,
.kontakt-panel-netzwerke a:focus-visible {
color: var(--color-primary);
}
.kontakt-panel-trenner {
color: var(--color-border);
font-weight: 400;
}
/* Instagram und Facebook nebeneinander.
Die Regel .kontakt-panel-zeile span stapelt alles untereinander und
erfasst auch diesen Container - sie ist spezifischer als die Klasse
allein. Deshalb hier mit beiden Klassen gegenhalten. */
.kontakt-panel-zeile .kontakt-panel-netzwerke {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: .5rem;
}
/* Aufzählungen auf Inhaltsseiten: Punkte in Markenrot statt Schwarz */
.inhalt-text ul {
list-style: none;
margin-left: 0;
}
.inhalt-text ul li {
position: relative;
padding-left: 1.3rem;
}
.inhalt-text ul li::before {
content: "";
position: absolute;
left: .3rem;
top: .62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary);
}
/* Die Ausstattungsliste bekommt statt des Punktes einen Haken in
Markenrot. Sie muss hier unter der Punkt-Regel stehen: beide Selektoren
wiegen gleich schwer, entschieden wird dann nach Reihenfolge.
Wichtig ist ausserdem, jede Eigenschaft des Punktes zu ueberschreiben -
ein blosses "background: none" hat frueher zwar die Farbe geloescht,
mit ihr aber auch das Haken-Bild, und die Liste stand ohne Zeichen da. */
.inhalt-liste ul li {
padding-left: 1.75rem;
}
.inhalt-liste ul li::before {
left: 0;
top: .2em;
width: 1.05em;
height: 1.05em;
border-radius: 0;
background: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.inhalt-text hr {
max-width: 180px;
margin: 1.8rem 0;
border: 0;
border-top: 1px solid var(--color-border);
}
/* ===============================================================
* Contact Form 7
*
* Damit die Formulare aus dem Plugin genauso aussehen wie das im Theme:
* dieselben Feldhöhen, Abstände und Farben. Ohne das erkennt man auf
* einen Blick, dass da ein Plugin arbeitet.
* =============================================================== */
.wpcf7 {
max-width: 100%;
}
.wpcf7-form p {
margin: 0 0 1.1rem;
}
/* Beschriftungen */
.wpcf7-form label {
display: block;
margin-bottom: .35rem;
color: var(--color-text);
font-size: .88rem;
font-weight: 600;
}
/* Eingabefelder */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
width: 100%;
padding: .8rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg);
color: var(--color-text);
font: inherit;
font-size: .95rem;
transition: border-color var(--transition);
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.wpcf7-form textarea {
min-height: 130px;
resize: vertical;
}
.wpcf7-form select {
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 15px;
padding-right: 2.6rem;
}
/* Zwei Felder nebeneinander: um das Feld legen */
.wpcf7-form .zeile {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.wpcf7-form .zeile > * {
flex: 1 1 220px;
min-width: 0;
}
/* Abschnittsüberschrift in längeren Formularen */
.wpcf7-form .abschnitt {
display: block;
margin: 2rem 0 1rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--color-border);
color: var(--color-primary);
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.wpcf7-form .abschnitt:first-child {
margin-top: 0;
}
/* Einwilligung */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
.wpcf7-form .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: .6rem;
font-size: .84rem;
font-weight: 400;
line-height: 1.5;
color: var(--color-mid);
cursor: pointer;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
width: auto;
margin-top: .2rem;
accent-color: var(--color-primary);
}
/* Auswahl mit mehreren Punkten untereinander */
.wpcf7-form .wpcf7-radio .wpcf7-list-item,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
display: block;
margin: 0 0 .45rem;
}
.wpcf7-form .wpcf7-radio label,
.wpcf7-form .wpcf7-checkbox label {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 400;
font-size: .92rem;
}
/* Absenden */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
width: 100%;
padding: .9rem 1.6rem;
border: 0;
border-radius: 99px;
background: var(--color-primary);
color: #fff;
font: inherit;
font-size: .95rem;
font-weight: 700;
cursor: pointer;
transition: background var(--transition);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
background: var(--color-primary-dk);
}
/* Meldungen des Plugins an die Gestaltung der Seite angleichen */
.wpcf7 form .wpcf7-response-output {
margin: 1.4rem 0 0;
padding: 1rem 1.2rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: .92rem;
line-height: 1.55;
}
.wpcf7 form.sent .wpcf7-response-output {
background: #e8f5ee;
border-color: #0a7c42;
color: #05532c;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
background: #fdecec;
border-color: #c0392b;
color: #8b241a;
}
.wpcf7-not-valid-tip {
margin-top: .3rem;
color: #c0392b;
font-size: .82rem;
}
.wpcf7-form .wpcf7-not-valid {
border-color: #c0392b;
}
/* Der Ladebalken des Plugins in Markenfarbe */
.wpcf7-spinner {
background-color: var(--color-primary);
}
/* Honeypot-Feld unsichtbar halten, falls eines eingesetzt wird */
.wpcf7-form .versteckt {
position: absolute !important;
left: -9999px !important;
}
/* ===============================================================
* Contact Form 7, Feinschliff
* =============================================================== */
/* Der Kasten, in dem auch das eingebaute Formular sitzt */
.cf7-kasten {
padding: 2rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.cf7-kasten > h3 {
margin-bottom: 1.5rem;
font-size: 1.15rem;
color: var(--color-dark);
}
/* Beschriftungen wie im Theme-Formular: kleiner und in Grau */
.wpcf7-form label {
margin-bottom: .4rem;
color: var(--color-mid);
font-size: .82rem;
}
/* Textfeld war zu hoch für eine kurze Anfrage */
.wpcf7-form textarea {
min-height: 110px;
}
/* Die Zustimmungszeile stand gedrängt, das Sternchen rutschte
in eine eigene Zeile. */
.wpcf7-form .wpcf7-acceptance {
display: block;
margin-top: .4rem;
}
.wpcf7-form .wpcf7-acceptance label {
margin: 0;
align-items: flex-start;
gap: .65rem;
font-size: .83rem;
line-height: 1.55;
color: var(--color-mid);
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
flex-shrink: 0;
width: 17px;
height: 17px;
margin-top: .12rem;
}
/* Links im Formular in Markenfarbe statt Browserblau */
.wpcf7-form a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Absendeknopf mit etwas Luft nach oben */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
margin-top: 1.4rem;
}
/* Die Rückmeldung saß weit unter dem Knopf */
.wpcf7 form .wpcf7-response-output {
margin: 1.2rem 0 0;
}
/* Das Plugin setzt um jedes Feld einen span - der darf die Breite
nicht abschneiden */
.wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* ===============================================================
* Contact Form 7: zwei Eigenheiten des Plugins geradeziehen
* =============================================================== */
/* 1. Nebeneinanderstehende Felder
*
* Das Plugin wandelt jeden Zeilenumbruch der Vorlage in ein
und jede
* Leerzeile in einen Absatz. Beides landet als eigenständiges Element im
* Flex-Container und schiebt die Felder nach rechts. Umbrüche haben dort
* nichts verloren, Absätze sollen sich wie die Felder verhalten. */
.wpcf7-form .zeile > br {
display: none;
}
.wpcf7-form .zeile > p {
margin: 0;
flex: 1 1 220px;
min-width: 0;
}
/* 2. Der leere Meldungskasten
*
* Das Plugin legt den Kasten für Rückmeldungen immer an, auch wenn nichts
* darin steht. Mit Innenabstand und Rand hinterlässt er dann einen Block
* Weißraum unter dem Absendeknopf. */
.wpcf7 form .wpcf7-response-output:empty {
display: none;
}
.wpcf7-form > p:last-child,
.wpcf7-form > div:last-child {
margin-bottom: 0;
}
.cf7-kasten .wpcf7 {
margin-bottom: 0;
}
/* ===============================================================
* Widerruf
* =============================================================== */
/* Der Formularbereich am Ende der Widerrufsbelehrung */
.widerruf-formular {
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--color-border);
scroll-margin-top: 180px;
}
.widerruf-formular h2 {
margin-bottom: .7rem;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
color: var(--color-text);
}
.widerruf-formular > p {
max-width: 62ch;
margin-bottom: 1.6rem;
color: var(--color-mid);
line-height: 1.7;
}
/* ===============================================================
* Fußbereich: alle fünf Spalten nebeneinander
*
* Das Raster kannte nur vier Spalten, im Markup sind es fünf — die
* Kontaktspalte rutschte deshalb in eine zweite Zeile. Die Markenspalte
* gibt etwas Breite ab, die Kontaktspalte bekommt sie, weil dort die
* längsten Zeilen stehen.
* =============================================================== */
.footer-inner {
grid-template-columns: .8fr 3fr;
gap: 2.6rem;
}
.footer-cols {
grid-template-columns: repeat(3, 1fr) 1.4fr;
gap: 2.4rem;
}
.footer-contact-list a {
word-break: break-word;
}
@media (max-width: 1180px) {
.footer-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer-cols {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 900px) {
.footer-cols {
grid-template-columns: repeat(2, 1fr);
gap: 2.2rem 2rem;
}
}
@media (max-width: 420px) {
.footer-cols {
grid-template-columns: 1fr;
}
}
/* ===============================================================
* Knopf „Vertrag widerrufen"
*
* Zurückhaltend: nur eine feine Kontur, gedämpfte Schrift. Erst beim
* Überfahren wird die Beschriftung weiß und die Kontur deutlicher.
* =============================================================== */
.footer-widerruf-btn {
display: inline-flex;
align-items: center;
margin-top: 1rem;
padding: .52rem 1rem;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(255, 255, 255, .58);
font-size: .76rem;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.2;
white-space: nowrap;
transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.footer-widerruf-btn:hover,
.footer-widerruf-btn:focus-visible {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .32);
color: #fff;
}
/* ===============================================================
* Aktuelle Objekte als Wechsler
*
* Kein Nachbau mit Rechenwerk, sondern der Rollbereich des Browsers:
* die Spur rollt waagerecht und rastet an jeder Kachel ein. Das
* bringt Wischen auf dem Handy, Tastaturbedienung und den richtigen
* Umgang mit unterschiedlichen Breiten ohne eigenes Zutun mit.
*
* Drei Kacheln nebeneinander, auf dem Tablet zwei, auf dem Handy eine.
* Die Breite wird aus der sichtbaren Breite abzueglich der Luecken
* gerechnet - so endet die dritte Kachel genau am rechten Rand.
* =============================================================== */
.objekte-wechsler {
position: relative;
}
.objekte-spur {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * 1.8rem) / 3);
gap: 1.8rem;
overflow-x: auto;
/* Bewusst ohne "scroll-snap-type". Das Einrasten zog aus einer per
Skript gesetzten Rollposition wieder an den Anfang zurueck, sobald
die letzte Ansicht nicht voll besetzt war - bei vier Kacheln zu
dritt also immer. Der Pfeil tat dann sichtbar nichts. Die Pfeile
rollen jetzt exakt um eine Ansicht weiter, das Einrasten braucht
es dafuer nicht. */
scroll-behavior: smooth;
/* Platz fuer den Schatten der Kacheln, der sonst abgeschnitten wird */
padding-block: .4rem 1.2rem;
/* Die Rollleiste selbst bleibt unsichtbar, gerollt wird ueber Pfeile,
Punkte, Wischen und Tastatur. */
scrollbar-width: none;
-ms-overflow-style: none;
}
.objekte-spur::-webkit-scrollbar {
display: none;
}
/* Die Pfeile liegen halb ueber dem Rand der Spur, wie beim Kopfbild */
.objekte-pfeil {
position: absolute;
top: calc(50% - 1.2rem);
transform: translateY(-50%);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
box-shadow: 0 3px 12px rgba(216, 18, 8, .28);
cursor: pointer;
transition: box-shadow var(--transition);
}
.objekte-pfeil svg {
width: 20px;
height: 20px;
/* Der Haken wird beim Ueberfahren kraeftiger. Die Farbe bleibt, wie
sie ist - auf dem roten Grund gaebe es dafuer ohnehin keinen Platz,
und die Bewegung im Strich reicht als Rueckmeldung. */
transition: stroke-width var(--transition);
}
.objekte-pfeil:hover svg,
.objekte-pfeil:focus-visible svg {
stroke-width: 3.4;
}
.objekte-pfeil:hover,
.objekte-pfeil:focus-visible {
box-shadow: 0 4px 16px rgba(216, 18, 8, .42);
}
/* "display: flex" oben wuerde das hidden-Attribut sonst uebergehen -
die Pfeile blieben sichtbar, obwohl es in diese Richtung nichts mehr
zu blaettern gibt. */
.objekte-pfeil[hidden] {
display: none;
}
.objekte-pfeil-zurueck {
left: -22px;
}
.objekte-pfeil-vor {
right: -22px;
}
/* Auf schmalen Fenstern ist neben der Spur kein Platz - dort sitzen die
Pfeile innen auf der Kachel. */
@media (max-width: 1180px) {
.objekte-pfeil-zurueck {
left: 8px;
}
.objekte-pfeil-vor {
right: 8px;
}
}
.objekte-punkte {
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 1.6rem;
}
/* Passt alles auf eine Ansicht, baut das Skript keine Punkte - dann soll
auch der Abstand darunter verschwinden. */
.objekte-punkte:empty {
display: none;
}
.objekte-punkt {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--color-border);
cursor: pointer;
transition: background var(--transition), width var(--transition);
}
.objekte-punkt.ist-aktiv {
width: 26px;
border-radius: 99px;
background: var(--color-primary);
}
.objekte-alle {
margin-top: 2rem;
text-align: center;
}
@media (max-width: 1000px) {
.objekte-spur {
grid-auto-columns: calc((100% - 1.4rem) / 2);
gap: 1.4rem;
}
}
@media (max-width: 640px) {
.objekte-spur {
grid-auto-columns: 100%;
}
}
/* ===============================================================
* Objekt empfehlen: drei Wege hinter einem Knopf
*
* Das Feld klappt nach unten auf, statt ueber dem Inhalt zu
* schweben. Ein schwebendes Menue haette im klebenden Seitenteil
* abgeschnitten werden koennen; so waechst die Spalte einfach.
* =============================================================== */
.empfehlen {
position: relative;
}
/* Den Knopf gibt es zweimal: oben in der Hauptspalte und unten im
Seitenteil. Auf breiten Bildschirmen steht der im Seitenteil ohnehin
weit oben im Blickfeld, dort waere ein zweiter direkt daneben
ueberfluessig - deshalb erscheint der obere nur auf schmalen.
Dort rutscht das Seitenteil ans Ende der Seite, und beide zusammen
ergeben Sinn: einer gleich beim Einstieg, einer am Schluss, wenn man
alles gelesen hat. Die Grenze ist dieselbe, an der das Seitenteil
unter den Inhalt rutscht. */
.empfehlen-oben {
display: none;
margin-bottom: 1.6rem;
}
@media (max-width: 980px) {
.empfehlen-oben {
display: block;
}
/* Der Inhaltsbereich startet mit dem grossen Abstand aller
Abschnitte. Unter einer Ueberschrift sitzt der richtig, unter
einem Knopf wirkt er wie ein Loch - zumal das Kopfbild direkt
darueber ohnehin klar abtrennt. */
.objekt-body {
padding-top: 1.7rem;
}
}
.empfehlen .btn-empfehlen {
width: 100%;
justify-content: center;
}
.empfehlen-pfeil {
width: 15px;
height: 15px;
transition: transform var(--transition);
}
.empfehlen.ist-offen .empfehlen-pfeil {
transform: rotate(180deg);
}
.empfehlen-menue {
margin-top: .55rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
overflow: hidden;
}
.empfehlen-option {
display: flex;
align-items: center;
gap: .7rem;
width: 100%;
padding: .78rem 1rem;
border: 0;
background: none;
color: var(--color-mid);
font: inherit;
font-size: .9rem;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.empfehlen-option svg {
width: 17px;
height: 17px;
flex: none;
color: var(--color-muted);
transition: color var(--transition);
}
.empfehlen-option:hover,
.empfehlen-option:focus-visible {
background: var(--color-bg-alt);
color: var(--color-dark);
text-decoration: none;
}
.empfehlen-option:hover svg,
.empfehlen-option:focus-visible svg {
color: var(--color-primary);
}
/* WhatsApp behaelt seine eigene Farbe - das Zeichen wird daran
erkannt, entfaerbt sucht man es. */
.empfehlen-wa svg,
.empfehlen-wa:hover svg,
.empfehlen-wa:focus-visible svg {
color: #25D366;
}
.empfehlen-meldung {
margin: 0;
padding: .6rem 1rem .7rem;
border-top: 1px solid var(--color-border);
background: var(--color-bg-alt);
color: var(--color-mid);
font-size: .8rem;
}
/* ===============================================================
* Datenschutzhinweis
*
* Aufbau wie auf der Lemar-Seite: schwebende Karte unten rechts,
* Keks-Knopf unten links zum erneuten Oeffnen. Farben, Radien und
* Schrift kommen von hier, damit er nicht wie ein Fremdkoerper wirkt.
* =============================================================== */
.ds-hinweis {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 200;
width: 390px;
max-width: calc(100vw - 2rem);
opacity: 0;
transform: translateY(20px);
transition: opacity .3s ease, transform .3s ease;
}
.ds-hinweis[hidden] {
display: none !important;
}
.ds-hinweis.ist-sichtbar {
opacity: 1;
transform: translateY(0);
}
.ds-karte {
display: flex;
flex-direction: column;
gap: .85rem;
padding: 1.3rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: 0 10px 34px rgba(20, 16, 14, .16);
}
.ds-kopf {
display: flex;
align-items: center;
gap: .75rem;
}
.ds-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(216, 18, 8, .09);
color: var(--color-primary);
}
.ds-symbol svg {
width: 21px;
height: 21px;
}
.ds-titel {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.01em;
}
.ds-schliessen {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 32px;
height: 32px;
margin-left: auto;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-muted);
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.ds-schliessen:hover,
.ds-schliessen:focus-visible {
background: var(--color-bg-alt);
color: var(--color-dark);
}
.ds-schliessen svg {
width: 16px;
height: 16px;
}
.ds-text {
margin: 0;
font-size: .86rem;
line-height: 1.55;
color: var(--color-mid);
}
.ds-text a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.ds-knoepfe {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
}
.ds-btn-erst,
.ds-btn-zweit {
padding: .62rem .9rem;
border-radius: var(--radius-sm);
font: inherit;
font-size: .87rem;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.ds-btn-erst {
border: 1px solid var(--color-primary);
background: var(--color-primary);
color: #fff;
}
.ds-btn-erst:hover,
.ds-btn-erst:focus-visible {
background: var(--color-primary-dk);
border-color: var(--color-primary-dk);
}
.ds-btn-zweit {
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-mid);
}
.ds-btn-zweit:hover,
.ds-btn-zweit:focus-visible {
border-color: var(--color-primary);
color: var(--color-primary);
}
.ds-anpassen {
display: inline-flex;
align-items: center;
align-self: center;
gap: .35rem;
padding: .3rem .6rem;
border: 0;
background: transparent;
color: var(--color-muted);
font: inherit;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
transition: color var(--transition);
}
.ds-anpassen:hover,
.ds-anpassen:focus-visible {
color: var(--color-primary);
}
.ds-anpassen svg {
width: 12px;
height: 12px;
transition: transform var(--transition);
}
.ds-anpassen[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.ds-wahl {
display: flex;
flex-direction: column;
gap: .5rem;
padding-top: .85rem;
border-top: 1px solid var(--color-border);
}
.ds-wahl[hidden] {
display: none !important;
}
.ds-posten {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .65rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.ds-haken {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
margin-top: .1rem;
padding: 0;
border: 1.5px solid var(--color-border);
border-radius: 4px;
background: var(--color-bg);
color: transparent;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.ds-haken:hover:not(.ist-fest) {
border-color: var(--color-primary);
}
.ds-haken.ist-fest {
background: var(--color-bg-alt);
color: var(--color-muted);
cursor: not-allowed;
}
.ds-haken[aria-checked="true"] {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.ds-haken svg {
width: 12px;
height: 12px;
}
.ds-posten-text {
flex: 1;
min-width: 0;
}
.ds-posten-titel {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .4rem;
margin-bottom: .15rem;
font-size: .84rem;
font-weight: 600;
}
.ds-marke {
padding: .1rem .4rem;
border-radius: 3px;
background: var(--color-bg-alt);
color: var(--color-muted);
font-size: .64rem;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
}
.ds-posten-beschreibung {
margin: 0;
font-size: .76rem;
line-height: 1.45;
color: var(--color-muted);
}
.ds-wahl-knoepfe {
display: flex;
justify-content: flex-end;
gap: .4rem;
margin-top: .25rem;
}
.ds-wahl-knoepfe button {
padding: .42rem .8rem;
font-size: .8rem;
}
/* Der Keks unten links - rechts liegen Kontaktreiter und Nach-oben-Knopf */
.ds-keks {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 91;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--color-bg);
color: var(--color-primary);
box-shadow: 0 4px 18px rgba(20, 16, 14, .12);
cursor: pointer;
transition: background var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.ds-keks[hidden] {
display: none !important;
}
.ds-keks svg {
width: 22px;
height: 22px;
display: block;
}
.ds-keks:hover,
.ds-keks:focus-visible {
background: var(--color-primary);
color: #fff;
box-shadow: 0 6px 22px rgba(216, 18, 8, .3);
}
/* Solange der Hinweis offen ist, waere der Keks doppelt gemoppelt */
.ds-keks.ist-verborgen {
opacity: 0;
pointer-events: none;
}
@media (max-width: 600px) {
.ds-hinweis {
right: .75rem;
bottom: .75rem;
left: .75rem;
width: auto;
max-width: none;
}
.ds-karte {
padding: 1.1rem;
}
.ds-keks {
left: 12px;
bottom: 12px;
width: 40px;
height: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-hinweis {
transition: none;
}
}
/* Abschluss der Leistungsuebersicht */
.leistung-abschluss {
margin: clamp(2.2rem, 5vw, 3rem) 0 0;
text-align: center;
}
/* ===============================================================
* Bildergalerie auf dem Handy: Wischstreifen statt Stapel
*
* Untereinander sind zwoelf Fotos eine halbe Minute Scrollen, bevor
* die Beschreibung ueberhaupt in Sicht kommt. Nebeneinander zum
* Wischen bleibt der Abschnitt so hoch wie ein Bild.
*
* Die Grenze liegt dort, wo das Raster ohnehin auf eine Spalte faellt.
* Darueber sind zwei bis vier Vorschaubilder nebeneinander zu sehen,
* das ist bereits kompakt genug.
*
* Das Einrasten ist hier unbedenklich: Gewischt wird von Hand, es
* setzt niemand die Rollposition per Skript - anders als beim
* Objekt-Wechsler auf der Startseite, wo genau das Aerger machte.
* =============================================================== */
.objekt-galerie-zaehler {
display: none;
}
@media (max-width: 640px) {
.objekt-galerie {
display: flex;
gap: .6rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* Die Randlinie der Bilder soll nicht angeschnitten werden */
padding: 2px;
margin: -2px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.objekt-galerie::-webkit-scrollbar {
display: none;
}
.objekt-galerie-item {
flex: 0 0 100%;
scroll-snap-align: center;
}
/* Etwas hoeher als im Raster - das Bild ist hier die Hauptsache */
.objekt-galerie-item img {
aspect-ratio: 3 / 2;
}
.objekt-galerie-zaehler {
display: block;
margin: .7rem 0 0;
color: var(--color-muted);
font-size: .8rem;
font-variant-numeric: tabular-nums;
text-align: center;
}
}