/* MyVacMoney – ergänzt Bootstrap 5, nach bootstrap.min.css einbinden */
:root{
  --mvm-bg:#F7F8F8; --mvm-ink:#12324A; --mvm-muted:#4A6274;
  --mvm-teal:#1F9AA6; --mvm-teal-dark:#137C87; --mvm-teal-darker:#0E5E66;
  --mvm-sun:#F6C453; --mvm-line:#E1E7E8; --mvm-line-soft:#EDF1F2; --mvm-input:#D5DDDF;
  --mvm-tint:#E3F0F1; --mvm-danger:#8A2E2E;
  --mvm-serif:'Young Serif',serif; --mvm-sans:'Figtree',system-ui,sans-serif;
}
body{background:var(--mvm-bg);color:var(--mvm-ink);font-family:var(--mvm-sans);-webkit-font-smoothing:antialiased}
a{color:var(--mvm-teal-dark);text-decoration:none}
a:hover{color:var(--mvm-teal-darker);text-decoration:underline}
.form-control,.form-select{border-radius:12px;border-color:var(--mvm-input);font-size:16px}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:var(--mvm-teal);box-shadow:0 0 0 .2rem rgba(31,154,166,.2)}
.form-check-input:checked{background-color:var(--mvm-teal-dark);border-color:var(--mvm-teal-dark)}
.form-label{font-weight:600;font-size:15px}
.field-validation-error,.validation-summary-errors{color:var(--mvm-danger);font-weight:600;font-size:14px}
.validation-summary-errors ul{margin:0;padding-left:18px}

/* Layout */
.mvm-shell{min-height:100vh;display:flex;flex-direction:column}
.mvm-shell main{flex:1}
.mvm-nav{background:var(--mvm-bg);border-bottom:1px solid var(--mvm-line);padding:14px 0;position:sticky;top:0;z-index:10}
.mvm-nav .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mvm-brand{display:flex;align-items:center;gap:10px;color:var(--mvm-ink)}
.mvm-brand:hover{color:var(--mvm-ink);text-decoration:none}
.mvm-brand span:last-child{font-family:var(--mvm-serif);font-size:22px;letter-spacing:-.01em}
.mvm-logo{width:30px;height:30px;border-radius:50%;background:var(--mvm-sun);position:relative;overflow:hidden;display:inline-block}
.mvm-logo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;background:var(--mvm-teal)}
.mvm-navlinks{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap;flex:1 1 auto}
.mvm-navlink{padding:7px 12px;border-radius:999px;font-weight:600;font-size:15px;color:var(--mvm-muted)}
.mvm-navlink:hover{color:var(--mvm-ink);text-decoration:none;background:var(--mvm-tint)}
.mvm-navlink.active{color:var(--mvm-ink);background:var(--mvm-tint)}
.mvm-account{display:flex;align-items:center;gap:10px;margin-left:auto}
.mvm-account-user{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding-right:14px;border-right:1px solid var(--mvm-line);white-space:nowrap}
.mvm-footer{border-top:1px solid var(--mvm-line);padding:24px 0;color:var(--mvm-muted);font-size:14px}
.mvm-footer .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mvm-footer nav{display:flex;gap:18px}

