/* Umlagio Design-Basis — Inter Tight (self-hosted, DSGVO-konform), aus der Landing uebernommen. */
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/inter-tight-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum" 0; }

/* Lange deutsche Komposita (z. B. „Nebenkostenabrechnung") in großen Überschriften
   dürfen den Viewport auf Mobile nicht aufschieben: bei Bedarf umbrechen/trennen. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* ===== Kanonische Design-Tokens (aus ui/landing.html) — für den geteilten Rahmen ===== */
:root{
  --u-accent:#383B7C; --u-accent-dk:#2C2E63;
  --u-ink:#15151B; --u-ink2:#55555F; --u-ink3:#8A8A93;
  --u-line:#E5E3DC; --u-canvas:#FAFAF8; --u-card:#ffffff; --u-footbg:#F4F3EE;
}

/* ===== Geteilter Header ===== */
.uc-header{position:sticky;top:0;z-index:40;background:rgba(250,250,248,.86);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--u-line);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;}
.uc-in{max-width:1240px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px;}
.uc-brand{display:flex;align-items:center;gap:8px;color:var(--u-ink);text-decoration:none;}
.uc-brand .m{width:30px;height:30px;border-radius:8px;background:var(--u-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(56,59,124,.18);}
.uc-brand .m svg{width:17px;height:17px;}
.uc-brand .n{font-size:19px;font-weight:600;letter-spacing:-.03em;}
.uc-nav{display:flex;align-items:center;gap:26px;font-size:14px;letter-spacing:-.01em;margin-left:6px;}
.uc-nav a{color:var(--u-ink2);text-decoration:none;transition:color .15s;}
.uc-nav a:hover{color:var(--u-ink);}
.uc-sp{flex:1;}
.uc-actions{display:flex;align-items:center;gap:14px;}
.uc-link{color:var(--u-ink2);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;}
.uc-link:hover{color:var(--u-ink);}
.uc-btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:9px;background:var(--u-accent);
  color:#fff;font-size:14px;font-weight:500;letter-spacing:-.01em;text-decoration:none;transition:background .15s;white-space:nowrap;}
.uc-btn:hover{background:var(--u-accent-dk);color:#fff;}
.uc-email{font-size:13px;color:var(--u-ink2);}
.uc-ghost{background:none;border:0;color:var(--u-ink2);font-size:13px;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:7px;font-family:inherit;}
.uc-ghost:hover{color:var(--u-ink);}
@media(max-width:720px){.uc-nav{display:none;}}
/* Header darf auf schmalen Screens nicht horizontal überlaufen: Actions schrumpfen,
   auf sehr schmalen Geräten den "Anmelden"-Link ausblenden (CTA bleibt). */
@media(max-width:520px){
  .uc-in{padding:0 16px;gap:10px;}
  .uc-actions{gap:10px;min-width:0;}
  .uc-btn{height:36px;padding:0 13px;font-size:13.5px;}
  .uc-brand .n{font-size:18px;}
}
@media(max-width:400px){
  .uc-link{display:none;}
}

/* ===== Geteilter Footer ===== */
.uc-footer{border-top:1px solid var(--u-line);background:var(--u-footbg);margin-top:88px;
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--u-ink);}
.uc-fin{max-width:1240px;margin:0 auto;padding:96px 24px 64px;}
.uc-fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;}
@media(max-width:820px){.uc-fgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.uc-fgrid{grid-template-columns:1fr;}}
.uc-fbrand .lock{display:flex;align-items:center;gap:8px;}
.uc-fbrand .lock .m{width:30px;height:30px;border-radius:8px;background:var(--u-accent);display:flex;align-items:center;justify-content:center;}
.uc-fbrand .lock .m svg{width:17px;height:17px;}
.uc-fbrand .lock .n{font-size:19px;font-weight:600;letter-spacing:-.03em;}
.uc-tag{margin-top:12px;font-size:14px;color:var(--u-ink3);}
.uc-col{display:flex;flex-direction:column;gap:10px;font-size:14px;}
.uc-col .h{color:var(--u-ink);font-size:13px;letter-spacing:-.005em;}
.uc-col a{color:var(--u-ink2);text-decoration:none;transition:color .15s;}
.uc-col a:hover{color:var(--u-ink);}
.uc-bottom{max-width:1240px;margin:0 auto;padding:0 24px;}
.uc-bottom-in{padding:28px 0 4px;border-top:1px solid var(--u-line);display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;font-size:13px;color:var(--u-ink3);line-height:1.6;}
.uc-bottom-in p{margin:0;}

/* ===== Artikel-Tabellen auf Mobile intern scrollbar (kein Seiten-Overflow) =====
   Betrifft die ungekapselten <table> in den Ratgeber-Artikeln (article.wrap).
   Die Landing-Vergleichstabelle (table.cmp) ist bereits in .tablewrap gekapselt
   und wird per :not(.cmp) ausgenommen — ihr display:table-Layout bleibt intakt. */
@media (max-width:520px){
  .wrap table:not(.cmp){
    display:block; width:max-content; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
}