/* ============================================================
   Mein Haushaltsbuch – Produktseite, Anleitung, Umstieg
   Zusätzlich zu css/style.css. Alles unter body.page-budget,
   damit die übrigen Seiten unberührt bleiben.
   Farbwelt: Farbschema „Korall“ der App (Theme-coral.json).
   ============================================================ */

body.page-budget {
  --text-muted: #6b625e;
  /* Werte aus Theme-coral.json der App (light/dark) */
  --hb-ink: #1c1917;          /* primaryText light */
  --hb-ink-2: #2a2320;        /* elevatedSurface dark */
  --hb-dark: #15110f;         /* background dark */
  --hb-dark-card: #1f1a18;    /* surface dark */
  --hb-dark-line: #3a302c;    /* border dark */
  --hb-dark-text: #f7f2ef;    /* primaryText dark */
  --hb-dark-muted: #c9bdb7;   /* secondaryText dark */
  --hb-coral: #c4391a;        /* accent light */
  --hb-coral-2: #ff9a7b;      /* secondaryAccent light */
  --hb-coral-dark: #ff8a6e;   /* accent dark */
  --hb-coral-deep: #c4391a;   /* Verlauf-Startton = accent */
  --hb-muted: #6b625e;        /* secondaryText light */
  --hb-line: #efe4df;         /* border light */
  --hb-card: #ffffff;         /* surface light */
  --hb-soft: #fbf7f5;         /* background light */
  --hb-soft-2: #fff4f0;       /* previewColors.secondary */
  --hb-ok: #1f7a43;
  --hb-warn: #f2a100;
  --hb-bad: #c93338;
  --hb-info: #3b82f6;
  --hb-shadow: 0 24px 60px -28px rgba(58, 34, 25, .4);
  --hb-hdr: 60px;
  /* Verlauf wie Startbildschirm und Sperrseite der App (LockBackdrop): sieben weichgezeichnete
     Flächen, abwechselnd dunkles Rot (Ausgaben) und dunkles Grün (Einnahmen) auf dem dunklen Korall-Grund. */
  --hb-blob-red: 140, 59, 59;     /* expense dark #FF6B6B, 45 % Schwarz */
  --hb-blob-green: 42, 111, 67;   /* income dark #4CC97A, 45 % Schwarz */
  --hb-launch:
    radial-gradient(ellipse 40% 75% at 12% 10%, rgba(var(--hb-blob-red), .78) 0%, transparent 70%),
    radial-gradient(ellipse 40% 75% at 90% 18%, rgba(var(--hb-blob-green), .78) 0%, transparent 70%),
    radial-gradient(ellipse 42% 80% at 50% 35%, rgba(var(--hb-blob-red), .7) 0%, transparent 70%),
    radial-gradient(ellipse 40% 75% at 8% 62%, rgba(var(--hb-blob-green), .72) 0%, transparent 70%),
    radial-gradient(ellipse 40% 75% at 92% 72%, rgba(var(--hb-blob-red), .72) 0%, transparent 70%),
    radial-gradient(ellipse 42% 80% at 40% 95%, rgba(var(--hb-blob-green), .72) 0%, transparent 70%),
    radial-gradient(ellipse 40% 75% at 70% 55%, rgba(var(--hb-blob-red), .6) 0%, transparent 70%),
    var(--hb-dark);
  --accent-a: var(--hb-coral-deep);
  --accent-b: var(--hb-coral-2);
}
body.page-budget .reveal { will-change: opacity, transform; }
html.no-js body.page-budget .reveal { opacity: 1; transform: none; }
body.page-budget section[id] { scroll-margin-top: calc(var(--hb-hdr) + 60px); }
body.page-budget .section[style*="--bg-alt"] { background: var(--hb-soft) !important; }
body.page-budget .section h2 { letter-spacing: -.8px; font-size: clamp(28px, 4vw, 38px); }
.hb-vh, .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Hinweis für Bestandskunden (Overlay) ---------- */
.hb-upd { width: min(640px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 26px; background: var(--hb-card); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55); }
.hb-upd::backdrop { background: rgba(28, 25, 23, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hb-upd-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px 16px; background: linear-gradient(135deg, var(--hb-coral), var(--hb-coral-2)); color: #fff; border-radius: 26px 26px 0 0; }
.hb-upd-head img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.hb-upd-head b { display: block; font-size: 20px; letter-spacing: -.3px; }
.hb-upd-head span { display: block; font-size: 13.5px; opacity: .92; }
.hb-upd-body { padding: 20px 26px 8px; font-size: 15px; line-height: 1.6; }
.hb-upd-body p { margin: 0 0 12px; }
.hb-upd-body ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.hb-upd-body li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--hb-soft); }
.hb-upd-body li svg { flex: none; width: 20px; height: 20px; color: var(--hb-coral-deep); margin-top: 2px; }
.hb-upd-note { padding: 12px 14px; border-radius: 12px; background: #fff7e0; color: #6b4a00; border: 1px solid #f0d28a; font-size: 14px; }
.hb-upd-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; padding: 14px 26px 22px; }
.hb-upd-foot label { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); min-height: 44px; cursor: pointer; }
.hb-upd-foot input { width: 18px; height: 18px; accent-color: var(--hb-coral); }
.hb-upd-banner { background: #fff7e0; color: #6b4a00; border-bottom: 1px solid #f0d28a; font-size: 14px; }
.hb-upd-banner .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.hb-upd-banner p { margin: 0; flex: 1 1 320px; }
.hb-upd-banner button, .hb-upd-banner a.hb-btn { min-height: 40px; font-size: 13.5px; padding: 0 14px; }
@media (max-width: 560px) { .hb-upd-body, .hb-upd-head, .hb-upd-foot { padding-left: 18px; padding-right: 18px; } }

/* ---------- Buttons ---------- */
.hb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.hb-btn:hover { text-decoration: none; transform: translateY(-2px); }
.hb-btn:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 3px; }
.hb-btn-primary { color: #fff; background: linear-gradient(135deg, var(--hb-coral-deep), var(--hb-coral)); box-shadow: 0 10px 24px -10px rgba(232, 80, 47, .8); }
.hb-btn-ghost { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.hb-btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.hb-btn-dark { color: var(--hb-ink); background: var(--hb-soft); border-color: var(--hb-line); }
.hb-btn-dark:hover { background: var(--hb-soft-2); }
.hb-btn-sm { min-height: 40px; font-size: 13.5px; padding: 0 14px; }
.hb-btn[disabled] { opacity: .45; cursor: default; transform: none; }

/* ---------- Hero ---------- */
.hb-hero { position: relative; overflow: hidden; color: #fff; padding: 72px 0 96px; background: var(--hb-launch); }
.hb-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hb-hero .container { position: relative; z-index: 1; }
.hb-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; }
.hb-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; letter-spacing: .2px; margin-bottom: 22px; }
.hb-eyebrow img { width: 26px; height: 26px; border-radius: 7px; }
.hb-hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -1.6px; margin: 0 0 18px; font-weight: 800; color: #fff; }
.hb-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--hb-coral-2), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hb-hero .hb-sub { font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .82); max-width: 580px; margin: 0 0 30px; }
.hb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; }
.hb-cta .appstore-badge img { height: 52px; width: auto; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.hb-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.hb-chips svg { width: 15px; height: 15px; flex: none; color: var(--hb-coral-2); }
.hb-hero-visual { position: relative; display: flex; justify-content: center; }
.hb-device { width: min(270px, 70%); aspect-ratio: 1320 / 2868; border-radius: 38px; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1.5px rgba(255, 255, 255, .25); transform: rotate(3deg); animation: hbFloat 7s ease-in-out infinite; background: var(--hb-dark-card); }
.hb-device img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: var(--hb-ink); font-size: 13px; font-weight: 700; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
.hb-float small { display: block; font-weight: 500; color: var(--text-muted); font-size: 11px; }
.hb-float svg { width: 22px; height: 22px; color: var(--hb-coral-deep); flex: none; }
.hb-float.f1 { left: -4%; top: 16%; animation: hbFloat 6s ease-in-out .4s infinite; }
.hb-float.f2 { right: -4%; bottom: 14%; animation: hbFloat 8s ease-in-out 1s infinite; }
@keyframes hbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 900px) {
  .hb-hero { padding: 48px 0 72px; }
  .hb-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hb-device { width: min(230px, 62%); }
  .hb-float.f1 { left: 2%; } .hb-float.f2 { right: 2%; }
}

