/* NAVIMO — ein zentrales Stylesheet (Blueprint 17.3: eine Komponente, keine Kopien). Mobile First. CLS-sicher. Zugänglich. Bewusst zurückhaltend: Vertrauen vor Effekt. */ /* --- Systemschriftstack (kein externer Font-Roundtrip, keine 404) --- */ /* [hidden] mit !important, sonst gewinnen spezifischere .card/.lex-term/ .lex-group-Regeln (display:flex/block) gegen die native Browser-Regel - Live-Suche/Filter-Pills auf /ratgeber, /praxisfaelle, /glossar, /regionen setzten das Attribut sichtbar korrekt, aber die Karte blieb trotzdem angezeigt (Bug gefunden Session 16.8.2026: Klick auf Filter-Pills schien wirkungslos).*/ [hidden] { display: none !important; } /* --- Design-Tokens: ORIGINAL NAVIMO-CI (Emerald + Stone) --- */ :root { /* Original-NAVIMO-Variablen (1:1 aus der bestehenden Plattform) */ --stone: #1C1917; --stone2: #26211D; --em: #059669; --em2: #047857; --em-light: #D1FAE5; --em-mid: #6EE7B7; --gold: #B45309; --border: #E7E4DF; --border2: #C9C4BC; --text: #1C1917; --light: #706A64; --tag: #F1F5F9; --card: #fff; /* Generator-Aliasse zeigen auf dieselben Werte -> eine Farbwelt, keine zweite */ /* War #F9F7F4 (warmes Creme/"Eierweiss") - auf ausdrücklichen Wunsch auf reines Weiss umgestellt ("nirgendwo mehr das Gelbweiss, entweder ganz weiss oder grau"), Session 17.8.2026 - deckt sich jetzt exakt mit gebimos body-Hintergrund (verifiziert: rgb(255,255,255)). */ --paper: #ffffff; --surface: #ffffff; --ink: #1C1917; --muted: #6B6560; --line: #E7E4DF; /* Premium-Oliv-Akzent (Session 6.8.2026, freigegebene Design-Review): ersetzt das helle Signalgrün als Content-Akzent (CTA-Bänder, KPI-Werte, Ampel, Links) - das Logo im Header bleibt bewusst separat in Neon-Grün (.logo-mark svg, hartcodiert #22C55E, hängt NICHT an --accent). */ --accent: #3F5F4A; --accent-strong: #2F4A38; --accent-soft: #E7ECE5; --on-accent: #ffffff; --star: #B45309; --cta-blue: #3F5F4A; --cta-black: #000000; /* Container-Hintergrund für abwechselnde Weiss/Grau-Bänder (gebimo-Vorbild: bg-surface / bg-surface-muted) - Session 5.8.2026. */ --surface-muted: #F1F1F1; --maxw: 68rem; --gap: clamp(1rem, 3vw, 1.75rem); --radius: 10px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Bis Session 17.8.2026 eine Serife (Playfair Display) - auf ausdrück- lichen Wunsch ("übernimm das Design von gebimo") auf eine fette Grotesk umgestellt, analog zu gebimos Poppins-Überschriften. Die Grün/Schwarz/Weiss-Farbwelt selbst bleibt unverändert (bewusste frühere Entscheidung gegen gebimos Blau, siehe CTA-Band-Kommentare), das hier betrifft nur die Typografie, nicht die Farbe. */ --font-display: "Poppins", "Manrope", var(--font); } *, *::before, *::after { box-sizing: border-box; } /* Alle rem-Grössen (Überschriften, Kacheln, Fliesstext) skalieren von hier aus - eine Stufe grösser site-weit (explizite Vorgabe Session 6.8.2026), ausser dem schwarzen Abschluss-CTA-Band (siehe .cta-band__headline, dort bewusst in px statt rem gegen diese Skalierung immunisiert). */ html { -webkit-text-size-adjust: 100%; font-size: 106.25%; } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); } /* --- Accessibility: Skip-Link + sichtbarer Fokus --- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } /* Visuell versteckt, aber für Screenreader vorhanden - z. B. um die Überschriften-Hierarchie zu wahren, ohne eine sichtbare Zwischen- überschrift einzufügen, wo keine gebraucht wird. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } a { color: var(--accent-strong); } a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* --- Typo-Skala --- */ h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .6em; } h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.25; margin: 1.8em 0 .6em; } h3 { font-size: 1.15rem; margin: 0 0 .4em; } p { margin: 0 0 1em; } .lead, .hero__lead { font-size: 1.15rem; color: var(--muted); } /* --- Header / Footer --- */ .site-header { border-bottom: 1px solid var(--line); background: var(--surface); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; } .brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; } .site-nav ul { list-style: none; display: flex; gap: clamp(.75rem, 2.5vw, 1.5rem); margin: 0; padding: 0; } .site-nav a { text-decoration: none; font-weight: 600; color: var(--ink); } .site-nav a:hover { color: var(--accent); } .site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding-block: 2.5rem; background: var(--surface); } .footer-kantone { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: .35rem; } .footer-kantone a { text-decoration: none; } .footer-legal { color: var(--muted); font-size: .95rem; } /* --- Breadcrumb --- */ .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 1.25rem 0 0; margin: 0; font-size: .9rem; color: var(--muted); } .breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--line); } .breadcrumb a { text-decoration: none; } /* --- Buttons --- */ .btn { display: inline-block; font-weight: 700; text-decoration: none; padding: .8rem 1.4rem; border-radius: var(--radius); } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-strong); } /* --- Hero --- */ .hero { padding: 3rem 0 1rem; } /* --- Makler-Karte (die EINE Kartenkomponente) --- Kanton-Seiten (/immobilienmakler/{kanton}) und die Startseite (/) teilen sich dieselbe Liste (.cards-list, siehe unten) statt zweier Grid-Klassen mit fast identischem, aber leicht abweichendem CSS. */ .makler-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .makler-card__link { display: flex; gap: 1rem; padding: 1.1rem; text-decoration: none; color: inherit; align-items: flex-start; } .makler-card__logo { flex: 0 0 auto; width: 80px; height: 40px; object-fit: contain; } .makler-card__name { margin: 0 0 .3rem; font-size: 1.1rem; } .makler-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .35rem; font-size: .92rem; color: var(--muted); } .makler-card__spez { margin: 0 0 .25rem; font-size: .92rem; } .makler-card__prov { margin: 0; font-weight: 600; } .makler-card:hover { border-color: var(--accent); } /* --- Bewertung --- */ .rating { color: var(--star); font-weight: 700; white-space: nowrap; } .rating__count { color: var(--muted); font-weight: 400; } .rating--lg { font-size: 1.25rem; } /* --- Listen (Hubs) --- */ .kanton-liste, .ratgeber-liste, .rechner-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr; gap: .75rem; } .ratgeber-liste a, .rechner-liste a { display: block; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--surface); } .ratgeber-liste a:hover, .rechner-liste a:hover { border-color: var(--accent); } .ratgeber-liste p, .rechner-liste p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; } /* --- Ratgeber / Artikel --- */ .ratgeber { max-width: 44rem; } .ratgeber__byline { color: var(--muted); font-size: .9rem; } .faq__item { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; } /* --- Maklerprofil --- */ .makler-profil__head { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; padding: 1.4rem; margin-top: var(--space-5); background: var(--card, #fff); border: 1px solid var(--border, var(--line)); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-sm); } .makler-profil__logo { width: 100px; height: 50px; object-fit: contain; } /* Kennzahlen-Chips (seit/Provision) - dieselbe visuelle Sprache wie die Maklerkarten im Vergleich (makler_card.py), damit ein Profil sich nicht ärmer anfühlt als der eigene Eintrag im Vergleich. */ .makler-profil__stats { display: flex; gap: 1.5rem; margin-top: .5rem; } .makler-profil__stat { display: flex; flex-direction: column-reverse; font-size: .8rem; color: var(--muted); } .makler-profil__stat strong { font-size: 1.05rem; color: var(--text); font-weight: 700; } .makler-profil__tag-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1rem 0 .5rem; } .makler-profil__tags { display: flex; flex-wrap: wrap; gap: 6px; } .makler-profil__tag { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; } .makler-profil__tag--spez { background: #F3E8FF; color: #6B21A8; border: 1px solid #DDD6FE; } .makler-profil__tag--zusatz { background: #F1F5F9; color: #334155; border: 1px solid #CBD5E1; } .standort-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; } .standort { display: flex; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--surface); } .standort__foto { width: 100%; max-width: 320px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; } /* --- Rechner --- */ .rechner__tool { border: 1px dashed var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); margin: 1rem 0; } .rechner__hinweis { color: var(--muted); margin: 0; } /* --- Bilder generell: CLS-Schutz --- */ img { max-width: 100%; height: auto; } /* --- Breakpoints (Mobile First -> aufwärts erweitern) --- */ @media (min-width: 40rem) { .footer-kantone { grid-template-columns: repeat(2, 1fr); } .kanton-liste { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 60rem) { .footer-kantone { grid-template-columns: repeat(4, 1fr); } } /* --- Reduced Motion respektieren --- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= Masterplan-Komponenten (AI-Antwort, FAQ, Related, CTA, Workflow, Rechner, Partner-Hinweis, Formular). Zurückhaltend, tokenbasiert, mobile-first. ========================================================================= */ /* --- AI-Overview-Kurzantwort: zitierfähiger Direkteinstieg --- */ .ai-answer { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1rem 0 1.4rem; } .ai-answer__label { margin: 0 0 .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); } .ai-answer__text { margin: 0; } /* Kanton-Marktbericht-Pillar: derselbe ai-answer-Text dient als ruhiger Lead-Satz statt als hervorgehobener Callout-Kasten - kein Label, kein Rahmen/Hintergrund, nur Fliesstext direkt unter dem H1. */ .ai-answer--lead { background: none; border-left: none; border-radius: 0; padding: 0; margin: .5rem 0 1.5rem; max-width: 42rem; } .ai-answer--lead .ai-answer__text { color: var(--muted); font-size: 1.05rem; } /* Kleine, abgerundete Badges statt der Meta-Zeile mit Lesezeit - nur auf dem Kanton-Marktbericht-Pillar (KISS-Vorgabe, Session 10.8.2026). */ .markt-pillar__badges { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .6rem; } .pill { display: inline-block; padding: .28rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-muted); color: var(--muted); border: 1px solid var(--line); } .pill--accent { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-strong); border-color: transparent; } /* Grüner Punkt vor "Aktualisiert"-Pills (gebimo-Vorbild, Session 16.8.2026) - signalisiert auf einen Blick "aktuell gepflegt" statt neutralem Text. */ .pill--live { display: inline-flex; align-items: center; gap: .35rem; } .pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--em); flex: none; } .hub-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: .1rem 0 .5rem; } .kanton-region__gemeinden { font-size: .82rem; color: var(--muted); margin-top: .4rem; } /* --- FAQ --- */ .faq { margin: 2rem 0; } .faq__item { padding: .9rem 0; border-top: 1px solid var(--line); } /* Aufklappbar per
/ (gebimo-Vorbild) statt Immer-offen- Liste - eigenes +/--Symbol statt des Browser-Standarddreiecks, das je nach Browser uneinheitlich aussieht. */ .faq__q { margin: 0; font-size: 1.05rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; flex: none; font-size: 1.3rem; font-weight: 400; color: var(--muted); line-height: 1; } details[open] > .faq__q::after { content: "\2212"; } .faq__a { margin: .6rem 0 0; color: var(--muted); } /* --- Related-/Weiterführend-Block: automatische interne Verlinkung --- Grauer Vollbreite-Hintergrund (wie .related--compact/gebimo-Vorbild) statt direkt auf dem weissen Seitenhintergrund - die Karten "gingen sonst unter" (explizites Nutzer-Feedback, Session 17.8.2026: der dünne Kartenrahmen allein reicht nicht als Abgrenzung auf reinem Weiss). Bleed-Technik wie bei den alternierenden Artikel-Sektionen: volle Breite, Innenabstand hält den Inhalt auf der gewohnten Spaltenbreite. */ .related:not(.related--compact) { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--surface-muted); margin-top: 0; margin-bottom: 0; padding: 2.5rem max(1.75rem, calc((100vw - var(--maxw)) / 2 + 1.75rem)); display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .related:not(.related--compact) { grid-template-columns: repeat(2, 1fr); } } .related__group h2 { font-size: .95rem; margin: 0 0 .5rem; color: var(--muted); } .related__group ul { list-style: none; margin: 0; padding: 0; } .related__group li { margin: .3rem 0; } .related__group a { text-decoration: none; } .related__group a:hover { text-decoration: underline; } /* "Das könnte Sie auch interessieren" (gebimo-Vorbild, live nachgemessen: weisse Karte, 1px Rahmen #CDCDD0, radius 16px, padding 24px, grauer Container-Hintergrund) statt der vorherigen grossen Mehrspalten- Kartenliste, die wie eine SEO-Linkwand wirkte (KISS-Feedback Session 17.8.2026). Volle Breite/randlos wie die Inhaltsabschnitte darüber. */ .related--compact { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--surface-muted); padding: 2.5rem 1.75rem; } .related--compact h2 { max-width: var(--maxw); margin: 0 auto 1.25rem; padding-inline: 0; } .related-cards { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .related-cards { grid-template-columns: repeat(3, 1fr); } } .related-card { display: block; background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; padding: 1.5rem; text-decoration: none; color: inherit; transition: border-color .15s; } .related-card:hover { border-color: var(--accent); } .related-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; } .related-card p { margin: 0; color: var(--muted); font-size: .92rem; } .related-card__cta { display: block; margin-top: .75rem; color: var(--accent-strong); font-weight: 600; font-size: .9rem; } .related__list--more { list-style: none; margin: 1.5rem auto 0; padding: 1rem 0 0; max-width: var(--maxw); border-top: 1px solid var(--border2); display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; } .related__list--more a { color: var(--muted); text-decoration: none; font-size: .88rem; } .related__list--more a:hover { text-decoration: underline; color: var(--accent-strong); } /* --- CTA-Band: keine Seite ohne Conversion --- */ .cta-band { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; background: var(--cta-blue); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 2rem 0; } /* Full-Bleed: Hintergrund reicht bis zum Viewport-Rand, der Inhalt bleibt an der Content-Spalte ausgerichtet (via --maxw/--gap berechnet) - auf ausdrücklichen Wunsch (Session 5.8.2026, gebimo-Vorbild "riesenbanner"). */ .cta-band--next { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; border-radius: 0; padding-top: 4rem; padding-bottom: 4rem; padding-left: max(1.25rem, calc((100vw - var(--maxw)) / 2 + var(--gap))); padding-right: max(1.25rem, calc((100vw - var(--maxw)) / 2 + var(--gap))); /* Text/Button mittig statt linksbündig (gebimo-Vorbild, explizite Vorgabe) - überschreibt die weiter unten stehende .cta-band--next{flex-direction:column;align-items:flex-start}-Regel per höherer Deklarationsreihenfolge weiter unten (siehe dortiger Kommentar zur Kaskade). */ align-items: center; text-align: center; } .cta-band--black { background: var(--cta-black); } .cta-band--black .cta-primary { color: var(--cta-black); } /* Persönliche Anrede (z. B. "Was ist Ihre Immobilie in Rheintal wert?") auf Region-/Gemeinde-/Kanton-Markt-Seiten - macht das Band einladender, ohne Farbe oder Aufbau zu ändern. */ /* Grosse, sofort erkennbare Frage statt Fliesstext - angelehnt an das gebimo-Vorbild (grosse weisse Headline + Pill-Button auf Markenfarbe). */ .cta-band__headline { margin: 0 0 .75rem; color: var(--on-accent); /* px statt rem: bleibt von der site-weiten +1-Stufen-Schriftvergrösserung (html{font-size:106.25%}) unberührt, explizite Ausnahme. */ font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; font-weight: 800; max-width: 18ch; } /* .topic h2 (Klasse+Element) ist spezifischer als .cta-band__headline (nur Klasse) und würde das grüne Band (das innerhalb
sitzt, anders als das schwarze Abschluss-Band) sonst auf Fliesstext-Überschriftgrösse zurückstutzen - explizite Re-Assertion. */ .topic .cta-band__headline { font-size: clamp(38.4px, 5.5vw, 64px); } /* Zwei Klassen (.cta-band .cta-primary) statt nur .cta-primary: eine spätere, allgemeinere Button-Regel (ORIGINAL-NAVIMO-Sektion weiter unten) hat sonst dieselbe Spezifität und gewinnt per Quellreihenfolge - Ergebnis wäre ein dunkler Button auf dunklem Band (kaum erkennbar). Höhere Spezifität hier erzwingt zuverlässig den hellen Pill-Button, den das Band braucht. */ .cta-band .cta-primary { display: inline-block; background: var(--on-accent); color: var(--cta-blue); font-weight: 700; text-decoration: none; padding: .9rem 1.75rem; border-radius: 999px; border: 0; cursor: pointer; font-size: 1.02rem; } .cta-band .cta-primary:hover { background: #f2efe8; } .cta-secondary { display: inline-block; color: var(--on-accent); text-decoration: underline; padding: .7rem .5rem; font-weight: 550; } /* Intelligente Folgeempfehlung (Eigentümerreise): Augenbraue + Begründung. Mittig statt linksbündig (gebimo-Vorbild, explizite Vorgabe Session 6.8.2026) - align-items:center statt flex-start. */ .cta-band--next { flex-direction: column; align-items: center; gap: .6rem; justify-content: center; } .cta-band__eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); opacity: .85; } .cta-band--next .cta-band__why { margin: 0 0 .75rem; color: var(--on-accent); opacity: .92; max-width: 42ch; font-size: 1.05rem; font-weight: 400; } .cta-band--next .cta-band__headline { max-width: 32ch; } .cta-band--next .cta-primary { padding: 1.15rem 2.25rem; font-size: 1.12rem; } /* Ein späterer, allgemeinerer .cta-secondary-Stil (Original-Buttons weiter unten im Stylesheet) überschreibt sonst per Quellreihenfolge diese Farbe mit grünem Text auf grünem Band – praktisch unlesbar. Höhere Spezifität erzwingt hier zuverlässig den hellen, für das Band gedachten Stil. Als eigener Outline-Pill-Button (statt reiner Textlink) ist die kantonsspezifische Makler-Empfehlung genauso klar als zweite Handlung erkennbar wie die primäre - nicht nur ein Nebensatz. */ .cta-band .cta-secondary { color: var(--on-accent); background: transparent; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; padding: .8rem 1.5rem; font-weight: 650; text-decoration: none; } .cta-band .cta-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); } /* --- Workflow-Kette: Bewertung -> Kosten -> Nettoerlös -> Makler -> Kontakt --- */ .workflow { margin: 1.25rem 0 1.75rem; overflow-x: auto; } .workflow ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; counter-reset: wf; } .wf__step { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--muted); padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); } .wf__step a { text-decoration: none; color: inherit; } .wf__step--active { color: var(--on-accent); background: var(--accent-strong); border-color: var(--accent-strong); font-weight: 600; } /* --- Rechner-Widget --- */ /* Formular UND Ergebnis stehen untereinander, nicht nebeneinander - die Ergebnis-Box ist wie bei gebimo.ch/rechner/verkaufskosten eine volle Breite einnehmende, hellgraue Karte UNTER dem Eingabefeld-Grid (Session 12.8.2026, zweite Korrektur: erst probeweise auf eine schmale Einzelspalte reduziert, jetzt nach dem echten gebimo-Vorbild auf volle Breite + zweispaltiges Feld-Grid). */ .calc { display: flex; flex-direction: column; gap: 1.75rem; margin: 1.5rem 0; } .calc__form { display: grid; gap: 1.1rem 1.5rem; grid-template-columns: 1fr; margin: 0; } @media (min-width: 40rem) { /* Feste 2 Spalten liessen 3-Feld-Rechner (z.B. Hypothek: Kaufpreis, Eigenkapital, Zins) unschön als 2+1 umbrechen (Nutzer-Feedback Session 24.8.2026: "alle 3 Spalten... in eine Zeile"). auto-fit statt fixer Spaltenzahl - passt sich der jeweiligen Feldanzahl an, ohne pro Rechner eine eigene Spaltenzahl zu pflegen. */ .calc__form { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } } .calc__field { display: grid; gap: .3rem; } .calc__field label { font-size: .9rem; color: var(--muted); } .calc__field input, .calc__field select { /* font:inherit + explizite Ausnahme, siehe Kommentar bei .form__field weiter unten - sonst 15px vom body und iOS-Auto-Zoom beim Fokussieren. */ font: inherit; font-size: 16px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-height: 44px; width: 100%; } /* Farbe/Radius/Innenabstand: siehe die spätere, tatsächlich wirksame .calc__result-Regel weiter unten im Stylesheet (Kaskaden-Sieger). */ .calc__row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; color: var(--muted); border-bottom: 1px dashed var(--line); } .calc__highlight { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 2px solid var(--accent); font-size: 1.15rem; font-weight: 700; } .calc__highlight--ok { color: var(--accent-strong); } .calc__highlight--warn { color: #a23b2d; } /* Rechner-Illustration: Themen-Icon rechts neben dem Formular (Desktop), stapelt darunter sobald der Platz für 2 Spalten fehlt (Session 18.8.2026, explizite Vorgabe: rechts, nicht darunter - ausser auf schmalem Viewport, wo 2 Spalten schlicht nicht reinpassen). */ /* min-width:0 auf den Grid-Kindern: Grid-Items sind sonst per Spec implizit min-width:auto und verweigern das Schrumpfen unter ihre intrinsische Inhaltsbreite - das .tool-Element blies die 1fr-Spalte dadurch auf 459px auf (statt der verfügbaren 349px) und erzeugte horizontales Overflow auf Mobile (Mobile-Audit-Folgefund, Session 18.8.2026, scrollWidth 472 vs. viewport 375 auf allen 16 Rechnerseiten). */ .calc-page-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } .calc-page-grid > * { min-width: 0; } /* Unter 56rem stand die Illustration bisher als eigenständiger, unumrahmter Block zwischen Rechner-Karte und CTA-Band - viel Leerraum ohne Kontext, ohne Kartenrahmen (Nutzer-Feedback Session 20.8.2026: "sieht beschissen aus als Handy-User"). Die Vorgabe war ohnehin "rechts, nicht darunter" (Session 18.8.2026) - das Stapeln war nur ein Verlegenheits-Fallback für fehlenden Platz, kein bewusstes Mobile-Design. Auf Mobile daher ganz ausgeblendet statt schlecht platziert. */ .calc-illustr-panel { display: none; } @media (min-width: 56rem) { .calc-page-grid { grid-template-columns: 1fr 20rem; align-items: start; } .calc-illustr-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; position: sticky; top: 5rem; /* Bisher unumrahmt/unfarbig neben der weissen .toolx-Karte - auf identisch weissem Seitenhintergrund (--paper) praktisch kontrastlos ("ist ja alles weiss", Nutzer-Feedback Session 24.8.2026). Eigene Kartenoptik statt neuer Farbe: --surface-muted ist bereits ein etabliertes Token (Marktbericht-/Themenseiten nutzen es identisch). */ background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-lg); } } .calc-illustr { width: 100%; max-width: 13rem; color: var(--accent-strong); } /* Tragbarkeitsrechner: zwei Prozent-Gauges statt Haus-Füllstand (Nutzer- Feedback Session 18.8.2026: "nicht wie andere mit 20% etc angezeigt"; Session 20.8.2026: UBS/ZKB zeigen dafür zwei Ringe - Tragbarkeit + Belehnungsgrad - nebeneinander, kein Haus-Symbol) - Ring + grosse Zahl, dasselbe Anzeigemuster wie z.B. die Profil-Vollständigkeits-Balken im Admin. */ .calc-gauge-pair { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .calc-gauge-pair .calc-illustr { max-width: 7.5rem; } .calc-gauge__bg { fill: none; stroke: var(--border2, var(--line)); stroke-width: 10; } .calc-gauge__arc { fill: none; stroke-width: 10; stroke-linecap: round; stroke: var(--accent-strong); transition: stroke-dashoffset .3s ease, stroke .3s ease; } .calc-gauge__arc.warn { stroke: #a23b2d; } .calc-gauge__value { font: 800 22px var(--font, sans-serif); fill: var(--ink); } .calc-gauge__label { font: 700 9px var(--font, sans-serif); text-transform: uppercase; letter-spacing: .05em; fill: var(--muted); } /* Eigentümer-Cockpit: gruppierte Eingaben + verkettete Ergebnisdarstellung */ .ck__group { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin: 0; display: grid; gap: .85rem; } .ck__group legend { font-weight: 700; font-size: .95rem; padding: 0 .4rem; color: var(--accent-strong); } .calc__result .cr-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem 0 .3rem; font-weight: 700; } .calc__result .cr-h:first-child { margin-top: 0; } .calc__note { margin: .75rem 0 0; font-size: .82rem; color: var(--muted); } .cockpit__text { margin-top: 2rem; } /* Geführte Assistenten: Verkaufsfahrplan + Dokumenten-Assistent */ .opt-grid { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 .85rem; display: grid; gap: .5rem; grid-template-columns: 1fr; /* .calc__form (der Elternrahmen) wird ab 40rem selbst zweispaltig (für Rechner mit mehreren Eingabefeldern nebeneinander) - Verkaufsfahrplan und Dokumenten-Assistent haben aber nur DIESES eine Fieldset, das dadurch nur eine der beiden Spalten füllte und die Karte auf breiten Bildschirmen auf halbe Breite quetschte (Nutzer-Feedback Session 20.8.2026: "Formatierung auf die ganze Breite"). grid-column spannt das Fieldset über beide Elternspalten, die eigenen Options-Spalten bleiben unabhängig davon steuerbar. */ grid-column: 1 / -1; } @media (min-width: 30rem) { .opt-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 56rem) { .opt-grid { grid-template-columns: 1fr 1fr 1fr; } } .opt-grid legend { font-weight: 700; font-size: .95rem; padding: 0 .4rem; color: var(--accent-strong); grid-column: 1 / -1; } .opt { display: flex; align-items: center; gap: .55rem; font-size: .93rem; cursor: pointer; } .opt input { width: auto; min-height: auto; } .plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .plan__step { display: flex; gap: .75rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .plan__num { flex: 0 0 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; } .plan__step p { margin: .2rem 0 0; color: var(--muted); font-size: .93rem; } .plan__links { margin: .4rem 0 0 !important; font-size: .9rem; } .doc-list { margin: .25rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; } .doc-note { color: var(--muted); font-size: .8rem; font-style: italic; } .assistant__text { margin-top: 2rem; } /* --- Partner-Hinweis (Steuerfuchs): fachlich, nicht werblich --- */ .partner-hint { border: 1px dashed var(--line); border-radius: var(--radius); padding: .85rem 1.1rem; margin: 1.5rem 0; background: var(--surface); color: var(--muted); font-size: .95rem; } .partner-hint p { margin: 0; } /* --- Hub-Themenliste --- */ .hub-themen { margin: 2rem 0; } .link-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .link-liste { grid-template-columns: repeat(2, 1fr); } } /* --- Anfrage-Formular --- */ .form { display: grid; gap: 1rem; max-width: 40rem; margin: 1rem 0; } .form__field { display: grid; gap: .3rem; } .form__field label { font-size: .9rem; color: var(--muted); } .form__field input, .form__field select, .form__field textarea { /* font:inherit holt sonst wieder body{font-size:15px} zurück und überschreibt damit die spätere globale 16px-Regel (Spezifität) - gegen iOS-Auto-Zoom braucht es hier eine explizite Ausnahme. */ font: inherit; font-size: 16px; padding: .6rem .7rem; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-height: 44px; } .form__check { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; } .form__check input { margin-top: .25rem; } /* --- Maklervergleich: Leistungsumfang-Matrix --- */ .lv__names { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; } .lv__names label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--muted); flex: 1 1 160px; } .lv__names input { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; } .lv__scroll { overflow-x: auto; } .lv__grid { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; } .lv__grid th[scope="row"] { text-align: left; font-weight: 500; padding: .5rem .6rem; border-bottom: 1px solid var(--line); } .lv__grid td { text-align: center; padding: .4rem .5rem; border-bottom: 1px solid var(--line); } .lv__grid thead th { font-size: .8rem; color: var(--muted); padding: .4rem .5rem; border-bottom: 2px solid var(--line); } .lv__grouprow th { background: var(--surface); text-align: left; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); padding: .5rem .6rem; } .lv__grid select { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; font-size: .9rem; background: #fff; } .lv__more { font-size: .78rem; margin-left: .4rem; white-space: nowrap; } .lv__scores { width: 100%; border-collapse: collapse; margin: .5rem 0; } .lv__scores th, .lv__scores td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; } .lv__scores .lv__win { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 650; } /* --- Makler-Hub: Feature-Band Leistungsvergleich --- */ .hub-feature { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1.5rem 0; } .hub-feature h2 { margin: 0 0 .4rem; } .hub-feature p { margin: 0 0 .9rem; color: var(--muted); max-width: 60ch; } /* --- Kuratierte Wissens-Hubs (Ratgeber & Co.): Karten statt schlichter Linkliste, damit die Übersicht dieselbe Bildsprache wie der Rest der Plattform trägt statt wie eine reine Textliste zu wirken. --- */ /* /rechner-Übersicht war komplett weiss auf weiss (Nutzer-Feedback Session 24.8.2026: "ist der nur alles weiss", "wie bei den Marktberichten") - dieselbe Full-Bleed-Grau/Weiss-Abwechslung wie .topic > section[id] oben, hier auf die Tool-Gruppen angewendet statt eine neue Farbe/Technik einzuführen. */ .hub-list { margin-top: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-top: 2.25rem; padding-bottom: 2.25rem; padding-left: max(1.75rem, calc((100vw - 68rem) / 2 + 1.75rem)); padding-right: max(1.75rem, calc((100vw - 68rem) / 2 + 1.75rem)); } .hub-list:nth-of-type(odd) { background: var(--surface-muted); } .hub-list:nth-of-type(even) { background: var(--surface); } .hub-list:first-of-type { margin-top: var(--space-4); } .hub-list h2 { display: inline-block; padding-bottom: .3rem; margin-bottom: var(--space-3); border-bottom: 3px solid var(--accent); } /* --- Lexikon (gebimo-Vorbild, Session 12.8.2026): Suche + Themen-Pills + A-Z-Sprungleiste + alphabetische Liste statt Kategorie-Kartenraster - bei 130+ Begriffen deutlich schneller erfassbar als eine lange Reihe grosser Karten. --- */ /* Voller, viewportbreiter neutralgrauer Block (gebimo-Vorbild) statt der warmen Creme-Seitenfarbe (--paper) - die frühere Version wirkte auf dem Screenshot "gelblich", weil nur die Toolbar-Box eingefärbt war und der Rest (Begriffsliste) auf der wärmeren Seitenfarbe weiterlief. */ .lex-shell { background: #EEEFF0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--space-5) 0; } .lex-shell__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap); } .lex-toolbar { margin: 0 0 var(--space-4); } .lex-search-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .lex-search { flex: 1; min-width: 260px; padding: .75rem 1rem; border-radius: 999px; border: 1.5px solid var(--border, var(--line)); font-size: 1rem; font-family: 'Inter', sans-serif; background: var(--surface); } .lex-search:focus { outline: none; border-color: var(--accent); } .lex-count { font-size: .88rem; color: var(--muted); white-space: nowrap; } .lex-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-3); } .lex-pill { font-size: .85rem; font-weight: 650; padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--border, var(--line)); background: var(--surface); color: var(--ink, var(--text)); cursor: pointer; font-family: 'Inter', sans-serif; } .lex-pill--active { background: var(--accent-strong); border-color: transparent; color: #fff; } .lex-az { display: flex; flex-wrap: wrap; gap: .35rem; font-weight: 700; font-size: .92rem; } .lex-az a { color: var(--accent-strong); text-decoration: none; padding: .15rem .3rem; } .lex-az a:hover { text-decoration: underline; } .lex-az span { color: var(--border, var(--line)); padding: .15rem .3rem; } .lex-group { margin-top: var(--space-5); scroll-margin-top: 5rem; } .lex-group h2 { font-size: 1.3rem; padding-bottom: .3rem; margin-bottom: var(--space-3); border-bottom: 2.5px solid var(--accent-strong); } .lex-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1.5rem; } @media (max-width: 640px) { .lex-terms { grid-template-columns: repeat(2, 1fr); } } .lex-term { padding: .4rem 0; color: var(--ink, var(--text)); text-decoration: none; border-bottom: 1px solid transparent; } .lex-term:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); } .lex-empty { text-align: center; color: var(--muted); padding: var(--space-5) 0; } /* ====================================================================== DESIGN-SYSTEM — wiederverwendbare Komponenten (ui.py) ====================================================================== */ /* Tokens: zusätzliche Abstands-/Typo-Skala (Basis-Tokens siehe oben) */ :root { --space-1: .35rem; --space-2: .6rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.25rem; --fs-eyebrow: .78rem; } /* Atome */ .eyebrow { margin: 0 0 .4rem; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); } .badge { display: inline-block; font-size: .74rem; font-weight: 650; line-height: 1; padding: .28rem .5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .badge--accent { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: transparent; color: var(--accent-strong); } .badge--neu { background: var(--accent); color: var(--on-accent); border-color: transparent; } .chip-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; } .chip { display: inline-block; font-size: .92rem; font-weight: 650; line-height: 1; padding: .55rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid transparent; color: var(--accent-strong); text-decoration: none; } .chip:hover { background: var(--accent); color: var(--on-accent); } .gemeinden-weitere { color: var(--muted); font-size: .95rem; } .stat { display: inline-flex; flex-direction: column; gap: .2rem; } /* Kennzahlen deutlich fetter/grösser (explizite Vorgabe, Session 6.8.2026) - wirkt wie eine Daten-Kennzahl statt wie Fliesstext. */ .stat__value { font-size: 1.65rem; font-weight: 800; color: var(--text, var(--ink)); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .stat__label { font-size: .82rem; color: var(--muted); } .note { font-size: .88rem; color: var(--muted); } .note--source { margin-top: var(--space-3); padding-top: .6rem; border-top: 1px solid var(--line); font-size: .8rem; } .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); } .dot--ok { background: var(--accent); } /* Karten & Raster */ .card-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: var(--space-3) 0; } .card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); } .card--link { text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; } .card--link:hover { border-color: var(--accent); transform: translateY(-2px); } .card__image { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; line-height: 0; } .card__image img { width: 100%; height: 120px; object-fit: cover; display: block; } .card__eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); } .card__title { margin: .25rem 0 .35rem; font-size: 1.05rem; } /* Ratgeber-/Praxisfälle-Kartentitel sind volle Topic-Labels (SEO-H1-Text, nicht separat gekürzt) - im Kartenraster auf 2 Zeilen begrenzt, sonst variieren die Karten stark in der Höhe (Vorgabe, Session 16.8.2026). */ .hub-card .card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__body { font-size: .92rem; color: var(--muted); } .card__cta { display: inline-block; margin-top: .6rem; font-weight: 650; color: var(--accent-strong); font-size: .9rem; } .card__cta::after { content: " \2192"; } /* Kanton-Übersicht (/kanton): Regionen-Gruppierung + Portal-Karten */ /* Interaktive Schweizer-Kantone-Karte: reines Inline-SVG (echte swisstopo- Grenzen, vereinfacht), kein Karten-Plugin. Farben bleiben Weiss/Schwarz/ Grün - Kantone in einem ruhigen Grünton, Hover/Fokus in der Markenfarbe. */ .ch-map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin: 0 0 var(--space-4); box-shadow: var(--shadow-md); } .ch-map__svg { display: block; width: 100%; height: auto; max-height: 460px; margin: 0 auto; } .ch-map__c { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--surface); stroke-width: 2.2; transition: fill .15s var(--ease), transform .15s var(--ease); } .ch-map__link { cursor: pointer; } .ch-map__link .ch-map__c:hover, .ch-map__link .ch-map__c.is-hover, .ch-map__link:focus-visible .ch-map__c { fill: var(--accent-strong); } .ch-map__link:focus-visible { outline: none; } .ch-map__link:focus-visible .ch-map__c { stroke: var(--accent); stroke-width: 3; } .ch-map__c--soon { fill: var(--tag); stroke: var(--surface); } .ch-map__hint { text-align: center; color: var(--muted); font-size: .88rem; margin: .75rem 0 0; } .ch-map__row { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; } .ch-map__svgwrap { flex: 1 1 320px; min-width: 260px; } .ch-map__label { flex: 0 0 200px; font-size: 1.15rem; font-weight: 700; color: var(--ink); } .ch-map__label-empty { color: var(--muted); font-weight: 500; font-size: .95rem; } @media (max-width: 640px) { .ch-map { padding: var(--space-3); } .ch-map__svg { max-height: 300px; } .ch-map__row { gap: .75rem; } .ch-map__label { flex-basis: 100%; text-align: center; } } .geo-search { position: relative; max-width: none; margin: 0 0 var(--space-5); } .geo-search input { width: 100%; box-sizing: border-box; font-size: 1rem; padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); } .geo-search input:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .geo-search__results { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; right: 0; margin: 0; padding: .4rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 360px; overflow-y: auto; } .geo-search__results li { margin: 0; } .geo-search__results a { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .6rem; border-radius: 8px; text-decoration: none; color: var(--ink); } .geo-search__results a:hover, .geo-search__results a:focus { background: var(--stone); } .geo-search__level { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); min-width: 4.5rem; } .geo-search__name { font-weight: 600; } .geo-search__kt { color: var(--muted); font-size: .85rem; } .geo-search__hint { color: var(--muted); font-size: .78rem; font-style: italic; } .geo-search__empty { padding: .6rem; color: var(--muted); } /* Gemeinde ohne eigene Seite: Name selbst nicht klickbar, stattdessen zwei gleichrangige Ziel-Buttons (Region/Kanton) daneben - Nutzer wählt selbst. */ .geo-search__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .5rem; padding: .55rem .6rem; } .geo-search__targets { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; } .geo-search__target { font-size: .82rem; font-weight: 650; text-decoration: none; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: .3rem .65rem; border-radius: 999px; } .geo-search__target:hover { background: var(--accent); color: var(--on-accent); } /* Kanton-Marktbericht-Pillar (KISS-Rollout, Session 12.8.2026, alle 26 Kantone): KPI-Kacheln (erkennbar an .stat__value) höchstens 3 pro Reihe statt auto-fill 4+x - die Tile-Anzahl variiert pro Kanton (3-6), auto-fit mit grösserem Mindestmass verteilt die vorhandenen Kacheln je Reihe gleichmässig statt eine ungleiche letzte Zeile/leere Spalten zu erzeugen. */ .topic--preview .card-grid:has(.stat__value) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } @media (max-width: 640px) { .topic--preview .card-grid:has(.stat__value) { grid-template-columns: 1fr 1fr; } } /* Hochwertige Marktbericht-Weiterführungsnavigation im gebimo-Kartenstil (Session 12.8.2026, KISS-Rollout auf alle 26 Kantone): wenige, klar getrennte Abschnitte mit echten Beschreibungskarten statt der alten "Wichtigste Gemeinden"/"Mehr zu..."-Kartenblöcke. */ .footer-nav { max-width: 60rem; margin: var(--space-6) auto; padding: 0 var(--space-4); } .footer-nav__group { padding: var(--space-3) 0; border-top: 1px solid var(--line); } .footer-nav__group:first-child { border-top: none; } .footer-nav__group h2 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 .5rem; } .footer-nav__row { margin: 0; font-size: .95rem; line-height: 1.9; } .footer-nav__row a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; } .footer-nav__row a:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); } .kanton-jump { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 var(--space-4); } .kanton-jump a { font-size: .85rem; font-weight: 600; color: var(--accent-strong); text-decoration: none; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; } .kanton-jump a:hover { border-color: var(--accent); } .kanton-region { margin: var(--space-5) 0; scroll-margin-top: 5rem; } /* Halbkanton-Paare (Basel-Stadt/-Landschaft, Appenzell AR/AI) nebeneinander statt als zwei volle Blöcke übereinander (explizite Vorgabe Session 18.8.2026). */ .halbkanton-pair { display: grid; gap: var(--space-5); grid-template-columns: 1fr; } .halbkanton-pair .kanton-region { margin: 0; } @media (min-width: 56rem) { .halbkanton-pair { grid-template-columns: 1fr 1fr; } } .kanton-region h2 { margin-bottom: var(--space-3); } /* Hub-Variante: Gemeinden-Kartenraster direkt unter dem Hero einer Region-/ Gemeindeseite (statt am Seitenende) - macht die Seite auf den ersten Blick als regionalen Hub statt als Fliesstext-Artikel erkennbar. */ .kanton-region--hub { margin: 1.5rem 0 2.25rem; } .kanton-region--hub h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); font-weight: 800; } /* Abwechselnde Container-Hintergründe für Kanton-Hub-Marktbericht-Abschnitte (gebimo-Vorbild) - siehe auch .topic > section[id] weiter unten für die normalen Themenseiten. */ .kanton-region--hub.kanton-region--muted { background: var(--surface-muted); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; } /* Kantonskarte ist seit Session 10.8.2026 komplett klickbar ( statt
+ Button) - nur Bild, Name und ein dezenter Pfeil als visueller Hinweis, keine Themenliste/kein grosser CTA-Button mehr. */ .kanton-card { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s var(--ease), transform .15s var(--ease); } .kanton-card:hover { box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,.12)); transform: translateY(-2px); } .kanton-card__body { padding-top: .1rem; } .kanton-card__label { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; } .kanton-card__arrow { color: var(--accent-strong); transition: transform .15s var(--ease); } .kanton-card:hover .kanton-card__arrow { transform: translateX(3px); } .kanton-card .card__image img { height: 170px; } .card--region .card__image img { height: 110px; } .card--region .card__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .85rem; padding: .55rem 1rem; border-radius: 9px; background: var(--accent-strong); color: #fff; font-weight: 650; font-size: .88rem; } .card--region .card__cta::after { content: "\2192"; } .card--region:hover .card__cta { background: var(--accent); } /* Marktbericht-Footer (KISS-Vorschau, Session 12.8.2026): wenige, klar getrennte Abschnitte mit viel Weissraum statt eines Kartenrasters/einer Linkzeile - ruhige Trennlinie statt eigener Container/Schatten. */ .footer-nav { margin: 3.5rem 0 0; } .footer-section { padding: 3rem 0; border-top: 1px solid var(--line); } .footer-section:first-child { border-top: 0; padding-top: 0; } .footer-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .footer-section__head h2 { margin: 0 0 .35rem; font-size: 1.5rem; } .footer-section__lead { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 52ch; } .footer-section__all { font-weight: 650; font-size: .95rem; color: var(--accent-strong); text-decoration: none; white-space: nowrap; padding-bottom: .3rem; } .footer-section__all:hover { text-decoration: underline; } /* Die generische .card-grid nutzt auto-fill (Vorgabe für lange Listen mit vielen Karten) - bei nur 2-3 Karten reserviert das unsichtbare leere Spalten und lässt die Karten klein links kleben statt gross/luftig zu wirken. auto-fit lässt die vorhandenen Karten stattdessen den Platz untereinander aufteilen (echte "grosse, dezente Karten", explizite Vorgabe Session 12.8.2026 - nur innerhalb des Footer-Bereichs, damit andere, dichter befüllte Kartenraster site-weit unverändert bleiben). */ .footer-nav .card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .footer-nav .card--region { padding-bottom: 1.5rem; } .footer-nav .card--region .card__image img { height: 180px; } .footer-nav .card--region .card__title { font-size: 1.2rem; margin-top: .6rem; } /* Gemeinden-/Tool-Karten im Footer: dieselbe Basiskarte site-weit (Titel + Beschreibung + "Mehr erfahren →"), nur etwas grosszügiger als das Standardmass, damit sie neben den grösseren Regionskarten nicht winzig wirken - gebimo-Referenz, explizite Vorgabe Session 12.8.2026. */ .footer-nav .card:not(.card--region) { padding: 1.5rem; } .footer-nav .card:not(.card--region) .card__title { font-size: 1.08rem; } /* Ruhiger Abschluss-Panel statt einer 24-Kantone-Linkliste. */ .discover-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.25rem 1.5rem; text-align: center; } .discover-panel p { margin: 0 0 1.1rem; color: var(--muted); max-width: 46ch; margin-left: auto; margin-right: auto; } .discover-panel .cta-outline { display: inline-block; padding: .75rem 1.6rem; border-radius: 999px; border: 1.5px solid var(--accent-strong); color: var(--accent-strong); text-decoration: none; font-weight: 650; } .discover-panel .cta-outline:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; } /* Full-Bleed-Header: reicht bis zum Viewport-Rand (endgültiges Layout, Session 5.8.2026 - echte Fotos werden später einfach ausgetauscht, das Layout selbst ist final). max-height begrenzt die Bildhöhe auf breiten Bildschirmen, damit das Hero nicht ins Uferlose wächst. */ .hero-img { display: block; width: 100vw; max-width: 100vw; height: auto; max-height: min(68vh, 680px); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: var(--space-4); border-radius: 0; object-fit: cover; background: var(--stone, #12241d); } /* Randlose Variante: kein Bottom-Margin, sitzt bündig auf die Breadcrumb - nur für die Full-Bleed-Hero-Seiten, nicht sitesweit (dort bleibt der normale .hero-img-Abstand von 24px). */ .hero-img--bleed { margin-bottom: 0; } .topic__crumb-wrap { padding-top: 1.25rem; padding-bottom: .5rem; } /* Lesezeit + Aktualisiert-Datum (gebimo-Vorbild) - kleine, gedämpfte Metazeile unter/statt dem reinen Kicker. Etwas mehr Luft zu Breadcrumb und Titel (explizites Nutzer-Feedback, Session 17.8.2026: "etwas luftiger"). */ .topic__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1.1rem; } .topic__kicker, .kanton-hub__kicker { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 .35rem; } .kanton-hub__head { padding: var(--space-4) 0 var(--space-3); text-align: left; } .kanton-hub__lead { color: var(--muted); font-size: 1rem; margin: .5rem 0 0; max-width: 42rem; text-align: left; } .kanton-module { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-md); transition: box-shadow .18s var(--ease), transform .18s var(--ease); } .kanton-module:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .kanton-module__icon { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong); display: grid; place-items: center; margin-bottom: .8rem; } .kanton-module__icon svg { width: 22px; height: 22px; } .kanton-module .card__title { margin: 0 0 .6rem; font-size: 1.05rem; } .kanton-module__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .kanton-module__links a { font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; } .kanton-module__links a:hover { color: var(--accent-strong); text-decoration: underline; } .card--accent { border-left: 4px solid var(--accent); } /* Phasen / Prozess */ .phase { margin: var(--space-4) 0; } .phase__head { display: flex; align-items: center; gap: .8rem; margin-bottom: var(--space-2); } .phase__num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .phase__title { margin: 0; font-size: 1.15rem; } .phase__sub { margin: 0; font-size: .88rem; color: var(--muted); } /* Tool-Gerüst */ .tool__head { margin-bottom: var(--space-3); } .tool__head h1 { margin: .1rem 0 .5rem; } /* Vergleichstabelle */ .cmp-scroll { overflow-x: auto; } .cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 420px; } .cmp-table caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: .5rem; } .cmp-table th[scope="col"] { font-size: .82rem; color: var(--muted); text-align: center; padding: .5rem .6rem; border-bottom: 2px solid var(--line); } .cmp-table th[scope="col"]:first-child { text-align: left; } .cmp-table th[scope="row"] { text-align: left; font-weight: 500; padding: .5rem .6rem; border-bottom: 1px solid var(--line); } .cmp-table td { text-align: center; padding: .5rem .6rem; border-bottom: 1px solid var(--line); } .chk { font-weight: 700; } .chk--yes { color: var(--accent-strong); } .chk--part { color: #b8860b; } .chk--no { color: var(--line-strong, #b9c4c2); } /* Callout */ .callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-3) 0; } .callout__title { margin: 0 0 .3rem; font-weight: 700; } .callout__body { color: var(--muted); font-size: .92rem; } .callout--info { border-left-color: var(--accent); } /* --- Eigentümer-Dashboard --- */ .dash .phase:first-of-type { margin-top: var(--space-3); } /* --- Premium-Maklervergleich: Presets + Gewichtung --- */ .lv__presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; } .lv__presets-lab { font-size: .85rem; color: var(--muted); margin-right: .2rem; } .lv__presets button { font-size: .82rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; color: var(--ink); } .lv__presets button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; } .lv__wcell { text-align: center; } .lv__wcell input { width: 1.1rem; height: 1.1rem; } /* --- Makler-Profil & Hub: Leistungsumfang --- */ .makler-profil__scope, .hub-scope { margin-top: var(--space-4); } .makler-profil__scope h2, .hub-scope h2 { margin-bottom: .4rem; } /* --- Journey-Board (Client-Layer: persistente Verkaufsreise) --- */ .dash__board { margin: var(--space-3) 0 var(--space-4); } .dash__board h2 { margin-bottom: .6rem; } .jb-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); } .jb { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .jb__item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, #fff); } .jb__item--done { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); } .jb__item--next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .jb__mark { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; background: var(--surface); color: var(--muted); } .jb__item--done .jb__mark { background: var(--accent); color: var(--on-accent); } .jb__item--next .jb__mark { background: var(--accent); color: var(--on-accent); } .jb__link { flex: 1 1 auto; text-decoration: none; color: var(--ink); font-weight: 600; } .jb__link:hover { color: var(--accent-strong); } .jb__toggle { flex: 0 0 auto; font-size: .76rem; padding: .28rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; } .jb__item--done .jb__toggle { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .jb__rec { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--line); font-size: .95rem; } .jb__note { color: var(--muted); font-size: .85rem; } /* ====================================================================== PREMIUM-LAYER — hochwertigeres Erscheinungsbild (SaaS-Anmutung). Additiv am Ende: gewinnt bewusst im Cascade. Bewegung nur, wenn der Nutzer sie nicht abbestellt hat (prefers-reduced-motion). ====================================================================== */ :root { --shadow-sm: 0 1px 2px rgba(16,24,28,.05), 0 1px 3px rgba(16,24,28,.06); --shadow-md: 0 2px 6px rgba(16,24,28,.06), 0 8px 24px rgba(16,24,28,.07); --shadow-lg: 0 8px 30px rgba(16,24,28,.10), 0 20px 60px rgba(16,24,28,.10); --radius-lg: 16px; --accent-grad: linear-gradient(135deg, #3F5F4A 0%, #2F4A38 100%); --ease: cubic-bezier(.22,.61,.36,1); } body { background: radial-gradient(1200px 400px at 100% -10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent), var(--paper); } /* Header: sticky + weiche Trennung */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.1) blur(8px); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 1px 0 var(--line); } /* Buttons/CTAs: Tiefe + weicher Hover */ .cta-primary { box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .cta-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .cta-primary:active { transform: translateY(0); } /* Oberes Band = NAVIMO-Grün, unteres Band = Schwarz (gebimo-Layout übernommen, aber in Markenfarbe statt gebimo-Blau - Session 5.8.2026). */ .cta-band { background: var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .cta-band.cta-band--black { background: var(--cta-black); } .cta-band .cta-primary { color: var(--accent-strong); } .cta-band--black .cta-primary { color: var(--cta-black); } /* Full-Bleed-Bänder (.cta-band--next) sollen keine Rundung/keinen Schatten haben (Kante an Kante mit dem Viewport) - hier erneut erzwungen, weil diese spätere .cta-band-Regel sonst per Quellreihenfolge gewinnt. */ .cta-band--next { border-radius: 0; box-shadow: none; } .cta-band--next { position: relative; overflow: hidden; } .cta-band--next::after { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 120px at 12% 0%, rgba(255,255,255,.12), transparent); pointer-events: none; } /* Karten: Elevation + Lift - deutlich sichtbare Tiefe auf Off-White-Hintergrund statt der dünnen Haarlinie, die Karte und Seite fast verschmelzen liess. */ .card { box-shadow: var(--shadow-md); border-radius: var(--radius-lg); } .card--link { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .card--link:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .hub-feature, .jb-wrap { border-radius: var(--radius-lg); } /* Tool-/Rechner-Ergebnis: eigenständige, hellgraue Karte volle Breite (Vorbild gebimo.ch/rechner/verkaufskosten, Session 12.8.2026 - diese spätere Regel gewinnt in der Kaskade gegen die frühere .calc__result- Basisdeklaration weiter oben, daher hier die tatsächlich wirksamen Werte pflegen statt an zwei Stellen zu duplizieren). */ .calc__result { background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; padding: 2rem; margin-top: 0; } .calc__result:empty { display: none; } .calc__row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); } .calc__row:last-child { border-bottom: 0; } .calc__highlight { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 700; font-size: 1.05rem; color: var(--accent-strong); } .calc__highlight--ok { background: color-mix(in srgb, #1a7f37 12%, transparent); color: #14612a; } .calc__highlight--warn { background: color-mix(in srgb, #b8860b 14%, transparent); color: #7a5a06; } /* Tool-Formular: luftiger, klarer */ .calc__form, #lv-form, #ck-form { display: grid; gap: .85rem; } .calc__field { display: grid; gap: .3rem; } .calc__field label { font-size: .9rem; font-weight: 600; color: var(--muted); } .calc__field input, .lv__names input { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; background: var(--surface); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .calc__field input:focus, .lv__names input:focus, .lv__grid select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* Einheit (CHF/%/m²) sitzt als Badge im Feld statt als Textzusatz im Label - Zahl und Einheit direkt beieinander, wie in Finanz-Tools üblich. */ .calc__field-wrap { position: relative; } .calc__field-wrap input { padding-right: 3.4rem; } .calc__field-unit { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .45rem; pointer-events: none; } /* Tabellen: sanftes Zebra + Hover */ .lv__grid tbody tr:not(.lv__grouprow):hover, .cmp-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .lv__scores .lv__win { box-shadow: inset 3px 0 0 var(--accent); } /* Badges/Chips: etwas mehr Kontur */ .badge { box-shadow: var(--shadow-sm); } /* Dezente Einblend-Animation für Ergebnis + Karten */ @media (prefers-reduced-motion: no-preference) { @keyframes nvFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .calc__result:not(:empty) { animation: nvFade .28s var(--ease) both; } .phase { animation: nvFade .3s var(--ease) both; } .jb__item { transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } } /* Trust-Strip (Vertrauenselemente) */ .trust-strip { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .trust-strip__item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); } .trust-strip__item svg { flex: 0 0 auto; } .trust-strip__item b { color: var(--ink); font-weight: 650; } /* Mobile: Tap-Ziele + Abstände */ @media (max-width: 560px) { .cta-band { padding: 1rem; } .card { padding: 1rem; } .lv__presets button { padding: .45rem .8rem; } /* Der zusätzliche Platz unten war bisher auf ALLE .cta-band--next angewendet - traf also auch das grüne "Haupt-Band" mitten auf der Seite (z.B. Verkaufsfahrplan: "Bereit für den nächsten Schritt?", gefolgt von "Passende Themen"), nicht nur das schwarze Abschluss-Band direkt vor dem Footer. Wirkte dadurch aufgebläht (Nutzer-Feedback Session 21.8.2026: "CTA-Banner zu gross"). .cta-band--black ist laut _closing_cta_block() (pages.py) das tatsächliche Abschluss-Band auf allen Funnel-/Tool-Seiten (Cockpit, Dashboard, Verkaufsfahrplan, Dokumenten-Assistent, Bewertung) - nur dieses braucht den Puffer gegen die Fixed-Chat-Bubble unten rechts (Mobile-Audit-Befund, Session 18.8.2026). Eine DOM-Positions-Regel (:last-child) wäre fragiler: auf einigen Seiten folgt dem letzten CTA-Band noch ein