@charset "UTF-8"; /* ========================================================================== Ampere GmbH — Stylesheet Gestaltungsidee: technisches Datenblatt. Die Maßlinie aus dem Grundriss (Hairline mit Endmarken, Beschriftung links, Wert rechts) ist das einzige Signature-Element und trägt auf jeder Objektkarte die wichtigste Zahl. Schriften lokal, keine externen Ressourcen. ========================================================================== */ /* --- Schriften ----------------------------------------------------------- */ @font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-VariableFont_wght.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } /* --- Token --------------------------------------------------------------- */ :root { --ink: #1d1d1b; /* Logofarbe */ --graphit: #4a4a4e; --grau: #6b6b70; --linie: #d9dade; --linie-stark: #b4b6bb; --flaeche: #f2f3f5; --papier: #fff; --akzent: #0066bf; /* Firmenblau – aus Theme und Mieterportal */ --akzent-dunkel: #004e93; /* Hover und aktive Zustände */ --akzent-text: #00579f; /* kontraststark genug für kleine Schrift (7,3:1) */ --akzent-hell: #e8f1fa; --gruen: #2f7d4f; /* Kauf */ --rot: #d0021b; /* gemerkt */ --bernstein-hell: #fdf1dc; /* Status wie „reserviert" */ --bernstein-text: #8a5a00; --schrift: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --daten: "Fira Code", ui-monospace, "SFMono-Regular", Consolas, monospace; --t-xs: 0.75rem; --t-s: 0.875rem; --t-b: 1.0625rem; --t-m: 1.1875rem; --t-l: 1.4375rem; --t-xl: clamp(1.75rem, 1.25rem + 2.2vw, 2.6rem); --t-2xl: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; /* Der Fussbereich ist in beiden Modi dunkel und braucht deshalb eigene Token — sonst wuerde er im Dunkelmodus mit --ink hell werden. */ --fuss-bg: #1d1d1b; --fuss-text: #e8e7e3; --fuss-leise: #9d9b95; --fuss-linie: #35342f; --breite: 1200px; --kopf-h: 74px; /* Hoehe der fest stehenden Kopfleiste */ --rand: clamp(1rem, 4vw, 2.5rem); --radius: 2px; /* fast eckig: technisch, nicht verspielt */ --tempo: 160ms; } /* --- Dunkelmodus --------------------------------------------------------- Umgeschaltet wird ueber data-thema am . Es werden ausschliesslich Token neu belegt; --ink bleibt die Textfarbe und --papier die Flaeche, beide tauschen die Rolle. Damit kippen Knoepfe, Badges und Formulare von selbst mit. Ausnahmen (Fuss, Bildaufsaetze, Logo) stehen weiter unten. -------------------------------------------------------------------------- */ :root[data-thema="dunkel"] { color-scheme: dark; --ink: #ecebe7; /* Text */ --graphit: #b3b3b9; --grau: #8e8e96; --linie: #33333c; --linie-stark: #4d4d58; --flaeche: #202027; --papier: #17171b; /* Flaeche */ --akzent: #4a9eea; --akzent-dunkel: #7bb9f2; --akzent-text: #6cb2f0; --akzent-hell: #16283a; --gruen: #46a86c; --rot: #ff6b7a; --bernstein-hell: #3b2c11; --bernstein-text: #f0c473; --fuss-bg: #101013; --fuss-text: #d9d8d4; --fuss-leise: #8b8a85; --fuss-linie: #2a2a2e; } /* --- Grundlagen ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Das hidden-Attribut muss auch Grid- und Flex-Elemente ausblenden */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + var(--s3)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--papier); color: var(--ink); font: 400 var(--t-b)/1.65 var(--schrift); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 var(--s4); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; } h1 { font-size: var(--t-2xl); letter-spacing: -0.025em; } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-l); } h4 { font-size: var(--t-m); font-weight: 500; } p { margin: 0 0 var(--s4); } p:last-child { margin-bottom: 0; } a { color: var(--ink); text-decoration-color: var(--linie-stark); text-underline-offset: 0.2em; } a:hover { text-decoration-color: var(--akzent); } img { max-width: 100%; height: auto; display: block; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--radius); } .nur-lesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .springen { position: absolute; left: var(--s4); top: -4rem; z-index: 100; background: var(--ink); color: var(--papier); padding: var(--s3) var(--s4); transition: top var(--tempo); } .springen:focus { top: var(--s4); } /* --- Layout -------------------------------------------------------------- */ .huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .huelle--schmal { max-width: 780px; } .abschnitt { padding-block: var(--s7); } .abschnitt--flaeche { background: var(--flaeche); } .abschnitt--dunkel { background: var(--ink); color: var(--papier); } .abschnitt--dunkel a { color: var(--papier); } @media (min-width: 900px) { .abschnitt { padding-block: var(--s8); } } /* --- Beschriftung im Datenblattstil -------------------------------------- */ .marke { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--s3); display: block; } .marke--akzent { color: var(--akzent-text); } /* --- Signature: die Maßlinie --------------------------------------------- */ .mass { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-top: 1px solid var(--akzent); padding-top: 0.6rem; margin: 0; } .mass::before, .mass::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--akzent); } .mass::before { left: 0; } .mass::after { right: 0; } .mass__label { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); } .mass__wert { font-weight: 500; font-size: var(--t-m); white-space: nowrap; } .mass--gross .mass__wert { font-size: var(--t-l); } .mass--mitte { justify-content: center; } /* --- Schaltflächen -------------------------------------------------------- */ .knopf { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.8rem 1.35rem; font: 500 var(--t-s)/1.2 var(--schrift); letter-spacing: 0.01em; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--papier); text-decoration: none; cursor: pointer; transition: background var(--tempo), color var(--tempo), border-color var(--tempo); min-height: 44px; } .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: var(--papier); } .knopf--leer { background: transparent; color: var(--ink); } .knopf--leer:hover { background: var(--ink); color: var(--papier); border-color: var(--ink); } .knopf--akzent { background: var(--akzent); border-color: var(--akzent); } .knopf--hell { background: var(--papier); color: var(--ink); border-color: var(--papier); } .knopf--klein { padding: 0.5rem 0.9rem; font-size: var(--t-xs); min-height: 38px; } .knopf[disabled] { opacity: 0.5; cursor: not-allowed; } /* --- Merkmale (Badges) ---------------------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.55rem; font: 500 var(--t-xs)/1.4 var(--daten); font-variant-ligatures: none; letter-spacing: 0.06em; text-transform: uppercase; background: var(--flaeche); color: var(--graphit); border-radius: var(--radius); } .badge--akzent { background: var(--akzent-hell); color: var(--akzent-text); } /* Vermarktungsart farblich wie bisher: Miete blau, Kauf grün, Status bernstein */ .badge--ink { background: var(--ink); color: var(--papier); } .badge--miete { background: var(--akzent); color: var(--papier); } .badge--kauf { background: var(--gruen); color: var(--papier); } .badge--status { background: var(--bernstein-hell); color: var(--bernstein-text); } /* --- Kopfbereich ---------------------------------------------------------- */ /* Die Leiste bleibt beim Scrollen stehen. Ihre Hoehe steht in --kopf-h und wird von den uebrigen klebenden Elementen als Abstand mitgerechnet. */ .kopf { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--linie); background: var(--papier); } .kopf__zeile { display: flex; align-items: center; gap: var(--s4); height: calc(var(--kopf-h) - 1px); } .kopf__logo img { width: 116px; height: auto; } .kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s4); } .kopf__tel { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-s); font-weight: 500; text-decoration: none; white-space: nowrap; } .kopf__tel:hover { color: var(--akzent-text); } .nav { display: none; } .nav ul { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; } .nav a { text-decoration: none; font-size: var(--t-s); font-weight: 500; padding-block: var(--s2); border-bottom: 2px solid transparent; } .nav a:hover, .nav a[aria-current] { border-bottom-color: var(--akzent); } @media (min-width: 940px) { :root { --kopf-h: 92px; } .nav { display: block; } .kopf__logo img { width: 132px; } .menue-huelle { display: none; } } /* Der Umschalter sitzt in der Kopfzeile, das Menue klappt darunter ueber den Inhalt — so bleibt die stehende Leiste einzeilig und niedrig. */ .menue-huelle { position: static; } .menue-schalter { background: none; border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.5rem 0.8rem; cursor: pointer; font: 500 var(--t-s) var(--schrift); min-height: 42px; display: flex; align-items: center; gap: var(--s2); list-style: none; } .menue-schalter::-webkit-details-marker { display: none; } .menue-schalter::after { content: ""; width: 11px; height: 11px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); } .menue-huelle[open] .menue-schalter::after { transform: rotate(225deg) translate(-3px, -3px); } .menue { position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-block: 1px solid var(--linie); padding-block: var(--s2) var(--s4); box-shadow: 0 12px 24px rgba(29,29,27,0.10); max-height: calc(100dvh - var(--kopf-h)); overflow-y: auto; } .menue ul { list-style: none; margin: 0; padding: 0; } .menue a { display: block; padding: var(--s3) 0; text-decoration: none; border-bottom: 1px solid var(--linie); } .menue li:last-child a { border-bottom: 0; } .menue a[aria-current] { color: var(--akzent-text); font-weight: 500; } /* --- Startseite: Hero ----------------------------------------------------- */ .hero__raster { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s4); } .hero__titel { margin-bottom: var(--s4); } .hero__text { font-size: var(--t-m); color: var(--graphit); max-width: 46ch; } .hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); } /* Held: das aktuelle Objekt — bewusst anders gebaut als die Karten im Raster: flacheres Bild, ein einziger Datenstreifen statt gestapelter Blöcke. */ .held { display: flex; flex-direction: column; } .held__ueber { margin: 0 0 var(--s3); font-size: var(--t-m); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; text-align: center; color: var(--akzent-text); } .held__karte { position: relative; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; transition: border-color var(--tempo); } .held__karte:hover { border-color: var(--linie-stark); } .held__bild { position: relative; aspect-ratio: 16 / 10; background: var(--flaeche); overflow: hidden; } .held__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .held__karte:hover .held__bild img { transform: scale(1.03); } .held__inhalt { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); } .held__titel { font-size: var(--t-b); font-weight: 500; line-height: 1.4; margin: 0; } .held__titel a { text-decoration: none; } .held__titel a::after { content: ""; position: absolute; inset: 0; } .held__zeile { flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); } .held__meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .held__preis { margin: 0; font-size: var(--t-m); font-weight: 600; } .held__preis--anfrage { font-size: var(--t-s); font-weight: 500; color: var(--graphit); } @media (min-width: 900px) { /* stretch statt center: Headline und Karte zusammen stehen bündig zur Textspalte */ /* Die Karte bekommt mehr Breite als der Text — sie traegt den Kopfbereich. */ .hero__raster { grid-template-columns: 0.88fr 1.12fr; align-items: stretch; gap: var(--s7); } .hero__raster > div:first-child { display: flex; flex-direction: column; justify-content: center; } .held__karte { flex: 1; } .held__bild { aspect-ratio: auto; flex: 1; min-height: 240px; } } /* Kennzahlenband */ .kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); margin-block: var(--s6); } .kennzahl { background: var(--papier); padding: var(--s4); } .kennzahl__wert { font-size: var(--t-l); font-weight: 600; display: block; line-height: 1.1; } .kennzahl__label { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); } @media (min-width: 760px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } } /* --- Startseite: Leistungsbloecke ----------------------------------------- */ /* Drei gleich breite, gleich hohe Karten. Der Fusslink haengt unten fest, damit die Trennlinien auf einer Hoehe liegen — auch bei ungleichem Text. */ .leistungen { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-top: var(--s5); } @media (min-width: 860px) { .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Die Uebersichtsseite zeigt vier Leistungen: zwei mal zwei, ab 1100 px vier nebeneinander. */ @media (min-width: 620px) { .leistungen--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .leistungen--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .leistungen--vier { margin-bottom: var(--s7); } .leistung { position: relative; display: flex; flex-direction: column; gap: var(--s3); background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5); transition: border-color var(--tempo); } .leistung:hover { border-color: var(--linie-stark); } .leistung__nr { font: 500 var(--t-xs)/1 var(--daten); font-variant-ligatures: none; letter-spacing: 0.14em; color: var(--akzent-text); } .leistung__titel { font-size: var(--t-m); margin: 0; padding-bottom: var(--s3); border-bottom: 2px solid var(--akzent); } .leistung__text { margin: 0; font-size: var(--t-s); color: var(--graphit); } .leistung .merkmalliste { margin-top: var(--s1); } .leistung__link { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--linie); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: var(--t-s); font-weight: 500; text-decoration: none; } .leistung__link::before { content: ""; position: absolute; inset: 0; } .leistung__link::after { content: "\203A"; font-family: var(--daten); font-size: var(--t-m); line-height: 1; color: var(--akzent); transition: transform var(--tempo); } .leistung:hover .leistung__link { color: var(--akzent-text); } .leistung:hover .leistung__link::after { transform: translateX(3px); } /* --- Startseite: Vermarktungspartner -------------------------------------- */ .vorspann { margin-top: var(--s4); font-size: var(--t-m); color: var(--graphit); } .partner { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { .partner { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .partner__feld { display: grid; place-items: center; min-height: 100px; padding: var(--s4) var(--s3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); transition: border-color var(--tempo); } .partner__feld:hover { border-color: var(--linie-stark); } .wege { display: grid; gap: var(--s5); grid-template-columns: 1fr; margin-top: var(--s4); } @media (min-width: 860px) { .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .weg { border-top: 2px solid var(--ink); padding-top: var(--s4); } .weg--kontakt { border-top-color: var(--akzent); } .weg__titel { font-size: var(--t-m); margin: 0 0 var(--s3); } .weg p { margin: 0; font-size: var(--t-s); color: var(--graphit); } .weg p + p { margin-top: var(--s4); } .wege__marke { display: block; margin-top: var(--s7); } /* --- Anhang unter dem Exposé --------------------------------------------- */ /* Zwei aufeinanderfolgende .abschnitt ergaben 8 rem Abstand — hier reicht eine Trennlinie mit deutlich weniger Luft. */ .anhang { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--linie); } .anhang__titel { font-size: var(--t-l); margin-bottom: var(--s4); } .expose__zurueck { margin-block: var(--s6) var(--s7); } /* --- Zuletzt angesehen ---------------------------------------------------- */ /* Bewusst als schmale Zeilenliste auf eigener Flaeche: der Verlauf soll nicht wie ein weiteres Angebot aussehen. */ .verlauf { background: var(--flaeche); border-top: 1px solid var(--linie); padding-block: var(--s6); } .verlauf__titel { font-size: var(--t-m); margin: var(--s2) 0 var(--s4); } .verlauf__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); } .verlauf__eintrag > a { display: flex; align-items: center; gap: var(--s4); background: var(--papier); padding: var(--s3) var(--s4); text-decoration: none; color: inherit; transition: background var(--tempo); } .verlauf__eintrag > a:hover { background: var(--akzent-hell); } .verlauf__bild { flex: none; width: 72px; height: 48px; overflow: hidden; border-radius: var(--radius); background: var(--flaeche); } .verlauf__bild img { width: 100%; height: 100%; object-fit: cover; } .verlauf__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .verlauf__meta { font: 400 var(--t-xs) var(--daten); font-variant-ligatures: none; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau); } .verlauf__name { font-size: var(--t-s); font-weight: 500; line-height: 1.4; } .verlauf__preis { margin-left: auto; flex: none; font-size: var(--t-s); font-weight: 600; color: var(--akzent-text); white-space: nowrap; } @media (max-width: 560px) { .verlauf__eintrag > a { gap: var(--s3); flex-wrap: wrap; } .verlauf__preis { margin-left: calc(72px + var(--s3)); } } /* --- Kartenansicht in der Objektsuche ------------------------------------- */ .suchkarte { position: relative; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); height: clamp(360px, 62vh, 680px); } .suchkarte__schicht { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s5); text-align: center; } .suchkarte__text { margin: 0; font-size: var(--t-s); color: var(--graphit); line-height: 1.5; } /* --- Suchauftrag ---------------------------------------------------------- */ .suchauftrag { margin-top: var(--s7); border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: var(--radius); background: var(--akzent-hell); padding: var(--s5); } .suchauftrag__kopf { display: flex; align-items: center; gap: var(--s3); } .suchauftrag__kopf h2 { font-size: var(--t-m); margin: 0; } .suchauftrag__kopf svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--akzent-text); stroke-width: 1.7; } .suchauftrag__text { margin: var(--s3) 0 var(--s4); font-size: var(--t-s); color: var(--graphit); } .suchauftrag__zeile { display: grid; gap: var(--s3); align-items: end; } @media (min-width: 640px) { .suchauftrag__zeile { grid-template-columns: minmax(0, 1fr) auto; } } .suchauftrag__dsgvo { margin: var(--s4) 0 0; font-size: var(--t-xs); color: var(--graphit); } .suchauftrag__dsgvo label { display: flex; gap: var(--s3); align-items: flex-start; font: inherit; text-transform: none; letter-spacing: normal; color: inherit; margin: 0; } .suchauftrag__dsgvo input { width: 18px; height: 18px; flex: none; margin-top: 2px; } .suchauftrag__abmeldung { display: block; margin-top: 2px; color: var(--grau); } .suchauftrag .hinweis { margin-bottom: var(--s4); } /* Mit JavaScript sucht die Seite nach jeder Auswahl selbst — dann stoert der Knopf nur. */ .filter--auto [data-filter-senden] { display: none; } /* --- Objektkarten (gestalterisches Herzstück) ----------------------------- */ .karten { display: grid; gap: var(--s5); grid-template-columns: 1fr; } @media (min-width: 620px) { .karten { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .karten { grid-template-columns: repeat(3, 1fr); } } .karten--zwei { grid-template-columns: 1fr; } @media (min-width: 760px) { .karten--zwei { grid-template-columns: repeat(2, 1fr); } } .karte { position: relative; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; transition: border-color var(--tempo), transform var(--tempo); } .karte:hover { border-color: var(--linie-stark); } .karte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--flaeche); overflow: hidden; } .karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .karte:hover .karte__bild img { transform: scale(1.03); } .karte__leer { display: flex; align-items: center; justify-content: center; height: 100%; font-family: var(--daten); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--linie-stark); } .karte__marker { position: absolute; top: var(--s3); left: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; } .karte__inhalt { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); flex: 1; } .karte__titel { font-size: var(--t-m); font-weight: 500; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .karte__titel a { text-decoration: none; } .karte__titel a::after { content: ""; position: absolute; inset: 0; } .karte__ort { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; font-size: var(--t-s); color: var(--graphit); } .karte__ort svg { flex: none; width: 15px; height: 15px; margin-top: 0.15em; fill: none; stroke: var(--grau); stroke-width: 1.6; } .karte__daten { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; margin: 0; padding: 0; } .karte__daten li { display: flex; align-items: baseline; gap: 0.3rem; } .karte__wert { font-size: var(--t-b); font-weight: 600; } .karte__einheit { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); color: var(--grau); } .karte__fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); } .karte__preiszeile { margin-top: auto; padding-top: var(--s4); } /* --- Listenansicht -------------------------------------------------------- */ .karten--liste { grid-template-columns: 1fr; gap: var(--s4); } @media (min-width: 760px) { /* feste Zeilenhoehe wie auf der alten Seite: 225px */ .karte--liste { flex-direction: row; height: 225px; } .karte--liste .karte__bild { flex: 0 0 300px; aspect-ratio: auto; } .karte--liste .karte__inhalt { padding: var(--s4); gap: var(--s2); } .karte--liste .karte__titel { min-height: 0; font-size: 1.125rem; line-height: 1.3; } /* Inhalt laeuft von oben durch, der Preis wird nicht nach unten gedrueckt */ .karte--liste .karte__preiszeile { margin-top: var(--s1); padding-top: var(--s3); } .karte--liste .mass--mitte { justify-content: flex-start; } } @media (min-width: 1100px) { .karte--liste .karte__bild { flex: 0 0 350px; } } .karte__preis { font-size: var(--t-m); font-weight: 600; color: var(--akzent-text); white-space: nowrap; } .karte__preis--anfrage { font-size: var(--t-b); font-weight: 500; } .karte__zusatz { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); color: var(--grau); text-align: right; } .karte__hinweis { margin: 0; padding-top: var(--s3); border-top: 1px solid var(--linie); font-size: var(--t-xs); color: var(--grau); } /* --- Filter --------------------------------------------------------------- */ .filter { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); } .filter__raster { display: grid; gap: var(--s3); grid-template-columns: 1fr; } @media (min-width: 700px) { .filter__raster { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .filter__raster { grid-template-columns: repeat(5, 1fr); } } .filter__aktionen { display: flex; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; align-items: center; } /* Umschalter Kachel/Liste — sitzt rechtsbuendig in der Aktionszeile */ .ansicht { margin-left: auto; display: flex; gap: var(--s2); } .ansicht__knopf { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); color: var(--ink); transition: background var(--tempo), border-color var(--tempo), color var(--tempo); } .ansicht__knopf:hover { border-color: var(--linie-stark); } .ansicht__knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ansicht__knopf[aria-current] { background: var(--akzent); border-color: var(--akzent); color: var(--papier); } label { display: block; font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphit); margin-bottom: var(--s1); } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], select, textarea { width: 100%; padding: 0.65rem 0.75rem; min-height: 44px; font: 400 var(--t-s) var(--schrift); color: var(--ink); background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--graphit) 50%), linear-gradient(135deg, var(--graphit) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; } textarea { min-height: 8rem; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--akzent); } /* --- Ergebnisleiste ------------------------------------------------------- */ .ergebnis { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; margin-block: var(--s5) var(--s4); } .ergebnis__anzahl { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-s); color: var(--graphit); } /* --- Exposé --------------------------------------------------------------- */ .expose__kopf { padding-block: var(--s5) var(--s4); } .brotkrumen { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--grau); margin-bottom: var(--s4); } .brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; } .brotkrumen li::after { content: "›"; margin-left: var(--s2); color: var(--linie-stark); } .brotkrumen li:last-child::after { content: ""; } .brotkrumen a { text-decoration: none; color: var(--grau); } .brotkrumen a:hover { color: var(--akzent-text); } /* Die Einleitung laeuft auf allen Seiten ueber die volle Spaltenbreite. */ .expose__zusammenfassung { font-size: var(--t-m); color: var(--graphit); border-left: 2px solid var(--akzent); padding-left: var(--s4); margin-block: var(--s4) var(--s5); } /* Fakten-Zusammenfassung auf Objekt- und Projektseiten: bleibt für Antwortmaschinen der erste zitierfähige Satz, tritt optisch aber zurück. */ .expose__zusammenfassung--leise { font-size: var(--t-s); line-height: 1.7; color: var(--grau); border-left: 0; padding-left: 0; margin-block: var(--s3) var(--s4); } .expose__raster { display: grid; gap: var(--s6); align-items: start; } @media (min-width: 1000px) { .expose__raster { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s7); } } .galerie { display: grid; gap: var(--s2); grid-template-columns: repeat(4, 1fr); } .galerie__haupt { grid-column: 1 / -1; } .galerie__haupt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); } .galerie__klein img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); } .galerie a { display: block; position: relative; } .galerie a:hover img { opacity: 0.92; } .galerie__mehr { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(29,29,27,0.62); color: #fff; font: 500 var(--t-s) var(--daten); border-radius: var(--radius); } .eckdaten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); margin-block: var(--s5); } .eckdaten > div { background: var(--papier); padding: var(--s4); } .eckdaten dt { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); margin-bottom: var(--s1); } .eckdaten dd { margin: 0; font-size: var(--t-m); font-weight: 500; } @media (min-width: 700px) { .eckdaten { grid-template-columns: repeat(4, 1fr); } } .block { margin-block: var(--s6); } .block__text { max-width: 72ch; } .block__text ul { padding-left: 1.2em; } table.daten { width: 100%; border-collapse: collapse; font-size: var(--t-s); } table.daten th, table.daten td { text-align: left; padding: 0.7rem var(--s3); border-bottom: 1px solid var(--linie); vertical-align: top; } table.daten th { font-weight: 500; color: var(--graphit); width: 45%; } table.daten td { font-variant-numeric: tabular-nums; } table.daten tr:last-child th, table.daten tr:last-child td { border-bottom: 0; } .energie { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); background: var(--flaeche); } .energie__hinweis { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--akzent-hell); border-left: 3px solid var(--akzent); font-size: var(--t-s); color: var(--akzent-text); border-radius: var(--radius); } /* Kontaktschiene */ .schiene { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5); background: var(--papier); } @media (min-width: 1000px) { .schiene { position: sticky; top: calc(var(--kopf-h) + var(--s4)); } } .schiene__person { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); } .schiene__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } /* Mobile Aktionsleiste */ .aktionsleiste { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); } .aktionsleiste a { display: flex; align-items: center; justify-content: center; gap: var(--s2); background: var(--papier); padding: 0.9rem; text-decoration: none; font: 500 var(--t-s) var(--schrift); min-height: 52px; } .aktionsleiste a.primaer { background: var(--ink); color: var(--papier); } @media (min-width: 1000px) { .aktionsleiste { display: none; } } body.hat-leiste { padding-bottom: 4rem; } @media (min-width: 1000px) { body.hat-leiste { padding-bottom: 0; } } /* Karte (Landkarte) */ .karte-platzhalter { position: relative; aspect-ratio: 16 / 9; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: var(--s5); } #landkarte { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--linie); } /* --- Karte im Kopfbereich der Startseite ---------------------------------- */ .hero__karte { position: relative; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); aspect-ratio: 16 / 10; } @media (min-width: 900px) { .hero__karte { aspect-ratio: auto; flex: 1; min-height: 320px; } } .hero__karte-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__karte-schicht { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3); padding: var(--s5); background: linear-gradient(to top, rgba(20,20,18,0.86) 0%, rgba(20,20,18,0.55) 45%, rgba(20,20,18,0.1) 100%); } .hero__karte-text { margin: 0; color: #fff; font-size: var(--t-s); line-height: 1.5; text-wrap: pretty; } .hero__karte-schicht .knopf { align-self: flex-start; background: var(--papier); color: var(--ink); border-color: var(--papier); } .hero__karte-schicht .knopf:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; } .hero__karte--aktiv { background: var(--papier); } .hero__karte-fuss { margin: var(--s3) 0 0; font-size: var(--t-s); color: var(--graphit); } /* Sprechblase am Marker: Bild oben, darunter Titel, Adresse und Preis. Farben aus den Token — hell im hellen Modus, dunkel im dunklen. */ /* Eigener Vergroesserungsknopf auf der Karte */ .karte-gross { width: 40px; height: 40px; margin: 10px; display: grid; place-items: center; background: #fff; border: 0; border-radius: 2px; cursor: pointer; color: #5f6368; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .karte-gross:hover { color: #1d1d1b; } .karte-gross svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } /* Karte im Fenster statt im Monitor-Vollbild */ .kartenfenster { width: 96vw; height: 92vh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--radius); background: var(--papier); overflow: hidden; box-shadow: 0 30px 70px rgba(20,20,18,0.55); } .kartenfenster::backdrop { background: rgba(12,12,11,0.86); } .kartenfenster__flaeche { width: 100%; height: 100%; } .kartenfenster__flaeche > * { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border: 0 !important; border-radius: 0 !important; min-height: 0 !important; } .kartenfenster__zu { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--papier); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(20,20,18,0.3); } .kartenblasen { display: flex; gap: 1px; background: var(--linie); align-items: stretch; } .kartenblasen--mehrere .kartenblase { width: 176px; } .kartenblasen--mehrere .kartenblase img { height: 104px; } .kartenblasen--mehrere .kartenblase__text { padding: var(--s3) var(--s3) var(--s4); } .kartenblasen--mehrere .kartenblase__ort { font-size: var(--t-xs); } .kartenblasen--mehrere .kartenblase__preis { font-size: var(--t-b); } .kartenblasen--mehrere .kartenblase__titel { font-size: var(--t-s); } .kartenblasen__rest { display: grid; place-items: center; padding: 0 var(--s4); background: var(--papier); font-size: var(--t-m); font-weight: 600; color: var(--grau); } .kartenblase { display: block; width: 264px; background: var(--papier); text-decoration: none; color: var(--ink); } .kartenblase img { width: 100%; height: 150px; object-fit: cover; display: block; } .kartenblase__text { display: block; padding: var(--s4) var(--s4) var(--s5); text-align: center; } .kartenblase__titel { display: block; font-size: var(--t-b); font-weight: 600; line-height: 1.35; } .kartenblase__ort { display: block; font-size: var(--t-s); color: var(--graphit); line-height: 1.45; margin-top: var(--s2); } .kartenblase__preis { display: block; font-size: var(--t-m); font-weight: 600; color: var(--akzent-text); margin-top: var(--s3); } .kartenblase__hinweis { display: block; font-size: var(--t-xs); color: var(--grau); margin-top: var(--s2); } /* Googles Standardhuelle: saemtliche Polster, der Kopfstreifen und der Schliessen-Knopf muessen weg, sonst steht ueber dem Bild ein Rand. */ .gm-style .gm-style-iw-c { padding: 0 !important; max-width: none !important; background: var(--papier); border-radius: 4px; box-shadow: 0 10px 30px rgba(20,20,18,0.35); overflow: hidden; } .gm-style .gm-style-iw-d { overflow: hidden !important; max-height: none !important; padding: 0 !important; background: var(--papier); } .gm-style .gm-style-iw-ch { display: none !important; padding: 0 !important; } .gm-style .gm-style-iw-c button.gm-ui-hover-effect { display: none !important; } .gm-style .gm-style-iw-tc::after { background: var(--papier); } /* --- Merkliste ------------------------------------------------------------ */ .merken { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; background: rgba(255,255,255,0.92); border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; padding: 0; } .merken:hover { border-color: var(--akzent); } .merken[aria-pressed="true"] { border-color: var(--rot); } .merken[aria-pressed="true"] svg { fill: var(--rot); stroke: var(--rot); } .merken svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.7; } /* sichtbar so hoch wie das Badge, antippbar bleiben 44px */ .merken::before { content: ""; position: absolute; inset: -9px; } /* Anzahl Grundrisse und Bilder, unten rechts im Kartenbild */ .medienzahl { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 2; display: flex; gap: var(--s2); pointer-events: none; /* die Karte bleibt ein einziges Klickziel */ } .medienzahl__chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.45rem; background: rgba(29,29,27,0.8); color: #fff; /* liegt auf einem dunklen Schleier, nicht auf --papier */ border-radius: var(--radius); font: 500 var(--t-xs)/1 var(--daten); font-variant-ligatures: none; } .medienzahl__chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; } /* --- Blog ----------------------------------------------------------------- */ .beitrag__meta { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); } /* --- Textseiten: Inhalt links, mitlaufende Spalte rechts ------------------ */ .seite__raster { display: grid; gap: var(--s6); padding-bottom: var(--s7); } .seite__spalte { display: flex; flex-direction: column; gap: var(--s4); } @media (min-width: 900px) { .seite__raster { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--s8); align-items: start; } .seite__raster--voll { grid-template-columns: minmax(0, 1fr); } .seite__raster .beitrag__inhalt, .seite__raster .block__text { max-width: 78ch; } .seite__spalte { position: sticky; top: calc(var(--kopf-h) + var(--s4)); } } .spalte__block { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); background: var(--papier); } .spalte__block--kontakt { background: var(--flaeche); } .spalte__titel { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); margin: 0 0 var(--s3); } .spalte__block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .spalte__block li a { display: block; text-decoration: none; font-size: var(--t-s); line-height: 1.4; border-left: 2px solid var(--linie); padding: 0.15rem 0 0.15rem var(--s3); } .spalte__block li a:hover { border-left-color: var(--akzent); color: var(--akzent-text); } .spalte__block p { font-size: var(--t-s); color: var(--graphit); margin: 0 0 var(--s3); } .spalte__block p:last-child { margin-bottom: 0; } .spalte__tel { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-m); font-weight: 500; text-decoration: none; color: var(--ink); } .spalte__tel:hover { color: var(--akzent-text); } /* Eine Sprungliste hinter dem gelesenen Text hilft niemandem */ @media (max-width: 899px) { .spalte__block--marken { display: none; } } .beitrag__inhalt { max-width: 72ch; font-size: var(--t-b); } .beitrag__inhalt h2 { margin-top: var(--s6); font-size: var(--t-l); } .beitrag__inhalt h3 { margin-top: var(--s5); font-size: var(--t-m); } /* --- FAQ ------------------------------------------------------------------ */ .faq details { border-bottom: 1px solid var(--linie); padding-block: var(--s3); } .faq summary { cursor: pointer; font-weight: 500; padding-block: var(--s2); list-style: none; display: flex; justify-content: space-between; gap: var(--s3); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--akzent); font-family: var(--daten); } .faq details[open] summary::after { content: "–"; } /* --- Fußbereich ----------------------------------------------------------- */ .fuss { background: var(--fuss-bg); color: var(--fuss-text); padding-block: var(--s7) var(--s5); margin-top: var(--s8); } .fuss a { color: var(--fuss-text); text-decoration-color: rgba(232,231,227,0.4); } .fuss a:hover { color: #fff; text-decoration-color: var(--akzent); } .fuss__raster { display: grid; gap: var(--s6); grid-template-columns: 1fr; } @media (min-width: 760px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } } .fuss h2 { font-size: var(--t-s); font-family: var(--daten); font-variant-ligatures: none; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fuss-leise); margin-bottom: var(--s4); font-weight: 500; } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .fuss__unten { border-top: 1px solid var(--fuss-linie); margin-top: var(--s6); padding-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; font-size: var(--t-s); color: var(--fuss-leise); } /* Die Logodatei hat 59 von 440 px transparenten Rand links; bei 130 px Anzeige sind das 17 px. Der negative Rand rueckt die Wortmarke auf die Textkante darunter. */ .fuss__logo { width: 130px; margin: 0 0 var(--s4) -17px; filter: invert(1) brightness(1.6); } /* --- Hinweise ------------------------------------------------------------- */ .hinweis { padding: var(--s4); border-left: 3px solid var(--akzent); background: var(--akzent-hell); border-radius: var(--radius); font-size: var(--t-s); } .hinweis--erfolg { border-left-color: #2f6b3f; background: #eef5ef; color: #24512f; } .hinweis--fehler { border-left-color: #a3352b; background: #f9edec; color: #8a2c23; } /* --- Consent -------------------------------------------------------------- */ /* --- Einwilligung: mittiges Fenster --------------------------------------- */ .consent { width: min(560px, 92vw); max-width: none; max-height: 88vh; padding: 0; border: 0; border-radius: var(--radius); background: var(--papier); color: var(--ink); box-shadow: 0 24px 60px rgba(20,20,18,0.45); overflow: auto; } .consent::backdrop { background: rgba(12,12,11,0.72); } .consent__kasten { padding: var(--s6) var(--s5) var(--s5); } .consent h2 { font-size: var(--t-l); margin: 0 0 var(--s3); } .consent__vorspann { margin: 0; font-size: var(--t-s); color: var(--graphit); line-height: 1.6; } .consent__wahl { display: grid; gap: var(--s3); margin: var(--s5) 0; } .consent__wahl label { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); font: 400 var(--t-s)/1.55 var(--schrift); text-transform: none; letter-spacing: normal; color: var(--graphit); margin: 0; transition: border-color var(--tempo), background var(--tempo); } .consent__wahl label:hover { border-color: var(--linie-stark); } .consent__wahl label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); } .consent__wahl input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--akzent); } .consent__wahl strong { display: block; color: var(--ink); margin-bottom: 2px; } /* Zustimmen und Ablehnen sind gleich gross und gleich erreichbar */ .consent__aktionen { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; } .consent__aktionen .knopf { justify-content: center; } .consent__fuss { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: center; margin: var(--s4) 0 0; font-size: var(--t-xs); color: var(--grau); } .consent__link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--grau); text-decoration: underline; text-underline-offset: 0.2em; } .consent__link:hover { color: var(--akzent-text); } @media (max-width: 480px) { .consent__aktionen { grid-template-columns: 1fr; } } /* Dauerhafter Zugang zur Entscheidung, unten links */ .keks { position: fixed; left: var(--s4); bottom: var(--s4); z-index: 55; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 50%; background: var(--papier); color: var(--graphit); cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(20,20,18,0.14); transition: color var(--tempo), border-color var(--tempo); } .keks:hover { color: var(--akzent-text); border-color: var(--akzent); } .keks svg { width: 21px; height: 21px; fill: currentColor; } /* Auf dem Exposé sitzt unten die Aktionsleiste — der Keks rueckt darueber. */ body.hat-leiste .keks { bottom: calc(4rem + var(--s3)); } @media (min-width: 1000px) { body.hat-leiste .keks { bottom: var(--s4); } } @media print { .keks { display: none !important; } } /* --- Vergleichstabelle ---------------------------------------------------- */ .vergleich-huelle { overflow-x: auto; } .vergleich { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--t-s); } .vergleich th, .vergleich td { padding: var(--s3); border: 1px solid var(--linie); text-align: left; vertical-align: top; } .vergleich thead th { background: var(--flaeche); font-weight: 500; } .vergleich tbody th { font-family: var(--daten); font-variant-ligatures: none; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--grau); font-weight: 400; width: 180px; } /* --- Umschalter Hell/Dunkel ----------------------------------------------- */ .thema { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); color: var(--graphit); cursor: pointer; padding: 0; transition: border-color var(--tempo), color var(--tempo); } .thema:hover { border-color: var(--akzent); color: var(--akzent-text); } .thema svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .thema__sonne { display: none; } :root[data-thema="dunkel"] .thema__sonne { display: block; } :root[data-thema="dunkel"] .thema__mond { display: none; } /* Unter 560 px ist die Kopfzeile voll — dort steht der Umschalter im Menue. */ @media (max-width: 560px) { .kopf__rechts .thema { display: none; } } @media (min-width: 561px) { .menue__thema { display: none; } } .menue__thema button { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) 0; background: none; border: 0; font: 400 var(--t-b) var(--schrift); color: var(--ink); cursor: pointer; text-align: left; } .menue__thema svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; } /* --- Dunkelmodus: die Stellen, die nicht allein ueber Token kippen --------- */ /* Die Wortmarke ist dunkle Tinte auf Transparenz und muss aufgehellt werden. */ :root[data-thema="dunkel"] .kopf__logo img, :root[data-thema="dunkel"] .box__person img { filter: invert(1) brightness(1.7); } /* Der Merkknopf liegt auf dem Foto und traegt seine Flaeche selbst. */ :root[data-thema="dunkel"] .merken { background: rgba(23,23,27,0.88); } /* Fremdlogos werden nicht umgefaerbt. Drei der vier bringen einen weissen Hintergrund mit — deshalb bleibt die Kachel im Dunkelmodus hell. */ :root[data-thema="dunkel"] .partner__feld { background: #fff; border-color: #2f3038; } :root[data-thema="dunkel"] .partner__feld:hover { border-color: var(--akzent); } :root[data-thema="dunkel"] .hinweis--erfolg { border-left-color: #3f9159; background: #16281d; color: #9cd8b1; } :root[data-thema="dunkel"] .hinweis--fehler { border-left-color: #cf5548; background: #2c1715; color: #f1a79d; } :root[data-thema="dunkel"] .feld__fehler { color: #f1a79d; } :root[data-thema="dunkel"] .menue { box-shadow: 0 12px 24px rgba(0,0,0,0.5); } :root[data-thema="dunkel"] .consent { box-shadow: 0 -8px 24px rgba(0,0,0,0.5); } :root[data-thema="dunkel"] dialog.modal { box-shadow: 0 24px 60px rgba(0,0,0,0.6); } /* --- Druck ---------------------------------------------------------------- */ @media print { /* Papier ist hell — der Dunkelmodus wird fuer den Druck zurueckgenommen. */ :root, :root[data-thema="dunkel"] { --ink: #1d1d1b; --graphit: #4a4a4e; --grau: #6b6b70; --linie: #d9dade; --linie-stark: #b4b6bb; --flaeche: #f2f3f5; --papier: #fff; --akzent: #0066bf; --akzent-text: #00579f; --akzent-hell: #e8f1fa; } :root[data-thema="dunkel"] .kopf__logo img, :root[data-thema="dunkel"] .box__person img { filter: none; } .thema { display: none !important; } .kopf { position: static; } .kopf__rechts, .nav, .menue-schalter, .aktionsleiste, .consent, .fuss, .merken, .knopf { display: none !important; } body { font-size: 11pt; color: #000; } .expose__raster { display: block; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .karte, .schiene, .eckdaten { break-inside: avoid; } } /* --- Galerie-Vollbild ------------------------------------------------------ */ .galerie-schicht { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,18,0.96); display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: var(--s4); } .galerie-schicht img { grid-column: 2; max-width: 100%; max-height: 86vh; margin-inline: auto; object-fit: contain; } .galerie-schicht button { background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; width: 56px; height: 56px; line-height: 1; } .galerie-schliessen { position: absolute; top: var(--s3); right: var(--s3); font-size: 2.4rem !important; } .galerie-zaehler { position: absolute; bottom: var(--s4); left: 0; right: 0; text-align: center; color: #cfcdc7; font: 400 var(--t-xs) var(--daten); letter-spacing: 0.1em; } /* --- Kopf auf kleinen Geräten: Telefonnummer hat Vorrang -------------------- */ @media (max-width: 560px) { .kopf__rechts .knopf { display: none; } .kopf__logo img { width: 106px; } .kopf__zeile { gap: var(--s3); } .kopf__tel { font-size: var(--t-xs); } .menue-schalter { padding-inline: 0.6rem; } } /* --- Druck: das Exposé soll als PDF brauchbar sein ------------------------- */ @media print { .galerie { grid-template-columns: repeat(2, 1fr); gap: 4mm; } .galerie__haupt { grid-column: 1 / -1; } .galerie__haupt img { aspect-ratio: 16 / 9; } .brotkrumen, .aehnliche, .kennzahlen { display: none; } .expose__zusammenfassung { border-left: 2pt solid #000; } .eckdaten { border: 1pt solid #999; } h1 { font-size: 20pt; } h2 { font-size: 14pt; margin-top: 8mm; } @page { margin: 14mm; } } /* --- Infoboxen der Seitenleiste (Aufbau wie auf der alten Exposéseite) ----- */ .box { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--s4); } .box__titel { font-size: var(--t-m); font-weight: 600; margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 2px solid var(--akzent); } .box table.daten { margin-top: calc(-1 * var(--s2)); } /* 45 % ist die bevorzugte, nicht die feste Breite: kurze Beschriftungen geben Platz an die Werte ab. Bei 52 % brach "Nach Vereinbarung" um. */ .box table.daten th { width: 45%; font-weight: 400; color: var(--grau); } .box table.daten td { font-weight: 500; text-align: right; } .box__person { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .box__person img { width: 120px; height: auto; } .box__kontakt { display: grid; gap: var(--s2); font-size: var(--t-s); margin-bottom: var(--s4); } .box__kontakt a { display: flex; align-items: center; gap: var(--s2); text-decoration: none; } .box__kontakt a:hover { color: var(--akzent-text); } .box__fuss { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--linie); font: 400 var(--t-xs) var(--daten); color: var(--grau); } /* Ohne Rahmen, nur die Glyphen — so wie auf der bisherigen Seite. */ .teilen { display: flex; gap: var(--s3); align-items: center; } .teilen__marke { font: 400 var(--t-xs) var(--daten); font-variant-ligatures: none; color: var(--grau); } .teilen button, .teilen a { position: relative; width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--graphit); text-decoration: none; transition: color var(--tempo); } /* sichtbar sind 22 px, antippbar bleiben 44 px */ .teilen button::before, .teilen a::before { content: ""; position: absolute; inset: -11px; } .teilen button:hover, .teilen a:hover { color: var(--akzent-text); } .teilen svg { width: 20px; height: 20px; fill: currentColor; stroke: none; } .teilen .kopiert { color: var(--akzent-text); } .merkmalliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-s); } .merkmalliste li { display: flex; gap: var(--s2); align-items: flex-start; } .merkmalliste li::before { content: "–"; color: var(--akzent); flex: none; } /* --- Aktionszeile neben den Brotkrumen ------------------------------------ */ /* Merkmale links, Aktionen rechts — die Zeile steht direkt ueber der Galerie und der Ansprechpartner-Box und schliesst mit ihnen ab. */ .expose__marker { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s4); } .expose__badges { display: flex; gap: var(--s2); flex-wrap: wrap; } .expose__aktionen { display: flex; gap: var(--s2); align-items: center; margin-left: auto; } .expose__aktionen button, .expose__aktionen a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); cursor: pointer; color: var(--graphit); text-decoration: none; } .expose__aktionen button:hover, .expose__aktionen a:hover { border-color: var(--akzent); color: var(--akzent-text); } .expose__aktionen svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .expose__aktionen .merken { position: static; width: 38px; height: 38px; border-radius: var(--radius); background: var(--papier); } /* Hier ist der Knopf schon 38 px gross. Die Vergroesserung aus .merken::before haette hier keinen positionierten Vorfahren und spannte sich sonst ueber die ganze Seite — das erzeugte einen waagerechten Bildlauf. */ .expose__aktionen .merken::before { content: none; } /* --- Modal: Anfrageformular ------------------------------------------------ */ dialog.modal { width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20, 20, 18, 0.28); color: var(--ink); background: var(--papier); } dialog.modal::backdrop { background: rgba(20, 20, 18, 0.55); } .modal__kopf { padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--linie); position: relative; } .modal__kopf h2 { font-size: var(--t-l); margin: 0 0 var(--s2); padding-right: 2.5rem; } .modal__objekt { font-size: var(--t-s); color: var(--graphit); margin: 0; } .modal__nummer { font: 400 var(--t-xs) var(--daten); letter-spacing: 0.08em; color: var(--grau); margin: var(--s2) 0 0; } .modal__schliessen { position: absolute; top: var(--s4); right: var(--s4); width: 36px; height: 36px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--graphit); } .modal__schliessen:hover { border-color: var(--akzent); color: var(--akzent-text); } .modal__koerper { padding: var(--s5); overflow-y: auto; max-height: calc(88vh - 9rem); } .feldpaar { display: grid; gap: var(--s3); } @media (min-width: 520px) { .feldpaar { grid-template-columns: 1fr 1fr; } } .feld { display: grid; gap: var(--s1); margin-bottom: var(--s3); } .feld .pflicht { color: var(--akzent-text); } .feld__fehler { font-size: var(--t-xs); color: #a3352b; min-height: 0; } .feld--kasten { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); } .feld--kasten input { width: auto; min-height: 0; margin-top: 0.3rem; flex: none; } .feld--kasten label { text-transform: none; letter-spacing: 0; font-family: var(--schrift); font-size: var(--t-s); color: var(--graphit); margin: 0; } .knopf__laedt { display: none; } .knopf[aria-busy="true"] .knopf__text { display: none; } .knopf[aria-busy="true"] .knopf__laedt { display: inline; } /* --- Einheitenliste auf der Projektseite ---------------------------------- */ .einheiten { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--papier); } .einheiten__kopf { display: none; padding: var(--s3) var(--s4); background: var(--flaeche); border-bottom: 1px solid var(--linie); font: 500 var(--t-xs)/1 var(--daten); font-variant-ligatures: none; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); } .einheit { position: relative; display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s3) var(--s4); align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie); transition: background var(--tempo); } .einheit:last-child { border-bottom: 0; } .einheit:hover { background: var(--flaeche); } .einheit__bild { width: 84px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--flaeche); } .einheit__bild img { width: 100%; height: 100%; object-fit: cover; } .einheit__name { font-weight: 500; margin: 0; } .einheit__name a { text-decoration: none; } .einheit__name a::after { content: ""; position: absolute; inset: 0; } .einheit__zusatz { font: 400 var(--t-xs)/1.5 var(--daten); font-variant-ligatures: none; color: var(--grau); } .einheit__werte { display: flex; gap: var(--s4); align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; } .einheit__flaeche { font-weight: 500; } .einheit__preis { font-weight: 600; } .einheit__preis--anfrage { font-weight: 400; font-size: var(--t-s); color: var(--graphit); } .einheit__pfeil { color: var(--akzent); font-size: 1.1rem; line-height: 1; } @media (min-width: 760px) { .einheiten__kopf { display: grid; grid-template-columns: 84px 1fr 8.5rem 9.5rem 1.2rem; gap: var(--s4); } .einheit { grid-template-columns: 84px 1fr 8.5rem 9.5rem 1.2rem; } .einheit__werte { display: contents; } .einheit__flaeche, .einheit__preis, .einheit__preis--anfrage { text-align: right; } } @media (max-width: 759px) { .einheit { grid-template-columns: 64px 1fr; } .einheit__bild { width: 64px; } .einheit__werte { grid-column: 1 / -1; justify-content: space-between; } .einheit__pfeil { display: none; } } /* --- Inhaltsspalte in denselben Bereichen wie die Seitenleiste ------------- */ .box--inhalt { margin-bottom: var(--s5); } .box--inhalt > h2:first-child { margin-top: 0; } .box--inhalt .block__text { max-width: 72ch; } .box--inhalt table.daten th { width: auto; font-weight: 500; color: var(--graphit); } .box--inhalt table.daten td { text-align: left; font-weight: 400; } .box--inhalt .einheiten { border: 0; border-radius: 0; } .box--inhalt .einheiten__kopf { border-radius: var(--radius) var(--radius) 0 0; } @media (min-width: 700px) { .box--inhalt { padding: var(--s6); } } /* --- Galerie und Eckdaten als Bereiche ------------------------------------ */ .box--galerie { padding-bottom: var(--s4); } .galerie__hinweis { margin: var(--s3) 0 0; font: 400 var(--t-xs) var(--daten); font-variant-ligatures: none; letter-spacing: 0.06em; color: var(--grau); } .box--inhalt .eckdaten { border: 0; border-radius: 0; margin-block: var(--s4) 0; } .box--inhalt .mass { margin-bottom: 0; } .box__kennung { line-height: 1.7; }