/* ---------- Kennzahlen ---------- */
.hb-stats-wrap { margin-top: -48px; position: relative; z-index: 2; }
.hb-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--hb-card); border: 1px solid var(--hb-line); border-radius: 24px; box-shadow: var(--hb-shadow); overflow: hidden; }
.hb-stat { padding: 24px 20px; text-align: center; border-right: 1px solid var(--hb-line); }
.hb-stat:last-child { border-right: 0; }
.hb-stat b { display: block; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; background: linear-gradient(90deg, var(--hb-coral-deep), var(--hb-coral-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hb-stat span { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 720px) {
  .hb-stats { grid-template-columns: repeat(2, 1fr); }
  .hb-stat:nth-child(2) { border-right: 0; }
  .hb-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hb-line); }
}

/* ---------- Seiten-Navigation ---------- */
.hb-subnav { position: sticky; top: var(--hb-hdr); z-index: 40; margin-top: 28px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--hb-line); }
.hb-subnav .container { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.hb-subnav .container::-webkit-scrollbar { display: none; }
.hb-subnav a { flex: none; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: background .2s, color .2s; }
.hb-subnav a:hover { text-decoration: none; background: var(--hb-soft); color: var(--text); }
.hb-subnav a.is-active { background: var(--hb-ink); color: #fff; }
.hb-subnav a:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 1px; }
.hb-kicker { display: block; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hb-coral-deep); margin-bottom: 10px; }

/* ---------- Rundgang ---------- */
.hb-tour { max-width: 980px; margin: 32px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.hb-tour-stage { position: relative; border-radius: 30px; box-shadow: var(--hb-shadow); border: 1px solid var(--hb-line); background: #fff; max-width: 330px; justify-self: center; width: 100%; }
.hb-tour-stage img { display: block; width: 100%; height: auto; border-radius: 30px; }
.hb-spot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; padding: 0; cursor: pointer; display: grid; place-items: center; font: inherit; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--hb-warn), var(--hb-coral-deep)); box-shadow: 0 8px 20px -6px rgba(58, 34, 25, .6); transition: transform .2s var(--ease), background .2s; }
.hb-spot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--hb-warn); opacity: 0; animation: hbPulse 2.4s ease-out infinite; }
.hb-spot[aria-pressed="true"] { background: linear-gradient(135deg, var(--hb-ink), var(--hb-ink-2)); transform: scale(1.15); }
.hb-spot[aria-pressed="true"]::after { border-color: var(--hb-ink); }
.hb-spot:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 4px; }
@keyframes hbPulse { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.5); } }
.hb-tour-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-tour-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--hb-line); background: #fff; transition: border-color .25s, box-shadow .25s; }
.hb-tour-list li i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 14px; color: var(--hb-coral-deep); background: var(--hb-soft-2); }
.hb-tour-list li b { display: block; color: var(--hb-ink); font-size: 16px; }
.hb-tour-list li span { color: var(--text-muted); font-size: 14px; }
.hb-tour-list li.is-on { border-color: var(--hb-coral); box-shadow: 0 14px 30px -22px rgba(232, 80, 47, .6); }
.hb-tour-list li.is-on i { color: #fff; background: linear-gradient(135deg, var(--hb-coral-deep), var(--hb-coral-2)); }
@media (max-width: 820px) { .hb-tour { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hb-spot { width: 26px; height: 26px; font-size: 12px; border-width: 2px; } .hb-spot::after { inset: -6px; } }

/* ---------- Galerie ---------- */
.hb-gtabs { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 26px auto 0; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--hb-line); overflow-x: auto; scrollbar-width: none; }
.hb-gtab { appearance: none; cursor: pointer; min-height: 44px; min-width: 96px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; color: var(--text-muted); background: transparent; transition: background .25s, color .25s; flex: none; }
.hb-gtab:hover { color: var(--hb-ink); }
.hb-gtab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--hb-coral-deep), var(--hb-coral-2)); }
.hb-gtab:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 2px; }
.hb-gpanel { animation: hbPanel .45s var(--ease) both; }
.hb-gpanel[hidden] { display: none; }
@keyframes hbPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hb-devline { list-style: none; margin: 18px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hb-devline li { padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--hb-ink); background: #fff; border: 1px solid var(--hb-line); }
body.page-budget .carousel { max-width: 940px; }
body.page-budget .carousel.hb-gal-pad { --per-view: 2; max-width: 760px; }
body.page-budget .carousel.hb-gal-wide { --per-view: 1; max-width: 900px; }
@media (max-width: 560px) { body.page-budget .carousel.hb-gal-pad { --per-view: 1; max-width: 300px; } }
body.page-budget .carousel-slide img { flex: none; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(58, 34, 25, .55); }
.hb-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 24px; }
.hb-zoom img { display: block; width: 100%; transition: transform .35s var(--ease); }
.hb-zoom:hover img { transform: translateY(-4px); }
.hb-zoom:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 4px; }
.hb-zoom::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(28, 25, 23, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 22px no-repeat; opacity: .85; pointer-events: none; }
.hb-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(21, 17, 15, .94); color: var(--hb-dark-text); }
.hb-lb::backdrop { background: rgba(10, 6, 4, .6); }
.hb-lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: hbLbIn .25s var(--ease); }
@keyframes hbLbIn { from { transform: translateY(10px) scale(.99); } to { transform: none; } }
.hb-lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.hb-lb-count { font-size: 14px; font-weight: 600; color: var(--hb-dark-muted); }
.hb-lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 72px; touch-action: pan-y; }
.hb-lb-stage img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.hb-lb-cap { margin: 0; padding: 12px 16px 20px; text-align: center; font-size: 15px; color: var(--hb-dark-text); }
.hb-lb-cap:empty { display: none; }
.hb-lb button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: 26px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.hb-lb button:hover { background: rgba(255, 255, 255, .26); }
.hb-lb button:focus-visible { outline: 3px solid var(--hb-coral-2); outline-offset: 2px; }
.hb-lb-prev, .hb-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.hb-lb-prev { left: 12px; } .hb-lb-next { right: 12px; }
@media (max-width: 640px) {
  .hb-lb-stage { padding: 0 8px; }
  .hb-lb-prev, .hb-lb-next { top: auto; bottom: -60px; transform: none; }
  .hb-lb-prev { left: calc(50% - 60px); } .hb-lb-next { right: calc(50% - 60px); }
  .hb-lb-cap { padding-top: 72px; }
  .hb-lb-stage img { max-height: calc(100dvh - 230px); }
}

