/* Seite /makler – nutzt Bausteine aus home.css und check.css */
.mk-hero { align-items: center; }
.mk-brand { position: relative; max-width: 440px; margin: 0 auto; width: 100%; }
.mk-band { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px 14px 0 0; background: #fff; color: #17211f; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.mk-band small { display: block; color: #5f6f6b; font-size: 12px; }
.mk-logo { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 10px; border: 2px dashed #e6b84f; color: #a07a12; font-size: 10px; font-weight: 800; text-align: center; line-height: 1.1; }
.mk-sheet { overflow: hidden; border-radius: 0 0 14px 14px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.mk-sheet img { display: block; width: 100%; aspect-ratio: 911 / 700; object-fit: cover; object-position: top; }
.mk-contact { position: absolute; right: -18px; bottom: 30px; padding: 10px 14px; border-radius: 12px; background: rgba(13,38,35,.95); border: 1px solid rgba(230,184,79,.4); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.mk-contact b { display: block; color: var(--accent); font-size: 13px; }
.mk-contact small { color: #cfe3dd; font-size: 12px; }
.mk-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); }
.mk-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.mk-table th, .mk-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); }
.mk-table th { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mk-table td:nth-child(2) { font-weight: 800; }
.mk-table tr.best td { background: rgba(230,184,79,.08); }
.mk-table tr:last-child td { border-bottom: 0; }
.mk-badge { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: #0b1f1d; font-size: 10px; font-weight: 800; }
.mk .note { margin-top: 14px; color: var(--muted); font-size: 13.5px; }
@media (max-width: 980px) { .mk-contact { right: 0; } }
/* ---- Zeitersparnis-Rechner ---- */
.rk { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; }
.rk-in, .rk-out { padding: 24px 26px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.rk-in { display: grid; gap: 22px; }
.rk-in label { display: grid; gap: 10px; font-weight: 700; }
.rk-in output { justify-self: end; margin-top: -30px; color: var(--accent); font-size: 1.25rem; font-weight: 800; }
.rk-in input[type=range] { width: 100%; accent-color: #e6b84f; }
.rk-in small { color: var(--muted); }
.rk-out { display: grid; gap: 10px; align-content: start; border-color: rgba(230,184,79,.4); background: linear-gradient(160deg, rgba(230,184,79,.10), rgba(255,255,255,.02)); }
.rk-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #cfe3dd; }
.rk-row i { font-style: normal; }
.rk-big { margin: 8px 0 6px; }
.rk-big span { display: block; color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.rk-big strong { display: block; font-size: 2.6rem; line-height: 1.1; color: var(--accent); }
.rk-big small { color: #cfe3dd; }
@media (max-width: 860px) { .rk { grid-template-columns: 1fr; } }

/* ---- Animationen Makler-Seite ----
 * Fuer Dummies: Beim Laden "landet" das Logo wie ein Stempel auf dem Bericht, die Kontaktkarte schwebt,
 * beim Scrollen gleiten Karten nacheinander herein. Bei "Bewegung reduzieren" ist alles sofort da.
 */
.js-motion .mk-anim .mk-band { animation: mk-drop .7s .15s cubic-bezier(.2,.8,.2,1) both; }
.js-motion .mk-anim .mk-sheet { animation: mk-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.js-motion .mk-anim .mk-logo { animation: mk-stamp .55s .85s cubic-bezier(.3,1.6,.5,1) both, mk-dash 2.4s 1.6s ease-in-out 2; }
.js-motion .mk-anim .mk-band b { animation: mk-type .6s 1.1s ease both; }
.js-motion .mk-anim .mk-band small { animation: mk-type .6s 1.3s ease both; }
.js-motion .mk-anim .mk-contact { animation: mk-pop .6s 1.5s cubic-bezier(.2,.8,.2,1) both, mk-float 6s 2.1s ease-in-out infinite; }
.mk-brand { transition: transform .25s ease-out; transform-style: preserve-3d; }
@keyframes mk-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mk-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-12deg); } 70% { opacity: 1; transform: scale(.92) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes mk-dash { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,184,79,0); } 50% { box-shadow: 0 0 0 7px rgba(230,184,79,.22); } }
@keyframes mk-type { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes mk-pop { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes mk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Karten, Schritte und Tabellenzeilen nacheinander */
.js-motion .mk-grid .data-card:nth-child(2), .js-motion .steps .step:nth-child(2) { transition-delay: .1s; }
.js-motion .mk-grid .data-card:nth-child(3), .js-motion .steps .step:nth-child(3) { transition-delay: .2s; }
.js-motion .mk-grid .data-card:nth-child(4) { transition-delay: .3s; }
.js-motion .steps .step.is-in .step-num { animation: mk-stamp .5s .25s cubic-bezier(.3,1.6,.5,1) both; }
.js-motion .mk-table-wrap tbody tr { opacity: 0; transform: translateX(-14px); transition: opacity .45s ease, transform .45s ease; }
.js-motion .mk-table-wrap.is-in tbody tr { opacity: 1; transform: none; }
.js-motion .mk-table-wrap.is-in tbody tr:nth-child(2) { transition-delay: .08s; } .js-motion .mk-table-wrap.is-in tbody tr:nth-child(3) { transition-delay: .16s; }
.js-motion .mk-table-wrap.is-in tbody tr:nth-child(4) { transition-delay: .24s; } .js-motion .mk-table-wrap.is-in tbody tr:nth-child(5) { transition-delay: .32s; }
.mk-badge { background: linear-gradient(100deg, #e6b84f 30%, #fff1c4 50%, #e6b84f 70%) 0 0 / 250% 100%; animation: mk-shine 3.5s ease-in-out infinite; }
@keyframes mk-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -100% 0; } }

/* Rechner: Ersparnis blinkt kurz, wenn sich die Zahl aendert */
#rk-spar.bump { animation: mk-bump .45s ease; }
@keyframes mk-bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); text-shadow: 0 0 22px rgba(230,184,79,.55); } 100% { transform: scale(1); } }
#rk-spar { display: inline-block; transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .mk-anim *, .mk-badge, #rk-spar { animation: none !important; }
}