/* Buttons (ergänzen .btn) */
.btn-mvm{background:var(--mvm-teal-dark);color:#fff;border-radius:999px;padding:11px 22px;font-weight:600;border:0}
.btn-mvm:hover,.btn-mvm:focus{background:var(--mvm-teal-darker);color:#fff}
.btn-mvm-dark{background:var(--mvm-ink);color:#fff;border-radius:999px;padding:7px 18px;font-weight:600;font-size:15px}
.btn-mvm-dark:hover{background:#0B2233;color:#fff}
.btn-mvm-outline{border:1.5px solid var(--mvm-ink);color:var(--mvm-ink);border-radius:999px;padding:6px 16px;font-weight:600;font-size:15px}
.btn-mvm-outline:hover{background:var(--mvm-ink);color:#fff}
.btn-mvm-ghost{border:1.5px solid var(--mvm-input);color:var(--mvm-ink);border-radius:999px;padding:11px 24px;font-weight:600}
.btn-mvm-ghost:hover{border-color:var(--mvm-ink);color:var(--mvm-ink)}
.btn-mvm-sm{border:1px solid var(--mvm-input);border-radius:999px;padding:4px 12px;color:var(--mvm-ink);font-weight:600;font-size:14px;background:transparent}
.btn-mvm-sm:hover{background:var(--mvm-ink);color:#fff;border-color:var(--mvm-ink)}
.btn-mvm-sm.danger{color:var(--mvm-danger)}
.btn-mvm-sm.danger:hover{background:var(--mvm-danger);color:#fff;border-color:var(--mvm-danger)}
.btn-mvm-sm.primary{background:var(--mvm-teal-dark);border-color:var(--mvm-teal-dark);color:#fff}
.btn-mvm-sm.primary:hover{background:var(--mvm-teal-darker);border-color:var(--mvm-teal-darker)}
.mvm-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mvm-actions form{margin:0}

/* Seitenkopf */
.mvm-page{padding-top:44px;padding-bottom:64px}
.mvm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.mvm-kicker{font-size:14px;font-weight:600;color:var(--mvm-teal-dark);text-transform:uppercase;letter-spacing:.08em}
.mvm-h1{font-family:var(--mvm-serif);font-size:clamp(32px,4.5vw,46px);margin:6px 0 0;font-weight:400}
.mvm-back{font-weight:600;font-size:15px}

/* Flächen */
.mvm-card{background:#fff;border:1px solid var(--mvm-line);border-radius:24px}
.mvm-list{overflow:hidden}
.mvm-list-head{padding:16px 22px;border-bottom:1px solid var(--mvm-line-soft);font-weight:700}
.mvm-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--mvm-line-soft);flex-wrap:wrap}
.mvm-row:last-child{border-bottom:0}
.mvm-row:hover{background:#F6F9F9}
.mvm-row-main{flex:1;min-width:180px}
.mvm-row-title{font-weight:600;font-size:16px}
.mvm-row-sub{font-size:14px;color:var(--mvm-muted)}
.mvm-amount{font-weight:700;font-size:17px;white-space:nowrap}
.mvm-pill{background:var(--mvm-tint);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}
.mvm-muted{color:var(--mvm-muted)}

.mvm-avatar{width:38px;height:38px;border-radius:50%;background:var(--mvm-teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.mvm-avatar.sm{width:32px;height:32px;font-size:13px}
.mvm-avatar.md{width:40px;height:40px;font-size:17px}
.mvm-avatar.lg{width:48px;height:48px;font-size:20px}

/* Personen */
.mvm-person{padding:22px;display:flex;flex-direction:column;gap:14px;height:100%}
.mvm-person-name{font-weight:700;font-size:19px}
.mvm-kv{display:flex;justify-content:space-between;font-size:14px;color:var(--mvm-muted)}
.mvm-kv strong{color:var(--mvm-ink)}
.mvm-kv.first{border-top:1px solid var(--mvm-line-soft);padding-top:12px}

/* Urlaubskacheln */
.mvm-trip{display:flex;flex-direction:column;height:100%;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.mvm-trip:hover{border-color:var(--mvm-teal);box-shadow:0 12px 28px rgba(18,50,74,.08)}
.mvm-trip-link{display:flex;flex-direction:column;flex:1;color:var(--mvm-ink)}
.mvm-trip-link:hover{color:var(--mvm-ink);text-decoration:none}
.mvm-trip-band{height:96px;background:var(--mvm-teal);padding:16px;display:flex;align-items:flex-start;justify-content:flex-end}
.mvm-trip.closed .mvm-trip-band{background:var(--mvm-tint)}
.mvm-trip-tag{background:#fff;color:var(--mvm-teal-dark);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}
.mvm-trip.closed .mvm-trip-tag{color:var(--mvm-muted)}
.mvm-trip-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.mvm-trip-name{font-family:var(--mvm-serif);font-size:24px;line-height:1.15}
.mvm-trip-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--mvm-line-soft);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.mvm-trip-total{font-weight:700;font-size:22px}
.mvm-trip .mvm-actions{padding:0 22px 20px}

/* Ausgaben-Übersicht */
.mvm-stat{background:#fff;border:1px solid var(--mvm-line);border-radius:20px;padding:18px 20px}
.mvm-stat-label{font-size:14px;color:var(--mvm-muted)}
.mvm-stat-value{font-size:26px;font-weight:700}
.mvm-stat.dark{background:var(--mvm-ink);border-color:var(--mvm-ink);color:#fff}
.mvm-stat.dark .mvm-stat-label{color:#fff;opacity:.85}
.mvm-settle{background:#EAF4F5;border:1px solid #CFE5E7;border-radius:24px;padding:22px}
.mvm-settle h2{font-family:var(--mvm-serif);font-size:24px;margin:0 0 4px;font-weight:400}
.mvm-settle-item{background:#fff;border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.mvm-balance-pos{font-weight:700;white-space:nowrap;color:var(--mvm-teal-dark)}
.mvm-balance-neg{font-weight:700;white-space:nowrap;color:var(--mvm-ink)}

/* Formulare */
.mvm-form-wrap{max-width:620px;margin:0 auto;padding:44px 16px 64px}
.mvm-form{padding:28px;display:flex;flex-direction:column;gap:20px}
.mvm-form-h1{font-family:var(--mvm-serif);font-size:clamp(30px,4.5vw,42px);margin:10px 0 24px;font-weight:400}
.mvm-split{background:#F3FAFA;border:1px solid #CFE9EC;border-radius:16px;padding:16px 18px}
.mvm-split-people{margin-top:14px;padding-top:14px;border-top:1px solid #CFE9EC}
.mvm-form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mvm-link-danger{margin-left:auto;color:var(--mvm-danger);font-weight:600;background:none;border:0;padding:11px 8px}
.mvm-link-danger:hover{text-decoration:underline}

/* Login */
.mvm-login{max-width:420px;margin:0 auto;padding:64px 16px}
.mvm-login h1{font-family:var(--mvm-serif);font-size:38px;margin:0 0 8px;font-weight:400}
.mvm-login .mvm-form{padding:32px;gap:18px;box-shadow:0 20px 40px rgba(18,50,74,.06)}

/* Startseite */
.mvm-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--mvm-line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--mvm-muted);margin-bottom:24px}
.mvm-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mvm-teal-dark)}
.mvm-hero-h1{font-family:var(--mvm-serif);font-size:clamp(40px,6vw,68px);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance;font-weight:400}
.mvm-hero-lead{font-size:19px;line-height:1.55;color:var(--mvm-muted);max-width:480px;margin:0;text-wrap:pretty}
.mvm-beach{position:relative;border-radius:32px;overflow:hidden;height:440px;background:#CFE9EC}
.mvm-beach .sun{position:absolute;width:150px;height:150px;border-radius:50%;background:var(--mvm-sun);left:50%;top:22%;transform:translateX(-50%)}
.mvm-beach .sea{position:absolute;left:0;right:0;top:52%;bottom:0;background:var(--mvm-teal)}
.mvm-beach .wave{position:absolute;height:4px;border-radius:4px;background:#5FBFC7}
.mvm-beach .wave.w1{left:12%;right:38%;top:60%}
.mvm-beach .wave.w2{left:46%;right:10%;top:67%}
.mvm-beach .sand{position:absolute;left:-10%;right:-10%;bottom:-70px;height:160px;border-radius:50%;background:#E9EEEE}
.mvm-beach-card{position:absolute;background:#fff;box-shadow:0 12px 30px rgba(18,50,74,.16)}
.mvm-beach-card.debt{left:24px;bottom:28px;border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:12px}
.mvm-beach-card.total{right:24px;top:24px;border-radius:14px;padding:10px 14px;font-size:14px}
.mvm-steps{background:#fff;border-top:1px solid var(--mvm-line);border-bottom:1px solid var(--mvm-line)}
.mvm-step-no{font-family:var(--mvm-serif);font-size:40px;color:var(--mvm-teal-dark);line-height:1}
.mvm-steps h3{font-size:20px;font-weight:700;margin:12px 0 6px}
.mvm-steps p{color:var(--mvm-muted);margin:0;line-height:1.55}

/* Ausgabenliste: auf schmalen Bildschirmen festes Raster statt flex-wrap,
   damit der Betrag nicht je nach Breite des Inhalts mal neben, mal unter dem Text steht */
@media (max-width: 767.98px) {
    .mvm-expense-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 14px;
        row-gap: 10px;
        align-items: start;
    }

        .mvm-expense-row .mvm-row-main {
            min-width: 0;
        }

        .mvm-expense-row .mvm-actions {
            grid-column: 2 / -1;
        }
}