/* ---------- Platzhalterbilder (bis echte Screenshots vorliegen) ---------- */
.hb-ph { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; text-align: center; background: linear-gradient(160deg, var(--hb-dark-card), var(--hb-ink-2)); }
img.hb-phimg { background: linear-gradient(160deg, var(--hb-dark-card), var(--hb-ink-2)); }

/* ---------- Bento-Karten ---------- */
.hb-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.hb-bt { grid-column: span 2; position: relative; overflow: hidden; padding: 26px; border-radius: 26px; background: var(--hb-card); border: 1px solid var(--hb-line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hb-bt:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(58, 34, 25, .5); }
.hb-bt.w3 { grid-column: span 3; } .hb-bt.w4 { grid-column: span 4; } .hb-bt.w6 { grid-column: span 6; }
.hb-bt h3 { margin: 14px 0 8px; font-size: 19px; letter-spacing: -.3px; color: var(--hb-ink); }
.hb-bt p { margin: 0; color: var(--text-muted); font-size: 15px; }
.hb-bt ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hb-bt li { display: flex; gap: 9px; font-size: 14.5px; color: var(--text-muted); }
.hb-bt li::before { content: "✓"; color: var(--hb-ok); font-weight: 800; flex: none; }
.hb-tico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--hb-coral-deep), var(--hb-coral-2)); }
.hb-tico svg { width: 24px; height: 24px; }
.hb-bt.is-dark { background: var(--hb-launch); border-color: transparent; color: #fff; }
.hb-bt.is-dark h3 { color: #fff; }
.hb-bt.is-dark p, .hb-bt.is-dark li { color: rgba(255, 255, 255, .78); }
.hb-bt.is-dark .hb-tico { background: rgba(255, 255, 255, .14); }
.hb-bt .hb-tag { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: var(--hb-soft-2); color: var(--hb-coral-deep); }
.hb-bt.is-dark .hb-tag { background: rgba(255, 255, 255, .14); color: #fff; }
body.page-budget .section[style*="--bg-alt"] .hb-bt:not(.is-dark) { background: #fff; }
@media (max-width: 900px) { .hb-bt, .hb-bt.w3, .hb-bt.w4 { grid-column: span 3; } .hb-bt.w6 { grid-column: span 6; } }
@media (max-width: 600px) { .hb-bt, .hb-bt.w3, .hb-bt.w4, .hb-bt.w6 { grid-column: 1 / -1; } }

/* ---------- Bild + Text nebeneinander ---------- */
.hb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1000px; margin: 30px auto 0; }
.hb-split.is-rev > :first-child { order: 2; }
.hb-split h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.5px; color: var(--hb-ink); }
.hb-split p { margin: 0 0 14px; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }
.hb-split ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hb-split li { display: flex; gap: 10px; font-size: 15px; color: var(--text-muted); }
.hb-split li::before { content: "✓"; color: var(--hb-ok); font-weight: 800; flex: none; }
.hb-shot { border-radius: 26px; overflow: hidden; box-shadow: var(--hb-shadow); border: 1px solid var(--hb-line); background: #fff; justify-self: center; width: 100%; }
.hb-shot.is-phone { max-width: 300px; aspect-ratio: 1320 / 2868; border-radius: 38px; }
.hb-shot.is-pad { max-width: 460px; aspect-ratio: 2064 / 2752; }
.hb-shot.is-mac { max-width: 100%; aspect-ratio: 1440 / 900; }
.hb-shot.is-watch { max-width: 200px; aspect-ratio: 410 / 502; border-radius: 44px; }
.hb-shot.is-widget { max-width: 400px; aspect-ratio: 4 / 3; }
.hb-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .hb-split { grid-template-columns: 1fr; gap: 24px; } .hb-split.is-rev > :first-child { order: 0; } }

/* ---------- Ablauf (Schritte) ---------- */
.hb-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; counter-reset: flow; margin-top: 30px; }
.hb-flow-step { position: relative; padding: 26px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--hb-line); counter-increment: flow; }
.hb-flow-step::before { content: counter(flow); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; margin-bottom: 12px; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--hb-coral-deep), var(--hb-coral-2)); }
.hb-flow-step h3 { margin: 0 0 6px; font-size: 18px; color: var(--hb-ink); }
.hb-flow-step p { margin: 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 640px) { .hb-flow { grid-template-columns: 1fr; } }

