/* ========================================================================= KAPITALANLAGEIMMOBILIEN — eigene Bausteine ------------------------------------------------------------------------- Die Seite hat lange ohne eigenes Stylesheet ausgekommen: Sie benutzt .section-topic, .prose, .checklist, .highlight-box und .stat-row aus style.css. Das bleibt so. Neu dazugekommen sind drei Dinge, für die es nichts Passendes gab: die Cashflow-Rechnung, das Begriffsverzeichnis und die Fragenliste. Nur dafür ist diese Datei da. Ladereihenfolge: nach den übrigen Seitenstylesheets, vor mobil.css und navigation.css. Siehe die Kommentare im der Seite. ========================================================================= */ /* ========================================================================= DIE CASHFLOW-RECHNUNG ------------------------------------------------------------------------- Bewusst keine . Es sind vier Zeilen mit je einem Betrag, und eine Tabelle ohne Spaltenköpfe ist für einen Screenreader schlechter als eine Liste von Paaren. Auf dem Handy bleiben die beiden Spalten nebeneinander. Ein Betrag, der unter seiner Bezeichnung steht, ist keine Rechnung mehr. ========================================================================= */ .cf-tabelle { background: var(--white); border-radius: var(--r, 18px); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px); margin: 24px 0; font-family: var(--sans); } .cf-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(90, 60, 35, 0.09); font-size: 0.92rem; color: #5F4E42; line-height: 1.4; } .cf-zeile:first-child { padding-top: 0; } /* Der Betrag darf nie umbrechen und steht immer rechtsbündig. Zahlen, die je nach Zeile an einer anderen Stelle anfangen, kann man nicht überschlagen. */ .cf-zeile > span:last-child { flex: none; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; } .cf-plus { color: var(--sage-deep); } .cf-minus { color: #5F4E42; } .cf-summe { border-bottom: none; border-top: 2px solid var(--orange); margin-top: 6px; padding-top: 14px; padding-bottom: 0; font-weight: 700; color: var(--charcoal); font-size: 1rem; } .cf-summe > span:last-child { color: var(--orange-dark); font-size: 1.05rem; } /* ========================================================================= BEGRIFFSVERZEICHNIS ------------------------------------------------------------------------- Eine echte
. Begriff und Erklärung gehören inhaltlich zusammen, und das soll auch dann noch stimmen, wenn niemand die Gestaltung sieht. ========================================================================= */ .im-begriffe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); margin: 0 0 clamp(48px, 5vw, 76px); } .imb-eintrag { background: var(--white); border-radius: var(--r-sm, 12px); padding: clamp(18px, 2vw, 24px); } .imb-eintrag dt { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; margin-bottom: 8px; } .imb-eintrag dd { margin: 0; font-family: var(--sans); font-size: 0.88rem; color: #5F4E42; line-height: 1.68; } @media (max-width: 800px) { .im-begriffe { grid-template-columns: 1fr; } } /* ========================================================================= HÄUFIGE FRAGEN -------------------------------------------------------------------------
statt eines eigenen Akkordeons. Es klappt ohne JavaScript auf, die Tastatur bedient es von Haus aus, und die Browsersuche findet inzwischen auch Text in zugeklappten Bereichen. ========================================================================= */ .im-faq-titel { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); color: var(--charcoal); margin: 0 0 clamp(20px, 2.2vw, 30px); } .im-faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; } .im-frage { background: var(--white); border-radius: var(--r-sm, 12px); overflow: hidden; } .im-frage summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--charcoal); line-height: 1.4; } .im-frage summary::-webkit-details-marker { display: none; } /* Das Zeichen steht vor dem Text und dreht sich beim Öffnen. Ein Pluszeichen, das zum Minus wird, verlangt zwei Zeichen und zwei Zustände; ein gedrehtes Dreieck genügt. */ .im-frage summary::before { content: "▸"; color: var(--orange); flex: none; transition: transform 0.22s ease; } .im-frage[open] summary::before { transform: rotate(90deg); } .im-frage summary:hover { color: var(--orange-dark); } .imf-inhalt { padding: 0 20px 18px 44px; } .imf-inhalt p { font-family: var(--sans); font-size: 0.9rem; color: #5F4E42; line-height: 1.72; margin: 0 0 12px; } .imf-inhalt p:last-child { margin-bottom: 0; } @media (max-width: 560px) { .imf-inhalt { padding-left: 20px; } } @media (prefers-reduced-motion: reduce) { .im-frage summary::before { transition: none; } }