/* ---------- Dunkle Abschnitte ---------- */
.hb-darksec { background: var(--hb-launch); color: #fff; }
.hb-darksec h2, .hb-darksec h3 { color: #fff; }
.hb-darksec p.lead { color: rgba(255, 255, 255, .75); }
.hb-darksec .hb-kicker { color: var(--hb-coral-2); }
.hb-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 30px; }
.hb-keys.hb-keys-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
.hb-keycard { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.hb-keycard b { display: block; color: #fff; margin-bottom: 3px; }
.hb-keycard span.d { color: rgba(255, 255, 255, .72); font-size: 14.5px; }
.hb-keycard .hb-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--hb-coral-deep), var(--hb-coral-2)); color: #fff; }
.hb-keycard .hb-ico svg { width: 22px; height: 22px; }
.hb-key { display: inline-block; font: 700 12px ui-monospace, "SF Mono", Menlo, monospace; padding: 3px 8px; border-radius: 7px; background: var(--hb-ink-2); border: 1px solid var(--hb-dark-line); border-bottom-width: 3px; color: #fff; white-space: nowrap; margin-right: 4px; }
@media (max-width: 680px) { .hb-keys.hb-keys-2 { grid-template-columns: 1fr; } }

/* ---------- Geräte ---------- */
.hb-devs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.hb-dev { background: #fff; border: 1px solid var(--hb-line); border-radius: 26px; padding: 24px; }
.hb-dev h3 { margin: 12px 0 10px; font-size: 20px; color: var(--hb-ink); }
.hb-dev ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hb-dev li { display: flex; gap: 9px; font-size: 14.5px; color: var(--text-muted); }
.hb-dev li::before { content: "✓"; color: var(--hb-ok); font-weight: 800; flex: none; }
.hb-dev li.is-no::before { content: "–"; color: var(--text-muted); }
@media (max-width: 1000px) { .hb-devs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hb-devs { grid-template-columns: 1fr; } }

/* ---------- Direkt ausprobieren ---------- */
.hb-lab { background: var(--hb-launch); color: #fff; }
.hb-lab .section h2, .hb-lab h2 { color: #fff; }
.hb-lab p.lead { color: rgba(255, 255, 255, .72); }
.hb-lab .hb-kicker { color: var(--hb-coral-2); }
.hb-tabs { display: flex; gap: 6px; padding: 6px; margin: 0 auto 36px; width: fit-content; max-width: 100%; overflow-x: auto; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); scrollbar-width: none; }
.hb-tabs::-webkit-scrollbar { display: none; }
.hb-tab { flex: none; appearance: none; border: 0; cursor: pointer; padding: 11px 18px; border-radius: 13px; font: inherit; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .78); background: transparent; transition: background .2s, color .2s; }
.hb-tab:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hb-tab[aria-selected="true"] { background: #fff; color: var(--hb-ink); }
.hb-tab:focus-visible { outline: 3px solid var(--hb-coral-2); outline-offset: 2px; }
.hb-panel[hidden] { display: none; }
.hb-panel { animation: hbPanel .45s var(--ease) both; }
.hb-tool { max-width: 980px; margin: 0 auto; background: var(--hb-card); color: var(--text); border-radius: 28px; padding: 30px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.hb-tool h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.4px; color: var(--hb-ink); }
.hb-tool > p { margin: 0 0 20px; color: var(--text-muted); }
.hb-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--text-muted); }
.hb-tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 820px) { .hb-tool-grid { grid-template-columns: 1fr; } .hb-tool { padding: 20px; border-radius: 22px; } }

/* Telefon-Attrappe (reine HTML-Nachbildung, kein Screenshot) */
.hb-phone { --pa: var(--hb-coral); --pa2: var(--hb-coral-2); --pbg: #fbf7f5; --pcard: #fff; --ptext: #1c1917; --pmuted: #6b625e; --pline: #efe4df; width: min(320px, 100%); margin: 0 auto; border-radius: 40px; padding: 10px; background: #1c1917; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.hb-phone.is-dark { --pbg: #15110f; --pcard: #1f1a18; --ptext: #f7f2ef; --pmuted: #c9bdb7; --pline: #3a302c; --pa: var(--pa-dark, #ff8a6e); }
.hb-screen { border-radius: 32px; background: var(--pbg); color: var(--ptext); padding: 14px 14px 16px; min-height: 520px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; transition: background .3s, color .3s; }
.hb-screen .ph-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; color: var(--pmuted); }
.hb-screen .ph-title { text-align: center; font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
.hb-screen .ph-period { text-align: center; font-size: 11px; color: var(--pmuted); margin-top: -8px; }
.hb-screen .ph-acc { align-self: center; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pa) 5%, transparent); color: var(--pa); font-weight: 700; font-size: 12px; }
.hb-screen .ph-hero { border-radius: 18px; padding: 18px 14px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--pa), var(--pa2)); transition: background .3s; }
.hb-screen .ph-hero b { display: block; font-size: 28px; letter-spacing: -.8px; }
.hb-screen .ph-hero span { font-size: 12px; opacity: .92; }
.hb-screen .ph-card { border-radius: 16px; background: var(--pcard); padding: 4px 12px; border: 1px solid var(--pline); transition: background .3s; }
.hb-screen .ph-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--pline); font-size: 13px; color: var(--pmuted); }
.hb-screen .ph-row:last-child { border-bottom: 0; }
.hb-screen .ph-row b { color: var(--ptext); }
.hb-screen .ph-row .in { color: #1f7a43; font-weight: 700; } .hb-screen .ph-row .out { color: #c93338; font-weight: 700; }
.hb-screen .ph-row.ph-sum { font-weight: 800; color: var(--ptext); }
.hb-screen .ph-bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--pa) 18%, transparent); overflow: hidden; margin: 6px 0; }
.hb-screen .ph-bar i { display: block; height: 100%; width: 46%; background: var(--pa); border-radius: 8px; transition: width .5s var(--ease), background .3s; }
.hb-screen .ph-free { font-size: 12px; color: var(--pmuted); padding: 6px 0; }
.hb-screen .ph-free b { color: var(--ptext); }
.hb-screen .ph-quick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--pcard); border: 1px dashed var(--pline); color: var(--pmuted); font-size: 12px; }
.hb-screen .ph-quick svg { width: 16px; height: 16px; color: var(--pa); flex: none; }
.hb-screen .ph-list { font-size: 12.5px; }
.hb-screen .ph-list .ph-row { padding: 7px 0; }
.hb-screen .ph-fab { align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; background: var(--pa); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 300; margin-top: auto; box-shadow: 0 10px 20px -10px var(--pa); }
.hb-screen .ph-tabs { display: flex; justify-content: space-around; padding: 8px 4px 0; border-top: 1px solid var(--pline); font-size: 9.5px; color: var(--pmuted); font-weight: 600; }
.hb-screen .ph-tabs span.on { color: var(--pa); }
.hb-screen [data-lvl] { display: none; }
.hb-screen.lvl-minimal [data-lvl~="minimal"], .hb-screen.lvl-simple [data-lvl~="simple"], .hb-screen.lvl-budget [data-lvl~="budget"], .hb-screen.lvl-standard [data-lvl~="standard"], .hb-screen.lvl-expert [data-lvl~="expert"] { display: flex; }
.hb-screen.lvl-minimal .ph-hero b { font-size: 36px; }
.hb-screen .ph-more { justify-content: center; color: var(--pa); font-weight: 700; font-size: 12px; cursor: default; }

/* Steuerung neben dem Telefon */
.hb-ctl { display: grid; gap: 18px; }
.hb-ctl h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); }
.hb-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-seg button { appearance: none; cursor: pointer; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hb-line); background: var(--hb-soft); font: inherit; font-size: 14px; font-weight: 700; color: var(--text-muted); transition: background .2s, color .2s, border-color .2s; }
.hb-seg button[aria-pressed="true"] { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; }
.hb-seg button:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 2px; }
.hb-seg-desc { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); min-height: 42px; }
.hb-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-sw { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 999px; border: 2px solid var(--hb-line); background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--hb-ink); }
.hb-sw i { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 2px #fff; }
.hb-sw[aria-pressed="true"] { border-color: var(--hb-ink); }
.hb-sw:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 2px; }
.hb-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 14px; cursor: pointer; }
.hb-toggle input { width: 20px; height: 20px; accent-color: var(--hb-coral); }

/* Schnell buchen */
.hb-input-wrap { position: relative; margin-bottom: 12px; }
.hb-input-wrap input { width: 100%; min-height: 54px; border-radius: 16px; border: 2px solid var(--hb-line); background: #fff; padding: 0 18px; font: inherit; font-size: 17px; color: var(--text); }
.hb-input-wrap input:focus-visible { outline: none; border-color: var(--hb-coral); box-shadow: 0 0 0 4px rgba(255, 107, 74, .18); }
.hb-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.hb-examples button { appearance: none; cursor: pointer; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hb-line); background: var(--hb-soft); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.hb-examples button:hover { border-color: var(--hb-coral); color: var(--hb-coral-deep); }
.hb-form { display: grid; gap: 2px; border-radius: 18px; border: 1px solid var(--hb-line); overflow: hidden; background: #fff; }
.hb-form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hb-line); font-size: 14.5px; }
.hb-form-row:last-child { border-bottom: 0; }
.hb-form-row span { color: var(--text-muted); }
.hb-form-row b { color: var(--hb-ink); text-align: right; }
.hb-form-row b.is-empty { color: var(--text-muted); font-weight: 500; }
.hb-form-row b.is-new { animation: hbPop .4s var(--ease); color: var(--hb-coral-deep); }
@keyframes hbPop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.hb-form-row.kind-expense b.kind { color: var(--hb-bad); } .hb-form-row.kind-income b.kind { color: var(--hb-ok); }

/* Regel-Demo */
.hb-rule { display: grid; gap: 10px; }
.hb-rule label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.hb-rule input, .hb-rule select { min-height: 44px; border-radius: 12px; border: 1px solid var(--hb-line); background: var(--hb-soft); padding: 0 12px; font: inherit; font-size: 14px; color: var(--text); }
.hb-rule input:focus-visible, .hb-rule select:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 1px; }
.hb-rule-hit { padding: 10px 14px; border-radius: 12px; background: #e9f8ef; color: #14502d; font-weight: 700; font-size: 14px; }
.hb-rule-hit.is-zero { background: var(--hb-soft); color: var(--text-muted); }
.hb-txlist { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.hb-tx { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 12px; border-radius: 12px; background: var(--hb-soft); border: 1px solid transparent; font-size: 13.5px; transition: background .25s, border-color .25s; }
.hb-tx b { color: var(--hb-ink); }
.hb-tx small { color: var(--text-muted); grid-column: 1 / -1; }
.hb-tx .amt { font-weight: 700; color: var(--hb-bad); }
.hb-tx .amt.in { color: var(--hb-ok); }
.hb-tx.is-hit { background: var(--hb-soft-2); border-color: var(--hb-coral); }
.hb-tx.is-hit small::after { content: " → " attr(data-cat); color: var(--hb-coral-deep); font-weight: 700; }

/* Budget-Ring */
.hb-ringwrap { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.hb-ring { --p: 0; --c: var(--hb-ok); width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--hb-soft) 0); transition: --p .4s; }
.hb-ring span { width: 108px; height: 108px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; color: var(--hb-ink); font-size: 22px; letter-spacing: -.5px; }
.hb-ring span small { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.hb-range { width: 100%; accent-color: var(--hb-coral); height: 28px; }
.hb-ring-info { display: grid; gap: 6px; font-size: 14px; }
.hb-ring-info b { color: var(--hb-ink); }
.hb-ring-msg { margin-top: 8px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13.5px; background: var(--hb-soft); color: var(--text-muted); }
.hb-ring-msg.is-ok { background: #e9f8ef; color: #14502d; }
.hb-ring-msg.is-warn { background: #fff7e0; color: #6b4a00; }
.hb-ring-msg.is-over { background: #fde8e8; color: #8a1c1c; }
@media (max-width: 520px) { .hb-ringwrap { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- Sprachen ---------- */
.hb-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.hb-langs span { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: #fff; border: 1px solid var(--hb-line); color: var(--hb-ink); }
.hb-langs span.is-native { background: var(--hb-ink); color: #fff; border-color: var(--hb-ink); }

/* ---------- Vergleich alt/neu ---------- */
.hb-cmp-table { width: 100%; max-width: 920px; margin: 30px auto 0; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--hb-line); border-radius: 22px; overflow: hidden; font-size: 14.5px; }
.hb-cmp-table th, .hb-cmp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--hb-line); vertical-align: top; }
.hb-cmp-table tr:last-child td { border-bottom: 0; }
.hb-cmp-table th { background: var(--hb-soft); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.hb-cmp-table td:first-child { font-weight: 700; color: var(--hb-ink); }
.hb-cmp-table .ok { color: var(--hb-ok); font-weight: 700; } .hb-cmp-table .no { color: var(--text-muted); } .hb-cmp-table .new { color: var(--hb-coral-deep); font-weight: 700; }
@media (max-width: 640px) { .hb-cmp-table { display: block; overflow-x: auto; } }

/* ---------- Preis ---------- */
body.page-budget .price-box { border-radius: 30px; border: 0; background: var(--hb-launch); color: #fff; box-shadow: var(--hb-shadow); }
body.page-budget .price-box .price { background: linear-gradient(90deg, #fff, var(--hb-coral-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 76px; line-height: 1.05; letter-spacing: -2px; }
body.page-budget .price-box .price-note { color: var(--hb-coral-2); }
body.page-budget .price-box p { color: rgba(255, 255, 255, .82); }
.hb-price-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; text-align: left; max-width: 380px; margin-inline: auto; }
.hb-price-list li { display: flex; gap: 10px; color: rgba(255, 255, 255, .92); font-size: 15px; }
.hb-price-list li::before { content: "✓"; color: #6fe3a1; font-weight: 800; flex: none; }
.hb-price-fine { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.hb-price-free { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: rgba(111, 227, 161, .18); color: #6fe3a1; font-weight: 800; font-size: 14px; }
@media (max-width: 560px) { body.page-budget .price-box .price { font-size: 60px; } }

/* ---------- FAQ ---------- */
body.page-budget .faq-list.accordion details.faq-item { background: #fff; border: 1px solid var(--hb-line); border-radius: 20px; margin-bottom: 12px; padding: 0 24px; box-shadow: 0 1px 2px rgba(58, 34, 25, .04); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
body.page-budget .faq-list.accordion details.faq-item:hover { border-color: rgba(255, 107, 74, .35); }
body.page-budget .faq-list.accordion details[open].faq-item { border-color: var(--hb-coral); box-shadow: 0 18px 36px -24px rgba(232, 80, 47, .55); }
body.page-budget .faq-list.accordion details.faq-item summary { min-height: 44px; padding: 20px 0; gap: 14px; font-size: 16px; line-height: 1.4; color: var(--hb-ink); }
body.page-budget .faq-list.accordion details.faq-item summary:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 4px; border-radius: 12px; }
body.page-budget .faq-list.accordion details.faq-item .q-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--hb-coral-2), var(--hb-coral-deep)); color: #fff; font-size: 15px; font-weight: 800; }
body.page-budget .faq-list.accordion details.faq-item summary::after { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--hb-soft); color: var(--hb-coral-deep); font-size: 20px; font-weight: 500; }
body.page-budget .faq-list.accordion details[open].faq-item summary::after { background: var(--hb-coral); color: #fff; }
body.page-budget .faq-list.accordion details.faq-item p { margin: -4px 0 0 44px; padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--text-muted); }
@media (max-width: 560px) { body.page-budget .faq-list.accordion details.faq-item { padding: 0 16px; } body.page-budget .faq-list.accordion details.faq-item p { margin-left: 0; } }

/* ---------- Abschluss ---------- */
.hb-final { background: var(--hb-launch); color: #fff; padding: 56px 0; text-align: center; }
.hb-final h2 { color: #fff; margin: 0 0 10px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.8px; }
.hb-final p { color: rgba(255, 255, 255, .78); max-width: 560px; margin: 0 auto 24px; }

/* ---------- Unterseiten: Anleitung und Umstieg ---------- */
.hb-page-hero { color: #fff; padding: 52px 0 76px; background: var(--hb-launch); }
.hb-page-hero .hb-eyebrow { margin-bottom: 18px; }
.hb-page-hero h1 { margin: 0 0 12px; font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -1.2px; line-height: 1.08; color: #fff; }
.hb-page-hero p { margin: 0; max-width: 680px; color: rgba(255, 255, 255, .8); font-size: 17px; }
.hb-page-hero .hb-cta { margin: 22px 0 0; }
.hb-page-body { margin-top: -36px; position: relative; z-index: 2; padding-bottom: 72px; }
.hb-page-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.hb-toc { min-width: 0; position: sticky; top: calc(var(--hb-hdr) + 20px); background: #fff; border: 1px solid var(--hb-line); border-radius: 20px; padding: 16px; max-height: calc(100vh - var(--hb-hdr) - 40px); overflow-y: auto; }
.hb-toc b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-muted); margin: 2px 8px 8px; }
.hb-toc a { white-space: normal; overflow-wrap: anywhere; display: block; padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--text-muted); line-height: 1.3; }
.hb-toc a:hover { background: var(--hb-soft); color: var(--text); text-decoration: none; }
.hb-toc a.is-active { background: var(--hb-soft-2); color: var(--hb-coral-deep); font-weight: 700; }
.hb-toc input[type=search] { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--hb-line); background: var(--hb-soft); padding: 0 12px; font: inherit; font-size: 14px; margin-bottom: 10px; }
.hb-toc input[type=search]:focus-visible { outline: 3px solid var(--hb-coral); }
.hb-page-card { background: #fff; border: 1px solid var(--hb-line); border-radius: 26px; padding: 34px; box-shadow: var(--hb-shadow); }
.hb-guide h2 { scroll-margin-top: calc(var(--hb-hdr) + 20px); color: var(--hb-ink); font-size: 26px; letter-spacing: -.6px; margin: 42px 0 12px; display: flex; align-items: center; gap: 12px; }
.hb-guide h2:first-child { margin-top: 0; }
.hb-guide h2 .hb-tico { width: 38px; height: 38px; border-radius: 11px; flex: none; }
.hb-guide h2 .hb-tico svg { width: 20px; height: 20px; }
.hb-guide h3 { color: var(--hb-ink); font-size: 18px; margin: 24px 0 8px; scroll-margin-top: calc(var(--hb-hdr) + 20px); }
.hb-guide p, .hb-guide li { font-size: 15.5px; line-height: 1.65; color: #3a3330; }
.hb-guide ul, .hb-guide ol { padding-left: 22px; margin: 0 0 14px; }
.hb-guide li { margin-bottom: 6px; }
.hb-guide kbd { font: 700 12.5px ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 7px; border-radius: 6px; background: var(--hb-soft); border: 1px solid var(--hb-line); border-bottom-width: 2px; color: var(--hb-ink); white-space: nowrap; }
.hb-guide .hb-path { display: inline-block; font-weight: 700; color: var(--hb-ink); }
.hb-guide .hb-callout { padding: 14px 18px; border-radius: 16px; background: var(--hb-soft-2); border: 1px solid rgba(255, 107, 74, .35); margin: 14px 0; font-size: 14.5px; }
.hb-guide .hb-callout.is-warn { background: #fff7e0; border-color: #f0d28a; color: #6b4a00; }
.hb-guide .hb-callout.is-info { background: #eef4ff; border-color: #c7d7fb; color: #1e3a8a; }
.hb-guide .hb-callout b { display: block; margin-bottom: 4px; }
.hb-guide table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14.5px; }
.hb-guide th, .hb-guide td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hb-line); vertical-align: top; }
.hb-guide th { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.hb-guide figure { margin: 18px 0; }
.hb-guide figure .hb-shot { margin: 0 auto; }
.hb-guide figcaption { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.hb-guide .hb-plat { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; background: var(--hb-soft); color: var(--text-muted); margin-left: 6px; vertical-align: middle; }
.hb-guide section[hidden] { display: none; }
.hb-guide mark { background: #fff1a8; color: inherit; border-radius: 4px; padding: 0 2px; }
.hb-guide-none { display: none; padding: 30px 0; text-align: center; color: var(--text-muted); }
.hb-guide-none.is-on { display: block; }
.hb-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
@media (max-width: 900px) {
  .hb-page-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hb-toc { position: static; max-height: none; }
  .hb-page-card { padding: 22px; border-radius: 22px; }
}

/* Umstieg: Checkliste */
.hb-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-check label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--hb-line); background: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.hb-check label:hover { background: var(--hb-soft); }
.hb-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--hb-coral); flex: none; }
.hb-check label:has(input:checked) { background: var(--hb-soft-2); border-color: rgba(255, 107, 74, .35); }
.hb-check b { display: block; color: var(--hb-ink); }
.hb-check span { display: block; font-size: 14px; color: var(--text-muted); }
.hb-check input:checked + div b { text-decoration: line-through; text-decoration-color: rgba(58, 34, 25, .35); }
.hb-report { display: grid; gap: 10px; margin: 14px 0; }
.hb-report div { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hb-line); background: #fff; font-size: 14.5px; }
.hb-report i { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.hb-report .g i { background: var(--hb-ok); } .hb-report .o i { background: var(--hb-warn); } .hb-report .r i { background: var(--hb-bad); }
.hb-report b { color: var(--hb-ink); }

@media (prefers-reduced-motion: reduce) {
  .hb-device, .hb-float { animation: none; }
  .hb-panel, .hb-gpanel, .hb-lb[open] { animation: none; }
  .hb-spot::after { animation: none; }
  .hb-zoom img, .hb-btn, .hb-bt { transition: none; }
}

/* ---------- Telefon-Attrappe, Aufbau wie die echte Status-Seite (Stand 2026-11-05) ---------- */
.hb-screen .ph-bar2 { display: flex; justify-content: space-between; margin-top: 4px; }
.hb-screen .ph-pill { display: inline-flex; gap: 14px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--pline); background: var(--pcard); color: var(--pa); font-size: 12px; font-weight: 800; }
.hb-screen .ph-sum { padding: 4px 0 0; }
.hb-screen .ph-sum b { display: block; font-size: 30px; letter-spacing: -1px; line-height: 1.1; }
.hb-screen .ph-sum b small { font-size: 18px; color: var(--pmuted); font-weight: 700; }
.hb-screen .ph-sum span { display: block; font-size: 12px; color: var(--pmuted); margin-top: 2px; }
.hb-screen .ph-quick { background: color-mix(in srgb, var(--ptext) 6%, transparent); border: 0; border-radius: 12px; min-height: 36px; }
.hb-screen .ph-close { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--pa) 12%, transparent); font-weight: 700; font-size: 12.5px; color: var(--ptext); }
.hb-screen .ph-close i { margin-left: auto; font-style: normal; color: var(--pmuted); }
.hb-screen .ph-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; padding: 8px 0 6px; border-top: 1px solid var(--pline); }
.hb-screen .ph-kpi { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--pmuted); }
.hb-screen .ph-kpi b { font-size: 13px; font-weight: 800; letter-spacing: -.2px; }
.hb-screen .ph-kpi b.in { color: #1f7a43; } .hb-screen .ph-kpi b.out { color: #c93338; }
.hb-screen .ph-barrow { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; border-bottom: 1px solid var(--pline); font-size: 12px; font-weight: 800; color: var(--pa); }
.hb-screen .ph-barrow .ph-bar { flex: 1; margin: 0; }
.hb-screen .ph-freeblk { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--pline); font-size: 11.5px; color: var(--pmuted); }
.hb-screen .ph-freeblk b { display: block; font-size: 16px; color: #1f7a43; font-weight: 800; letter-spacing: -.3px; }
.hb-screen .ph-freeblk small { font-size: 10.5px; }
.hb-screen .ph-last { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; padding-top: 6px; }
.hb-screen .ph-last span { font-size: 12px; color: var(--pa); font-weight: 700; }
.hb-screen .ph-entry { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; color: var(--pmuted); }
.hb-screen .ph-entry b { color: var(--ptext); font-weight: 600; }
.hb-screen .ph-entry .out { color: #c93338; font-weight: 700; } .hb-screen .ph-entry .in { color: #1f7a43; font-weight: 700; }
.hb-screen .ph-fab { position: absolute; right: 18px; bottom: 62px; margin: 0; }
.hb-screen { position: relative; }
.hb-screen .ph-tabs { margin-top: auto; }
.hb-screen .ph-kpis[data-lvl], .hb-screen .ph-freeblk[data-lvl], .hb-screen .ph-barrow[data-lvl], .hb-screen .ph-close[data-lvl], .hb-screen .ph-quick[data-lvl], .hb-screen .ph-lastblk[data-lvl] { display: none; }
.hb-screen.lvl-minimal [data-lvl~="minimal"], .hb-screen.lvl-simple [data-lvl~="simple"], .hb-screen.lvl-budget [data-lvl~="budget"], .hb-screen.lvl-standard [data-lvl~="standard"], .hb-screen.lvl-expert [data-lvl~="expert"] { display: flex; }
.hb-screen.lvl-minimal .ph-kpis[data-lvl~="minimal"], .hb-screen.lvl-simple .ph-kpis[data-lvl~="simple"], .hb-screen.lvl-budget .ph-kpis[data-lvl~="budget"], .hb-screen.lvl-standard .ph-kpis[data-lvl~="standard"], .hb-screen.lvl-expert .ph-kpis[data-lvl~="expert"] { display: grid; }
.hb-screen .ph-lastblk { flex-direction: column; }
.hb-screen.lvl-minimal .ph-sum b { font-size: 38px; }

/* ---------- Zurück-Knopf auf Unterseiten, Funktionsliste „Erste Schritte“ ---------- */
.hb-back { margin: 0 0 18px; }
.hb-featlist-title { margin: 34px 0 12px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.hb-featlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hb-featlist a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--hb-line); font-size: 14px; font-weight: 600; color: var(--hb-ink); text-decoration: none; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.hb-featlist a:hover { border-color: var(--hb-coral); color: var(--hb-coral-deep); transform: translateY(-1px); text-decoration: none; }
.hb-featlist svg { width: 15px; height: 15px; flex: none; color: var(--hb-coral); }


/* ---------- Detaildialoge zu den Kacheln „Alles neu“ ---------- */
.hb-more-row { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.hb-more { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--hb-line); background: var(--hb-soft); color: var(--hb-ink); font: inherit; font-size: 14px; font-weight: 700; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.hb-more::after { content: "›"; font-size: 20px; line-height: 1; color: var(--hb-coral-deep); transition: transform .2s var(--ease); }
.hb-more:hover { background: var(--hb-soft-2); border-color: var(--hb-coral-2); }
.hb-more:hover::after { transform: translateX(3px); }
.hb-more:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 3px; }
.hb-bt.is-dark .hb-more { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.hb-bt.is-dark .hb-more:hover { background: rgba(255, 255, 255, .2); }
.hb-bt.is-dark .hb-more::after { color: #fff; }
html.hb-noscroll { overflow: hidden; }
.hb-feat { width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--hb-card); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.hb-feat[open] { display: flex; flex-direction: column; animation: hbFeatIn .28s var(--ease); }
.hb-feat::backdrop { background: rgba(28, 25, 23, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes hbFeatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.hb-feat-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 22px; border-bottom: 1px solid var(--hb-line); background: var(--hb-card); }
.hb-feat-count { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.hb-feat-x { appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--hb-soft); color: var(--hb-ink); font-size: 16px; }
.hb-feat-x:hover { background: var(--hb-soft-2); }
.hb-feat-x:focus-visible { outline: 3px solid var(--hb-coral); outline-offset: 2px; }
.hb-feat-scroll { overflow-y: auto; overscroll-behavior: contain; }
.hb-feat-art { margin: 0; padding: 18px 18px 6px; background: linear-gradient(180deg, var(--hb-soft-2), var(--hb-soft)); }
.hb-feat-art svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.hb-feat-body { padding: 22px 28px 28px; font-size: 15.5px; line-height: 1.6; }
.hb-feat-body h3 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.5px; color: var(--hb-ink); }
.hb-tag-inline { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: var(--hb-soft-2); color: var(--hb-coral-deep); }
.hb-feat-lead { margin: 0 0 6px; font-size: 17px; color: var(--text-muted); }
.hb-feat-body h4 { margin: 24px 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--hb-coral-deep); }
.hb-feat-body p { margin: 0 0 10px; }
.hb-feat-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.hb-feat-list li { position: relative; padding-left: 26px; }
.hb-feat-list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 11px; height: 6px; border-left: 2.5px solid var(--hb-ok); border-bottom: 2.5px solid var(--hb-ok); transform: translateY(-50%) rotate(-45deg); }
.hb-feat-list.is-plain li::before { left: 6px; top: .7em; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--hb-coral-2); transform: none; }
.hb-feat-ex { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hb-feat-ex li { padding: 12px 14px; border-radius: 14px; background: var(--hb-soft); border: 1px solid var(--hb-line); }
.hb-feat-ex q { display: block; font-weight: 700; color: var(--hb-ink); quotes: "„" "“"; }
.hb-feat-ex span { display: block; margin-top: 2px; font-size: 14px; color: var(--text-muted); }
html[lang="en"] .hb-feat-ex q { quotes: "“" "”"; }
.hb-feat-note { margin-top: 18px !important; font-size: 12.5px; color: var(--text-muted); }
.hb-feat-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.hb-feat-nav { margin-left: auto; display: inline-flex; gap: 8px; }
.hb-feat-nav .hb-btn { min-width: 48px; padding: 0 14px; font-size: 22px; }
@media (max-width: 600px) {
  .hb-feat { border-radius: 22px; }
  .hb-feat-body { padding: 18px 18px 22px; }
  .hb-feat-body h3 { font-size: 22px; }
  .hb-feat-nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hb-feat[open] { animation: none; } .hb-more, .hb-more::after { transition: none; } }

/* ===== Vergleichstabelle (Section #vergleich) ===== */
.hb-cmp-wrap { margin-top: 34px; border: 1px solid var(--hb-line); border-radius: 22px; background: var(--hb-card); box-shadow: var(--hb-shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hb-cmp { width: 100%; min-width: 1020px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.hb-cmp caption { text-align: left; padding: 16px 20px; font-size: 13px; color: var(--text-muted); caption-side: bottom; }
.hb-cmp th, .hb-cmp td { padding: 11px 10px; text-align: center; border-bottom: 1px solid var(--hb-line); vertical-align: middle; line-height: 1.35; }
.hb-cmp thead th { position: sticky; top: 0; background: var(--hb-soft); font-size: 13px; font-weight: 800; color: var(--hb-ink); padding: 16px 10px; border-bottom: 2px solid var(--hb-line); }
.hb-cmp th[scope="row"] { text-align: left; font-weight: 600; color: var(--hb-ink); min-width: 210px; padding-left: 20px; position: sticky; left: 0; background: var(--hb-card); z-index: 1; }
.hb-cmp thead th:first-child { left: 0; z-index: 2; text-align: left; padding-left: 20px; }
.hb-cmp .hb-cmp-us { background: var(--hb-soft-2, #fff1ec); }
.hb-cmp thead .hb-cmp-us { background: var(--hb-coral); color: #fff; }
.hb-cmp tbody tr:hover td, .hb-cmp tbody tr:hover th[scope="row"] { background: var(--hb-soft); }
.hb-cmp tbody tr:hover td.hb-cmp-us { background: var(--hb-soft-2, #fff1ec); }
.hb-cmp .hb-cmp-group th { text-align: left; padding: 18px 20px 8px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hb-coral-deep); background: var(--hb-card); border-bottom: 1px solid var(--hb-line); position: static; }
.hb-cmp .y { color: var(--hb-ok); font-weight: 800; font-size: 17px; }
.hb-cmp .n { color: var(--hb-muted); opacity: .55; font-weight: 700; }
.hb-cmp .t { font-size: 12.5px; color: var(--text-muted); }
.hb-cmp td.hb-cmp-us .t { color: var(--hb-ink); font-weight: 600; }
.hb-cmp tbody tr:last-child td, .hb-cmp tbody tr:last-child th { border-bottom: 0; }
.hb-cmp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-muted); }
.hb-cmp-legend .y { color: var(--hb-ok); font-weight: 800; }
.hb-cmp-note { max-width: 860px; margin: 22px auto 0; padding: 18px 22px; border-radius: 18px; background: var(--hb-soft); border: 1px solid var(--hb-line); font-size: 14px; color: var(--text-muted); }
.hb-cmp-note p { margin: 0 0 10px; }
.hb-cmp-note p:last-child { margin-bottom: 0; }
.hb-cmp-src { max-width: 860px; margin: 14px auto 0; font-size: 14px; color: var(--text-muted); }
.hb-cmp-src summary { cursor: pointer; font-weight: 700; color: var(--hb-ink); padding: 8px 0; }
.hb-cmp-src ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.hb-cmp-src a { word-break: break-word; }
@media (max-width: 720px) { .hb-cmp-wrap { border-radius: 16px; } .hb-cmp th[scope="row"] { min-width: 150px; } }

/* Karten auf weißen Sections (statt hellem Grund) abheben */
body.page-budget .section:not([style*="--bg-alt"]) .hb-flow-step,
body.page-budget .section:not([style*="--bg-alt"]) .hb-dev { background: var(--hb-soft); }
.hb-cmp-how .hb-cmp-note { margin: 6px 0 0; max-width: none; }

/* Links in Hinweisboxen unterstreichen (WCAG 1.4.1) */
.hb-callout a { text-decoration: underline; text-underline-offset: 2px; }