@font-face { font-family: "Marcellus"; src: url("/assets/fonts/marcellus-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-ext-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-latin-ext-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-cyrillic-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-cyrillic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  color-scheme: light;
  --bg: #E9EEF0;
  --bg-2: #DDE6E8;
  --paper: #F8FAFA;
  --sidebar: #E1E9EA;
  --ink: #12303A;
  --ink-2: #4E6872;
  --ink-3: #7B929A;
  --line: #CBD8DB;
  --line-2: #BCCCD1;
  --petrol: #1D6A73;
  --petrol-ink: #FFFFFF;
  --petrol-soft: #DFEDEF;
  --green: #3A8A5D;
  --green-ink: #FFFFFF;
  --green-soft: #E4F1E8;
  --green-line: #BCDCC7;
  --coral: #BF523C;
  --coral-ink: #FFFFFF;
  --coral-soft: #F9E8E3;
  --coral-line: #ECC4B9;
  --ochre: #B5813C;
  --ochre-soft: #F6EEDF;
  --blood-soft: #F7E4E1;
  --flow: rgba(255, 255, 255, 0.9);
  --shadow: 0 1px 2px rgba(18, 48, 58, 0.06), 0 14px 34px -18px rgba(18, 48, 58, 0.25);
  --shadow-lg: 0 2px 6px rgba(18, 48, 58, 0.08), 0 30px 60px -24px rgba(18, 48, 58, 0.35);
  --grad-a: #1D6A73;
  --grad-b: #2F8A5E;
  --display: "Marcellus", "Noto Sans Malayalam", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Source Sans 3", "Noto Sans Malayalam", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Source Sans 3", "Noto Sans Malayalam", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --topbar: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C181D;
    --bg-2: #122229;
    --paper: #14252C;
    --sidebar: #0F1E24;
    --ink: #E2EDEF;
    --ink-2: #A0B6BD;
    --ink-3: #718990;
    --line: #22393F;
    --line-2: #34525B;
    --petrol: #6CBDC6;
    --petrol-ink: #0A191D;
    --petrol-soft: #163239;
    --green: #74C497;
    --green-ink: #0A1A11;
    --green-soft: #142F20;
    --green-line: #2A5A3D;
    --coral: #EE8C76;
    --coral-ink: #1E0D09;
    --coral-soft: #362220;
    --coral-line: #6A3A31;
    --ochre: #DAAA64;
    --ochre-soft: #33291A;
    --blood-soft: #36232A;
    --flow: rgba(10, 25, 29, 0.6);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 60px -24px rgba(0, 0, 0, 0.8);
    --grad-a: #17575F;
    --grad-b: #24704C;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C181D;
  --bg-2: #122229;
  --paper: #14252C;
  --sidebar: #0F1E24;
  --ink: #E2EDEF;
  --ink-2: #A0B6BD;
  --ink-3: #718990;
  --line: #22393F;
  --line-2: #34525B;
  --petrol: #6CBDC6;
  --petrol-ink: #0A191D;
  --petrol-soft: #163239;
  --green: #74C497;
  --green-ink: #0A1A11;
  --green-soft: #142F20;
  --green-line: #2A5A3D;
  --coral: #EE8C76;
  --coral-ink: #1E0D09;
  --coral-soft: #362220;
  --coral-line: #6A3A31;
  --ochre: #DAAA64;
  --ochre-soft: #33291A;
  --blood-soft: #36232A;
  --flow: rgba(10, 25, 29, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 60px -24px rgba(0, 0, 0, 0.8);
  --grad-a: #17575F;
  --grad-b: #24704C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--petrol); text-underline-offset: 3px; }
b, strong { font-weight: 700; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.muted { color: var(--ink-2); }
.hint { font-size: 14px; color: var(--ink-3); }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrol); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 28%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 6px 14px -8px rgba(29, 106, 115, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.bm-pulse { fill: none; stroke: #FFFFFF; stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; }
.bm-heart { fill: #FF9A7E; }
.brand-name { font-size: 21px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.brand-name b { font-weight: 700; color: var(--petrol); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 14px; border: 1px solid transparent;
  background: var(--petrol); color: var(--petrol-ink); font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(0.99); }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--petrol); color: var(--petrol); filter: none; }
.btn.soft { background: var(--petrol-soft); color: var(--petrol); }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: 15px; border-radius: 12px; }
.btn.danger { background: transparent; border-color: var(--coral-line); color: var(--coral); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn-google { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.btn-google:hover { border-color: var(--petrol); filter: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.chip.petrol { background: var(--petrol-soft); color: var(--petrol); }
.chip.coral { background: var(--coral-soft); color: var(--coral); }
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.ochre { background: var(--ochre-soft); color: var(--ochre); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.splash { min-height: 100vh; display: grid; place-items: center; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--petrol); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; }
.auth-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--petrol) 22%, transparent) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.7), transparent 70%);
}
.auth-top { position: relative; padding: 22px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1040px; width: 100%; margin: 0 auto; }
.auth-main { position: relative; display: grid; place-items: center; padding: 16px 20px 40px; }
.auth-card { width: 100%; max-width: 520px; background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); padding: 34px 30px; display: grid; gap: 22px; }
.auth-card h1 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6vw, 42px); line-height: 1.08; margin: 0; text-wrap: balance; }
.auth-card .lead { color: var(--ink-2); font-size: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-weight: 700; font-size: 15px; }
.field input, .field select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--petrol); outline-offset: 1px; }
.field textarea { font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; min-height: 150px; width: 100%; resize: vertical; }
.field > span em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--ink-3); margin-left: 4px; }
.field input[readonly] { color: var(--ink-2); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; font-weight: 600; font-size: 15px; }
.seg button[aria-pressed="true"] { background: var(--petrol-soft); border-color: var(--petrol); color: var(--petrol); }
.auth-actions { display: grid; gap: 10px; }
.auth-note { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.auth-foot { position: relative; text-align: center; padding: 18px 20px 26px; font-size: 14px; color: var(--ink-3); }
.auth-foot b { color: var(--ink-2); font-weight: 600; }
.steps-dots { display: flex; gap: 6px; }
.steps-dots span { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.steps-dots span.on { background: var(--petrol); }
.construction { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--ochre-soft); color: var(--ochre); font-size: 13px; font-weight: 700; white-space: nowrap; }
.construction svg { width: 16px; height: 16px; }
.note-box { border-radius: 16px; background: var(--ochre-soft); color: var(--ink); padding: 14px 16px; font-size: 15px; display: grid; gap: 4px; }
.note-box b { color: var(--ochre); }

.app { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sidebar);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; padding: 20px 16px 16px;
}
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 6px; }
.sb-close { display: none; }
.sb-group { display: grid; gap: 2px; }
.sb-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 10px 12px 6px; }
.sb-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--ink-2);
  text-decoration: none; font-weight: 600; font-size: 15.5px; transition: background 0.15s ease, color 0.15s ease;
}
.sb-item:hover { background: color-mix(in srgb, var(--petrol-soft) 70%, transparent); color: var(--ink); }
.sb-item[aria-current="page"] { background: var(--paper); color: var(--petrol); box-shadow: var(--shadow); }
.sb-item .price-badge { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.sb-item .soon { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ochre); background: var(--ochre-soft); padding: 2px 8px; border-radius: 999px; }
.sb-foot { margin-top: auto; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.user { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 4px 6px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--petrol-soft); color: var(--petrol); display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user .n { font-weight: 700; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .e { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-logout { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 600; font-size: 14.5px; }
.sb-logout:hover { border-color: var(--coral-line); color: var(--coral); }

.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar);
  background: var(--bg); background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { height: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; display: flex; align-items: center; gap: 14px; }
.menu-btn, .icon-btn { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.topbar .brand { display: none; }
.quick { flex: 1; max-width: 460px; position: relative; }
.quick input { width: 100%; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 10px 42px; min-height: 42px; }
.quick input:focus { outline: 2px solid var(--petrol); outline-offset: 1px; }
.quick svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 18px; height: 18px; }
.topbar .construction { margin-left: auto; }
.preview-bar { background: var(--green-soft); color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--green-line); }
.preview-bar div { max-width: 1120px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.preview-bar b { color: var(--green); }
.preview-bar a { color: var(--petrol); font-weight: 700; text-decoration: none; }
.preview-bar a:hover { text-decoration: underline; }

.page { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; padding-block: 36px 24px; flex: 1; animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0.001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head { display: grid; gap: 10px; margin-bottom: 28px; max-width: 760px; }
.page-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5.2vw, 52px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.page-head .lead { font-size: 19px; color: var(--ink-2); max-width: 60ch; }
.section-title { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 0 0 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack { display: grid; gap: 16px; }
.block + .block { margin-top: 40px; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 12px; align-content: start; }
.card.raised { box-shadow: var(--shadow); }
.card h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.card .big { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--petrol); }
a.card { color: inherit; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; }
a.card:hover { transform: translateY(-2px); border-color: var(--line-2); }

.dcard { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px; }
.dcard .ticon { width: 64px; height: 64px; border-radius: 18px; background: var(--petrol-soft); display: grid; place-items: center; }
.dcard .ticon svg { width: 42px; height: 42px; }
.dcard .t { font-family: var(--display); font-size: 26px; line-height: 1.15; }
.dcard .m { font-size: 15px; color: var(--ink-2); }
.dcard .m-ar { color: var(--green); font-weight: 700; white-space: nowrap; }
.go { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--petrol); }
.go svg { width: 18px; height: 18px; }
.i-v { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; }
.i-dead { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.i-clot { fill: var(--ochre); }
.i-cell { fill: var(--paper); stroke: var(--petrol); stroke-width: 2.5; }
.i-sugar { fill: var(--ochre); }

.soon-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.soon-list.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.soon-item { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--line-2); color: var(--ink-2); text-decoration: none; }
a.soon-item { transition: border-color 0.2s ease, background 0.2s ease; }
a.soon-item:hover { border-color: var(--petrol); background: var(--paper); }
.soon-item > span:first-child { display: grid; gap: 2px; }
.soon-item b { color: var(--ink); font-weight: 700; font-size: 16px; line-height: 1.35; }
.soon-item span.s { font-size: 14px; line-height: 1.45; color: var(--ink-3); }

.topic-teaser { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.datebox { width: 64px; border-radius: 16px; background: var(--petrol); color: var(--petrol-ink); text-align: center; padding: 8px 0 10px; line-height: 1.1; }
.datebox .d { font-size: 28px; font-weight: 700; display: block; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.datebox .w { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.meta { font-size: 14.5px; color: var(--ink-2); }

.article-wrap { display: grid; grid-template-columns: minmax(0, 760px) 220px; gap: 48px; align-items: start; }
.article { min-width: 0; }
.toc { position: sticky; top: calc(var(--topbar) + 24px); display: grid; gap: 2px; font-size: 14.5px; }
.toc p { margin-bottom: 6px; }
.toc a { color: var(--ink-2); text-decoration: none; padding: 5px 10px; border-radius: 8px; border-left: 2px solid var(--line); }
.toc a:hover, .toc a.on { color: var(--petrol); border-left-color: var(--petrol); background: var(--petrol-soft); }
.chipnav { display: none; position: sticky; top: var(--topbar); z-index: 10; margin: 0 -24px 8px; padding: 10px 24px; background: var(--bg); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.chipnav::-webkit-scrollbar { display: none; }
.chipnav a { display: inline-block; margin-right: 6px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.chipnav a.on { background: var(--petrol-soft); border-color: var(--petrol); color: var(--petrol); }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.back:hover { color: var(--petrol); }
.back svg { width: 18px; height: 18px; }
.d-title { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 7vw, 64px); line-height: 1.02; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.d-terms { font-style: italic; color: var(--ink-2); font-size: 17px; }
.d-lead { font-size: 20px; line-height: 1.55; }
.d-head { display: grid; gap: 12px; }
.summary { margin-top: 28px; border-radius: 22px; background: var(--petrol-soft); padding: 22px; display: grid; gap: 10px; }
.summary ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.summary li::marker { color: var(--petrol); }

.plate {
  margin: 28px 0 0; padding: 26px 22px 20px; border-radius: 24px; border: 1px solid var(--line);
  background:
    linear-gradient(var(--petrol), var(--petrol)) top 14px left 14px / 14px 1.5px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) top 14px left 14px / 1.5px 14px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) top 14px right 14px / 14px 1.5px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) top 14px right 14px / 1.5px 14px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) bottom 14px left 14px / 14px 1.5px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) bottom 14px left 14px / 1.5px 14px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) bottom 14px right 14px / 14px 1.5px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) bottom 14px right 14px / 1.5px 14px no-repeat,
    var(--paper);
}
.plate svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.plate figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.cap-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 700; }
.cap-tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrol); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legend li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.45; }
.legend .key { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.legend .key.sq { border-radius: 6px; }
.legend i { color: var(--petrol); }
.p-v { fill: none; stroke: var(--petrol); stroke-linecap: round; }
.p-flow { fill: none; stroke: var(--flow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 11; animation: flow 1.15s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22.2; } }
.p-dead { fill: none; stroke: var(--line-2); stroke-linecap: round; }
.p-area { fill: var(--coral-soft); stroke: var(--coral-line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.p-clot { fill: var(--ochre); }
.p-lead { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.p-key { fill: var(--ink); }
.p-key-t { fill: var(--paper); font: 700 11px var(--body); text-anchor: middle; }
.d-band { fill: var(--blood-soft); stroke: var(--coral-line); stroke-width: 1.2; }
.d-sugar { fill: var(--ochre); }
.d-cell { fill: var(--petrol-soft); stroke: var(--petrol); stroke-width: 2; }
.d-mem { fill: none; stroke: var(--petrol); stroke-width: 2; stroke-linecap: round; }
.d-ins { fill: var(--green); }
.d-miss { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.d-arrow { fill: none; stroke: var(--ochre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-block { fill: none; stroke: var(--coral); stroke-width: 2.6; stroke-linecap: round; }
.d-t { fill: var(--ink); font: 700 13px var(--body); text-anchor: middle; }
.d-s { fill: var(--ink-2); font: italic 400 12px var(--body); text-anchor: middle; }
.d-sl { fill: var(--ink-2); font: italic 400 11px var(--body); }
.d-leg { fill: var(--ink-2); font: 400 12px var(--body); }
.d-divider { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }

.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 44px 0 4px; }
.mode-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--petrol); color: var(--petrol-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mode-tag.green { background: var(--green); color: var(--green-ink); justify-self: start; }
.mode-hint { font-size: 15px; color: var(--ink-2); }
.sec { padding-block: 30px; display: grid; gap: 14px; scroll-margin-top: calc(var(--topbar) + 60px); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec > h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0; }
.sec h3, .alarm h3, .quiz h3 { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; }
.sec h4 { margin: 10px 0 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.plain { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.plain li::marker { color: var(--ink-3); }
.ratio { display: grid; gap: 10px; }
.ratio-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--bg-2); }
.ratio-bar .a { background: var(--petrol); }
.ratio-bar .r { background: repeating-linear-gradient(135deg, var(--petrol) 0 3px, var(--petrol-soft) 3px 6px); }
.ratio-bar .b-coral { background: var(--coral); }
.ratio-bar .b-ochre { background: var(--ochre); }
.ratio-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 16px; }
.ratio-legend > div { display: grid; }
.ratio-legend .right { text-align: end; }
.ratio-legend b { font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ratio-legend i { color: var(--ink-2); font-size: 15px; }
.ratio-note { font-size: 13px; color: var(--ink-3); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 6px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: 15.5px; }
.terms { list-style: none; margin: 0; padding: 0; }
.terms li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.terms li:first-child { border-top: 1px solid var(--line); }
.terms li > span { flex: 1 1 320px; }
.terms i { color: var(--petrol); font-size: 16.5px; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.val { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; align-content: start; }
.val .k { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.val .v { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.val .u { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.val.warn { background: var(--coral-soft); border-color: var(--coral-line); }
.val.warn .v { color: var(--coral); }
.alarm { border-radius: 22px; background: var(--coral-soft); border: 1px solid var(--coral-line); padding: 22px 20px; display: grid; gap: 14px; }
.alarm h3 { display: flex; align-items: center; gap: 10px; color: var(--coral); flex-wrap: wrap; }
.alarm h3 svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 24px; }
.alarm h3 .sub { font-style: italic; font-weight: 400; font-size: 16px; color: var(--ink-2); }
.fast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fast > div { background: var(--paper); border-radius: 16px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.fast .L { font-family: var(--display); font-size: 38px; line-height: 1; color: var(--coral); }
.fast .w { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.fast p { font-size: 15px; line-height: 1.45; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split > div { background: var(--paper); border-radius: 16px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.split .w { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); }
.split p { font-size: 16px; }
.care { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.care > div { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 10px; align-content: start; }
.care h4 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.care h4 svg { width: 22px; height: 22px; fill: none; stroke: var(--petrol); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 22px; }
.care ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.care li::marker { color: var(--ink-3); }
.chain { display: grid; }
.step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-block: 10px; }
.step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 16px; top: 46px; bottom: -8px; width: 2px; background: var(--line-2); }
.step .n { width: 34px; height: 34px; border-radius: 50%; background: var(--petrol); color: var(--petrol-ink); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.step .lab { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol); padding-top: 1px; }
.step p { font-size: 17px; }
.callout { border-radius: 18px; padding: 16px 18px; display: grid; gap: 6px; background: var(--petrol-soft); }
.callout-t { font-weight: 700; color: var(--petrol); font-size: 15px; letter-spacing: 0.02em; }
.callout.praxis { background: var(--green-soft); }
.callout.praxis .callout-t { color: var(--green); }
.callout.achtung { background: var(--ochre-soft); }
.callout.achtung .callout-t { color: var(--ochre); }
.plan { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); padding: 20px; display: grid; gap: 12px; }
.plan-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--petrol); }
.plan dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; }
.plan dt { font-weight: 700; font-size: 14.5px; color: var(--ink-2); }
.plan dd { margin: 0; font-size: 16px; }
.plan dd ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }

.simple-btn {
  margin-top: 36px; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; text-align: left;
  padding: 16px 20px 16px 16px; border: 0; border-radius: 22px; background: var(--green); color: var(--green-ink); cursor: pointer;
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--green) 85%, transparent); transition: transform 0.15s ease, filter 0.15s ease;
}
.simple-btn:hover { filter: brightness(1.05); }
.simple-btn .ico { width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, var(--green-ink) 14%, transparent); display: grid; place-items: center; }
.simple-btn .ico svg, .simple-btn .chev { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.simple-btn .t1 { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; }
.simple-btn .t2 { display: block; font-size: 15px; opacity: 0.88; }
.simple-btn .chev { transition: transform 0.3s ease; }
.simple-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.drawer.open { grid-template-rows: 1fr; }
.drawer > div { overflow: hidden; min-height: 0; }
.simple { margin-top: 12px; border-radius: 24px; background: var(--green-soft); border: 1px solid var(--green-line); padding: 26px 22px; display: grid; gap: 20px; }
.simple .block2 { display: grid; gap: 6px; }
.simple h4 { margin: 0; font-size: 19px; color: var(--green); line-height: 1.3; }
.simple p { font-size: 18px; }
.merk { display: grid; gap: 10px; }
.merk .eyebrow { color: var(--green); }
.merk-item { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 16px; padding: 13px 16px; font-family: var(--display); font-size: 21px; line-height: 1.3; }
.merk-item svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.quiz { margin-top: 44px; display: grid; gap: 14px; scroll-margin-top: calc(var(--topbar) + 60px); }
.quiz-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.quiz-head span { font-size: 15px; color: var(--ink-2); }
.quiz-body { display: grid; gap: 12px; }
.q { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 12px; }
.qn { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.qt { font-size: 18.5px; font-weight: 700; line-height: 1.4; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.45; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.opt:hover:not([disabled]) { border-color: var(--petrol); }
.opt .k { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.opt.ok { border-color: var(--green); background: var(--green-soft); }
.opt.ok .k { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.opt.no { border-color: var(--coral); background: var(--coral-soft); }
.opt.no .k { background: var(--coral); border-color: var(--coral); color: var(--coral-ink); }
.opt[disabled] { cursor: default; }
.fb { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-size: 16px; }
.fb strong { color: var(--green); }
.fb.bad strong { color: var(--coral); }
.score { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 18px; border-radius: 18px; background: var(--petrol-soft); }
.score b { font-size: 19px; }
.src { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }

.search-big { position: relative; }
.search-big input { width: 100%; font: inherit; font-size: 20px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 18px 16px 56px; box-shadow: var(--shadow); }
.search-big input:focus { outline: 2px solid var(--petrol); outline-offset: 2px; }
.search-big svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--ink-3); }
.results { display: grid; gap: 10px; margin-top: 22px; }
.result { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.result:hover { border-color: var(--petrol); }
.result .rt { font-weight: 700; font-size: 17px; }
.result .rs { grid-column: 1; font-size: 14.5px; color: var(--ink-2); }
.result .chip { grid-row: 1 / span 2; grid-column: 2; }
.result mark { background: var(--ochre-soft); color: inherit; border-radius: 4px; padding: 0 2px; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-2); display: grid; gap: 14px; justify-items: center; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.suggest button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); cursor: pointer; font-weight: 600; font-size: 15px; }
.suggest button:hover { border-color: var(--petrol); color: var(--petrol); }

.topic-card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.topic-top { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px; align-items: start; }
.topic-top h2 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 4px 0 6px; }
.topic-body { border-top: 1px solid var(--line); padding: 4px 22px 22px; }
.topic-body .article { max-width: 760px; }
.topic-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 22px; }
.own { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.own .datebox { width: 56px; background: var(--petrol-soft); color: var(--petrol); }
.own .datebox .d { font-size: 24px; }
.own .t { font-weight: 700; }
.own .links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.own .del { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.own .del:hover { color: var(--coral); border-color: var(--coral-line); }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }

.kb-card { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; align-items: start; }
.kb-num { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--petrol); text-align: center; padding-top: 2px; }
.kb-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.4; font-weight: 600; }

.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-head .avatar { width: 64px; height: 64px; font-size: 24px; }

.offer-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--green); color: var(--green-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.offer-tag.light { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.offer-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 16px; background: var(--green-soft); border: 1px solid var(--green-line); font-size: 14.5px; line-height: 1.45; }
.offer-card {
  position: relative; overflow: hidden; margin-top: 16px; border-radius: 24px; padding: 26px 26px 24px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 24px; box-shadow: var(--shadow);
}
.offer-card::after {
  content: ""; position: absolute; right: -40px; top: -30px; width: 340px; height: 260px; pointer-events: none; opacity: 0.13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8.5 41H16.5L21.5 16.5L38.5 46.5L43.5 22' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.offer-body { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: start; max-width: 62ch; }
.offer-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.15; text-wrap: balance; }
.offer-card p { color: rgba(255, 255, 255, 0.9); font-size: 16.5px; }
.offer-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 700; font-size: 15px; }
.offer-points li { display: inline-flex; align-items: center; gap: 6px; }
.offer-points svg { width: 18px; height: 18px; color: #BFF0D2; stroke-width: 2.4; }
.btn.light { position: relative; z-index: 1; background: #FFFFFF; color: #1D6A73; }
.btn.light:hover { filter: none; background: #F1FAF7; }
.pro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.price-card { position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 28px 26px 24px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.price-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }
.price { display: flex; align-items: flex-start; gap: 4px; margin: 0; }
.price .amount { font-size: 76px; font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price .cur { font-size: 30px; font-weight: 700; color: var(--petrol); margin-top: 6px; }
.price-sub { color: var(--ink-2); font-weight: 600; }
.check-list, .free-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.check-list svg { width: 22px; height: 22px; color: var(--green); stroke-width: 2.2; margin-top: 1px; }
.free-card { gap: 14px; }
.free-list li { display: grid; gap: 2px; padding-left: 14px; border-left: 3px solid var(--green-line); }
.free-list span { font-size: 14.5px; color: var(--ink-2); }

.contact-wrap { max-width: 720px; }
.contact-form { position: relative; }
.contact-card { max-width: 640px; }
.contact-card .page-head { margin-bottom: 0; }
.contact-done { justify-items: start; }
.done-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.done-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.contact-done h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.report { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-size: 15px; color: var(--ink-2); }
.report .icon { width: 20px; height: 20px; color: var(--petrol); }
.report a { font-weight: 700; }

.foot { border-top: 1px solid var(--line); margin-top: 48px; }
.foot-inner { max-width: 1120px; margin: 0 auto; padding: 26px 24px 34px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-3); }
.foot-name { font-family: var(--display); font-size: 20px; color: var(--ink); letter-spacing: 0.03em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.foot-c { font-family: var(--body); font-size: 14px; letter-spacing: 0; color: var(--ink-3); }
.foot p { max-width: 90ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--petrol); }
.auth-foot a { color: inherit; }

dialog.notice-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--ochre-soft)}
.notice-bar .notice-ico{width:36px;height:36px;border-radius:10px;background:var(--paper);color:var(--ochre);display:grid;place-items:center}.notice-bar .notice-ico svg{width:20px;height:20px}.notice-bar-copy{min-width:0}.notice-bar h2{margin:0;font-size:15px}.notice-bar p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.3}.notice-bar .btn{justify-self:end;white-space:nowrap}@media(max-width:560px){.notice-bar{grid-template-columns:auto minmax(0,1fr);align-items:start}.notice-bar .btn{grid-column:2;justify-self:start}}

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: var(--shadow-lg); z-index: 60; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; }
.scrim { display: none; }

[lang="ar"] { font-family: var(--arabic); }
.langpick { position: relative; justify-self: start; }
.lang-btn { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: inherit; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.lang-btn:hover { border-color: var(--green); }
.lang-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lang-btn .chev { width: 17px; height: 17px; opacity: 0.6; transition: transform 0.2s ease; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-btn[data-on="1"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.lang-btn.busy { opacity: 0.6; pointer-events: none; }
.lang-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 258px; padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, 0.16)); display: grid; gap: 2px; }
.lang-head { margin: 4px 8px 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.lang-menu button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--green-soft); }
.lang-menu .ln { font-size: 16.5px; font-weight: 600; line-height: 1.3; text-align: left; unicode-bidi: plaintext; }
.lang-btn .lang-cur { unicode-bidi: plaintext; }
.lang-menu .ld { grid-column: 1; font-size: 13.5px; color: var(--ink-2); }
.lang-menu .tick { grid-column: 2; grid-row: 1 / span 2; width: 19px; height: 19px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lang-menu button[aria-checked="true"] .tick { opacity: 1; }
.lang-menu button[aria-checked="true"] .ln { color: var(--green); }
.lang-off { margin-top: 4px; border-top: 1px solid var(--line) !important; border-radius: 0 0 12px 12px !important; padding-top: 11px !important; }

.tr-block, .tr-only { display: none; }
.tr-on .tr-block { display: grid; }
.tr-on section.tr-only { display: grid; }
.tr-on .toc a.tr-only { display: block; }
.tr-on .chipnav a.tr-only { display: inline-block; }
.tr-block {
  gap: 12px; margin-top: 18px; padding: 18px 20px; border-radius: 18px;
  background: var(--green-soft); border: 1px solid var(--green-line, var(--line));
  font-size: 17.5px; line-height: 1.85;
}
.tr-block, .tr-block * { letter-spacing: 0 !important; text-transform: none !important; }
.tr-block h4 { margin: 6px 0 0; font-size: 18.5px; line-height: 1.6; }
.tr-block i { font-family: var(--body); direction: ltr; unicode-bidi: isolate; }
.tr-block .plain, .tr-block .care ul, .tr-block .summary ul { gap: 6px; }
.tr-block .callout, .tr-block .alarm, .tr-block .plan, .tr-block .care > div { font-size: 17px; }
.tr-block .fast p, .tr-block .care ul, .tr-block .plan dd { font-size: 16.5px; line-height: 1.8; }
.tr-block .plan dt { font-size: 15px; }
.tr-block .step p { font-size: 17px; line-height: 1.8; }
.tr-block .step .lab { font-size: 13.5px; }
.tr-block[dir="rtl"] { font-family: var(--arabic); }
.tr-label { justify-self: start; padding: 2px 12px; border-radius: 999px; background: var(--paper); color: var(--green); font-size: 13.5px; font-weight: 700; line-height: 1.8; }
.tr-title { font-size: 21px; font-weight: 700; line-height: 1.5; }
.summary + .tr-summary { margin-top: 12px; }
.plate .tr-fig { margin-top: 4px; }
.simple .tr-block { background: var(--paper); }
.tr-quiznote { margin-top: 28px; }
.tr-terms { list-style: none; margin: 0; padding: 0; }
.tr-terms li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tr-terms li:first-child { border-top: 1px solid var(--line); }
.tr-terms .de { font-weight: 600; flex: 1 1 220px; }
.tr-terms .tl { flex: 1 1 220px; font-size: 17.5px; line-height: 1.7; color: var(--green); text-align: start; }
.tr-terms .tl[dir="rtl"] { font-family: var(--arabic); }

.app-teaser { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease; }
.app-teaser:hover { transform: translateY(-2px); border-color: var(--line-2); }
.app-teaser-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.app-teaser-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-teaser b { display: block; font-size: 17.5px; line-height: 1.3; }
.app-teaser .s { display: block; font-size: 15px; color: var(--ink-2); }
.app-card .btn { justify-self: start; }
.app-card .btn svg { width: 20px; height: 20px; }
.app-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.app-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 16.5px; line-height: 1.5; }
.app-steps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--petrol-soft); color: var(--petrol); display: grid; place-items: center; font-weight: 700; font-size: 14.5px; }
svg.inl { width: 19px; height: 19px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--petrol); }
svg.inl circle { fill: currentColor; stroke: none; }

.pdf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pdf-card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 20px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; box-shadow: var(--shadow); }
.pdf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pdf-code { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #FFFFFF; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; }
.pdf-card h3 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; }
.pdf-de { color: var(--ink-3); font-size: 14px; font-weight: 600; }
.pdf-sub { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.pdf-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.pdf-soon { font-weight: 700; color: var(--ochre); }
@media (max-width: 1180px) { .pdf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .pdf-grid { grid-template-columns: minmax(0, 1fr); } }

.auth-card.wide-card { max-width: 960px; }
.soon-box { margin-bottom: 18px; }
.job-form .btn svg, .emp-form .btn svg { width: 20px; height: 20px; }
.job-result { border-radius: 16px; padding: 14px 16px; background: var(--petrol-soft); display: grid; gap: 4px; font-size: 16px; line-height: 1.5; }
.job-result b { color: var(--petrol); }
.job-result.warn { background: var(--ochre-soft); }
.job-result.warn b { color: var(--ochre); }
.job-count { margin: -6px 0 14px; }
.job-groups { display: grid; gap: 10px; }
.job-group { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.job-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-weight: 700; font-size: 17px; }
.job-group > summary::-webkit-details-marker { display: none; }
.job-group > summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); margin: -4px 4px 0 6px; transition: transform 0.2s ease; }
.job-group[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.jg-t { flex: 1 1 auto; min-width: 0; }
.jg-n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 15px; font-weight: 600; }
.job-list { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.job-item { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15.5px; line-height: 1.35; text-align: start; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.job-item:hover { border-color: var(--petrol); }
.job-item.hit { border-color: var(--petrol); background: var(--petrol-soft); }
.job-item .na { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--bg-2); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.emp-steps b { display: block; font-size: 17px; }
.emp-steps .d { display: block; color: var(--ink-2); font-size: 16px; }
fieldset.plain-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:disabled:hover { filter: none; }
fieldset[disabled] .field input, fieldset[disabled] .field select, fieldset[disabled] .field textarea { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--petrol); }
@media (max-width: 720px) {
  .job-list { grid-template-columns: minmax(0, 1fr); }
  .auth-card.wide-card { padding: 24px 16px; }
}

@media (max-width: 1180px) {
  .article-wrap { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .chipnav { display: block; }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 50; transform: translateX(-102%); transition: transform 0.28s ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .sb-close { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(8, 20, 24, 0.45); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .menu-btn, .icon-btn { display: inline-flex; }
  .topbar .brand { display: inline-flex; }
  .topbar .brand-name { font-size: 19px; }
  .topbar .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .quick { display: none; }
  .topbar .construction { display: none; }
  .soon-list.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-btn { margin-left: auto; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .topbar-inner, .page, .foot-inner, .preview-bar div { padding-inline: 16px; }
  .chipnav { margin-inline: -16px; padding-inline: 16px; }
  .page { padding-block: 26px 16px; }
  .grid-2, .grid-3, .soon-list, .soon-list.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .soon-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fast { grid-template-columns: 1fr 1fr; }
  .split, .care, .form-grid, .pro-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-card { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .offer-card::after { width: 200px; height: 160px; right: -70px; top: -44px; opacity: 0.1; }
  .offer-card .btn { justify-self: start; }
  .plan dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .plan dd { margin-bottom: 10px; }
  .auth-card { padding: 28px 20px; border-radius: 22px; }
  .kb-card { grid-template-columns: 48px 1fr; gap: 12px; padding: 18px; }
  .kb-num { font-size: 34px; }
  .dcard { grid-template-columns: auto 1fr; }
  .dcard .go { display: none; }
  .topic-top { grid-template-columns: minmax(0, 1fr); }
  .own { grid-template-columns: auto 1fr; }
  .own .del { grid-column: 2; justify-self: end; }
}
@media (max-width: 380px) {
  .topbar .brand-name { display: none; }
}

html.nm-ruhig *,
html.nm-ruhig *::before,
html.nm-ruhig *::after { animation: none !important; transition: none !important; }

.sb-item .pro-lock { margin-left: auto; width: 26px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); flex: 0 0 auto; }
.sb-item .pro-lock svg { width: 14px; height: 14px; stroke-width: 2.1; }
.azubi-teaser .app-teaser-ico { background: linear-gradient(135deg, #2F8A5E, #1D6A73); }

.lock-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: 26px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lock-body { padding: 28px 26px; display: grid; gap: 16px; align-content: start; justify-items: start; }
.lock-body h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.2vw, 32px); line-height: 1.15; text-wrap: balance; }
.lock-body .check-list { font-size: 16.5px; }
.lock-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--petrol-soft); color: var(--petrol); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.lock-badge svg { width: 17px; height: 17px; }
.lock-body .btn svg { width: 20px; height: 20px; }
#code-wrap { width: 100%; }
.lock-preview { position: relative; padding: 26px 22px; background: linear-gradient(160deg, var(--bg-2), var(--bg)); border-left: 1px solid var(--line); display: grid; gap: 14px; align-content: start; overflow: hidden; }
.lock-preview > .chip { justify-self: start; }
.lock-free { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15.5px; color: var(--ink-2); }
.lock-free svg { width: 20px; height: 20px; color: var(--green); }
.code-form { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.code-form input { text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.code-form .btn svg { width: 19px; height: 19px; }
.code-card { max-width: 640px; }

.pv-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 11px; display: grid; gap: 5px; align-content: start; }
.pv-card .k { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pv-card b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--petrol); }
.pv-card.warn b { color: var(--coral); }
.pv-card .u { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.pv-rows { display: grid; gap: 6px; }
.pv-rows p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.pv-rows p em { grid-column: 2; font-style: normal; font-weight: 700; color: var(--green); font-size: 12.5px; }
.pv-rows p em.c { color: var(--coral); }
.pv-rows.st p { grid-template-columns: minmax(0, 1fr); }
.pv-rows.st p b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--petrol); }
.pv-find { display: grid; gap: 6px; }
.pv-in { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.pv-in svg { width: 18px; height: 18px; color: var(--ink-3); }
.pv-k { font-size: 13.5px; color: var(--ink-2); padding-left: 4px; }
.pv-paper { position: relative; background: #FFFFFF; color: #1A1A1A; border-radius: 6px; padding: 22px 22px 60px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.5; display: grid; gap: 8px; max-height: 300px; overflow: hidden; }
.pv-paper .r { text-align: right; color: #555555; }
.pv-paper .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF); }
.bar { display: block; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }
.bar.big { height: 10px; }

.rights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.right-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.right-card h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.right-card p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.right-card .law { padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--petrol); letter-spacing: 0.02em; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; justify-items: start; padding: 20px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease; }
.tool-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tool-card b { font-size: 18px; line-height: 1.3; }
.tool-card .s { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tool-card .chip svg { width: 14px; height: 14px; }
.tool-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.tool-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tool-more { margin-top: 12px; }
.auth-card .rights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-card .tool-grid { grid-template-columns: minmax(0, 1fr); }

.tb-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sum-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow); }
.sum-card .k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sum-card b { font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--petrol); }
.sum-card.warn b { color: var(--coral); }
.sum-card .u { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.tb-actions { margin-bottom: 14px; }
.tb-actions .btn svg, .tb-form .btn svg, .card .btn svg { width: 20px; height: 20px; }
.tb-form { margin-bottom: 18px; scroll-margin-top: calc(var(--topbar) + 16px); }
.tb-form h3 { margin: 0; font-size: 19px; }
.calc-line { font-size: 15px; font-weight: 600; color: var(--petrol); font-variant-numeric: tabular-nums; }
.calc-line:empty { display: none; }
.tb-more { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.tb-more > summary { cursor: pointer; font-weight: 700; padding: 12px 0; color: var(--ink-2); }
.tb-more[open] { padding-bottom: 14px; }
.ez-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: grid; gap: 10px; }
.ez-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ez-head h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.tb-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-mini { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; display: inline-grid; place-items: center; flex: 0 0 auto; }
.icon-mini svg { width: 18px; height: 18px; }
.icon-mini:hover { color: var(--petrol); border-color: var(--petrol); }
.icon-mini.del:hover, .icon-mini.armed { color: var(--coral); border-color: var(--coral-line); background: var(--coral-soft); }
.tb-month { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }
.tb-month:first-child { margin-top: 0; }
.tb-day { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 8px; }
.tb-date { display: grid; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.tb-date b { color: var(--ink); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.tb-main { display: grid; gap: 4px; min-width: 0; }
.tb-line { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.tb-line .chip { vertical-align: 1px; margin-right: 4px; }
.tb-sub { font-size: 14px; color: var(--ink-2); }
.tb-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tb-flags .chip { white-space: normal; font-size: 13px; }
.wk-list { display: grid; gap: 6px; margin-bottom: 10px; }
.wk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; font-variant-numeric: tabular-nums; }
.wk-t { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 15px; color: var(--ink-2); }
.wk-t b { color: var(--ink); }
.wk-h { font-weight: 700; }
.loading-line { display: flex; align-items: center; gap: 12px; color: var(--ink-2); padding: 20px 0; }
.loading-line .spinner { width: 24px; height: 24px; border-width: 3px; }

.st-form { margin-bottom: 20px; }
.st-search { position: relative; }
.st-sugg { list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; left: 0; right: 0; top: 100%; z-index: 15; background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.st-sugg button { width: 100%; display: grid; gap: 1px; text-align: start; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: var(--ink); }
.st-sugg button:hover, .st-sugg button.on { background: var(--petrol-soft); }
.st-sugg b { font-size: 16px; }
.st-sugg span { font-size: 13.5px; color: var(--ink-2); }
.st-sugg .none { padding: 10px 12px; color: var(--ink-2); font-size: 15px; }
.st-head { display: grid; gap: 4px; margin-bottom: 14px; }
.st-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.1; }
#st-out { scroll-margin-top: calc(var(--topbar) + 16px); }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.st-card { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 20px; display: grid; gap: 10px; box-shadow: var(--shadow); min-width: 0; }
.st-card h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.st-unit { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-top: -6px; }
.st-what { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.st-addr { font-style: normal; font-size: 16px; line-height: 1.5; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.st-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-contact li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 15.5px; }
.st-contact li > svg { width: 18px; height: 18px; color: var(--petrol); }
.st-contact a { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.st-contact .icon-mini { width: 34px; height: 34px; }
.st-card .btn svg { width: 18px; height: 18px; }
.st-sub { display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.st-sub:first-of-type { border-top: 0; padding-top: 0; }
.sel { -webkit-user-select: all; user-select: all; font-weight: 600; overflow-wrap: anywhere; }

.brief-note { margin-bottom: 20px; }
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 24px; align-items: start; }
.brief-form { display: grid; gap: 16px; min-width: 0; }
.brief-step { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 20px; display: grid; gap: 14px; min-width: 0; }
.brief-step h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 19px; line-height: 1.3; }
.brief-step h2 .n { width: 30px; height: 30px; border-radius: 50%; background: var(--petrol); color: var(--petrol-ink); display: grid; place-items: center; font-size: 15px; flex: 0 0 30px; }
.brief-step .btn svg, .brief-form .btn svg { width: 18px; height: 18px; }
.brief-step > .btn { justify-self: start; }
.empf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.empf-opt { display: grid; gap: 2px; align-content: start; text-align: start; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); cursor: pointer; }
.empf-opt b { font-size: 15.5px; }
.empf-opt span { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.empf-opt[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-soft); box-shadow: inset 0 0 0 1px var(--petrol); }
.empf-opt[aria-pressed="true"] b { color: var(--petrol); }
#bf-emp { display: grid; gap: 12px; }
#bf-emp:empty { display: none; }
.emp-found { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--green-soft); border: 1px solid var(--green-line); font-size: 15px; line-height: 1.5; }
.emp-found svg { width: 20px; height: 20px; color: var(--green); margin-top: 2px; }
.th-list { display: grid; gap: 8px; }
.th { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: border-color 0.15s ease, background 0.15s ease; }
.th.on { border-color: var(--petrol); background: var(--paper); }
.th-check { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 16px; }
.th-check input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--petrol); }
.th-fields { padding: 0 14px 14px; display: grid; gap: 12px; }
.th-fields textarea, .brief-form textarea { min-height: 96px; }
.brief-side { position: sticky; top: calc(var(--topbar) + 16px); min-width: 0; }
.brief-sticky { display: grid; gap: 12px; }
.brief-missing { font-size: 14.5px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; background: var(--ochre-soft); }
.brief-missing b { color: var(--ochre); }
.brief-actions { display: grid; gap: 8px; }
.brief-actions .btn svg { width: 19px; height: 19px; }
.paper-wrap { position: relative; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-lg); background: #FFFFFF; }
mark.ph { background: #FFE8A3; color: #5A4200; border-radius: 3px; padding: 0 2px; }

.din { position: relative; width: 210mm; min-height: 297mm; background: #FFFFFF; color: #111111; font-family: var(--body); font-size: 11pt; line-height: 1.38; transform-origin: 0 0; letter-spacing: 0; text-align: left; }
.din p { margin: 0 0 4.2mm; }
.din ul { margin: -1.8mm 0 4.2mm; padding-left: 6mm; }
.din li { margin: 0 0 1mm; }
.din-kopf { position: absolute; top: 16mm; right: 20mm; width: 90mm; text-align: right; font-size: 9.5pt; line-height: 1.35; }
.din-feld { position: absolute; top: 45mm; left: 20mm; width: 85mm; height: 45mm; }
.din-zusatz { height: 17.7mm; padding-left: 5mm; display: flex; align-items: flex-end; padding-bottom: 1mm; }
.din-rueck { font-size: 7pt; line-height: 1.2; text-decoration: underline; text-underline-offset: 1px; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80mm; }
.din-anschrift { height: 27.3mm; padding-left: 5mm; font-size: 10pt; line-height: 1.3; overflow: hidden; }
.din-info { position: absolute; top: 50mm; left: 125mm; width: 75mm; display: grid; gap: 0.6mm; font-size: 9.5pt; line-height: 1.35; }
.din-info span:last-child { margin-top: 3mm; }
.din-info span:only-child { margin-top: 0; }
.din-text { padding: 98.4mm 20mm 0 25mm; }
.din-betreff { font-weight: 700; margin-bottom: 8.4mm !important; }
.din-gruss { margin-top: 6mm !important; margin-bottom: 14mm !important; }
.din-mark { position: absolute; left: 4mm; width: 5mm; height: 0; border-top: 0.25mm solid #999999; }
.din-mark.m1 { top: 105mm; }
.din-mark.m2 { top: 148.5mm; width: 7mm; }
.din-mark.m3 { top: 210mm; }

#print-area { display: none; }
.rep { font-family: var(--body); color: #111111; font-size: 10pt; line-height: 1.4; }
.rep h1 { font-family: var(--display); font-weight: 400; font-size: 20pt; margin: 0 0 2mm; }
.rep h2 { font-size: 12pt; margin: 7mm 0 2.5mm; }
.rep-meta { color: #444444; margin-bottom: 4mm; }
.rep table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rep th, .rep td { border: 0.2mm solid #BBBBBB; padding: 1.4mm 2mm; text-align: left; vertical-align: top; }
.rep th { background: #EEF3F4; font-weight: 700; }
.rep tr { break-inside: avoid; page-break-inside: avoid; }
.rep small { color: #555555; }
.rep-sum { margin-top: 3mm; font-weight: 700; }
.rep-note { margin-top: 6mm; font-size: 8.5pt; color: #555555; }
@media print {
  body.printing { background: #FFFFFF !important; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block !important; }
  body.print-brief #print-area .din { transform: none !important; min-height: 0; box-shadow: none; }
  body.printing mark.ph { background: none; color: #000000; }
}

@media (max-width: 1180px) {
  .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .brief-side { position: static; }
  .brief-sticky { max-width: 560px; }
  .st-grid, .rights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .lock-card { grid-template-columns: minmax(0, 1fr); }
  .lock-preview { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .tb-sum, .st-grid, .rights-grid, .tool-grid, .auth-card .rights-grid { grid-template-columns: minmax(0, 1fr); }
  .sum-card b { font-size: 30px; }
  .tb-day { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; }
  .tb-day .tb-btns { grid-column: 2; justify-content: flex-end; margin-top: -4px; }
  .wk { grid-template-columns: minmax(0, 1fr) auto; }
  .wk > .chip { grid-column: 1 / -1; justify-self: start; }
  .lock-body { padding: 22px 18px; }
  .lock-preview { padding: 20px 16px; }
  .brief-step { padding: 16px; }
  .st-head h2 { font-size: 28px; }
}
@media (max-width: 420px) {
  .pv-sum { grid-template-columns: minmax(0, 1fr); }
}
.rights-grid + .block, .pro-grid + .block { margin-top: 40px; }
.rep .nw { white-space: nowrap; }

.legal { max-width: 760px; display: grid; gap: 4px; }
.legal-sec { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-sec:first-child { border-top: 0; padding-top: 4px; }
.legal-sec h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--green); }
.legal-sec p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.7; }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec .plain { margin: 0 0 10px; }
.legal-sec .plain li { font-size: 16.5px; line-height: 1.6; }
.legal-adr { padding: 14px 18px; border-radius: 14px; background: var(--paper-2, var(--paper)); border: 1px solid var(--line); font-weight: 600; }

.prowall .notice-in { gap: 14px; }
.prowall .pw-list { margin: 0; text-align: start; }
.prowall .pw-list li { font-size: 15.5px; }
.prowall .pw-actions { display: grid; gap: 8px; }
.prowall .pw-close { border: 0; color: var(--ink-2); font-size: 15px; }
.prowall .code-form { margin-top: 4px; }
.st-blur { display: grid; gap: 3px; }
.st-blur .st-hidden { display: block; width: 62%; height: 15px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--line) 0 9px, transparent 9px 13px); color: transparent; overflow: hidden; }
.st-blur .st-hidden + .st-hidden { width: 48%; }

.lic-form { display: grid; gap: 14px; }
.lic-pre { margin: 14px 0; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font-family: var(--body); font-size: 15.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.price-card-2 { background: var(--paper); color: inherit; border: 1px solid var(--line-2); }
.price-card-2 .price-h { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; }
.price-card-2 .amount { color: var(--green); }

.d-print { margin: 30px 0 4px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 10px; }
.d-print .row { flex-wrap: wrap; }

.print-lern #print-area { font-size: 11pt; line-height: 1.5; color: #000; }
.print-lern #print-area .pr-head { margin-bottom: 14pt; padding-bottom: 8pt; border-bottom: 1.5pt solid #000; }
.print-lern #print-area .pr-brand { margin: 0 0 2pt; font-size: 9pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.print-lern #print-area h1 { margin: 0; font-size: 20pt; line-height: 1.2; }
.print-lern #print-area .pr-sub { margin: 3pt 0 0; font-size: 10pt; font-style: italic; }
.print-lern #print-area .pr-h2 { margin: 14pt 0 5pt; font-size: 13pt; line-height: 1.3; page-break-after: avoid; }
.print-lern #print-area .pr-sec { page-break-inside: auto; }
.print-lern #print-area .pr-sum { margin: 10pt 0; padding: 8pt 10pt; border: 0.8pt solid #999; border-radius: 3pt; }
.print-lern #print-area .pr-eyebrow { margin: 0 0 4pt; font-size: 8.5pt; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.print-lern #print-area ul, .print-lern #print-area ol { margin: 4pt 0 8pt; padding-left: 14pt; }
.print-lern #print-area li { margin-bottom: 2.5pt; }
.print-lern #print-area .pr-tr { margin: 6pt 0 0; padding: 6pt 9pt; border-left: 2pt solid #999; page-break-inside: avoid; }
.print-lern #print-area .pr-trlabel { margin: 0 0 3pt; font-size: 8.5pt; font-weight: 700; }
.print-lern #print-area .pr-terms { list-style: none; margin: 6pt 0; padding: 0; columns: 2; column-gap: 16pt; }
.print-lern #print-area .pr-terms li { display: block; margin-bottom: 4pt; padding-bottom: 3pt; border-bottom: 0.4pt solid #ccc; break-inside: avoid; }
.print-lern #print-area .pr-terms .de { display: block; font-weight: 700; font-size: 10pt; }
.print-lern #print-area .pr-terms .tl { display: block; font-size: 10pt; }
.print-lern #print-area .pr-src { margin-top: 14pt; padding-top: 6pt; border-top: 0.6pt solid #999; font-size: 8pt; line-height: 1.4; }
.print-lern #print-area .pr-note { margin-top: 5pt; font-size: 8pt; line-height: 1.4; font-weight: 700; }
.print-lern #print-area svg, .print-lern #print-area .plate, .print-lern #print-area figure { display: none; }

.renew-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 24px; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--green-line, var(--line)); background: var(--green-soft); }
.renew-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--green); color: var(--green-ink); }
.renew-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.renew-bar b { display: block; font-size: 16.5px; line-height: 1.3; }
.renew-bar .s { display: block; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 720px) { .renew-bar { grid-template-columns: auto minmax(0, 1fr); } .renew-bar .btn { grid-column: 1 / -1; justify-self: start; } }

.wegs { display: grid; gap: 10px; }
.wegs button { display: grid; gap: 3px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--paper); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.wegs button:hover { border-color: var(--green); }
.wegs button b { font-size: 16.5px; line-height: 1.3; }
.wegs button span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.wegs button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.wegs button[aria-pressed="true"] b { color: var(--green); }

.print-lern #print-area .pr-table { width: 100%; border-collapse: collapse; margin: 10pt 0; font-size: 10pt; }
.print-lern #print-area .pr-table th { padding: 4pt 5pt; text-align: start; border-bottom: 1pt solid #000; font-size: 9pt; }
.print-lern #print-area .pr-table td { padding: 4pt 5pt; border-bottom: 0.4pt solid #bbb; }
.print-lern #print-area .pr-table td:not(:first-child) { text-align: end; }
.print-lern #print-area .pr-sum-row td { font-weight: 700; border-top: 1pt solid #000; border-bottom: 0; }

.sb-count { margin: 0 0 18px; font-size: 15px; color: var(--ink-2); }
.sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.sb-card:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: var(--shadow-lg, var(--shadow)); }
.sb-card:hover .sb-nr { background: var(--green); color: var(--green-ink); }
.sb-nr { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; transition: background 0.18s ease, color 0.18s ease; }
.sb-body { display: grid; gap: 2px; min-width: 0; }
.sb-body b { font-size: 16.5px; line-height: 1.3; }
.sb-body .s { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-g { font-size: 12.5px; color: var(--green); font-weight: 600; }
.sb-card > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); transition: transform 0.18s ease; }
.sb-card:hover > svg { transform: translateX(3px); color: var(--green); }
@media (max-width: 720px) { .sb-grid { grid-template-columns: minmax(0, 1fr); } }

.topic-expl { margin: 12px 0 4px; padding: 14px 16px; border-radius: 15px; background: var(--green-soft); border: 1px solid var(--green-line, var(--line)); display: grid; gap: 6px; }
.topic-expl .eyebrow { display: flex; align-items: center; gap: 7px; color: var(--green); }
.topic-expl .eyebrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.topic-expl .te-t { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.topic-expl .te-a { font-weight: 400; font-size: 14px; color: var(--ink-2); }
.topic-expl .te-d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.topic-expl .btn { justify-self: start; margin-top: 4px; }

.ls-card { display: grid; gap: 14px; }
.ls-hits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: var(--green-soft); }
.ls-hits .eyebrow { flex: 1 0 100%; display: flex; align-items: center; gap: 7px; margin: 0 0 2px; color: var(--green); }
.ls-hits .eyebrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ls-hits .chip { text-decoration: none; }
.ls-tipp { display: grid; gap: 8px; margin-top: 8px; }
.ls-kbbtn { display: grid; gap: 2px; padding: 11px 14px; border-radius: 13px; border: 1.5px solid var(--line); background: var(--paper); color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.ls-kbbtn:hover { border-color: var(--green); background: var(--green-soft); transform: translateX(2px); }
.ls-kbbtn b { font-size: 15.5px; color: var(--green); }
.ls-kbbtn span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.ls-kurz { flex: 1 0 100%; margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ls-qs { list-style: none; counter-reset: q; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ls-qs > li { counter-increment: q; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--paper); }
.ls-qtop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.ls-qt::before { content: counter(q) ". "; font-weight: 700; color: var(--green); }
.ls-qt { font-size: 15.5px; line-height: 1.45; }
.ls-qs .del { border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 6px; border-radius: 8px; }
.ls-qs .del:hover { color: var(--coral, var(--ink)); background: var(--bg, transparent); }
.ls-qs .del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ls-qs > li > .hint { margin: 6px 0 0; }
.ls-antwort { margin-top: 10px; padding: 12px 15px; border-radius: 12px; background: var(--green-soft); animation: nm-fade 0.24s ease both; }
.ls-antwort .eyebrow { margin: 0 0 8px; color: var(--green); }
.ls-antwort p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.ls-antwort > :last-child { margin-bottom: 0; }
.ls-antwort ul { margin: 0 0 8px; font-size: 15px; line-height: 1.55; gap: 6px; }
.ls-antwort li { font-size: 15px; line-height: 1.55; }

.sb-card.voll .sb-nr { background: var(--petrol-soft); color: var(--petrol); }
.sb-card.voll .sb-nr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sb-card.voll:hover { border-color: var(--petrol); }
.sb-card.voll:hover .sb-nr { background: var(--petrol); color: var(--paper); }
.sb-card.voll .sb-g { color: var(--petrol); }
.sb-card.voll:hover > svg { color: var(--petrol); }

.print-lern #print-area .pr-line { margin: 4pt 0; font-size: 10pt; }
.print-lern #print-area .pr-h3 { margin: 8pt 0 3pt; font-size: 11pt; }
.print-lern #print-area .pr-q { margin: 4pt 0 0; padding-left: 16pt; }
.print-lern #print-area .pr-q li { margin-bottom: 4pt; }
.print-lern #print-area .pr-qa { margin: 0 0 10pt; padding-bottom: 6pt; border-bottom: 0.4pt solid #ccc; }
.print-lern #print-area .pr-q1 { margin: 0 0 2pt; font-size: 11pt; font-weight: 700; }
.print-lern #print-area .pr-q2 { margin: 0 0 4pt; font-size: 9pt; font-style: italic; }

.d-head-top { display: flex; align-items: center; gap: 12px; }
.d-head-top .eyebrow { margin: 0; }
.d-med-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--petrol) 10%, transparent); }
.d-med-icon svg { width: 31px; height: 31px; transform-origin: 50% 50%; }
.dcard .ticon svg { transform-origin: 50% 50%; }
html.nm-bewegung .dcard { position: relative; overflow: hidden; }
html.nm-bewegung .dcard::after { content: ''; position: absolute; inset: auto 18px 0 18px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--petrol), var(--green), transparent); transform: scaleX(0); opacity: .65; transition: transform .34s cubic-bezier(.22,.85,.3,1); }
html.nm-bewegung .dcard:hover::after, html.nm-bewegung .dcard:focus-visible::after { transform: scaleX(1); }

@keyframes nm-med-heart { 0%,100% { transform: scale(1); } 18% { transform: scale(1.12); } 34% { transform: scale(.98); } 48% { transform: scale(1.08); } 66% { transform: scale(1); } }
@keyframes nm-med-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes nm-med-neuro { 0%,100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(2px) rotate(2deg); } 60% { transform: translateX(-2px) rotate(-2deg); } }
@keyframes nm-med-metabolic { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(7deg) scale(1.06); } 100% { transform: rotate(0) scale(1); } }
@keyframes nm-med-infection { 0%,100% { transform: scale(1); filter: none; } 50% { transform: scale(1.1); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--coral) 45%, transparent)); } }
@keyframes nm-med-care { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

html.nm-bewegung .motion-heart:hover .ticon svg, html.nm-bewegung .motion-heart:focus-visible .ticon svg,
html.nm-bewegung .d-head.motion-heart .d-med-icon svg { animation: nm-med-heart 1.15s ease-in-out; }
html.nm-bewegung .motion-breath:hover .ticon svg, html.nm-bewegung .motion-breath:focus-visible .ticon svg,
html.nm-bewegung .d-head.motion-breath .d-med-icon svg { animation: nm-med-breath 2.2s ease-in-out infinite; }
html.nm-bewegung .motion-neuro:hover .ticon svg, html.nm-bewegung .motion-neuro:focus-visible .ticon svg,
html.nm-bewegung .d-head.motion-neuro .d-med-icon svg { animation: nm-med-neuro 1.6s ease-in-out; }
html.nm-bewegung .motion-metabolic:hover .ticon svg, html.nm-bewegung .motion-metabolic:focus-visible .ticon svg,
html.nm-bewegung .d-head.motion-metabolic .d-med-icon svg { animation: nm-med-metabolic 1.8s ease-in-out; }
html.nm-bewegung .motion-infection:hover .ticon svg, html.nm-bewegung .motion-infection:focus-visible .ticon svg,
html.nm-bewegung .d-head.motion-infection .d-med-icon svg { animation: nm-med-infection 1.45s ease-in-out; }
html.nm-bewegung .motion-care:hover .ticon svg, html.nm-bewegung .motion-care:focus-visible .ticon svg,
html.nm-bewegung .d-head.motion-care .d-med-icon svg { animation: nm-med-care 1.4s ease-in-out; }

html.nm-bewegung .d-head .d-med-icon { animation: nm-pop .42s cubic-bezier(.22,.85,.3,1) both; }
html.nm-sanft .d-head .d-med-icon, html.nm-sanft .d-head .d-med-icon svg { animation: nm-fade .45s ease both !important; }
html:not(.nm-bewegung) .dcard::after, html:not(.nm-bewegung) .dcard .ticon svg,
html:not(.nm-bewegung) .d-head .d-med-icon, html:not(.nm-bewegung) .d-head .d-med-icon svg { animation: none !important; transition: none !important; transform: none !important; }
@media (max-width: 540px) { .d-med-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; } .d-med-icon svg { width: 27px; height: 27px; } }

@keyframes nm-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nm-pop { 0% { opacity: 0; transform: scale(0.96) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes nm-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.fade-in { animation: nm-fade-up 0.34s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.page > * { animation: nm-fade-up 0.5s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.page > *:nth-child(2) { animation-delay: 0.04s; }
.page > *:nth-child(3) { animation-delay: 0.08s; }
.page > *:nth-child(4) { animation-delay: 0.12s; }
.page > *:nth-child(n+5) { animation-delay: 0.15s; }

.sb-grid .sb-card { animation: nm-fade-up 0.3s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.sb-grid .sb-card:nth-child(1) { animation-delay: 0.02s; }
.sb-grid .sb-card:nth-child(2) { animation-delay: 0.05s; }
.sb-grid .sb-card:nth-child(3) { animation-delay: 0.08s; }
.sb-grid .sb-card:nth-child(4) { animation-delay: 0.11s; }
.sb-grid .sb-card:nth-child(n+5) { animation-delay: 0.13s; }

.notice, .prowall { animation: nm-pop 0.26s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.notice::backdrop, .prowall::backdrop { animation: nm-fade 0.22s ease both; }
.toast.show { animation: nm-pop 0.24s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.renew-bar { animation: nm-fade-up 0.4s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.ls-qs li { animation: nm-slide-in 0.26s cubic-bezier(0.22, 0.85, 0.3, 1) both; }

.btn:active { transform: translateY(1px); }
.spinner { animation: nm-spin 0.75s linear infinite; }
@keyframes nm-spin { to { transform: rotate(360deg); } }

html:not(.nm-bewegung) .fade-in,
html:not(.nm-bewegung) .page > *,
html:not(.nm-bewegung) .sb-grid .sb-card,
html:not(.nm-bewegung) .notice,
html:not(.nm-bewegung) .prowall,
html:not(.nm-bewegung) .toast.show,
html:not(.nm-bewegung) .renew-bar,
html:not(.nm-bewegung) .ls-qs li,
html:not(.nm-bewegung) .notice::backdrop,
html:not(.nm-bewegung) .prowall::backdrop { animation: none !important; }
html:not(.nm-bewegung) .btn,
html:not(.nm-bewegung) .sb-card,
html:not(.nm-bewegung) .tool-card,
html:not(.nm-bewegung) .app-teaser,
html:not(.nm-bewegung) .wegs button,
html:not(.nm-bewegung) .ls-kbbtn,
html:not(.nm-bewegung) .lang-btn { transition: none !important; }
html:not(.nm-bewegung) .btn:active { transform: none; }

.btn.ghost-light { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.6); }
.btn.ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #FFFFFF; color: #FFFFFF; filter: none; }
.bk-loading { min-height: 50vh; display: grid; place-items: center; }
.bk-err { max-width: 560px; }
.bk-err p { font-size: 17px; }

.bk { display: grid; gap: 22px; max-width: 900px; margin-inline: auto; }
.bk[dir="rtl"] { font-family: var(--arabic); line-height: 1.85; }
.bk[dir="rtl"] :is(.bk-title, .bk-sh-head h2, .bk-val, .bk-toc-t, .bk-wall-card h2) { font-family: var(--arabic); font-weight: 700; }
.bk[dir="rtl"] :is(.bk-band, .bk-sh-eyebrow, .bk-box-t, .bk-merke-t, .bk-lockbadge) { letter-spacing: 0; text-transform: none; }
.bk-ltr { font-family: var(--body); font-size: 0.94em; }
.bk[dir="rtl"] .bk-ltr { font-weight: 600; color: var(--petrol); }
.bk[dir="rtl"] .bk-cover .bk-ltr, .bk[dir="rtl"] .bk-merke .bk-ltr { color: inherit; }

.bk-cover { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: clamp(24px, 5vw, 46px); color: #FFFFFF; background: linear-gradient(135deg, #124A52 0%, #1D6A73 48%, #2F8A5E 100%); box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.bk-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 260px at 92% -8%, rgba(255, 255, 255, 0.2), transparent 62%), radial-gradient(460px 240px at -8% 112%, rgba(255, 255, 255, 0.13), transparent 62%); }
.bk-pulse { position: absolute; inset-inline: 0; bottom: 8px; width: 100%; height: 70px; opacity: 0.22; z-index: -1; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.bk-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-brand { font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.92; }
.bk-langs { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); gap: 2px; }
.bk-langs a { padding: 6px 14px; border-radius: 999px; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.bk-langs a[aria-current="page"] { background: #FFFFFF; color: #14555D; }
.bk-band { margin-top: 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; opacity: 0.9; }
.bk-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(38px, 7vw, 64px); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.bk-sub { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; max-width: 54ch; opacity: 0.96; }
.bk-perks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; max-width: 62ch; }
.bk-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 16.5px; line-height: 1.5; }
.bk-perks svg { width: 22px; height: 22px; stroke-width: 2.4; color: #A8E6C3; margin-top: 2px; }
.bk-cover-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.bk-cover-cta .btn svg { width: 20px; height: 20px; }
.bk-state { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.bk-state svg { width: 20px; height: 20px; color: #A8E6C3; stroke-width: 2.6; }
.bk-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14.5px; opacity: 0.88; margin-top: 4px; }
.bk-meta span + span::before { content: "·"; margin-inline-end: 18px; }

.bk-toc { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 22px 22px 12px; box-shadow: var(--shadow); }
.bk-toc-t { margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 26px; }
.bk-toc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bk-toc-list li + li { border-top: 1px solid var(--line); }
.bk-toc-list a { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; color: var(--ink); text-decoration: none; border-radius: 12px; }
.bk-toc-list a:hover { background: var(--bg); }
.bk-tn, .bk-wl-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); font-weight: 700; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.bk-tt, .bk-wl-t { display: grid; gap: 1px; min-width: 0; }
.bk-tt b, .bk-wl-t b { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.bk-tt span, .bk-wl-t span { font-size: 14px; color: var(--ink-3); line-height: 1.4; }
.bk-tl svg, .bk-wl-lock { width: 18px; height: 18px; color: var(--ink-3); }
.bk-toc-list li.off .bk-tn { background: var(--bg-2); color: var(--ink-3); }
.bk-toc-list li.off .bk-tt b { color: var(--ink-2); }

.bk-sheet { background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: clamp(20px, 4vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; scroll-margin-top: calc(var(--topbar) + 14px); overflow-wrap: anywhere; }
.bk-sh-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 16px; border-bottom: 2px solid var(--petrol-soft); }
.bk-sh-n { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #FFFFFF; font-family: var(--body); font-weight: 700; font-size: 26px; line-height: 1; }
.bk-sh-eyebrow { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--petrol); }
.bk-sh-head h2 { margin: 2px 0 2px; font-family: var(--display); font-weight: 400; font-size: clamp(25px, 3.6vw, 32px); line-height: 1.15; text-wrap: balance; }
.bk-sh-k { color: var(--ink-3); font-size: 14.5px; line-height: 1.45; }
.bk-body { display: grid; gap: 14px; }
.bk-p { font-size: 17px; line-height: 1.65; }
.bk-h { margin: 10px 0 -4px; font-size: 18px; font-weight: 700; color: var(--petrol); line-height: 1.3; }
.bk-ul, .bk-ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-size: 16.5px; line-height: 1.55; }
.bk-ul li::marker, .bk-ol li::marker { color: var(--petrol); font-weight: 700; }
.bk-sh-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.bk-sh-foot a { font-weight: 700; }

.bk-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.bk-tile { display: grid; gap: 4px; align-content: start; padding: 14px 16px 12px; padding-inline-start: 20px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); position: relative; overflow: hidden; }
.bk-tile::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--grad-a), var(--grad-b)); }
.bk-val { font-family: var(--body); font-weight: 700; font-size: 25px; line-height: 1.15; letter-spacing: -0.01em; color: var(--petrol); }
.bk-tx { font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.bk-ref { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 2px; }

.bk-box { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid transparent; align-items: start; }
.bk-box p { font-size: 16px; line-height: 1.55; }
.bk-box-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; }
.bk-box-ic svg { width: 20px; height: 20px; }
.bk-box-t { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.bk-pruefung { background: var(--petrol-soft); }
.bk-pruefung .bk-box-ic { background: var(--petrol); color: var(--petrol-ink); }
.bk-pruefung .bk-box-t { color: var(--petrol); }
.bk-falle { background: var(--coral-soft); border-color: var(--coral-line); }
.bk-falle .bk-box-ic { background: var(--coral); color: var(--coral-ink); }
.bk-falle .bk-box-t { color: var(--coral); }
.bk-hinweis { background: var(--green-soft); border-color: var(--green-line); }
.bk-hinweis .bk-box-ic { background: var(--green); color: var(--green-ink); }
.bk-hinweis .bk-box-t { color: var(--green); }

.bk-merke { border-radius: 20px; padding: 16px 20px; background: linear-gradient(135deg, #14555D, #1F7A70); color: #FFFFFF; display: grid; gap: 10px; }
.bk-merke-t { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #F4D9A6; }
.bk-merke-t svg { width: 18px; height: 18px; }
.bk-merke ol { margin: 0; padding: 0; list-style: none; counter-reset: m; display: grid; gap: 8px; }
.bk-merke li { counter-increment: m; position: relative; padding-inline-start: 36px; font-size: 16px; line-height: 1.5; }
.bk-merke li::before { content: counter(m); position: absolute; inset-inline-start: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.2); font-weight: 700; font-size: 13.5px; line-height: 1; }
.bk[dir="rtl"] .bk-merke li::before { top: 4px; }

.bk-cols { display: grid; gap: 12px; }
.bk-cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-col { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: var(--bg); }
.bk-col h4 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--petrol); line-height: 1.3; }
.bk-col ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 7px; font-size: 15.5px; line-height: 1.5; }
.bk-col li::marker { color: var(--petrol); }

.bk-bu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-bu li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.bk-bl { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); font-weight: 700; font-size: 16px; }
.bk-bu li.star { background: var(--ochre-soft); border-color: transparent; }
.bk-bu li.star .bk-bl { background: var(--ochre); color: #FFFFFF; }
.bk-st { color: var(--ochre); font-size: 22px; line-height: 1; }

.bk-qa { display: grid; gap: 8px; }
.bk-q { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.bk-q summary { display: grid; grid-template-columns: 30px 1fr 14px; gap: 10px; align-items: start; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 16px; line-height: 1.4; list-style: none; }
.bk-q summary::-webkit-details-marker { display: none; }
.bk-q summary::after { content: ""; width: 9px; height: 9px; margin-top: 8px; border-inline-end: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s ease; }
.bk-q[open] summary::after { transform: rotate(-135deg); margin-top: 12px; }
.bk-q[open] { background: var(--paper); border-color: var(--petrol); }
.bk-q p { padding: 0 14px 14px; padding-inline-start: 54px; font-size: 16px; line-height: 1.55; }
.bk-qn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bk-wall { position: relative; display: grid; scroll-margin-top: calc(var(--topbar) + 14px); }
.bk-wall-sheet { height: 210px; border-radius: 26px 26px 0 0; background: var(--paper); border: 1px solid var(--line); border-bottom: 0; padding: 30px 34px; display: grid; gap: 13px; align-content: start; overflow: hidden; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); filter: blur(1.2px); }
.bk-wall-sheet span { display: block; height: 12px; border-radius: 6px; background: var(--line); }
.bk-wall-sheet span:nth-child(1) { width: 46%; height: 22px; background: var(--petrol-soft); }
.bk-wall-sheet span:nth-child(2) { width: 32%; height: 10px; }
.bk-wall-sheet span:nth-child(3) { width: 96%; }
.bk-wall-sheet span:nth-child(4) { width: 90%; }
.bk-wall-sheet span:nth-child(5) { width: 94%; }
.bk-wall-sheet span:nth-child(6) { width: 74%; }
.bk-wall-sheet span:nth-child(7) { width: 88%; }
.bk-wall-card { position: relative; margin-top: -84px; background: var(--paper); border: 1px solid var(--petrol); border-radius: 28px; box-shadow: var(--shadow-lg); padding: clamp(22px, 4vw, 38px); display: grid; gap: 16px; justify-items: start; }
.bk-wall-card::before { content: ""; position: absolute; inset-inline: 28px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); }
.bk-lockbadge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--petrol-soft); color: var(--petrol); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.bk-lockbadge svg { width: 17px; height: 17px; }
.bk-wall-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; text-wrap: balance; }
.bk-wall-lead { font-size: 17.5px; color: var(--ink-2); max-width: 58ch; }
.bk-wall-list { list-style: none; margin: 2px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.bk-wall-list li { display: grid; grid-template-columns: 30px 1fr 18px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.bk-wl-t b { font-size: 15.5px; }
.bk-wl-t span { font-size: 13.5px; line-height: 1.35; }
.bk-wall-cta { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.bk-wall-cta .btn svg, .bk-wall-card > .btn svg { width: 20px; height: 20px; }
.bk-price { font-weight: 700; color: var(--ochre); }
.bk-wall-card .code-form { width: 100%; max-width: 420px; }
.bk-code-hint { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 420px; }
.bk-end { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font-size: 15px; color: var(--ink-2); }
.bk-end .icon { width: 20px; height: 20px; color: var(--petrol); }
.bk-end a { font-weight: 700; }
.bk-sticky { display: none; }

.bk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bk-card { display: grid; grid-template-columns: 180px 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.bk-mini { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 12px; padding: 18px 16px; min-height: 250px; color: #FFFFFF; text-decoration: none; background: linear-gradient(160deg, #124A52, #1D6A73 55%, #2F8A5E); }
.bk-mini .bk-pulse { bottom: 10px; height: 46px; opacity: 0.25; }
.bk-mini-band { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; opacity: 0.92; line-height: 1.4; }
.bk-mini-t { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.bk-mini[dir="rtl"] :is(.bk-mini-t, .bk-mini-band) { font-family: var(--arabic); font-weight: 700; letter-spacing: 0; text-transform: none; }
.bk-mini[dir="rtl"] .bk-mini-t { font-size: 22px; line-height: 1.35; }
.bk-mini-brand { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.bk-card-body { padding: 20px; display: grid; gap: 6px; align-content: start; }
.bk-card-body h3 { margin: 0; font-size: 22px; line-height: 1.3; }
.bk-card-body .row { margin-top: 12px; }
.bk-card-body .row .btn svg { width: 20px; height: 20px; }
.bk-card-body .chip svg { width: 15px; height: 15px; stroke-width: 2.6; }
@media (max-width: 1000px) { .bk-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .bk-toc { padding-inline: 14px; }
  .bk-zahlen { grid-template-columns: minmax(0, 1fr); }
  .bk-cols.c2, .bk-cols.c3 { grid-template-columns: minmax(0, 1fr); }
  .bk-wall-list { grid-template-columns: minmax(0, 1fr); }
  .bk-wall-sheet { height: 170px; padding: 24px 22px; }
  .bk-sh-head { grid-template-columns: 1fr; gap: 10px; }
  .bk-sh-n { width: 46px; height: 46px; font-size: 24px; border-radius: 14px; }
  .bk-q p { padding-inline-start: 14px; }
  .bk[data-gesperrt] { padding-bottom: 76px; }
  .bk-sticky { position: fixed; z-index: 30; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 18px; border-radius: 16px; background: #14555D; color: #FFFFFF; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lg); }
  .bk-sticky svg { width: 20px; height: 20px; }
  .bk-sticky.gone { display: none; }
}
@media (max-width: 520px) {
  .bk-card { grid-template-columns: minmax(0, 1fr); }
  .bk-mini { min-height: 160px; }
}

.print-buch #print-area { font-family: var(--body); font-size: 10pt; line-height: 1.5; color: #12303A; background: #FFFFFF; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-buch #print-area * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pb[dir="rtl"] { font-family: var(--arabic); line-height: 1.75; }
.pb[dir="rtl"] :is(.pb-title, .pb-title-row h2, .bk-val, .pb-toc-t, .pb-tag, .pb-mini, .pb-end h2) { font-family: var(--arabic); font-weight: 700; }
.pb[dir="rtl"] :is(.pb-band, .bk-box-t, .bk-merke-t, .pb-head, .pb-foot, .pb-toc-t) { letter-spacing: 0; text-transform: none; }
.pb-sheet { position: relative; width: 210mm; height: 296.4mm; padding: 12mm 14mm 18mm; overflow: hidden; break-after: page; page-break-after: always; background: #FFFFFF; display: flex; flex-direction: column; gap: 3.4mm; }
.pb-sheet:last-child { break-after: auto; page-break-after: auto; }
.pb .bk-ltr { font-family: var(--body); font-size: 0.94em; }
.pb[dir="rtl"] .bk-ltr { font-weight: 600; color: #1D6A73; }
.pb[dir="rtl"] .pb-hero .bk-ltr, .pb[dir="rtl"] .bk-merke .bk-ltr, .pb .pb-hero .bk-ltr, .pb .bk-merke .bk-ltr { color: inherit; }
.pb-head { display: flex; justify-content: space-between; gap: 6mm; padding-bottom: 1.8mm; border-bottom: 0.35pt solid #BCCCD1; font-size: 7.6pt; letter-spacing: 0.08em; text-transform: uppercase; color: #7B929A; font-weight: 700; }
.pb-title-row { display: grid; grid-template-columns: auto 1fr; gap: 4.5mm; align-items: center; padding-bottom: 2.4mm; border-bottom: 0.9pt solid #DFEDEF; }
.pb-n { width: 13mm; height: 13mm; border-radius: 3.6mm; display: grid; place-items: center; background: linear-gradient(135deg, #1D6A73, #2F8A5E); color: #FFFFFF; font-family: var(--body); font-weight: 700; font-size: 19pt; line-height: 1; }
.pb-title-row h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 19pt; line-height: 1.12; color: #12303A; }
.pb-title-row p { margin-top: 0.6mm; font-size: 8.4pt; line-height: 1.35; color: #7B929A; }
.pb-foot { position: absolute; left: 14mm; right: 14mm; bottom: 7.5mm; display: flex; justify-content: space-between; gap: 6mm; padding-top: 1.8mm; border-top: 0.35pt solid #BCCCD1; font-size: 7.6pt; color: #7B929A; }
.pb .bk-body { display: grid; gap: 2.4mm; align-content: start; }
.pb .bk-p { font-size: 9.6pt; line-height: 1.46; }
.pb[dir="rtl"] .bk-p { font-size: 10pt; line-height: 1.7; }
.pb .bk-h { margin: 1.2mm 0 -0.8mm; font-size: 11pt; color: #1D6A73; }
.pb .bk-ul, .pb .bk-ol { gap: 1.2mm; font-size: 9.5pt; line-height: 1.42; padding-inline-start: 5mm; }
.pb[dir="rtl"] :is(.bk-ul, .bk-ol) { font-size: 9.9pt; line-height: 1.66; }
.pb .bk-ul li::marker, .pb .bk-ol li::marker { color: #1D6A73; }
.pb .bk-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4mm; }
.pb .bk-zahlen[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb .bk-zahlen[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb .bk-tile { padding: 2.4mm 3mm 2mm; padding-inline-start: 4mm; border-radius: 3mm; background: #F3F6F7; border-color: #D8E2E5; break-inside: avoid; gap: 0.6mm; }
.pb .bk-tile::before { width: 1.1mm; background: linear-gradient(180deg, #1D6A73, #2F8A5E); }
.pb .bk-val { font-size: 14pt; line-height: 1.12; color: #1D6A73; }
.pb[dir="rtl"] .bk-val { font-size: 13pt; }
.pb .bk-tx { font-size: 8.4pt; line-height: 1.34; color: #12303A; }
.pb[dir="rtl"] .bk-tx { font-size: 8.8pt; line-height: 1.52; }
.pb .bk-ref { font-size: 7.6pt; color: #7B929A; margin-top: 0.4mm; }
.pb .bk-box { grid-template-columns: 7mm 1fr; gap: 3mm; padding: 2.6mm 3.2mm; border-radius: 3mm; break-inside: avoid; }
.pb .bk-box p { font-size: 9.1pt; line-height: 1.4; }
.pb[dir="rtl"] .bk-box p { font-size: 9.5pt; line-height: 1.6; }
.pb .bk-box-ic { width: 7mm; height: 7mm; border-radius: 2.2mm; }
.pb .bk-box-ic svg { width: 4.2mm; height: 4.2mm; }
.pb .bk-box-t { font-size: 7.6pt; margin-bottom: 0.4mm; }
.pb .bk-pruefung { background: #DFEDEF; }
.pb .bk-pruefung .bk-box-ic { background: #1D6A73; color: #FFFFFF; }
.pb .bk-pruefung .bk-box-t { color: #1D6A73; }
.pb .bk-falle { background: #F9E8E3; border-color: #ECC4B9; }
.pb .bk-falle .bk-box-ic { background: #BF523C; color: #FFFFFF; }
.pb .bk-falle .bk-box-t { color: #BF523C; }
.pb .bk-hinweis { background: #E4F1E8; border-color: #BCDCC7; }
.pb .bk-hinweis .bk-box-ic { background: #3A8A5D; color: #FFFFFF; }
.pb .bk-hinweis .bk-box-t { color: #3A8A5D; }
.pb .bk-merke { padding: 3mm 4.2mm; border-radius: 3.6mm; gap: 1.8mm; break-inside: avoid; }
.pb .bk-merke-t { font-size: 7.6pt; }
.pb .bk-merke-t svg { width: 3.6mm; height: 3.6mm; }
.pb .bk-merke ol { gap: 1.4mm; }
.pb .bk-merke li { padding-inline-start: 7.6mm; font-size: 9.2pt; line-height: 1.4; }
.pb[dir="rtl"] .bk-merke li { font-size: 9.6pt; line-height: 1.58; }
.pb .bk-merke li::before { width: 5mm; height: 5mm; top: 0.3mm; font-size: 8pt; }
.pb[dir="rtl"] .bk-merke li::before { top: 0.9mm; }
.pb .bk-cols { gap: 2.6mm; }
.pb .bk-col { padding: 2.6mm 3.2mm; border-radius: 3mm; background: #F3F6F7; border-color: #D8E2E5; break-inside: avoid; }
.pb .bk-col h4 { font-size: 10pt; margin-bottom: 1.4mm; color: #1D6A73; }
.pb .bk-col ul { gap: 1.2mm; font-size: 8.8pt; line-height: 1.38; padding-inline-start: 4.4mm; }
.pb[dir="rtl"] .bk-col ul { font-size: 9.2pt; line-height: 1.56; }
.pb .bk-bu { gap: 1.5mm; }
.pb .bk-bu li { grid-template-columns: 8mm 1fr auto; gap: 3mm; padding: 1.1mm 2.4mm; border-radius: 2.6mm; font-size: 8.9pt; line-height: 1.34; background: #F3F6F7; border-color: #D8E2E5; break-inside: avoid; }
.pb[dir="rtl"] .bk-bu li { font-size: 9.3pt; line-height: 1.5; }
.pb .bk-bl { width: 6.4mm; height: 6.4mm; border-radius: 2mm; font-size: 9.4pt; background: #DFEDEF; color: #1D6A73; }
.pb .bk-bu li.star { background: #F6EEDF; border-color: transparent; }
.pb .bk-bu li.star .bk-bl { background: #B5813C; color: #FFFFFF; }
.pb .bk-st { color: #B5813C; font-size: 13pt; }
.pb .bk-qa { gap: 0; }
.pb .bk-qi { padding: 1.3mm 0; border-bottom: 0.3pt solid #BCCCD1; break-inside: avoid; }
.pb .bk-qq { display: grid; grid-template-columns: 6mm 1fr; gap: 2.4mm; font-weight: 700; font-size: 9.2pt; line-height: 1.36; }
.pb .bk-qaa { padding-inline-start: 8.4mm; font-size: 8.9pt; line-height: 1.4; color: #4E6872; }
.pb[dir="rtl"] .bk-qq { font-size: 9.6pt; line-height: 1.52; }
.pb[dir="rtl"] .bk-qaa { font-size: 9.3pt; line-height: 1.56; }

.pb[lang="ml"] { line-height: 1.42; }
.pb[lang="ml"] .pb-title-row { gap: 3.4mm; padding-bottom: 1.7mm; }
.pb[lang="ml"] .pb-title-row h2 { font-size: 16.4pt; line-height: 1.04; }
.pb[lang="ml"] .pb-title-row p { margin-top: 0.3mm; font-size: 7.6pt; line-height: 1.2; }
.pb[lang="ml"] .bk-body { gap: 1.35mm; }
.pb[lang="ml"] .bk-p { font-size: 8.25pt; line-height: 1.3; }
.pb[lang="ml"] .bk-h { margin: 0.7mm 0 -0.5mm; font-size: 9.8pt; line-height: 1.2; }
.pb[lang="ml"] :is(.bk-ul, .bk-ol) { gap: 0.7mm; font-size: 8.2pt; line-height: 1.3; padding-inline-start: 4.3mm; }
.pb[lang="ml"] .bk-zahlen { gap: 1.5mm; }
.pb[lang="ml"] .bk-tile { padding: 1.6mm 2.2mm 1.4mm; padding-inline-start: 3.2mm; gap: 0.3mm; }
.pb[lang="ml"] .bk-val { font-size: 12.4pt; }
.pb[lang="ml"] .bk-tx { font-size: 7.55pt; line-height: 1.25; }
.pb[lang="ml"] .bk-ref { font-size: 7pt; }
.pb[lang="ml"] .bk-box { grid-template-columns: 6mm 1fr; gap: 2mm; padding: 1.7mm 2.2mm; }
.pb[lang="ml"] .bk-box-ic { width: 6mm; height: 6mm; }
.pb[lang="ml"] .bk-box p { font-size: 7.95pt; line-height: 1.3; }
.pb[lang="ml"] .bk-box-t { font-size: 7pt; margin-bottom: 0.2mm; }
.pb[lang="ml"] .bk-merke { padding: 1.8mm 2.6mm; gap: 1mm; }
.pb[lang="ml"] .bk-merke-t { font-size: 7.2pt; }
.pb[lang="ml"] .bk-merke ol { gap: 0.65mm; }
.pb[lang="ml"] .bk-merke li { font-size: 7.95pt; line-height: 1.28; padding-inline-start: 6.8mm; }
.pb[lang="ml"] .bk-cols { gap: 1.5mm; }
.pb[lang="ml"] .bk-col { padding: 1.7mm 2.2mm; }
.pb[lang="ml"] .bk-col h4 { margin-bottom: 0.8mm; font-size: 8.2pt; line-height: 1.18; }
.pb[lang="ml"] .bk-col ul { gap: 0.55mm; font-size: 7.7pt; line-height: 1.27; padding-inline-start: 3.8mm; }
.pb[lang="ml"] .bk-bu { gap: 0.8mm; }
.pb[lang="ml"] .bk-bu li { padding: 1.2mm 1.8mm; gap: 2mm; font-size: 7.9pt; line-height: 1.25; }
.pb[lang="ml"] .bk-bl { width: 5.8mm; height: 5.8mm; font-size: 8.2pt; }
.pb[lang="ml"] .bk-qa { gap: 0.9mm; }
.pb[lang="ml"] .bk-q summary { padding: 1.5mm 2mm; gap: 1.5mm; font-size: 7.95pt; line-height: 1.25; }
.pb[lang="ml"] .bk-q p { padding: 0 2mm 1.6mm; padding-inline-start: 9mm; font-size: 7.75pt; line-height: 1.28; }

.pb[lang="ml"] .bk-qq { grid-template-columns: 5.2mm 1fr; gap: 1.6mm; font-size: 8pt; line-height: 1.24; }
.pb[lang="ml"] .bk-qaa { padding-inline-start: 6.8mm; font-size: 7.7pt; line-height: 1.26; }
.pb[lang="ml"] .bk-qi { padding: 0.85mm 0; }

.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-body { gap: 0.75mm; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-p { font-size: 7.8pt; line-height: 1.22; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-qa { gap: 0.45mm; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-q summary { padding: 1.05mm 1.6mm; font-size: 7.35pt; line-height: 1.16; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-q p { padding: 0 1.6mm 1.05mm; padding-inline-start: 8.3mm; font-size: 7.15pt; line-height: 1.18; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-qi { padding: 0.55mm 0; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-qq { grid-template-columns: 5mm 1fr; gap: 1.4mm; font-size: 7.25pt; line-height: 1.14; }
.pb[lang="ml"] .pb-sheet[data-page="14"] .bk-qaa { padding-inline-start: 6.4mm; font-size: 7pt; line-height: 1.16; }

.pb[lang="ml"] .pb-cover .pb-hero { padding: 11mm 14mm 8mm; gap: 2.6mm; }
.pb[lang="ml"] .pb-cover .pb-band { margin-top: 2mm; font-size: 8pt; }
.pb[lang="ml"] .pb-cover .pb-title { font-size: 31pt; line-height: 1.08; }
.pb[lang="ml"] .pb-cover .pb-sub { font-size: 10pt; line-height: 1.3; }
.pb[lang="ml"] .pb-cover .pb-perks { gap: 1.1mm; }
.pb[lang="ml"] .pb-cover .pb-perks li { font-size: 8.5pt; line-height: 1.25; }
.pb[lang="ml"] .pb-cover .pb-lower { padding: 5mm 14mm 7mm; gap: 2mm; }
.pb[lang="ml"] .pb-cover .pb-note { padding: 1.8mm 2.6mm; font-size: 7.2pt; line-height: 1.3; }
.pb[lang="ml"] .pb-toc-sheet { gap: 2.6mm; }
.pb[lang="ml"] .pb-toc-head { padding: 1.8mm 0 1.2mm; }
.pb[lang="ml"] .pb-toc-head h2 { font-size: 20pt; }
.pb[lang="ml"] .pb-toc-sheet .pb-toc { gap: 0 4.5mm; }
.pb[lang="ml"] .pb-toc-sheet .pb-toc li { grid-template-columns: 5.2mm 1fr auto; gap: 1.8mm; padding: 0.45mm 0; }
.pb[lang="ml"] .pb-toc-sheet .pb-tn { width: 4.6mm; height: 4.6mm; font-size: 6.7pt; }
.pb[lang="ml"] .pb-toc-sheet .pb-tt b { font-size: 7.15pt; line-height: 1.13; }
.pb[lang="ml"] .pb-toc-sheet .pb-tt span { font-size: 6.35pt; line-height: 1.13; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) .pb-title-row { gap: 2.8mm; padding-bottom: 1.2mm; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) .pb-title-row h2 { font-size: 14.6pt; line-height: 1.02; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) .pb-title-row p { font-size: 7.1pt; line-height: 1.15; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) .bk-body { gap: 0.65mm; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) :is(.bk-ul,.bk-ol) { gap: 0.45mm; font-size: 7.55pt; line-height: 1.2; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) .bk-box { padding: 1.3mm 1.8mm; }
.pb[lang="ml"] :is(.pb-sheet[data-page="65"], .pb-sheet[data-page="72"]) .bk-box p { font-size: 7.35pt; line-height: 1.2; }
.pb .bk-qn { width: 5.2mm; height: 5.2mm; font-size: 7.6pt; background: #DFEDEF; color: #1D6A73; }

.pb-cover { padding: 0; gap: 0; }
.pb-hero { position: relative; isolation: isolate; overflow: hidden; padding: 15mm 16mm 12mm; color: #FFFFFF; background: linear-gradient(135deg, #124A52 0%, #1D6A73 50%, #2F8A5E 100%); display: grid; gap: 4.2mm; }
.pb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90mm 50mm at 92% -6%, rgba(255, 255, 255, 0.2), transparent 62%), radial-gradient(80mm 46mm at -6% 112%, rgba(255, 255, 255, 0.13), transparent 62%); }
.pb-pulse { position: absolute; left: 0; right: 0; bottom: 3mm; width: 100%; height: 16mm; opacity: 0.22; z-index: -1; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-cover-top { display: flex; justify-content: space-between; align-items: center; gap: 4mm; }
.pb-brand { font-size: 9.5pt; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.pb-tag { padding: 0.8mm 3.2mm; border-radius: 999px; background: #FFFFFF; color: #14555D; font-size: 8.4pt; font-weight: 700; }
.pb-band { margin-top: 5mm; font-size: 9pt; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; opacity: 0.92; }
.pb-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 42pt; line-height: 1.04; letter-spacing: -0.01em; }
.pb[dir="rtl"] .pb-title { font-size: 36pt; line-height: 1.3; }
.pb-sub { font-size: 12.5pt; line-height: 1.45; max-width: 150mm; opacity: 0.97; }
.pb[dir="rtl"] .pb-sub { line-height: 1.75; }
.pb-perks { list-style: none; margin: 1mm 0 0; padding: 0; display: grid; gap: 2mm; }
.pb-perks li { display: grid; grid-template-columns: 5.4mm 1fr; gap: 2.6mm; font-size: 10.4pt; line-height: 1.42; align-items: start; }
.pb-perks svg { width: 5.2mm; height: 5.2mm; stroke-width: 2.4; color: #A8E6C3; margin-top: 0.5mm; }
.pb-lower { padding: 7mm 15mm 9mm; display: grid; gap: 3.4mm; flex: 1; align-content: start; }
.pb-tocbox { display: grid; gap: 2mm; }
.pb-toc-t { font-family: var(--display); font-size: 13pt; color: #12303A; }
.pb-toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 7mm; }
.pb-toc li, .pb-end-list li { display: grid; grid-template-columns: 6.6mm 1fr auto; gap: 2.6mm; align-items: center; padding: 1.5mm 0; border-bottom: 0.3pt dashed #BCCCD1; break-inside: avoid; }
.pb-tn { width: 5.6mm; height: 5.6mm; border-radius: 50%; display: grid; place-items: center; background: #DFEDEF; color: #1D6A73; font-weight: 700; font-size: 8pt; line-height: 1; }
.pb-tt { display: grid; gap: 0; min-width: 0; }
.pb-tt b { font-size: 8.8pt; line-height: 1.28; }
.pb-tt span { font-size: 7.6pt; line-height: 1.3; color: #7B929A; }
.pb-toc li.off .pb-tn { background: #E8EEF0; color: #7B929A; }
.pb-tl { width: 3.4mm; height: 3.4mm; color: #7B929A; }
.pb-note { font-size: 8pt; line-height: 1.45; color: #4E6872; padding: 2.6mm 3.4mm; border-radius: 2.6mm; background: #F3F6F7; }
.pb-stand { font-size: 7.8pt; color: #7B929A; line-height: 1.4; }
.pb-copy { font-size: 7.8pt; color: #7B929A; font-weight: 700; }
.pb-cover-lower { align-content: end; }
.pb-toc-sheet { gap: 3.5mm; }
.pb-toc-head { padding: 3mm 0 2mm; border-bottom: 0.9pt solid #DFEDEF; }
.pb-toc-kicker { margin: 0 0 1mm; font-size: 8pt; line-height: 1.2; color: #1D6A73; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pb-toc-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24pt; line-height: 1.1; color: #12303A; }
.pb-toc-head h2 span { font-family: var(--body); font-size: 10pt; font-weight: 700; color: #7B929A; }
.pb-toc-sheet .pb-toc { flex: 1; align-content: start; }
.pb-toc-sheet .pb-toc li { padding: 1.05mm 0; }
.pb-toc-sheet .pb-tt b { font-size: 8.5pt; line-height: 1.22; }
.pb-toc-sheet .pb-tt span { font-size: 7.2pt; line-height: 1.24; }
.pb[dir="rtl"] .pb-toc-kicker { letter-spacing: 0; text-transform: none; }
.pb[dir="rtl"] .pb-toc-head h2 { font-family: var(--arabic); font-weight: 700; }

.pb-end { align-items: flex-start; gap: 4.4mm; }
.pb-end .pb-lock { width: 20mm; height: 20mm; border-radius: 50%; display: grid; place-items: center; background: #DFEDEF; color: #1D6A73; margin-top: 12mm; }
.pb-end .pb-lock svg { width: 10mm; height: 10mm; }
.pb-end h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 27pt; line-height: 1.1; color: #12303A; }
.pb-end-lead { font-size: 11.5pt; line-height: 1.5; color: #4E6872; max-width: 150mm; }
.pb-end-count { margin: 3mm 0 0; padding: 4mm 5mm; border-radius: 3mm; background: #F3F6F7; color: #1D6A73; font-size: 13pt; line-height: 1.35; font-weight: 700; }
.pb-end-list { list-style: none; margin: 2mm 0 0; padding: 0; width: 100%; columns: 2; column-gap: 8mm; }
.pb-end .pb-head, .pb-end .pb-end-list, .pb-end .pb-end-box { align-self: stretch; }
.pb-end-box { margin-top: 7mm; padding: 6mm 7mm; border-radius: 4mm; color: #FFFFFF; background: linear-gradient(135deg, #14555D, #1F7A70); display: grid; gap: 1.6mm; }
.pb-end-box b { font-size: 15pt; font-weight: 700; }
.pb-end-box span { font-size: 10.5pt; opacity: 0.96; }
.pb-end-box .bk-ltr { font-weight: 700; }

.nl { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nl a, .nl img { -webkit-user-drag: none; }
.nl-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.nl-bar svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--petrol); }
.nl-bar b { color: var(--ink); }
.nl-print { display: none; }
@media print {
  .nl { display: none !important; }
  .nl-print { display: block !important; margin: 24px 0; font-size: 14pt; color: #000000; }
}
.dg-zweck { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--petrol-soft); color: var(--ink); font-size: 15px; line-height: 1.5; }
.dg-zweck svg { width: 24px; height: 24px; color: var(--petrol); margin-top: 1px; }
.dg-zweck b { display: block; color: var(--petrol); margin-bottom: 2px; }
.dg-zweck p { margin: 0; }
.dg-zweck a { font-weight: 700; }
.d-head + .dg-zweck { margin-top: 22px; }

.lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.lp-kb li { align-items: start; }
.lp-kb li > b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--petrol); text-align: center; padding-top: 2px; }
.lp-kb li > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); }
.lp-diag .lp-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--petrol-soft); color: var(--petrol); display: grid; place-items: center; }
.lp-diag .lp-ico svg { width: 22px; height: 22px; }
.lp-diag li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.lp-diag b { font-size: 15px; font-weight: 700; }
.lp-diag i { font-style: normal; font-size: 13px; color: var(--ink-3); }

.kbx-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.kbx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kbx-pill { min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); font-family: var(--display); font-size: 20px; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; }
.kbx-pill:hover { background: var(--petrol); color: var(--petrol-ink); }
.kbx-wrap { display: grid; gap: 44px; }
.kbx { display: grid; gap: 14px; scroll-margin-top: calc(var(--topbar) + 20px); }
.kbx-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; border-radius: 24px; background: linear-gradient(150deg, var(--petrol-soft), var(--paper) 70%); border: 1px solid var(--line); }
.kbx-n { font-family: var(--display); font-size: 58px; line-height: 1; color: var(--petrol); text-align: center; }
.kbx-head h2 { margin: 4px 0 10px; font-size: 20px; line-height: 1.4; font-weight: 700; }
.kbx-e { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.kbx-list { display: grid; gap: 10px; }
.kbx-k { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.kbx-k[open] { box-shadow: var(--shadow); border-color: var(--line-2); }
.kbx-k > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 18px; }
.kbx-k > summary::-webkit-details-marker { display: none; }
.kbx-k > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; border-radius: 18px; }
.kbx-nr { min-width: 46px; padding: 3px 10px; border-radius: 999px; background: var(--petrol-soft); color: var(--petrol); font-weight: 700; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.kbx-t { display: grid; gap: 6px; min-width: 0; }
.kbx-t b { font-size: 16.5px; line-height: 1.4; font-weight: 600; }
.kbx-kurz { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.kbx-k > summary .icon { width: 20px; height: 20px; color: var(--ink-3); margin-top: 3px; transition: transform 0.2s ease; }
.kbx-k[open] > summary .icon { transform: rotate(180deg); }
.kbx-body { display: grid; gap: 12px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.kbx-body p { margin: 0; font-size: 16.5px; line-height: 1.65; }
.kbx-bsp { padding: 12px 14px; border-radius: 14px; background: var(--green-soft); }
.kbx-bsp b { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.kbx-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kbx-tags li { padding: 4px 11px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 13.5px; font-weight: 700; }

.dg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.dg-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; text-decoration: none; color: inherit; padding: 20px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.dg-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.dg-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--petrol-soft); color: var(--petrol); display: grid; place-items: center; }
.dg-ico svg { width: 28px; height: 28px; }
.dg-txt { display: grid; gap: 3px; min-width: 0; }
.dg-num { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--petrol); }
.dg-txt > b { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.15; }
.dg-sub { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.dg-meta { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }

.dg-body { display: grid; gap: 14px; margin-top: 4px; }
.dg-body p, .dg-ul { margin: 0; font-size: 17.5px; line-height: 1.65; }
.dg-h { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 26px 0 0; scroll-margin-top: calc(var(--topbar) + 20px); }
.dg-body > .dg-h:first-child { margin-top: 6px; }
.dg-ul { padding-inline-start: 22px; display: grid; gap: 8px; }
.dg-ul li::marker { color: var(--petrol); }
.dg-werte { list-style: none; margin: 4px 0 6px; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.dg-werte li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 6px 18px; padding: 13px 16px; align-items: start; font-size: 16px; line-height: 1.45; }
.dg-werte li + li { border-top: 1px solid var(--line); }
.dg-werte .dg-wh { background: var(--bg-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-block: 9px; }
.dg-g { font-weight: 700; }
.dg-w { justify-self: start; padding: 2px 10px; border-radius: 10px; background: var(--petrol-soft); color: var(--petrol); font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-e { color: var(--ink-2); }
.dg-q { margin-left: 4px; font-size: 12px; font-weight: 700; }
.dg-q a { color: var(--petrol); text-decoration: none; padding: 0 2px; }
.dg-q a:hover { text-decoration: underline; }
.dg-box { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: 16px; font-size: 16px; line-height: 1.55; }
.dg-box svg { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; }
.dg-body .dg-box p { font-size: inherit; line-height: inherit; }
.dg-bl { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.dg-hinweis { background: var(--petrol-soft); }
.dg-hinweis svg, .dg-hinweis .dg-bl { color: var(--petrol); }
.dg-falle { background: var(--ochre-soft); }
.dg-falle svg, .dg-falle .dg-bl { color: var(--ochre); }
.dg-pruefung { background: var(--green-soft); }
.dg-pruefung svg, .dg-pruefung .dg-bl { color: var(--green); }
.dg-notfall { background: var(--coral-soft); border: 1px solid var(--coral-line); }
.dg-notfall svg, .dg-notfall .dg-bl { color: var(--coral); }
.dg-src { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
.dg-srclist { margin: 12px 0 0; padding-inline-start: 26px; display: grid; gap: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dg-srclist li { padding: 2px 6px; border-radius: 10px; scroll-margin-top: calc(var(--topbar) + 20px); }
.dg-srclist li::marker { font-weight: 700; color: var(--petrol); }
.dg-srclist li:target { background: var(--petrol-soft); }
.dg-srclist b { display: block; color: var(--ink); font-weight: 600; }
.dg-srclist span { display: block; }
.dg-srclist a { display: inline-block; margin-top: 2px; overflow-wrap: anywhere; color: var(--petrol); }
.dg-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.dg-pager a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: inherit; }
.dg-pager a:hover { border-color: var(--petrol); }
.dg-pager a.nx { justify-content: flex-end; text-align: right; }
.dg-pager i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.dg-pager b { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; }
.dg-pager svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--petrol); }

@media (max-width: 640px) {
  .kbx-head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px; }
  .kbx-n { font-size: 38px; }
  .kbx-head h2 { font-size: 18px; }
  .kbx-k > summary { padding: 14px; gap: 10px; }
  .kbx-body { padding: 12px 14px 16px; }
  .dg-card { padding: 16px; gap: 12px; }
  .dg-card .go { display: none; }
  .dg-card { grid-template-columns: auto minmax(0, 1fr); }
  .dg-ico { width: 48px; height: 48px; border-radius: 15px; }
  .dg-werte li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; }
  .dg-werte .dg-wh { display: none; }
  .dg-body p, .dg-ul { font-size: 17px; }
  .dg-h { font-size: 24px; }
  .dg-pager { grid-template-columns: minmax(0, 1fr); }
}

.page-head h1, .d-title { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 360px) { .page-head h1 { font-size: 31px; } }

.auth-shell::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 620px; height: 620px; left: 50%; top: -260px; transform: translateX(-50%);
  border-radius: 50%; filter: blur(60px); opacity: 0.35;
  background: radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--grad-a) 55%, transparent), transparent 60%),
              radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--grad-b) 45%, transparent), transparent 60%);
  animation: nm-drift 18s ease-in-out infinite alternate;
}
.auth-top, .auth-main, .auth-foot { z-index: 1; }
@keyframes nm-drift { from { transform: translateX(-54%) translateY(0) scale(1); } to { transform: translateX(-46%) translateY(30px) scale(1.08); } }
.onb { width: 100%; max-width: 540px; display: grid; gap: 14px; }
.onb-progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--petrol) 14%, transparent); overflow: hidden; }
.onb-progress span { display: block; height: 100%; width: 25%; border-radius: inherit; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); transition: width 0.45s cubic-bezier(0.22, 0.85, 0.3, 1); }
.onb-card { max-width: none; }
.onb-card h1:focus { outline: none; }
.onb-form { display: grid; gap: 22px; }
.onb-in { animation: nm-step-in 0.38s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.onb-back { animation: nm-step-back 0.38s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
@keyframes nm-step-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes nm-step-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.onb-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.onb-feats li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; animation: nm-fade-up 0.4s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.onb-feats li:nth-child(2) { animation-delay: 0.08s; }
.onb-feats li:nth-child(3) { animation-delay: 0.16s; }
.onb-feats li:nth-child(4) { animation-delay: 0.24s; }
.onb-feats b { display: block; font-size: 16.5px; line-height: 1.3; }
.onb-feats .s { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.onb-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); }
.onb-ico svg { width: 22px; height: 22px; }
.onb-trust { margin: -6px 0 0; text-align: center; font-size: 14px; color: var(--ink-3); }
.onb-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.onb-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: onb; }
.onb-chain li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 48px; counter-increment: onb; animation: nm-fade-up 0.4s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.onb-chain li:nth-child(2) { animation-delay: 0.1s; }
.onb-chain li:nth-child(3) { animation-delay: 0.2s; }
.onb-chain li::before { content: counter(onb); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--petrol); color: var(--petrol-ink); }
.onb-chain li::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px; width: 2px; background: var(--line); }
.onb-chain li:last-child { padding-bottom: 0; }
.onb-chain li:last-child::after { display: none; }
.onb-chain b { font-size: 16.5px; }
.onb-chain span { font-size: 15px; color: var(--ink-2); }
.onb-offer { display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--green-soft); border: 1px solid var(--green-line); }
.onb-offer p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.onb-offer .s { color: var(--ink-2); font-size: 14.5px; }
.onb-offer-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.onb-offer-tag svg { width: 16px; height: 16px; }
.onb-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--ink-2); }
.onb-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--ochre); }

.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-card { display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.quick-card:hover { transform: translateY(-3px); border-color: var(--petrol); box-shadow: var(--shadow-lg); }
.quick-card b { font-size: 17px; margin-top: 6px; }
.quick-card .s { font-size: 14.5px; color: var(--ink-2); }
.quick-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); }
.quick-ico svg { width: 21px; height: 21px; }
.card.raised, .tool-card, .app-teaser { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
a.card.raised:hover, .tool-card:hover, .app-teaser:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
@media (max-width: 760px) { .quick-grid { grid-template-columns: minmax(0, 1fr); } }

.pc-main { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.bonus-ribbon { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); color: #FFFFFF; box-shadow: 0 6px 18px -8px var(--grad-b); animation: nm-pop 0.5s 0.2s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.bonus-ribbon svg { width: 15px; height: 15px; }
.price .price-old { align-self: center; margin-right: 10px; font-size: 26px; font-weight: 600; color: var(--ink-3); text-decoration: line-through; }
.price .price-save { align-self: center; margin-left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 15px; font-weight: 700; background: var(--green-soft); color: var(--green); animation: nm-pop 0.35s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.ref-box { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--bg); border: 1px dashed var(--line-2); }
.ref-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ref-row input { letter-spacing: 0.08em; text-transform: uppercase; }
.ref-msg { margin: 0; min-height: 1.4em; display: flex; gap: 6px; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--green); }
.ref-msg svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ref-msg.bad { color: var(--coral); }
.share-card { grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 18px; }
.share-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.share-ico svg { width: 26px; height: 26px; }
.my-code { margin: 4px 0; font-size: 28px; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--petrol); user-select: all; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 700; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--petrol); transition: transform 0.2s ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 480px) {
  .onb-nav { grid-template-columns: minmax(0, 1fr); }
  .onb-nav [data-back] { order: 2; }
  .ref-row { grid-template-columns: minmax(0, 1fr); }
  .share-card { grid-template-columns: minmax(0, 1fr); }
  .price .price-old { font-size: 20px; }
  .my-code { font-size: 22px; }
}

html:not(.nm-bewegung) .auth-shell::after,
html:not(.nm-bewegung) .onb-in,
html:not(.nm-bewegung) .onb-back,
html:not(.nm-bewegung) .onb-feats li,
html:not(.nm-bewegung) .onb-chain li,
html:not(.nm-bewegung) .bonus-ribbon,
html:not(.nm-bewegung) .price .price-save { animation: none !important; }
html:not(.nm-bewegung) .onb-progress span,
html:not(.nm-bewegung) .quick-card,
html:not(.nm-bewegung) .card.raised,
html:not(.nm-bewegung) .tool-card,
html:not(.nm-bewegung) .app-teaser,
html:not(.nm-bewegung) .faq summary svg { transition: none !important; }
html:not(.nm-bewegung) .quick-card:hover,
html:not(.nm-bewegung) a.card.raised:hover,
html:not(.nm-bewegung) .tool-card:hover,
html:not(.nm-bewegung) .app-teaser:hover { transform: none; }
.price { flex-wrap: wrap; row-gap: 6px; }
.price .price-old, .price .price-save { white-space: nowrap; }
@media (max-width: 480px) { .price .amount { font-size: 60px; } .price .cur { font-size: 24px; } }

.hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 30px 30px 28px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #FFFFFF;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; box-shadow: var(--shadow-lg);
}
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero::before { width: 360px; height: 360px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 65%); animation: nm-float 12s ease-in-out infinite alternate; }
.hero::after { width: 260px; height: 260px; left: -90px; bottom: -150px; background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 65%); animation: nm-float 15s ease-in-out infinite alternate-reverse; }
@keyframes nm-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(-24px, 18px) scale(1.1); } }
.hero-in { display: grid; gap: 12px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 5vw, 46px); line-height: 1.08; text-wrap: balance; }
.hero-lead { margin: 0; font-size: 17.5px; color: rgba(255, 255, 255, 0.92); }
.eyebrow.light { color: rgba(255, 255, 255, 0.85); }
.hero .row { margin-top: 6px; }
.hero-count { display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 170px; padding: 18px 20px; border-radius: 22px; text-align: center;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); color: #FFFFFF; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.2s ease, background 0.2s ease; }
.hero-count:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.2); }
.hero-num { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero-unit { font-size: 15px; font-weight: 600; }
.hero-empty .s { font-size: 13.5px; opacity: 0.85; }
.hero-pulse { position: absolute; z-index: -1; left: 0; right: 0; bottom: 10px; width: 100%; height: 60px; opacity: 0.35; }
.hero-pulse path, .gd-hero-pulse path { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 560; stroke-dashoffset: 560; animation: nm-draw 2.6s 0.3s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
@keyframes nm-draw { to { stroke-dashoffset: 0; } }
.hero + .grid-2 { margin-top: 18px; }
.day-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; }
@media (max-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; border-radius: 24px; }
  .hero-count { justify-self: start; min-width: 0; grid-auto-flow: column; align-items: baseline; gap: 10px; padding: 12px 16px; }
  .hero-num { font-size: 44px; }
}

.rv { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.7s cubic-bezier(0.22, 0.85, 0.3, 1), transform 0.7s cubic-bezier(0.22, 0.85, 0.3, 1); }
.rv.rv-in { opacity: 1; transform: none; }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

.btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease; }
.btn:not(.ghost):not(.soft):not(.light):not(.ghost-light):not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--petrol); }
.sb-item { position: relative; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.sb-item:hover { transform: translateX(2px); }
.sb-item[aria-current="page"]::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: linear-gradient(var(--grad-a), var(--grad-b)); animation: nm-fade 0.3s ease both; }
.sb-item svg { transition: transform 0.2s ease; }
.sb-item:hover svg { transform: scale(1.08); }
.topbar { transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.scrolled .topbar { box-shadow: 0 8px 24px -18px rgba(18, 48, 58, 0.5); border-bottom-color: transparent; }
.chip { transition: transform 0.15s ease; }

.src-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--petrol); background: var(--petrol-soft); border: 1px solid color-mix(in srgb, var(--petrol) 25%, transparent); }
.src-chip svg { width: 16px; height: 16px; }
.src-chip:hover { background: var(--paper); }
.src-box { margin-top: 30px; padding: 20px 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--petrol); scroll-margin-top: calc(var(--topbar) + 20px); }
.src-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; font-size: 17px; color: var(--petrol); }
.src-h svg { width: 20px; height: 20px; }
.src-box ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.src-box ul li::marker { color: var(--petrol); }
.src-stand { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; font-weight: 600; color: var(--ink-3); }

.gd-feature { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border-radius: 24px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--grad-a) 12%, var(--paper)), color-mix(in srgb, var(--grad-b) 12%, var(--paper))); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gd-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gd-feature-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #FFFFFF; }
.gd-feature-ico svg { width: 30px; height: 30px; }
.gd-feature-t { display: grid; gap: 6px; }
.gd-feature-t .chip { justify-self: start; }
.gd-feature-t b { font-size: 21px; line-height: 1.25; }
.gd-feature-t .s { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.gd-feature .go svg { width: 24px; height: 24px; color: var(--petrol); }
.gd-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 34px 30px 30px; color: #FFFFFF; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); box-shadow: var(--shadow-lg); }
.gd-hero-in { display: grid; gap: 12px; max-width: 640px; }
.gd-hero h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(38px, 6vw, 54px); line-height: 1.05; }
.gd-hero p { margin: 0; font-size: 17.5px; color: rgba(255, 255, 255, 0.92); }
.gd-hero-pulse { position: absolute; z-index: -1; right: -20px; bottom: 12px; width: 70%; height: 70px; opacity: 0.35; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.gd-meta .chip svg { width: 15px; height: 15px; }
.gd-toc { list-style: none; margin: 10px 0 20px; padding: 0; display: grid; gap: 10px; }
.gd-toc a { display: grid; grid-template-columns: 30px 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.gd-toc a:hover { transform: translateX(3px); border-color: var(--petrol); box-shadow: var(--shadow); }
.gd-toc-n { font-family: var(--display); font-size: 26px; color: var(--ink-3); text-align: center; }
.gd-toc-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); }
.gd-toc-ico svg { width: 22px; height: 22px; }
.gd-toc-t b { display: block; font-size: 17px; line-height: 1.3; }
.gd-toc-t .s { display: block; font-size: 14.5px; color: var(--ink-2); }
.gd-toc .go svg { width: 20px; height: 20px; color: var(--petrol); }
.gd-toc .pro-lock { width: 30px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--petrol-soft); color: var(--petrol); }
.gd-toc .pro-lock svg { width: 15px; height: 15px; }
.gd-body { display: grid; gap: 16px; font-size: 17.5px; line-height: 1.7; }
.gd-body p { margin: 0; }
.gd-h { margin: 12px 0 0; font-size: 21px; line-height: 1.3; }
.gd-ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.gd-ul li::marker { color: var(--petrol); }
.gd-steps { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 0; counter-reset: gd; }
.gd-steps li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 50px; counter-increment: gd; }
.gd-steps li::before { content: counter(gd); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #FFFFFF; background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); }
.gd-steps li::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 4px; width: 2px; background: var(--line); }
.gd-steps li:last-child { padding-bottom: 0; }
.gd-steps li:last-child::after { display: none; }
.gd-steps b { font-size: 17.5px; }
.gd-steps span { color: var(--ink-2); font-size: 16.5px; }
.gd-box { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 6px; }
.gd-box p { font-size: 16.5px; line-height: 1.65; }
.gd-box-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px !important; letter-spacing: 0.04em; text-transform: uppercase; }
.gd-box-h svg { width: 18px; height: 18px; }
.gd-merke { background: var(--petrol-soft); border-color: color-mix(in srgb, var(--petrol) 30%, transparent); }
.gd-merke .gd-box-h { color: var(--petrol); }
.gd-tipp { background: var(--green-soft); border-color: var(--green-line); }
.gd-tipp .gd-box-h { color: var(--green); }
.gd-beispiel { background: var(--ochre-soft); border-color: color-mix(in srgb, var(--ochre) 35%, transparent); }
.gd-beispiel .gd-box-h { color: var(--ochre); }
.gd-loesung { background: var(--bg); border-style: dashed; }
.gd-loesung .gd-box-h { color: var(--ink-2); }
.gd-kb { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); }
.gd-kb-n { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--petrol); text-align: center; }
.gd-kb h3 { margin: 4px 0 8px; font-size: 19px; }
.gd-kb .gd-ul { font-size: 16px; }
.gd-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
.gd-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--petrol-soft); color: var(--petrol); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.gd-links a svg { width: 15px; height: 15px; }
.gd-prev { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 15px; }
.gd-article .dg-pager { margin-top: 34px; }
@media (max-width: 640px) {
  .gd-feature { grid-template-columns: 52px minmax(0, 1fr); padding: 18px; }
  .gd-feature .go { display: none; }
  .gd-feature-ico { width: 52px; height: 52px; border-radius: 16px; }
  .gd-hero { padding: 26px 20px 24px; border-radius: 24px; }
  .gd-toc a { grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .gd-toc-ico { width: 40px; height: 40px; }
  .gd-body { font-size: 17px; }
  .gd-kb { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gd-kb-n { text-align: start; font-size: 32px; }
}

html:not(.nm-bewegung) .hero::before,
html:not(.nm-bewegung) .hero::after,
html:not(.nm-bewegung) .hero-pulse path,
html:not(.nm-bewegung) .gd-hero-pulse path,
html:not(.nm-bewegung) .sb-item[aria-current="page"]::before { animation: none !important; }
html:not(.nm-bewegung) .hero-pulse path,
html:not(.nm-bewegung) .gd-hero-pulse path { stroke-dashoffset: 0; }
html:not(.nm-bewegung) .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html:not(.nm-bewegung) .btn,
html:not(.nm-bewegung) .sb-item,
html:not(.nm-bewegung) .sb-item svg,
html:not(.nm-bewegung) .topbar,
html:not(.nm-bewegung) .chip,
html:not(.nm-bewegung) .hero-count,
html:not(.nm-bewegung) .gd-feature,
html:not(.nm-bewegung) .gd-toc a { transition: none !important; }
html:not(.nm-bewegung) .btn:hover,
html:not(.nm-bewegung) .sb-item:hover,
html:not(.nm-bewegung) .hero-count:hover,
html:not(.nm-bewegung) .gd-feature:hover,
html:not(.nm-bewegung) .gd-toc a:hover { transform: none !important; }
.hero-pulse { left: auto; right: -10px; bottom: -4px; width: 46%; height: 48px; opacity: 0.28; }
.gd-article .gd-body { margin-top: 22px; }
@media (max-width: 700px) { .hero-pulse { width: 70%; bottom: -8px; } }

.sb-body { min-width: 0; }
.sb-body b, .sb-body .s, .sb-body .sb-g { overflow-wrap: break-word; hyphens: auto; }
.tool-card { min-width: 0; }
.tool-card > * { min-width: 0; max-width: 100%; }
.tool-card .chip { white-space: normal; }
.sb-body { grid-template-columns: minmax(0, 1fr); }
.sb-body b { overflow-wrap: anywhere; }

[lang="ar"] { font-family: var(--arabic); }
.ltr { unicode-bidi: isolate; }
.kp-hero-ar { font-family: var(--arabic) !important; font-size: 26px !important; font-weight: 700; margin-top: -4px !important; }
.kp-zweck-ar { margin: -6px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--petrol-soft); color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.kp-li-ar { display: block; font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.kp-self { display: grid; gap: 4px; margin: 4px 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-2); font-size: 15px; }
.kp-self span { color: var(--ink-2); line-height: 1.7; }
.kp-toc a { grid-template-columns: 30px minmax(0, 1fr) auto; }
.kp-toc .gd-toc-t .s { font-size: 15px; line-height: 1.6; }
.kp-article { display: grid; gap: 18px; max-width: 1120px; }
.kp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.kp-h1-ar { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; line-height: 1.35; }
.kp-body { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); overflow: hidden; }
.kp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.kp-row:first-child { border-top: 0; }
.kp-row > div { padding: 16px 20px; min-width: 0; display: grid; gap: 10px; align-content: start; font-size: 17px; line-height: 1.7; }
.kp-row > div p { margin: 0; }
.kp-row .kp-ar { border-inline-start: 1px solid var(--line); background: color-mix(in srgb, var(--petrol-soft) 35%, var(--paper)); font-size: 17.5px; line-height: 1.95; }
.kp-row .kp-ar .gd-ul { padding-inline-start: 22px; }
.kp-row .gd-box { margin: 0; }
.kp-pruefen { background: var(--ochre-soft); border-color: color-mix(in srgb, var(--ochre) 40%, transparent); }
.kp-pruefen .gd-box-h { color: var(--ochre); }
.kp-hinweis { background: var(--petrol-soft); }
.kp-hinweis .gd-box-h { color: var(--petrol); }
.kp-tipp { background: var(--green-soft); border-color: var(--green-line); }
.kp-tipp .gd-box-h { color: var(--green); }
.kp-fall, .kp-qa, .kp-wort { display: grid; gap: 6px; }
.kp-fall-h, .kp-q { font-weight: 700; font-size: 17.5px; color: var(--petrol); }
.kp-fall-info { color: var(--ink-2); }
.kp-lbl { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 4px !important; border-radius: 8px; background: var(--petrol); color: var(--petrol-ink); font-weight: 700; font-size: 14px; font-family: var(--body); }
.kp-wort dl { margin: 0; display: grid; gap: 8px; }
.kp-wort dt { font-weight: 700; }
.kp-wort dd { margin: 0 0 4px; color: var(--ink-2); }
.q-ar, .o-ar { display: block; margin-top: 4px; font-family: var(--arabic); color: var(--ink-2); font-size: 0.95em; line-height: 1.8; text-align: start; }
.q-ar { font-weight: 600; }
.fb .w-ar { margin-top: 4px; font-family: var(--arabic); line-height: 1.8; }
@media (max-width: 760px) {
  .kp-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kp-row { grid-template-columns: minmax(0, 1fr); }
  .kp-row .kp-ar { border-inline-start: 0; border-top: 1px dashed var(--line); }
  .kp-row > div { padding: 14px 16px; font-size: 16.5px; }
}
.print-lern #print-area .kp-print .kp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt; padding: 5pt 0; border-top: 0.4pt solid #ccc; page-break-inside: avoid; }
.print-lern #print-area .kp-print .kp-ar { font-family: var(--arabic); }

.px-fall { display: grid; gap: 14px; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.px-fall + .px-fall { margin-top: 10px; }
.px-h { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; color: var(--petrol); }
.px-vorst { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 17px; line-height: 1.65; }
.px-prob { display: grid; gap: 8px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); border-inline-start: 5px solid var(--petrol); }
.px-potenziell { border-inline-start-color: var(--ochre); }
.px-verdeckt { border-inline-start-color: var(--coral); }
.px-art { margin: 0; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--petrol); }
.px-potenziell .px-art { color: var(--ochre); }
.px-verdeckt .px-art { color: var(--coral); }
.px-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: baseline; }
.px-dl dt { font-weight: 700; color: var(--petrol); min-width: 28px; font-size: 15px; }
.px-dl dd { margin: 0; font-size: 16.5px; line-height: 1.6; }
.px-ziele dt { font-size: 13.5px; color: var(--green); }
.px-sub { margin: 6px 0 0; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.px-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-top: 6px; border-top: 1px dashed var(--line); }
.px-paket { margin-top: 14px; border-color: color-mix(in srgb, var(--petrol) 40%, var(--line)); }
@media (max-width: 700px) {
  .px-fall { padding: 16px; }
  .px-two { grid-template-columns: minmax(0, 1fr); }
  .px-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .px-dl dd { margin-bottom: 6px; }
}
.print-lern #print-area .px-fall { box-shadow: none; border: 0; padding: 0; page-break-before: always; }
.print-lern #print-area .px-prob { page-break-inside: avoid; border: 0.4pt solid #bbb; border-left: 3pt solid #555; }

.bk { grid-template-columns: minmax(0, 1fr); }
.bk > * { min-width: 0; }
.bk-cover h1, .bk-cover .bk-title { overflow-wrap: break-word; hyphens: auto; }

.b2b-buy{display:grid;gap:18px}.b2b-buy-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.b2b-buy-head h2{margin:2px 0 5px;font:400 clamp(27px,3.5vw,36px)/1.12 var(--display)}.b2b-buy-head p:not(.eyebrow){color:var(--ink-2);max-width:760px}.b2b-product-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.b2b-product-pick{appearance:none;width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.b2b-product-pick:hover{transform:translateY(-2px);border-color:var(--petrol)}.b2b-product-pick[aria-pressed="true"]{border-color:var(--petrol);box-shadow:0 0 0 2px color-mix(in srgb,var(--petrol) 18%,transparent),var(--shadow)}.b2b-pick-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--petrol-soft);color:var(--petrol)}.b2b-pick-icon svg{width:26px;height:26px}.b2b-pick-copy{display:grid;gap:2px;min-width:0}.b2b-pick-copy small{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}.b2b-pick-copy b{font-size:18px;line-height:1.25}.b2b-pick-copy span{font-size:13.5px;line-height:1.35;color:var(--ink-2)}.b2b-product-pick strong{font-size:20px;white-space:nowrap;color:var(--petrol)}.b2b-checkout-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px;align-items:start}.b2b-config{display:grid;gap:14px}.b2b-tier-box,.b2b-buyer{padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}.b2b-tier-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:10px}.b2b-tier-picks button{display:grid;gap:2px;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer}.b2b-tier-picks button[aria-pressed="true"]{border-color:var(--petrol);background:var(--petrol-soft);box-shadow:0 0 0 1px var(--petrol) inset}.b2b-tier-picks b{font-size:16px}.b2b-tier-picks span{font-size:20px;font-weight:800;color:var(--petrol)}.b2b-tier-picks small{color:var(--ink-3);line-height:1.3}.b2b-buyer-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.b2b-buyer-fields label{display:grid;gap:6px}.b2b-buyer-fields label>span{font-size:13px;font-weight:700;color:var(--ink-2)}.b2b-buyer-fields input{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:13px;background:var(--bg);color:var(--ink);padding:11px 12px;font:inherit}.b2b-buyer-fields input:focus{outline:3px solid color-mix(in srgb,var(--petrol) 18%,transparent);border-color:var(--petrol)}.b2b-order-summary{position:sticky;top:calc(var(--topbar) + 14px);display:grid;gap:9px;padding:20px;border:1px solid color-mix(in srgb,var(--petrol) 38%,var(--line));border-radius:22px;background:linear-gradient(145deg,var(--paper),var(--petrol-soft));box-shadow:var(--shadow)}.b2b-order-summary h3{margin:0;font:400 27px/1.1 var(--display)}.b2b-summary-detail,.b2b-summary-note{margin:0;color:var(--ink-2);line-height:1.45}.b2b-summary-price{margin:2px 0;font-size:36px;font-weight:800;line-height:1;color:var(--petrol)}.b2b-summary-check{display:grid;gap:5px;padding:9px 0 3px;font-size:13px;color:var(--ink-2)}.b2b-summary-check span{display:flex;align-items:center;gap:7px}.b2b-summary-check svg{width:16px;height:16px;color:var(--green)}.b2b-terms-link{justify-self:center;font-size:13px;font-weight:700;color:var(--ink-2);text-underline-offset:3px}.b2b-order-done{display:flex;align-items:center;gap:14px;padding:20px}.b2b-order-done h3{margin:0 0 3px;font-size:21px}.b2b-order-done p{margin:0;color:var(--ink-2)}@media(max-width:860px){.b2b-product-picks{grid-template-columns:1fr}.b2b-checkout-grid{grid-template-columns:1fr}.b2b-order-summary{position:static}.b2b-buy-head{display:grid}}@media(max-width:620px){.b2b-product-pick{grid-template-columns:44px minmax(0,1fr);padding:13px}.b2b-pick-icon{width:44px;height:44px}.b2b-product-pick strong{grid-column:2;font-size:18px}.b2b-tier-picks{grid-template-columns:1fr}.b2b-buyer-fields{grid-template-columns:1fr}.b2b-buy-head .chip{justify-self:start}}

.b2b-language-strip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.b2b-language-strip span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:12px;font-weight:700;color:var(--ink-2)}
.b2b-language-picker{border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden}
.b2b-language-picker>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;background:var(--paper);user-select:none}
.b2b-language-picker>summary::-webkit-details-marker{display:none}
.b2b-language-picker>summary>span{display:flex;align-items:center;gap:10px;min-width:0}
.b2b-language-picker>summary>span>.icon,.b2b-language-picker>summary>span>svg{width:22px;height:22px;color:var(--petrol);flex:0 0 auto}
.b2b-language-picker>summary>span>span{display:grid;gap:1px;min-width:0}
.b2b-language-picker>summary b{font-size:15px}
.b2b-language-picker>summary small{color:var(--ink-3);font-size:12.5px;font-weight:600}
.b2b-language-picker>summary>.icon,.b2b-language-picker>summary>svg:last-child{width:18px;height:18px;transition:transform .2s ease}
.b2b-language-picker[open]>summary>.icon,.b2b-language-picker[open]>summary>svg:last-child{transform:rotate(180deg)}
.b2b-language-panel{padding:0 14px 14px;border-top:1px solid var(--line)}
.b2b-language-panel>.muted{margin:12px 0 10px;font-size:13px}
.b2b-language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.b2b-language-row{display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:var(--bg);transition:border-color .18s ease,background .18s ease}
.b2b-language-row.selected{border-color:color-mix(in srgb,var(--petrol) 42%,var(--line));background:color-mix(in srgb,var(--petrol-soft) 42%,var(--bg))}
.b2b-language-choice{display:flex;align-items:center;gap:9px;min-width:0}
.b2b-language-choice>span{display:grid;gap:1px;min-width:0}
.b2b-language-choice input[type="checkbox"]{width:24px;height:24px;flex:0 0 auto;accent-color:var(--petrol);cursor:pointer}
.b2b-language-row b{font-size:13.5px}
.b2b-language-row small{font-size:11px;color:var(--ink-3);overflow-wrap:anywhere}
.b2b-language-row>input[type="number"]{width:64px;min-width:0;text-align:center;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--ink);padding:8px 5px;font:700 14px var(--body)}
.b2b-language-row>input[type="number"]:disabled{opacity:.45;cursor:not-allowed}
.b2b-language-row>input[type="number"]:focus{outline:2px solid color-mix(in srgb,var(--petrol) 20%,transparent);border-color:var(--petrol)}
.b2b-language-foot{margin:10px 0 0;padding:8px 10px;border-radius:11px;background:var(--petrol-soft);color:var(--petrol);font-size:12.5px;font-weight:700}
.b2b-buyer-fields select{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:13px;background:var(--bg);color:var(--ink);padding:11px 12px;font:inherit}
.b2b-buyer-mail{grid-column:1/-1}
#b2b-manager-bonus{padding:8px 9px;border-radius:11px;background:var(--green-soft);color:var(--green);font-weight:700}
@media(max-width:620px){
  .b2b-language-grid{grid-template-columns:1fr}
  .b2b-language-panel{padding-inline:10px}
  .b2b-language-picker>summary{padding:12px}
  .b2b-buyer-mail{grid-column:auto}
}

.b2b-staffel { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.b2b-staffel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.b2b-staffel .b2b-preis { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.b2b-staffel .s { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }
.b2b-hinweis p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.b2b-mail { margin: 0; font-size: 17px; }
.platzhalter { padding: 2px 8px; border-radius: 6px; background: var(--ochre-soft); color: var(--ochre); font-weight: 700; }
.b2b-bed { margin: 18px 0; padding-inline-start: 22px; display: grid; gap: 14px; }
.b2b-bed li::marker { font-weight: 700; color: var(--petrol); }
.b2b-bed p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.65; }
.kp-telc { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); }
.kp-dialog { display: grid; gap: 6px; }
.kp-rede { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.kp-row .kp-ltr { background: color-mix(in srgb, var(--green-soft) 45%, var(--paper)); }
.kp-row .kp-ltr { font-size: inherit; line-height: inherit; }
[lang="en"].kp-hero-ar { font-family: var(--body) !important; font-weight: 600; font-size: 22px !important; }
.kp-telc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
[lang="en"].q-ar, [lang="en"].o-ar, .fb [lang="en"].w-ar { font-family: var(--body); }
.ass-stand { margin-top: 14px; }
.ass-stand b { display: inline-flex; align-items: center; gap: 6px; }
.ass-stand b .icon, .ass-stand b svg { width: 16px; height: 16px; }
.gd-toc .ass-geplant { display: grid; grid-template-columns: 30px 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1px dashed var(--line); background: var(--paper); opacity: 0.8; }
.gd-toc .ass-geplant .go svg { color: var(--ink-3); }
.ass-chip { margin-top: 6px; }
@media (max-width: 640px) { .gd-toc .ass-geplant { grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px; } }
.gd-hero h1, .d-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.pro-grid > * { min-width: 0; }
.gd-toc-t { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.job-groups, .job-group { min-width: 0; }
.job-group > summary { overflow-wrap: anywhere; }
.job-group > summary > * { min-width: 0; }
.page-head h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.page-head { min-width: 0; }
.page-head .eyebrow { overflow-wrap: anywhere; }
.page-head h1, .gd-hero h1, .d-title { overflow-wrap: anywhere; }

.article-wrap > *, .article, .d-head > *, .sec, .gd-body, .gd-article, .px-article, .kp-row > *, .kp-head > *,
.job-list > li, .job-item > span, .pro-grid > *, .card, .note-box { min-width: 0; }
.article :is(p, li, h1, h2, h3, h4, dt, dd, figcaption, blockquote, summary), .d-terms, .eyebrow,
.px-h, .px-vorst, .px-prob, .job-item > span:first-child, .jg-t, .gd-toc-t, .src-box, .note-box {
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
}

.kp-head .d-title { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; overflow-wrap: break-word; }
.kp-head .kp-h1-ar { font-size: clamp(24px, 2.4vw, 32px); }
@media (max-width: 760px) { .kp-head .d-title { font-size: clamp(30px, 8vw, 40px); } }

.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  transition: opacity 0.3s ease; }
.read-progress.on { opacity: 1; }

.gd-hero::before, .gd-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.gd-hero::before { width: 340px; height: 340px; right: -110px; top: -150px; background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 65%); animation: nm-float 13s ease-in-out infinite alternate; }
.gd-hero::after { width: 240px; height: 240px; left: -80px; bottom: -140px; background: radial-gradient(circle, rgba(255,255,255,0.13), transparent 65%); animation: nm-float 17s ease-in-out infinite alternate-reverse; }
.gd-hero h1, .hero h1 { animation: nm-rise-in 0.7s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.gd-hero p, .gd-hero .row, .hero .hero-lead { animation: nm-rise-in 0.7s 0.12s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
@keyframes nm-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.btn:not(.ghost):not(.soft):not(.light):not(.ghost-light):not(.danger):not(.btn-google):not([disabled]) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.ghost):not(.soft):not(.light):not(.ghost-light):not(.danger):not(.btn-google):not([disabled])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s ease; }
.btn:not(.ghost):not(.soft):not(.light):not(.ghost-light):not(.danger):not(.btn-google):not([disabled]):hover::after { transform: translateX(120%); }
.price-card .btn.block:not([disabled]) { animation: nm-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes nm-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--petrol) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--petrol) 16%, transparent); } }

@media (hover: hover) {
  .price-card, .quick-card, .tool-card, .pdf-card, .bk-card, .right-card, .gd-feature, .dg-card {
    transition: transform 0.25s cubic-bezier(0.22, 0.85, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease; }
  .price-card:hover, .quick-card:hover, .tool-card:hover, .pdf-card:hover, .bk-card:hover, .right-card:hover, .gd-feature:hover, .dg-card:hover {
    transform: translateY(-4px); box-shadow: 0 18px 36px -24px rgba(18, 48, 58, 0.5); }
  .gd-toc-ico { transition: transform 0.25s cubic-bezier(0.22, 0.85, 0.3, 1); }
  .gd-toc a:hover .gd-toc-ico { transform: rotate(-6deg) scale(1.08); }
}

.price-card.rv-in .price, .price-card:not(.rv) .price { animation: nm-pop 0.55s 0.15s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.bonus-ribbon { animation: nm-pop 0.5s 0.3s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.gd-meta .chip { animation: nm-pop 0.35s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.gd-meta .chip:nth-child(2) { animation-delay: 0.08s; }
.gd-meta .chip:nth-child(3) { animation-delay: 0.16s; }

.opt.ok { animation: nm-good 0.6s ease-out; }
.opt.no { animation: nm-shake 0.42s ease; }
.fb { animation: nm-fade-up 0.32s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.score { animation: nm-pop 0.4s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
@keyframes nm-good { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--green) 0%, transparent); } }
@keyframes nm-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

details[open] > :not(summary) { animation: nm-fade-up 0.3s cubic-bezier(0.22, 0.85, 0.3, 1) both; }

.kp-rede { transition: background 0.2s ease; }
.kp-rede:hover { background: color-mix(in srgb, var(--petrol-soft) 60%, var(--bg)); }

html:not(.nm-bewegung) .read-progress { display: none; }
html:not(.nm-bewegung) .gd-hero::before,
html:not(.nm-bewegung) .gd-hero::after,
html:not(.nm-bewegung) .gd-hero h1,
html:not(.nm-bewegung) .hero h1,
html:not(.nm-bewegung) .gd-hero p,
html:not(.nm-bewegung) .gd-hero .row,
html:not(.nm-bewegung) .hero .hero-lead,
html:not(.nm-bewegung) .price-card .btn.block,
html:not(.nm-bewegung) .price-card .price,
html:not(.nm-bewegung) .bonus-ribbon,
html:not(.nm-bewegung) .gd-meta .chip,
html:not(.nm-bewegung) .opt.ok,
html:not(.nm-bewegung) .opt.no,
html:not(.nm-bewegung) .fb,
html:not(.nm-bewegung) .score,
html:not(.nm-bewegung) details[open] > :not(summary) { animation: none !important; }
html:not(.nm-bewegung) .btn::after { display: none !important; }
html:not(.nm-bewegung) .price-card,
html:not(.nm-bewegung) .quick-card,
html:not(.nm-bewegung) .tool-card,
html:not(.nm-bewegung) .pdf-card,
html:not(.nm-bewegung) .bk-card,
html:not(.nm-bewegung) .right-card,
html:not(.nm-bewegung) .gd-feature,
html:not(.nm-bewegung) .dg-card,
html:not(.nm-bewegung) .gd-toc-ico { transition: none !important; transform: none !important; }
@media print { .read-progress { display: none; } }

.acc-del { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-del .row { flex-wrap: wrap; }
.inapp-box { border-color: var(--coral-line, var(--line-2)); }

@media (max-width: 1180px) {
  .sidebar.open .sb-group { animation: nm-rise-in 0.42s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
  .sidebar.open .sb-group:nth-of-type(2) { animation-delay: 0.04s; }
  .sidebar.open .sb-group:nth-of-type(3) { animation-delay: 0.08s; }
  .sidebar.open .sb-group:nth-of-type(4) { animation-delay: 0.12s; }
  .sidebar.open .sb-group:nth-of-type(5) { animation-delay: 0.16s; }
  .sidebar.open .sb-group:nth-of-type(n+6) { animation-delay: 0.2s; }
}

.auth-card { animation: nm-pop 0.5s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.auth-card .auth-actions .btn { animation: nm-rise-in 0.5s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.auth-card .auth-actions .btn:nth-child(2) { animation-delay: 0.08s; }
.profile-head .avatar { animation: nm-avatar 0.6s 0.1s cubic-bezier(0.22, 0.85, 0.3, 1) both; box-shadow: 0 0 0 0 color-mix(in srgb, var(--petrol) 30%, transparent); }
@keyframes nm-avatar { 0% { opacity: 0; transform: scale(0.7); } 70% { transform: scale(1.06); box-shadow: 0 0 0 8px color-mix(in srgb, var(--petrol) 12%, transparent); } 100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--petrol) 0%, transparent); } }

.section-title { position: relative; padding-bottom: 8px; }
.section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); transform-origin: 0 50%; animation: nm-line 0.7s 0.2s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
@keyframes nm-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: hover) {
  .quick-ico, .app-teaser-ico { transition: transform 0.3s cubic-bezier(0.22, 0.85, 0.3, 1); }
  .quick-card:hover .quick-ico, .app-teaser:hover .app-teaser-ico { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
}

.toast.show { animation: nm-rise-in 0.35s cubic-bezier(0.22, 0.85, 0.3, 1) both; }

html:not(.nm-bewegung) .sidebar.open .sb-group,
html:not(.nm-bewegung) .auth-card,
html:not(.nm-bewegung) .auth-card .auth-actions .btn,
html:not(.nm-bewegung) .profile-head .avatar,
html:not(.nm-bewegung) .section-title::after,
html:not(.nm-bewegung) .toast.show { animation: none !important; }
html:not(.nm-bewegung) .quick-ico,
html:not(.nm-bewegung) .app-teaser-ico { transition: none !important; transform: none !important; }

.kbc-grid { display: grid; gap: 16px; margin-top: 8px; }
.kbc { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px 22px 22px 18px;
  border-radius: 26px; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow); transition: transform 0.25s cubic-bezier(0.22, 0.85, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease; }
.kbc::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 110px; z-index: -1; background: linear-gradient(160deg, var(--grad-a), var(--grad-b)); opacity: 0.12; }
.kbc-n { font-family: var(--display); font-size: 62px; line-height: 1; text-align: center; background: linear-gradient(160deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kbc-t { display: grid; gap: 6px; min-width: 0; }
.kbc-t b { font-size: 18px; line-height: 1.35; }
.kbc-e { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.kbc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kbc-meta span { padding: 3px 10px; border-radius: 999px; background: var(--petrol-soft); color: var(--petrol); font-size: 13px; font-weight: 700; }
.kbc .go svg { width: 22px; height: 22px; color: var(--petrol); transition: transform 0.25s ease; }
@media (hover: hover) { .kbc:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(18, 48, 58, 0.55); border-color: var(--petrol); } .kbc:hover .go svg { transform: translateX(4px); } }
@media (max-width: 640px) { .kbc { grid-template-columns: 56px minmax(0, 1fr); padding: 18px 16px 18px 12px; } .kbc::before { width: 68px; } .kbc-n { font-size: 44px; } .kbc .go { display: none; } }

.kb-hero { padding-right: 150px; }
.kb-hero-n { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 150px; line-height: 1; color: rgba(255, 255, 255, 0.16); z-index: -1; pointer-events: none; }
.kb-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kb-stats span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 14px; }
.kb-stats b { font-size: 16px; }
@media (max-width: 640px) { .kb-hero { padding-right: 22px; } .kb-hero-n { font-size: 96px; right: 10px; top: 18px; transform: none; } }
.kb-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; position: sticky; top: calc(var(--topbar) + 8px); z-index: 5; padding: 8px; border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); }
.kb-jump a { padding: 6px 12px; border-radius: 999px; color: var(--petrol); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.kb-jump a:hover { background: var(--petrol-soft); }
#kb-kompetenzen, #kb-lernstoff, #kb-krank, #teste-dich { scroll-margin-top: calc(var(--topbar) + 76px); }

.kbl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kbl-list { display: grid; gap: 12px; }
.kbl { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); overflow: hidden; transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.kbl[open] { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--petrol) 35%, var(--line)); }
.kbl > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; }
.kbl > summary::-webkit-details-marker { display: none; }
.kbl > summary .icon { width: 20px; height: 20px; color: var(--ink-3); transition: transform 0.25s ease; }
.kbl[open] > summary .icon { transform: rotate(180deg); }
.kbl-n { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(160deg, var(--grad-a), var(--grad-b)); }
.kbl-t { display: grid; gap: 3px; min-width: 0; }
.kbl-t b { font-size: 17px; line-height: 1.35; }
.kbl-t span { color: var(--ink-2); font-size: 15px; }
.kbl-body { display: grid; gap: 12px; padding: 4px 20px 20px 70px; font-size: 16.5px; line-height: 1.65; }
.kbl-body p { margin: 0; }
.kb-focus{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--petrol-soft)}
.kb-focus-title{font-weight:800;color:var(--petrol)}
.kb-focus ul{margin:6px 0 0;padding-left:20px}
.kb-answer{margin-top:10px}.kb-answer-title{font-weight:800;color:var(--petrol)}
@media (max-width: 640px) { .kbl-body { padding: 4px 16px 18px; } }
.kbl-werte { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.kbl-werte div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
.kbl-werte div:nth-child(odd) { background: var(--bg); }
.kbl-werte dt { font-weight: 600; } .kbl-werte dd { margin: 0; font-weight: 700; color: var(--petrol); }
@media (max-width: 480px) { .kbl-werte div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.kbl-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.kbl-links .chip { text-decoration: none; white-space: normal; }
.kbl-lh { margin: 0 6px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.kbl-lh svg { width: 15px; height: 15px; }
.kbl-src { font-size: 13.5px !important; line-height: 1.5; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 10px !important; }
.kbl-ce { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-weight: 700; }

.kbk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .kbk-grid { grid-template-columns: minmax(0, 1fr); } }
.kbk { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.kbk > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 14px 16px; }
.kbk > summary::-webkit-details-marker { display: none; }
.kbk > summary .icon { width: 18px; height: 18px; color: var(--ink-3); transition: transform 0.25s ease; }
.kbk[open] > summary .icon { transform: rotate(180deg); }
.kbk-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.kbk-list a { padding: 6px 11px; border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 14.5px; text-decoration: none; border: 1px solid var(--line); transition: border-color 0.2s ease, background 0.2s ease; }
.kbk-list a:hover { border-color: var(--petrol); background: var(--petrol-soft); color: var(--petrol); }
.kbw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kbw { min-height: 0; }

html:not(.nm-bewegung) .kbc,
html:not(.nm-bewegung) .kbc .go svg,
html:not(.nm-bewegung) .kbl,
html:not(.nm-bewegung) .kbk-list a { transition: none !important; }
.kbc-amt { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.kb-hero h1 { font-size: clamp(32px, 5vw, 48px); }
.kb-amt { font-size: 14px !important; line-height: 1.5; color: rgba(255, 255, 255, 0.78) !important; }
@media (max-width: 760px) {
  .kb-jump { position: static; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: transparent; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kb-jump::-webkit-scrollbar { display: none; }
  .kb-jump a { flex: none; background: var(--petrol-soft); }
}

.seg-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); max-width: 100%; }
.seg-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; color: var(--ink-2); font-weight: 700; font-size: 15px; text-decoration: none; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.seg-tabs a svg { width: 17px; height: 17px; }
.seg-tabs a[aria-current="page"] { background: var(--paper); color: var(--petrol); box-shadow: var(--shadow); }
@media (max-width: 380px) { .seg-tabs a { padding: 8px 11px; font-size: 14px; } }

.tf-card { display: grid; gap: 12px; margin-top: 20px; position: relative; overflow: hidden; }
.tf-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--petrol), var(--green), var(--petrol)); background-size: 200% 100%; animation: nm-tf-band 6s linear infinite; }
.tf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tf-head .eyebrow { margin: 0; }
.tf-streak { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--green-soft); color: var(--ink); font-size: 14px; }
.tf-streak svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 2.4; }
.tf-streak.up { animation: nm-pop 0.5s cubic-bezier(0.22, 0.85, 0.3, 1.4); }
.tf-q { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.6vw, 25px); line-height: 1.25; overflow-wrap: anywhere; }
.tf-more { margin: 0; font-size: 15px; color: var(--ink-2); }
.tf-more a { font-weight: 600; }
@keyframes nm-tf-band { to { background-position: -200% 0; } }

html:not(.nm-bewegung) .tf-card::before,
html:not(.nm-bewegung) .tf-streak.up { animation: none; }

html.nm-sanft .page > *, html.nm-sanft .fade-in, html.nm-sanft .fb, html.nm-sanft .toast.show, html.nm-sanft .sb-tr { animation: nm-fade 0.5s ease both !important; }
html.nm-sanft .rv { opacity: 0 !important; transform: none !important; transition: opacity 0.7s ease !important; }
html.nm-sanft .rv.rv-in { opacity: 1 !important; }
html.nm-sanft .btn, html.nm-sanft .card, html.nm-sanft .quick-card, html.nm-sanft .sb-card, html.nm-sanft .opt, html.nm-sanft .chip,
html.nm-sanft .sb-item, html.nm-sanft .kbc, html.nm-sanft .kbl { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease !important; }

.nm-welle { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.18; transform: scale(0); animation: nm-welle 0.6s cubic-bezier(0.22, 0.85, 0.3, 1) forwards; }
@keyframes nm-welle { to { transform: scale(1); opacity: 0; } }
html:not(.nm-bewegung) .nm-welle { display: none; }

.nach-oben { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--petrol); box-shadow: var(--shadow-lg); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.85, 0.3, 1.3); }
.nach-oben.an { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben svg { width: 20px; height: 20px; transform: rotate(-90deg); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media print { .nach-oben { display: none; } }

.sec h2 { position: relative; }
.sec.rv h2::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--petrol), var(--green));
  transform: scaleX(0); transform-origin: left; transition: transform 0.8s 0.25s cubic-bezier(0.22, 0.85, 0.3, 1); }
.sec.rv.rv-in h2::after { transform: scaleX(1); }
[dir="rtl"] .sec.rv h2::after { left: auto; right: 0; transform-origin: right; }
html:not(.nm-bewegung) .sec.rv h2::after { transform: scaleX(1); transition: none; }

.loading-line { position: relative; overflow: hidden; }
html.nm-bewegung .loading-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--petrol) 10%, transparent) 50%, transparent 80%); animation: nm-schimmer 1.3s linear infinite; }
@keyframes nm-schimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.bew-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.bew-wahl button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.bew-wahl button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--petrol-ink); }

.sb-lang { display: grid; gap: 10px; margin: 18px 0 8px; padding: 14px 16px; border-radius: 18px; background: var(--petrol-soft); border: 1px solid color-mix(in srgb, var(--petrol) 18%, transparent); }
.sb-lang .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; }
.sb-lang .eyebrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.sb-lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-lang-chips button { min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.sb-lang-chips button:hover { border-color: var(--petrol); transform: translateY(-1px); }
.sb-lang-chips button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--petrol-ink); }
.sb-lang-hint { margin: 0; font-size: 14px; color: var(--ink-2); display: grid; gap: 2px; }
.sb-tr { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--green-soft) 70%, var(--paper)); border-inline-start: 4px solid var(--green);
  overflow-wrap: anywhere; animation: nm-tr-in 0.5s cubic-bezier(0.22, 0.85, 0.3, 1) both; }
.sb-tr .sb-trl { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.sb-tr ul.plain { margin: 0; }
.sb-tr-t { margin: 4px 0 0; font-size: 20px; color: var(--petrol); animation: nm-tr-in 0.5s both; }
.sb-tr-keine { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.sb-trn { display: block; color: var(--petrol); font-size: 15px; overflow-wrap: anywhere; }
[lang="ar"].sb-tr, [lang="ar"].sb-tr-t, [lang="ar"].sb-trn, .sb-lang-hint [lang="ar"], .sb-lang-chips [lang="ar"] { font-family: var(--arabic); line-height: 1.8; }
[lang="ml"] { font-family: "Noto Sans Malayalam", "Manjari", "Malayalam Sangam MN", "Kartika", var(--body); line-height: 1.75; }
@keyframes nm-tr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html:not(.nm-bewegung) .sb-tr, html:not(.nm-bewegung) .sb-tr-t { animation: none; }
html.nm-sanft .sb-tr, html.nm-sanft .sb-tr-t { animation: nm-fade 0.5s ease both; }
@media print { .sb-lang { display: none; } }

.sale-wait { margin-top: 12px; font-size: 14px; color: var(--ink-2); text-align: center; }
.sale-wait a { font-weight: 700; }

.sim-preview { display: grid; gap: 8px; padding: 10px 0; }
.sim-preview b { font-family: var(--display); font-size: 28px; font-weight: 400; }
.sim-preview span { color: var(--ink-2); }
.sim-start { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.sim-start h2 { margin: 3px 0 5px; }
.sim-bar {
  position: sticky; top: calc(var(--topbar) + 8px); z-index: 12; margin: 0 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.sim-bar > b { font-variant-numeric: tabular-nums; font-size: 19px; color: var(--petrol); }
.sim-result { display: grid; gap: 2px; }
.sim-result b { font-size: 18px; }
.sim-result span { color: var(--ink-2); font-size: 14px; }
.sim-quiz .sim-q { scroll-margin-top: calc(var(--topbar) + 90px); }
.sim-opt.sim-selected { border-color: var(--petrol); background: var(--petrol-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--petrol) inset; }

.lang-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.lang-offer { display: grid; grid-template-columns: minmax(82px, auto) 1fr auto; gap: 14px; align-items: center; text-decoration: none; padding: 18px; }
.lang-offer-code { font-family: var(--arabic); font-weight: 700; color: var(--petrol); overflow-wrap: anywhere; }
.lang-offer > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.lang-offer .s { color: var(--ink-2); font-size: 14.5px; }

.b2b-growth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.b2b-growth .card { display: grid; gap: 8px; }
.b2b-growth h3 { margin: 0; font-size: 18px; }
.b2b-growth p { color: var(--ink-2); }

.bk-guide .card, .bk-guide .row, .bk-guide .chip > span { min-width: 0; }
.bk-guide .chip { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.bk-guide h3 { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .sim-start { align-items: stretch; flex-direction: column; }
  .sim-start .btn { width: 100%; }
  .lang-offers { grid-template-columns: 1fr; }
  .b2b-growth { grid-template-columns: 1fr; }
}

.partner-hero { padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); margin-bottom: 22px; }
.partner-hero > div { display: grid; gap: 10px; max-width: 760px; }
.partner-logo { max-width: 220px; max-height: 80px; object-fit: contain; object-position: left center; margin-bottom: 8px; }

@font-face { font-family: "Noto Sans Malayalam"; src: url("/assets/fonts/noto-sans-malayalam.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0D00-0D7F, U+200C-200D; }
.translation-note { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--petrol); border-radius: 16px; background: var(--paper); color: var(--ink-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.translation-note > svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--petrol); margin-top: 3px; }
.translation-note > div { min-width: 0; display: grid; gap: 6px; }
.translation-note p { margin: 0; }
.translation-note b { color: var(--ink); }
.translation-note [lang="ar"] { font-family: var(--arabic); }
.sb-lang .translation-note { margin: 0; }
.study-overview { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.study-overview > * { display: inline-flex; align-items: center; gap: 6px; }
.study-overview svg { width: 16px; height: 16px; color: var(--petrol); }
.study-overview a { color: var(--petrol); text-underline-offset: 3px; }
.study-next { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.study-next h2 { margin: 0 0 14px; font-family: var(--display); font-size: 25px; font-weight: 400; }
.study-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.study-next-grid a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); text-decoration: none; }
.study-next-grid a span { display: grid; gap: 5px; min-width: 0; }
.study-next-grid small { color: var(--ink-3); font-size: 12px; }
.study-next-grid b { line-height: 1.4; overflow-wrap: anywhere; }
.study-next-grid svg { flex: 0 0 20px; color: var(--petrol); }
.study-next-grid a:focus-visible, .study-overview a:focus-visible { outline: 3px solid var(--petrol); outline-offset: 4px; }
html.nm-bewegung .study-next-grid a { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
html.nm-bewegung .study-next-grid a svg { transition: transform .25s ease; }
html.nm-bewegung .study-overview > * { animation: nm-rise-in .4s ease both; }
html.nm-bewegung .study-overview > :nth-child(2) { animation-delay: .06s; }
html.nm-bewegung .study-overview > :nth-child(3) { animation-delay: .12s; }
html.nm-bewegung .chipnav a.on { animation: nm-current .3s ease; }
@keyframes nm-current { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--petrol) 15%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (hover: hover) { html.nm-bewegung .study-next-grid a:hover { transform: translateY(-3px); border-color: var(--petrol); box-shadow: var(--shadow); } html.nm-bewegung .study-next-grid a:hover svg { transform: translateX(3px); } }
@media (max-width: 540px) { .study-next-grid { grid-template-columns: minmax(0, 1fr); } .translation-note { padding: 12px; gap: 9px; } }
@media print { .translation-note { break-inside: avoid; background: white; border-color: #aaa; color: #222; font-size: 10pt; } .translation-note b { color: #111; } .study-overview, .study-next { display: none; } }

:root[data-palette="ocean"] {
  --bg: hsl(216 32% 94%); --bg-2: hsl(216 28% 89%); --paper: hsl(216 35% 98%);
  --sidebar: hsl(216 28% 91%); --ink: hsl(216 35% 17%); --ink-2: hsl(216 20% 35%);
  --ink-3: hsl(216 15% 40%); --line: hsl(216 23% 82%); --line-2: hsl(216 23% 74%);
  --petrol: hsl(216 48% 35%); --petrol-ink: #fff; --petrol-soft: hsl(216 40% 91%);
  --grad-a: hsl(216 48% 30%); --grad-b: hsl(238 43% 34%);
  --shadow: 0 1px 2px hsl(216 35% 17% / .06), 0 14px 34px -18px hsl(216 35% 17% / .25);
  --shadow-lg: 0 2px 6px hsl(216 35% 17% / .08), 0 30px 60px -24px hsl(216 35% 17% / .35);
}
:root[data-palette="ocean"][data-theme="dark"] {
  --bg: hsl(216 24% 9%); --bg-2: hsl(216 24% 13%); --paper: hsl(216 22% 15%);
  --sidebar: hsl(216 24% 11%); --ink: hsl(216 28% 93%); --ink-2: hsl(216 20% 76%);
  --ink-3: hsl(216 16% 67%); --line: hsl(216 22% 25%); --line-2: hsl(216 22% 36%);
  --petrol: hsl(216 62% 75%); --petrol-ink: hsl(216 35% 12%); --petrol-soft: hsl(216 28% 21%);
  --grad-a: hsl(216 48% 28%); --grad-b: hsl(238 43% 31%);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -18px rgb(0 0 0 / .7);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .8);
}
:root[data-palette="forest"] {
  --bg: hsl(137 32% 94%); --bg-2: hsl(137 28% 89%); --paper: hsl(137 35% 98%);
  --sidebar: hsl(137 28% 91%); --ink: hsl(137 35% 17%); --ink-2: hsl(137 20% 35%);
  --ink-3: hsl(137 15% 40%); --line: hsl(137 23% 82%); --line-2: hsl(137 23% 74%);
  --petrol: hsl(137 48% 35%); --petrol-ink: #fff; --petrol-soft: hsl(137 40% 91%);
  --grad-a: hsl(137 48% 30%); --grad-b: hsl(159 43% 34%);
  --shadow: 0 1px 2px hsl(137 35% 17% / .06), 0 14px 34px -18px hsl(137 35% 17% / .25);
  --shadow-lg: 0 2px 6px hsl(137 35% 17% / .08), 0 30px 60px -24px hsl(137 35% 17% / .35);
}
:root[data-palette="forest"][data-theme="dark"] {
  --bg: hsl(137 24% 9%); --bg-2: hsl(137 24% 13%); --paper: hsl(137 22% 15%);
  --sidebar: hsl(137 24% 11%); --ink: hsl(137 28% 93%); --ink-2: hsl(137 20% 76%);
  --ink-3: hsl(137 16% 67%); --line: hsl(137 22% 25%); --line-2: hsl(137 22% 36%);
  --petrol: hsl(137 62% 75%); --petrol-ink: hsl(137 35% 12%); --petrol-soft: hsl(137 28% 21%);
  --grad-a: hsl(137 48% 28%); --grad-b: hsl(159 43% 31%);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -18px rgb(0 0 0 / .7);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .8);
}
:root[data-palette="violet"] {
  --bg: hsl(268 32% 94%); --bg-2: hsl(268 28% 89%); --paper: hsl(268 35% 98%);
  --sidebar: hsl(268 28% 91%); --ink: hsl(268 35% 17%); --ink-2: hsl(268 20% 35%);
  --ink-3: hsl(268 15% 40%); --line: hsl(268 23% 82%); --line-2: hsl(268 23% 74%);
  --petrol: hsl(268 48% 35%); --petrol-ink: #fff; --petrol-soft: hsl(268 40% 91%);
  --grad-a: hsl(268 48% 30%); --grad-b: hsl(290 43% 34%);
  --shadow: 0 1px 2px hsl(268 35% 17% / .06), 0 14px 34px -18px hsl(268 35% 17% / .25);
  --shadow-lg: 0 2px 6px hsl(268 35% 17% / .08), 0 30px 60px -24px hsl(268 35% 17% / .35);
}
:root[data-palette="violet"][data-theme="dark"] {
  --bg: hsl(268 24% 9%); --bg-2: hsl(268 24% 13%); --paper: hsl(268 22% 15%);
  --sidebar: hsl(268 24% 11%); --ink: hsl(268 28% 93%); --ink-2: hsl(268 20% 76%);
  --ink-3: hsl(268 16% 67%); --line: hsl(268 22% 25%); --line-2: hsl(268 22% 36%);
  --petrol: hsl(268 62% 75%); --petrol-ink: hsl(268 35% 12%); --petrol-soft: hsl(268 28% 21%);
  --grad-a: hsl(268 48% 28%); --grad-b: hsl(290 43% 31%);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -18px rgb(0 0 0 / .7);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .8);
}
:root[data-palette="rose"] {
  --bg: hsl(334 32% 94%); --bg-2: hsl(334 28% 89%); --paper: hsl(334 35% 98%);
  --sidebar: hsl(334 28% 91%); --ink: hsl(334 35% 17%); --ink-2: hsl(334 20% 35%);
  --ink-3: hsl(334 15% 40%); --line: hsl(334 23% 82%); --line-2: hsl(334 23% 74%);
  --petrol: hsl(334 48% 35%); --petrol-ink: #fff; --petrol-soft: hsl(334 40% 91%);
  --grad-a: hsl(334 48% 30%); --grad-b: hsl(356 43% 34%);
  --shadow: 0 1px 2px hsl(334 35% 17% / .06), 0 14px 34px -18px hsl(334 35% 17% / .25);
  --shadow-lg: 0 2px 6px hsl(334 35% 17% / .08), 0 30px 60px -24px hsl(334 35% 17% / .35);
}
:root[data-palette="rose"][data-theme="dark"] {
  --bg: hsl(334 24% 9%); --bg-2: hsl(334 24% 13%); --paper: hsl(334 22% 15%);
  --sidebar: hsl(334 24% 11%); --ink: hsl(334 28% 93%); --ink-2: hsl(334 20% 76%);
  --ink-3: hsl(334 16% 67%); --line: hsl(334 22% 25%); --line-2: hsl(334 22% 36%);
  --petrol: hsl(334 62% 75%); --petrol-ink: hsl(334 35% 12%); --petrol-soft: hsl(334 28% 21%);
  --grad-a: hsl(334 48% 28%); --grad-b: hsl(356 43% 31%);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -18px rgb(0 0 0 / .7);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .8);
}
:root[data-palette="sand"] {
  --bg: hsl(34 32% 94%); --bg-2: hsl(34 28% 89%); --paper: hsl(34 35% 98%);
  --sidebar: hsl(34 28% 91%); --ink: hsl(34 35% 17%); --ink-2: hsl(34 20% 35%);
  --ink-3: hsl(34 15% 40%); --line: hsl(34 23% 82%); --line-2: hsl(34 23% 74%);
  --petrol: hsl(34 48% 35%); --petrol-ink: #fff; --petrol-soft: hsl(34 40% 91%);
  --grad-a: hsl(34 48% 30%); --grad-b: hsl(56 43% 34%);
  --shadow: 0 1px 2px hsl(34 35% 17% / .06), 0 14px 34px -18px hsl(34 35% 17% / .25);
  --shadow-lg: 0 2px 6px hsl(34 35% 17% / .08), 0 30px 60px -24px hsl(34 35% 17% / .35);
}
:root[data-palette="sand"][data-theme="dark"] {
  --bg: hsl(34 24% 9%); --bg-2: hsl(34 24% 13%); --paper: hsl(34 22% 15%);
  --sidebar: hsl(34 24% 11%); --ink: hsl(34 28% 93%); --ink-2: hsl(34 20% 76%);
  --ink-3: hsl(34 16% 67%); --line: hsl(34 22% 25%); --line-2: hsl(34 22% 36%);
  --petrol: hsl(34 62% 75%); --petrol-ink: hsl(34 35% 12%); --petrol-soft: hsl(34 28% 21%);
  --grad-a: hsl(34 48% 28%); --grad-b: hsl(56 43% 31%);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -18px rgb(0 0 0 / .7);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 30px 60px -24px rgb(0 0 0 / .8);
}

.color-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--petrol); font-size: 14px; font-weight: 700; cursor: pointer; }
.color-toggle:hover { background: var(--petrol-soft); border-color: var(--petrol); }
.color-toggle .icon { width: 20px; height: 20px; }
.color-dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); overflow-y: auto; }
.color-dialog::backdrop { background: rgb(0 0 0 / .42); backdrop-filter: blur(5px); }
.color-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.color-head h2 { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 400; }
.color-close { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 26px; cursor: pointer; }
.color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.color-choice { position: relative; display: grid; gap: 8px; min-width: 0; padding: 8px 8px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer; }
.color-choice:hover, .color-choice[aria-pressed="true"] { border-color: var(--petrol); }
.color-choice[aria-pressed="true"] { background: var(--petrol-soft); }
.color-preview { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 12px 22px; gap: 5px; padding: 8px; height: 60px; border-radius: 8px; background: var(--swatch-bg); }
.color-preview i { border-radius: 3px; background: var(--swatch); }
.color-preview i:first-child { grid-row: span 2; opacity: .4; }
.color-preview i:last-child { opacity: .7; }
.color-check { display: none; position: absolute; inset-inline-end: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--petrol); color: var(--petrol-ink); line-height: 22px; }
.color-choice[aria-pressed="true"] .color-check { display: block; }
.color-label { font-weight: 700; margin-bottom: 8px; }
.color-modes { gap: 6px; }
.color-modes button { flex: 1; min-height: 44px; padding: 8px 10px; font-size: 14px; }
.color-note { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.color-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.auth-top .color-toggle { margin-inline-start: auto; }
@media (max-width: 480px) {
  .color-toggle { padding: 8px; }
  .topbar-inner { gap: 9px; }
  .auth-top .construction { display: none; }
  .color-dialog { padding: 18px; }
}
@media print { .color-toggle, .color-dialog { display: none !important; } }

.home-dashboard { display: grid; gap: 30px; }
.home-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.home-header h1 { margin: 6px 0 10px; font-family: var(--display); font-size: clamp(30px, 3.5vw, 42px); font-weight: 400; line-height: 1.15; }
.home-header p:last-child { color: var(--ink-2); font-size: 17px; }
.home-exam { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--petrol); text-decoration: none; font-size: 14px; flex-shrink: 0; max-width: 280px; }
.home-exam b { font-size: 17px; }
.home-exam .icon { width: 18px; height: 18px; }
.home-section { min-width: 0; }
.home-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 14px; }
.home-section-head h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; }
.home-section-head > span { color: var(--ink-2); font-size: 14px; }
.home-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.home-entry:hover { border-color: var(--petrol); }
.home-entry h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.home-entry p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.home-entry-icon, .home-day-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--petrol-soft); color: var(--petrol); }
.home-entry-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--petrol); }
.home-entry-link .icon { width: 17px; height: 17px; }
.home-entry-primary { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); color: #fff; border-color: transparent; }
.home-entry-primary p { color: rgb(255 255 255 / .92); }
.home-entry-primary .home-entry-link { color: #fff; }
.home-entry-primary .home-entry-icon { background: rgb(255 255 255 / .16); color: #fff; }
.home-next { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; background: var(--paper); color: var(--ink); text-decoration: none; }
.home-next > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.home-next .icon { color: var(--petrol); }
.home-next .muted { font-size: 14px; }
.home-today { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.home-today .tf-card { margin-top: 0; border-radius: 20px; }
.home-today .tf-card::before { display: none; }
.home-today .tf-q { font-family: var(--body); font-size: 20px; font-weight: 600; line-height: 1.45; }
.home-today .tf-streak { font-size: 12px; padding: 4px 8px; white-space: nowrap; }
.home-today .tf-head .eyebrow { font-size: 11px; letter-spacing: .09em; }
.home-today .tf-more { font-size: 13px; }
.home-day { padding: 22px; gap: 14px; border-radius: 20px; }
.home-day h3 { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.2; font-weight: 400; }
.home-day p.muted { font-size: 15px; line-height: 1.55; }
.home-day .home-entry-link { margin-top: 6px; }
.tf-complete { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0; }
.tf-complete-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--green-soft); color: var(--green); }
.tf-complete h3 { margin: 0 0 4px; font-size: 21px; line-height: 1.3; }
.tf-complete p { font-size: 15px; color: var(--ink-2); }
.tf-review { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 10px; }
.tf-review summary { cursor: pointer; color: var(--petrol); font-size: 14px; font-weight: 600; }
.tf-review-body { display: grid; gap: 10px; padding-top: 14px; font-size: 14px; }
.tf-review-body h4 { margin: 0; font-size: 15px; }
.tf-right-answer { padding: 10px 12px; border-radius: 10px; background: var(--green-soft); }
.tf-your-answer { color: var(--ink-2); }
.tf-practice { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.tf-practice .icon { width: 16px; height: 16px; }
.home-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-tools > a { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; }
.home-tools > a:hover { border-color: var(--petrol); }
.home-tools > a > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.home-tools > a > span > span { font-size: 13px; color: var(--ink-2); }
.home-tools .icon { width: 20px; height: 20px; color: var(--petrol); }
.home-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--petrol-soft); border-radius: 16px; }
.home-offer p { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
@media (max-width: 1050px) {
  .home-entries { gap: 10px; }
  .home-entry { padding: 18px; }
  .home-header { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .home-dashboard { gap: 26px; }
  .home-entries, .home-today, .home-tools { grid-template-columns: minmax(0, 1fr); }
  .home-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 18px; }
  .home-entry-icon { grid-row: span 3; width: 38px; height: 38px; }
  .home-entry h3, .home-entry p, .home-entry-link { grid-column: 2; }
  .home-entry h3 { font-size: 19px; }
  .home-entry-link { margin-top: 0; padding-top: 4px; }
  .home-exam { justify-content: flex-start; max-width: 100%; padding: 9px 12px; }
  .home-section-head h2 { font-size: 21px; }
  .home-today .card { padding: 18px; }
  .home-day { grid-template-columns: 42px minmax(0, 1fr); }
  .home-day .eyebrow { grid-column: 1 / -1; }
  .home-day-icon { grid-column: 1; grid-row: 2 / span 3; }
  .home-day h3, .home-day .muted, .home-day .home-entry-link { grid-column: 2; }
  .home-day h3 { font-size: 26px; }
  .home-next { padding: 14px; }
}

.learning-hub { display:grid; gap:28px; }
.learning-hub .page-head { margin-bottom:0; }
.hub-overview { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px 24px; background:linear-gradient(135deg,var(--petrol-soft),var(--paper)); border-color:var(--line-2); }
.hub-overview h2 { margin:3px 0 7px; font-size:25px; line-height:1.2; }
.hub-overview p:not(.eyebrow) { margin:0; max-width:760px; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.hub-overview-status { display:grid; justify-items:end; gap:10px; flex:0 0 auto; }
.hub-overview-status > a { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.hub-overview-status svg { width:17px; height:17px; }
.hub-jump { display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.hub-jump a { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; scroll-snap-align:start; padding:9px 12px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); text-decoration:none; font-size:14px; font-weight:650; }
.hub-jump a:hover { border-color:var(--petrol); background:var(--petrol-soft); }
.hub-jump span { display:grid; place-items:center; min-width:24px; height:24px; padding-inline:6px; border-radius:999px; background:var(--petrol-soft); color:var(--petrol); font-size:12px; font-weight:800; }
.hub-group { scroll-margin-top:calc(var(--topbar) + 18px); padding-top:2px; }
.hub-group + .hub-group { padding-top:26px; border-top:1px solid var(--line); }
.hub-group-head { display:grid; grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr); align-items:end; gap:18px; margin-bottom:14px; }
.hub-group-head h2 { margin:2px 0 0; font-size:24px; line-height:1.2; }
.hub-group-head > p { margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.learning-hub .hub-card { grid-template-columns:42px minmax(0,1fr) 28px; grid-template-rows:auto; align-items:center; gap:10px 12px; min-height:104px; padding:15px 14px; border-radius:16px; box-shadow:none; }
.learning-hub .hub-card:hover { transform:translateY(-1px); border-color:var(--petrol); box-shadow:var(--shadow); }
.learning-hub .hub-card .tool-ico { width:42px; height:42px; border-radius:12px; }
.learning-hub .hub-card .tool-ico svg { width:22px; height:22px; }
.hub-card-copy { display:grid; gap:3px; min-width:0; }
.learning-hub .hub-card b { font-size:17px; line-height:1.25; }
.learning-hub .hub-card .s { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:13.5px; line-height:1.38; }
.hub-go { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--petrol); background:var(--petrol-soft); }
.hub-go svg { width:16px; height:16px; }
.hub-free { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:21px 22px; }
.hub-free h2 { margin:2px 0 5px; font-size:23px; }
.hub-free p:not(.eyebrow) { margin:0; color:var(--ink-2); }
.model-card[id] { scroll-margin-top:calc(var(--topbar) + 18px); }

@media (max-width:1050px) {
  .hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .learning-hub { gap:24px; }
  .hub-overview { align-items:flex-start; padding:18px; }
  .hub-overview h2 { font-size:22px; }
  .hub-overview-status { justify-items:start; }
  .hub-group-head { grid-template-columns:1fr; gap:5px; margin-bottom:11px; }
  .hub-group-head h2 { font-size:22px; }
  .hub-grid { grid-template-columns:1fr; gap:8px; }
  .learning-hub .hub-card { min-height:88px; padding:12px; }
  .hub-free { align-items:flex-start; padding:18px; }
}
@media (max-width:560px) {
  .hub-overview, .hub-free { display:grid; grid-template-columns:1fr; }
  .hub-overview-status { width:100%; grid-template-columns:auto 1fr; align-items:center; justify-items:start; }
  .hub-overview-status > a { justify-self:end; }
  .hub-jump { margin-inline:-12px; padding-inline:12px; }
  .hub-group + .hub-group { padding-top:22px; }
  .learning-hub .hub-card { grid-template-columns:38px minmax(0,1fr) 26px; gap:8px 10px; }
  .learning-hub .hub-card .tool-ico { width:38px; height:38px; border-radius:11px; }
  .learning-hub .hub-card b { font-size:16.5px; }
  .learning-hub .hub-card .s { font-size:13px; }
}

.sim-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px;margin-top:20px}.sim-hero h2{margin:4px 0 8px}.sim-facts{display:flex;gap:10px;flex-wrap:wrap}.sim-facts span{display:grid;min-width:92px;padding:12px 14px;border-radius:14px;background:var(--petrol-soft);text-align:center}.sim-facts b{font-size:22px;color:var(--petrol)}.sim-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sim-mode{font:inherit;text-align:left;display:grid;grid-template-columns:46px 1fr;gap:4px 14px;align-items:start;padding:22px;cursor:pointer;color:var(--ink)}.sim-mode-icon{grid-row:1/span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--petrol-soft);color:var(--petrol)}.sim-mode b{font-size:19px}.sim-mode>span:last-child{color:var(--ink-2);line-height:1.45}.sim-launch-actions,.sim-result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.sim-top{position:sticky;top:64px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin:18px 0;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow)}.sim-top>div{display:grid}.sim-step{font-size:13px;color:var(--ink-2)}.sim-clock{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;padding:8px 12px;border-radius:12px;background:var(--petrol);color:#fff}.sim-clock.soft{background:var(--petrol-soft);color:var(--petrol)}.sim-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}.sim-overview{position:sticky;top:142px;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper)}.sim-nav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0}.sim-nav-q{aspect-ratio:1;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font-weight:700;cursor:pointer}.sim-nav-q.done{background:var(--petrol-soft);border-color:var(--petrol)}.sim-nav-q.on{outline:2px solid var(--petrol);outline-offset:1px}.sim-nav-q.mark{box-shadow:inset 0 -3px 0 #d5971a}.sim-case{padding:28px}.sim-case h2{font-size:clamp(21px,2.4vw,28px);line-height:1.4;margin:8px 0 22px}.sim-case-opts{display:grid;gap:10px}.sim-case .opt{width:100%;text-align:left}.sim-case-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.sim-case-actions>div{display:flex;gap:8px}.sim-result-head{padding:28px;margin-top:20px}.sim-score{display:flex;align-items:baseline;gap:14px;margin:10px 0}.sim-score strong{font-family:var(--display);font-size:52px;color:var(--petrol)}.sim-score span{font-size:18px;font-weight:700}.sim-weak{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sim-weak a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px;text-decoration:none;color:var(--ink)}.sim-weak a span:first-child{display:grid}.sim-weak small{color:var(--ink-2)}.sim-weak a>span:last-child{display:flex;gap:8px;align-items:center;font-weight:800;color:var(--petrol)}.sim-review{display:grid;gap:9px}.sim-review-item{padding:0;overflow:hidden}.sim-review-item summary{display:grid;grid-template-columns:34px 1fr 20px;gap:12px;align-items:center;padding:16px;cursor:pointer}.sim-review-item summary>span:nth-child(2){display:grid;min-width:0}.sim-review-item summary small{color:var(--ink-2);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sim-review-state{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:800}.sim-review-state.ok{background:var(--green-soft);color:var(--green)}.sim-review-state.bad{background:var(--red-soft);color:var(--red)}.sim-review-body{padding:0 18px 18px 62px;display:grid;gap:10px}.sim-review-body p{margin:0}.sim-resume{margin-bottom:12px}
@media(max-width:800px){.sim-hero{align-items:flex-start;flex-direction:column}.sim-layout{grid-template-columns:1fr}.sim-overview{position:static}.sim-nav-grid{grid-template-columns:repeat(10,1fr)}.sim-mode-grid,.sim-weak{grid-template-columns:1fr}.sim-case{padding:20px}.sim-case-actions{align-items:stretch;flex-direction:column}.sim-case-actions>div{display:grid;grid-template-columns:1fr 1fr}.sim-review-body{padding-left:18px}.sim-facts{width:100%}.sim-facts span{flex:1}}
@media(max-width:520px){.sim-nav-grid{grid-template-columns:repeat(6,1fr)}.sim-top>div{display:none}.sim-clock{font-size:16px}.sim-case h2{font-size:20px}}

.sb-lang-status { margin:10px 0 0; padding:10px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--line); color:var(--ink-2); font-size:13.5px; line-height:1.45; }
.sb-lang-status b { color:var(--petrol); }
.sb-groupnav { display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; margin:10px 0 8px; scrollbar-width:thin; }
.sb-groupnav a { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); text-decoration:none; font-size:14px; }
.sb-groupnav a:hover { border-color:var(--petrol); }
.sb-groupnav a span { min-width:24px; text-align:center; padding:1px 6px; border-radius:999px; background:var(--petrol-soft); color:var(--petrol); font-weight:700; }
.model-preview { display:flex; flex-wrap:wrap; gap:8px; }
.model-preview span { padding:7px 10px; border-radius:999px; background:var(--petrol-soft); color:var(--ink); font-weight:600; }
.model-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr); gap:22px; align-items:center; margin-top:18px; }
.model-hero h2 { margin:4px 0 8px; }
.model-hero-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.model-hero-facts span { display:grid; gap:2px; text-align:center; padding:12px 8px; border-radius:14px; background:var(--petrol-soft); color:var(--ink-2); }
.model-hero-facts b { font-size:24px; color:var(--petrol); }
.model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.model-card { padding:0; overflow:hidden; }
.model-card summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px; }
.model-card summary::-webkit-details-marker { display:none; }
.model-card summary > span { display:grid; gap:2px; min-width:0; }
.model-card summary small { color:var(--petrol); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.model-card summary b { font-size:19px; }
.model-card summary span span { color:var(--ink-2); }
.model-card[open] summary { border-bottom:1px solid var(--line); background:var(--petrol-soft); }
.model-card[open] summary > svg { transform:rotate(180deg); }
.model-body { padding:18px; display:grid; gap:15px; }
.model-focus { padding:13px 14px; border-left:4px solid var(--petrol); background:var(--bg); border-radius:0 12px 12px 0; }
.model-focus p,.model-merke { margin:5px 0 0; }
.model-body dl { margin:0; display:grid; grid-template-columns:135px 1fr; gap:9px 14px; }
.model-body dt { font-weight:700; color:var(--ink); }
.model-body dd { margin:0; color:var(--ink-2); }
.model-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.model-compare .card { display:grid; grid-template-columns:150px 1fr; gap:4px 14px; align-items:start; }
.model-compare .card small { grid-column:2; color:var(--ink-2); }
.model-concepts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.model-concepts .card p { margin:5px 0 0; color:var(--ink-2); }
@media (max-width:760px) {
  .model-hero,.model-grid { grid-template-columns:1fr; }
  .model-compare { grid-template-columns:1fr; }
  .model-concepts { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .model-hero-facts,.model-concepts { grid-template-columns:1fr; }
  .model-body dl,.model-compare .card { grid-template-columns:1fr; }
  .model-compare .card small{ grid-column:auto; } } @media (max-width: 390px) { .page, .topbar-inner, .foot-inner, .preview-bar div { padding-inline: 12px; } .chipnav { margin-inline: -12px; padding-inline: 12px; max-width: calc(100% + 24px); } .price-card { padding: 22px 16px 20px; border-radius: 20px; } .price .amount { font-size: 58px; } .price .cur { font-size: 25px; } .price-card .btn.block { width: 100%; white-space: normal; text-align: center; } .gd-hero { padding: 22px 16px 20px; border-radius: 20px; } .gd-toc a { grid-template-columns: 22px 36px minmax(0, 1fr); gap: 8px; padding: 11px 10px; } .gd-toc-ico { width: 36px; height: 36px; border-radius: 11px; } .gd-toc .go, .gd-toc .pro-lock { grid-column: 3; justify-self: end; } .field-row, .onb-nav { grid-template-columns: minmax(0, 1fr); } .onb-nav .btn { width: 100%; } } @media (max-width: 640px) { .article .d-title, .public-disease-preview .d-title { font-size: clamp(30px, 8.5vw, 40px); overflow-wrap: normal; word-break: normal; hyphens: none; -webkit-hyphens: none; } } @media (max-width: 330px) { .price .amount { font-size: 52px; } .page-head h1, .gd-hero h1, .d-title { font-size: clamp(28px, 10vw, 34px); } } @media (prefers-reduced-motion: reduce) { html:not(.nm-bewegung) { scroll-behavior: auto !important; } html:not(.nm-bewegung) *, html:not(.nm-bewegung) *::before, html:not(.nm-bewegung) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html:not(.nm-bewegung) .spinner { animation: none !important; } } .onb-v2 { max-width: 760px; position: relative; } .onb-v2 .onb-card { padding: clamp(22px, 4vw, 34px); } .onb-step-label { justify-self: end; margin-top: -8px; color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; } .onb-v2 .onb-progress { height: 7px; } .onb-v2 .onb-title h1 { max-width: 680px; font-size: clamp(31px, 5.2vw, 46px); line-height: 1.08; text-wrap: balance; } .onb-v2 .onb-title .lead { max-width: 670px; } .onb-welcome { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 20px; align-items: start; } .onb-welcome-mark { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 24px; background: linear-gradient(135deg,var(--grad-a),var(--grad-b)); box-shadow: 0 16px 38px -22px var(--petrol); } .onb-welcome-mark svg { width: 46px; height: 46px; color: #fff; } .onb-welcome h1 { margin: 4px 0 10px; font-family: var(--display); font-size: clamp(32px,5vw,47px); font-weight: 400; line-height: 1.06; text-wrap: balance; } .onb-welcome .lead { max-width: 640px; } .onb-grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .field small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; line-height: 1.45; } .onb-paths { grid-template-columns: repeat(2,minmax(0,1fr)); } .onb-paths button { min-height: 110px; } .onb-palette { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .onb-palette > button { position: relative; display: grid; grid-template-columns: 64px minmax(0,1fr) 22px; align-items: center; gap: 10px; min-height: 76px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .onb-palette > button:hover, .onb-palette > button[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-soft); } .onb-palette .color-preview { width: 64px; height: 48px; } .onb-choice-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: transparent; font-size: 13px; font-weight: 800; } [aria-pressed="true"] > .onb-choice-check { background: var(--petrol); color: var(--petrol-ink); } .onb-seg button { min-height: 46px; } .onb-weak-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .onb-weak-grid > button { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; gap: 11px; align-items: center; min-height: 86px; padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .onb-weak-grid > button:hover { transform: translateY(-1px); border-color: var(--petrol); } .onb-weak-grid > button[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-soft); } .onb-weak-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--petrol-soft); color: var(--petrol); } .onb-weak-ico svg { width: 21px; height: 21px; } .onb-weak-grid b { display: block; font-size: 15.5px; line-height: 1.25; } .onb-weak-grid small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12.5px; line-height: 1.35; } .onb-exam-grid { display: grid; gap: 9px; } .onb-exam-row { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(150px,190px); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); } .onb-exam-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--petrol-soft); color: var(--petrol); font-size: 13px; font-weight: 800; } .onb-exam-copy { display: grid; gap: 2px; } .onb-exam-copy b { font-size: 15.5px; line-height: 1.25; } .onb-exam-copy small { color: var(--ink-3); font-size: 12.5px; } .onb-exam-row input, .onb-exam-row select { width: 100%; min-width: 0; } .onb-exam-approx-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; } .onb-exam-approx-fields select { min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; } .onb-date-single { max-width: 420px; } .onb-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .onb-summary > div { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); } .onb-summary > div > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--petrol-soft); color: var(--petrol); } .onb-summary svg { width: 21px; height: 21px; } .onb-summary p { display: grid; gap: 2px; margin: 0; } .onb-summary small { color: var(--ink-2); line-height: 1.35; } .onb-how { display: grid; gap: 12px; padding: 18px; border-radius: 19px; background: linear-gradient(135deg,var(--petrol-soft),var(--paper)); border: 1px solid var(--line); } .onb-how h2 { margin: 0; font-size: 18px; } .onb-how-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .onb-how-grid > div { display: grid; gap: 5px; align-content: start; padding: 13px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); } .onb-how-grid > div > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--petrol); color: var(--petrol-ink); font-size: 12px; font-weight: 800; } .onb-how-grid b { font-size: 14.5px; } .onb-how-grid p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; } .home-personal { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(290px,.65fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg,var(--petrol-soft),var(--paper)); box-shadow: var(--shadow); } .home-personal-main { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 12px; padding: clamp(20px,3vw,30px); border-radius: 20px; background: linear-gradient(135deg,var(--grad-a),var(--grad-b)); color: #fff; } .home-personal-main::after { content:""; position:absolute; z-index:-1; width:280px; height:280px; right:-105px; top:-120px; border-radius:50%; background:rgba(255,255,255,.12); } .home-personal-main .eyebrow { color: rgba(255,255,255,.78); } .home-personal-main h2 { margin: 0; max-width: 700px; font-family: var(--display); font-weight: 400; font-size: clamp(28px,4vw,40px); line-height: 1.08; text-wrap: balance; } .home-personal-main > p:not(.eyebrow) { max-width: 680px; margin: 0; color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.55; } .home-personal-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; } .home-personal-main .btn { background: #fff; color: #17343b; border-color: transparent; } .home-personal-main .btn.ghost { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.35); } .home-personal-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; } .home-personal-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 12px; font-weight: 650; } .home-personal-chips svg { width: 14px; height: 14px; } .home-exam-roadmap { display: grid; align-content: start; gap: 12px; padding: 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); } .home-exam-roadmap-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; } .home-exam-roadmap-head .eyebrow { margin-bottom: 3px; } .home-exam-roadmap-head b { font-size: 17px; } .home-exam-roadmap-head a { font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--petrol); } .home-exam-lines { display: grid; gap: 0; } .home-exam-line { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; min-height: 45px; } .home-exam-line > span { position: relative; display: block; } .home-exam-line > span::before { content:""; position:absolute; left:4px; top:7px; width:9px; height:9px; border-radius:50%; background: var(--line-2); box-shadow:0 0 0 4px var(--paper); z-index:1; } .home-exam-line:not(:last-child) > span::after { content:""; position:absolute; left:8px; top:16px; bottom:-6px; width:1.5px; background: var(--line); } .home-exam-line.filled > span::before { background: var(--petrol); } .home-exam-line.done > span::before { background: var(--green); } .home-exam-line > div { display: grid; gap: 1px; padding-bottom: 9px; } .home-exam-line b { font-size: 13.5px; line-height: 1.25; } .home-exam-line small { color: var(--ink-3); font-size: 12px; } .home-roadmap-hint { margin:0; padding-top:4px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12.5px; line-height:1.45; } .home-focus-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .home-focus-card { display: grid; grid-template-columns: 30px 42px minmax(0,1fr) 20px; gap: 10px; align-items: center; min-height: 92px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); } .home-focus-card:hover { border-color: var(--petrol); transform: translateY(-1px); } .home-focus-rank { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--petrol); color: var(--petrol-ink); font-size: 12px; font-weight: 800; } .home-focus-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--petrol-soft); color: var(--petrol); } .home-focus-icon svg, .home-focus-card > svg { width: 19px; height: 19px; } .home-focus-card > span:nth-child(3) { display: grid; gap: 3px; min-width: 0; } .home-focus-card b { font-size: 15px; line-height: 1.25; } .home-focus-card small { color: var(--ink-2); font-size: 12.5px; line-height: 1.35; } .home-focus-card > svg { color: var(--petrol); } .profile-learning-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .profile-learning-card h3 { margin: 3px 0 5px; } @media (max-width: 840px) { .onb-palette { grid-template-columns: repeat(2,minmax(0,1fr)); } .home-personal { grid-template-columns: minmax(0,1fr); } .home-exam-roadmap { grid-template-columns: 1fr; } .home-focus-grid { grid-template-columns: minmax(0,1fr); } } @media (max-width: 620px) { .onb-v2 { max-width: 100%; } .onb-v2 .onb-card { padding: 20px 16px; } .onb-welcome { grid-template-columns: 54px minmax(0,1fr); gap: 13px; } .onb-welcome-mark { width: 54px; height: 54px; border-radius: 17px; } .onb-welcome-mark svg { width: 34px; height: 34px; } .onb-welcome h1 { font-size: 31px; } .onb-grid-2, .onb-paths, .onb-weak-grid, .onb-summary, .onb-how-grid { grid-template-columns: minmax(0,1fr); } .onb-palette { grid-template-columns: minmax(0,1fr); } .onb-palette > button { min-height: 66px; } .onb-exam-row { grid-template-columns: 32px minmax(0,1fr); gap: 10px; } .onb-exam-row input, .onb-exam-row > .onb-exam-approx-fields { grid-column: 2; } .onb-exam-approx-fields { grid-template-columns: 1fr 1fr; } .onb-exam-n { width: 31px; height: 31px; } .home-personal { padding: 9px; border-radius: 20px; } .home-personal-main, .home-exam-roadmap { border-radius: 16px; } .home-personal-main { padding: 20px 17px; } .home-personal-actions { display: grid; grid-template-columns: 1fr; } .home-personal-actions .btn { justify-content: center; } .home-focus-card { grid-template-columns: 27px 38px minmax(0,1fr) 18px; padding: 12px; } .home-focus-icon { width: 38px; height: 38px; } .profile-learning-card { display: grid; } } html.nm-ruhig .onb-weak-grid > button, html.nm-ruhig .home-focus-card { transition: none !important; } html.nm-ruhig .onb-weak-grid > button:hover, html.nm-ruhig .home-focus-card:hover { transform: none; } .profile-plan-link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--bg); } .profile-plan-link > span { color:var(--ink-2); font-size:14px; line-height:1.45; } @media (max-width:620px){ .profile-plan-link { display:grid; } } .am-jump{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 18px;position:sticky;top:calc(var(--topbar) + 8px);z-index:4;padding:8px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px)} .am-jump a{padding:7px 11px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:700;color:var(--ink-2)} .am-jump a:hover{background:var(--petrol-soft);color:var(--ink)} .am-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr);gap:18px;align-items:stretch;padding:26px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,var(--paper),var(--petrol-soft));box-shadow:var(--shadow);margin-bottom:18px} .am-hero-copy{display:grid;gap:10px;align-content:center}.am-hero-copy h2{font:400 clamp(27px,4vw,40px)/1.08 var(--display);margin:0}.am-hero-copy p{margin:0;color:var(--ink-2)} .am-time{border:1px solid var(--line);border-radius:20px;background:var(--paper);padding:18px;display:grid;gap:5px;align-content:center}.am-time>b{font:400 44px/1 var(--display);color:var(--petrol)}.am-time>span:first-child,.am-time small{color:var(--ink-2)}.am-time.setup>b{color:var(--ink-3)} .am-section{padding:24px 0;border-top:1px solid var(--line)}.am-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}.am-section-head h2{font:400 27px/1.12 var(--display);margin:2px 0 0}.am-section-head>a{font-weight:700} .am-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.am-stats.abs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px} .am-stat{padding:17px;border-radius:18px;border:1px solid var(--line);background:var(--paper);box-shadow:0 8px 22px -20px rgba(18,48,58,.55);display:grid;gap:10px} .am-stat.school{border-top:3px solid var(--petrol)}.am-stat.practice{border-top:3px solid var(--green)}.am-stat.pa{border-top:3px solid var(--ochre)} .am-stat-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.am-stat-top span{font-weight:700;color:var(--ink-2)}.am-stat-top b{font:400 25px/1 var(--display);white-space:nowrap} .am-stat p{margin:0;color:var(--ink-2);font-size:14px}.am-meter{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}.am-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b))} .am-stat.absence.good{border-color:var(--green-line)}.am-stat.absence.warn{border-color:#DFC48F;background:var(--ochre-soft)}.am-stat.absence.bad{border-color:var(--coral-line);background:var(--coral-soft)} .am-stat.absence.warn .am-meter i{background:var(--ochre)}.am-stat.absence.bad .am-meter i{background:var(--coral)} .am-subnote,.am-legal{font-size:14px;color:var(--ink-2);margin:12px 0 0;max-width:980px} .am-alert{margin:12px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}.am-alert.warn{border-color:#DFC48F;background:var(--ochre-soft)}.am-alert p{margin:3px 0 0} .am-lawgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.am-lawgrid article{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.am-lawgrid h3{margin:7px 0 5px}.am-lawgrid p{margin:0;color:var(--ink-2);font-size:14px}.am-lawnum{display:inline-grid;place-items:center;min-width:54px;height:32px;padding:0 9px;border-radius:999px;background:var(--petrol-soft);font-weight:800;color:var(--petrol)} .am-placements{display:grid;gap:12px}.am-placement{border:1px solid var(--line);border-radius:19px;padding:18px;background:var(--paper)}.am-placement.warn{border-color:#DFC48F}.am-placement.bad{border-color:var(--coral-line)}.am-placement-head{display:flex;justify-content:space-between;gap:16px}.am-placement-head h3{margin:2px 0 0;font-size:20px}.am-placement-head p{margin:3px 0}.am-placement-grid{display:grid;grid-template-columns:repeat(6,minmax(95px,1fr));gap:8px;margin-top:14px}.am-placement-grid span{padding:11px;border-radius:12px;background:var(--bg);display:grid;gap:3px}.am-placement-grid b{font-size:17px}.am-placement-grid small{color:var(--ink-2);line-height:1.2}.am-placement-note{margin:12px 0 0;color:var(--ink-2);font-size:14px} .am-empty{padding:24px;border:1px dashed var(--line-2);border-radius:18px;background:var(--paper)}.am-empty p{color:var(--ink-2)} .am-tip{margin-top:13px;padding:15px 17px;border-radius:16px;background:var(--petrol-soft);border:1px solid var(--line)}.am-tip p{margin:4px 0 0;color:var(--ink-2)} .am-form h3{font-size:17px;margin:18px 0 5px}.am-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.am-checks>div{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--paper)}.am-checks>div>span{width:32px;height:32px;border-radius:10px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:0 0 auto}.am-checks svg{width:18px}.am-checks p{margin:0;display:grid}.am-checks small{color:var(--ink-2)} @media(max-width:900px){.am-hero{grid-template-columns:1fr}.am-stats,.am-lawgrid{grid-template-columns:1fr 1fr}.am-placement-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.am-jump{position:static;overflow:auto;flex-wrap:nowrap}.am-jump a{white-space:nowrap}.am-stats,.am-stats.abs,.am-lawgrid,.am-checks{grid-template-columns:1fr}.am-placement-grid{grid-template-columns:repeat(2,1fr)}.am-hero{padding:18px}.am-section-head{align-items:flex-start;flex-direction:column}.am-stat-top{align-items:flex-start;flex-direction:column}.am-stat-top b{font-size:23px}} @media print{.am-jump,.am-hero .row,.sidebar,.topbar,.preview-bar,.foot,.am-form{display:none!important}.app,.main,.page{display:block!important;margin:0!important;padding:0!important}.am-section,.am-placement{break-inside:avoid}} .learning-hub-v2{display:grid;gap:26px} .hub-overview-v2{padding:24px;border-radius:24px} .hub-quick{display:grid;gap:14px} .hub-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .hub-quick-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:inherit;text-decoration:none;box-shadow:var(--shadow)} .hub-quick-card>span:nth-child(2){display:grid;gap:3px;min-width:0} .hub-quick-card b{font-size:15.5px}.hub-quick-card small{color:var(--ink-2);line-height:1.35} .hub-jump-v2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;position:static;overflow:visible;padding:0;border:0;background:none} .hub-jump-v2 a{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:inherit;text-decoration:none} .hub-jump-v2 a span:nth-child(2){display:grid;gap:2px;min-width:0}.hub-jump-v2 small{color:var(--ink-2);font-size:12.5px} .hub-jump-icon,.hub-collection-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--petrol-soft);color:var(--petrol)} .hub-worlds{display:grid;gap:12px} .hub-collection{scroll-margin-top:calc(var(--topbar) + 18px);border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden} .hub-collection>summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:18px 20px;cursor:pointer} .hub-collection>summary::-webkit-details-marker,.hub-paths>summary::-webkit-details-marker,.sb-group-block>summary::-webkit-details-marker,.sb-planned>summary::-webkit-details-marker{display:none} .hub-collection>summary>span:nth-child(2){display:grid;gap:4px;min-width:0}.hub-collection>summary b{font-size:18px}.hub-collection>summary small{color:var(--ink-2);line-height:1.45} .hub-collection-count,.sb-group-count{display:grid;place-items:center;min-width:34px;height:30px;padding:0 9px;border-radius:999px;background:var(--bg);color:var(--ink-2);font-weight:700;font-size:13px} .hub-collection[open]>summary,.sb-group-block[open]>summary{border-bottom:1px solid var(--line)} .hub-collection>summary>svg:last-child,.hub-paths>summary>svg:last-child,.sb-group-block>summary>svg:last-child,.sb-planned>summary>svg:last-child{transition:transform .18s ease} .hub-collection[open]>summary>svg:last-child,.hub-paths[open]>summary>svg:last-child,.sb-group-block[open]>summary>svg:last-child,.sb-planned[open]>summary>svg:last-child{transform:rotate(180deg)} .hub-collection-body{padding:18px} .hub-paths{padding:0;overflow:hidden;border-radius:22px} .hub-paths>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 22px;cursor:pointer} .hub-paths>summary>span{display:grid;gap:4px}.hub-paths>summary p{margin:0}.hub-paths>summary b{font-size:18px}.hub-paths>summary small{color:var(--ink-2)} .hub-paths-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 18px 18px} .hub-path-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg);color:inherit;text-decoration:none} .hub-path-card>span:nth-child(2){display:grid;gap:3px}.hub-path-card small{color:var(--ink-2);line-height:1.4} .sb-tools{padding:16px;margin-bottom:16px}.sb-tools .search-big{margin:0}.sb-tools-hint{margin:9px 4px 0;color:var(--ink-2);font-size:13.5px} .sb-overview{display:grid;gap:16px;margin-top:12px} .sb-overview-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}.sb-overview-head h2,.sb-overview-head p{margin-top:0} .sb-worldnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sb-worldnav a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:inherit;text-decoration:none;box-shadow:var(--shadow)} .sb-worldnav a>span:nth-child(2){display:grid;gap:3px;min-width:0}.sb-worldnav b{font-size:16px}.sb-worldnav small{color:var(--ink-2);line-height:1.4} .sb-worldnav strong{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:999px;background:var(--bg);font-size:13px} .sb-world-ico,.sb-world-title-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--petrol-soft);color:var(--petrol);flex:0 0 auto} .sb-world{display:grid;gap:12px;margin-top:30px;scroll-margin-top:calc(var(--topbar) + 18px)} .sb-world-head{display:flex;gap:14px;align-items:center;padding-bottom:4px}.sb-world-head>div{flex:1;min-width:0}.sb-world-head h2,.sb-world-head p{margin:0}.sb-world-head p:not(.eyebrow){margin-top:4px;color:var(--ink-2)} .sb-subgroups{display:grid;gap:10px} .sb-group-block{border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden} .sb-group-block>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:15px 17px;cursor:pointer} .sb-group-block>summary>span:first-child{display:grid;gap:2px}.sb-group-block>summary b{font-size:16px}.sb-group-block>summary small{color:var(--ink-2)} .sb-group-block[open]>summary{background:color-mix(in srgb,var(--paper) 88%,var(--petrol-soft))} .sb-group-body{padding:14px}.sb-search-results{margin-top:18px} .sb-planned{margin-top:28px;border:1px dashed var(--line-2);border-radius:18px;padding:0 16px} .sb-planned>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;cursor:pointer}.sb-planned>summary>span{display:grid;gap:2px}.sb-planned>summary small{color:var(--ink-2)}.sb-planned .soon-list{padding:0 0 16px} @media (hover:hover){ .hub-quick-card:hover,.hub-jump-v2 a:hover,.sb-worldnav a:hover{border-color:var(--petrol);transform:translateY(-1px)} .hub-collection>summary:hover,.sb-group-block>summary:hover{background:var(--bg)} } @media (max-width:1100px){ .hub-jump-v2{grid-template-columns:repeat(3,minmax(0,1fr))} .hub-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .hub-paths-body{grid-template-columns:1fr} } @media (max-width:760px){ .learning-hub-v2{gap:20px}.hub-overview-v2{padding:20px} .hub-jump-v2,.hub-quick-grid,.sb-worldnav{grid-template-columns:1fr} .hub-collection>summary{grid-template-columns:auto minmax(0,1fr) auto;padding:15px}.hub-collection>summary>svg:last-child{display:none} .hub-collection-body{padding:12px} .sb-overview-head{grid-template-columns:1fr;align-items:start} .sb-world-head{align-items:flex-start;flex-wrap:wrap}.sb-world-head .chip{margin-left:56px} .sb-group-block>summary{padding:14px}.sb-group-body{padding:10px}.sb-grid{grid-template-columns:1fr} } .sb-overview.card{padding:22px;margin-top:14px;border-radius:22px} .sb-overview-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px} .sb-overview-head>div:first-child{min-width:0} .sb-overview-head h2{margin:0 0 6px;font-size:clamp(24px,3vw,32px)} .sb-overview-head p{margin:0;max-width:760px;color:var(--ink-2);line-height:1.5} .sb-overview-side{display:flex;align-items:center;gap:8px;flex:0 0 auto} .sb-worldnav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:18px} .sb-worldnav .sb-worldcard{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:13px!important;align-items:center!important;min-width:0!important;padding:15px 16px!important;border:1px solid var(--line)!important;border-radius:17px!important;background:var(--paper)!important;color:inherit!important;text-decoration:none!important;box-shadow:none!important} .sb-worldcard-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--petrol-soft);color:var(--petrol)} .sb-worldcard-copy{display:grid!important;gap:2px!important;min-width:0} .sb-worldcard-copy b{display:block;font-size:16px;line-height:1.25;color:var(--ink)} .sb-worldcard-copy small{display:block;color:var(--ink-2);font-size:13px;line-height:1.3} .sb-worldcard-go{display:grid;place-items:center;color:var(--ink-3)} .sb-world-panels{display:grid;gap:12px;margin-top:24px} .sb-world-panel{scroll-margin-top:calc(var(--topbar) + 20px);border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow:hidden;box-shadow:var(--shadow)} .sb-world-panel>summary{list-style:none;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:17px 18px;cursor:pointer} .sb-world-panel>summary::-webkit-details-marker{display:none} .sb-world-panel-copy{display:grid;gap:3px;min-width:0} .sb-world-panel-copy b{font-size:18px;line-height:1.25} .sb-world-panel-copy small{color:var(--ink-2);line-height:1.4} .sb-world-panel-count{display:grid;place-items:center;min-width:36px;height:30px;padding:0 9px;border-radius:999px;background:var(--bg);font-size:13px;font-weight:700;color:var(--ink-2)} .sb-world-panel>summary>svg:last-child{transition:transform .18s ease} .sb-world-panel[open]>summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 93%,var(--petrol-soft))} .sb-world-panel[open]>summary>svg:last-child{transform:rotate(180deg)} .sb-world-panel-body{padding:12px} .sb-world-panel .sb-subgroups{display:grid;gap:9px} .sb-world-panel .sb-group-block{box-shadow:none} .sb-world-panel .sb-group-block>summary{padding:14px 15px} .sb-world-panel .sb-group-body{padding:12px} .sb-world-panel .sb-card{box-shadow:none} .sb-world-panel .sb-card:hover{box-shadow:var(--shadow)} @media (hover:hover){ .sb-worldnav .sb-worldcard:hover{border-color:var(--petrol)!important;background:var(--petrol-soft)!important;transform:translateY(-1px)} .sb-world-panel>summary:hover{background:var(--bg)} } @media (max-width:900px){ .sb-worldnav{grid-template-columns:1fr!important} .sb-overview-head{align-items:flex-start;flex-direction:column} } @media (max-width:620px){ .sb-overview.card{padding:16px} .sb-overview-side{width:100%;justify-content:space-between} .sb-world-panel>summary{grid-template-columns:40px minmax(0,1fr) auto;padding:14px} .sb-world-panel>summary>svg:last-child{display:none} .sb-world-panel-count{grid-column:3} .sb-world-title-ico{width:40px;height:40px} .sb-world-panel-copy small{font-size:13px} }\n .am-date-check{margin:10px 0 2px} .am-date-check .hint{margin:0;line-height:1.5} .am-date-check .note-box{margin:10px 0 0} .am-date-alert{margin:14px 0 0} .am-date-alert a{display:inline-block;margin-top:6px;font-weight:700} .am-time.setup.warn{border-color:#DFC48F;background:var(--ochre-soft)} .am-time.setup.warn>b{color:var(--ochre)} @media(max-width:620px){.am-date-alert{margin-top:10px}} .nm-print-mark{display:none} @media print{ body.printing #print-area .nm-print-mark{ display:block!important; position:fixed; top:4mm; right:4mm; width:7mm; height:7mm; z-index:9999; -webkit-print-color-adjust:exact; print-color-adjust:exact; } body.printing #print-area .nm-print-mark svg{display:block!important;width:100%;height:100%} } .am2-loading{min-height:280px;display:grid;place-items:center;align-content:center;gap:14px;color:var(--ink-2)} .am2-loading .spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--petrol);animation:am2-spin .8s linear infinite} .am3-orgbar{margin-bottom:18px;padding:18px;border:1px solid color-mix(in srgb,var(--petrol) 32%,var(--line));border-radius:22px;background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 74%,var(--paper)));box-shadow:0 16px 34px -30px color-mix(in srgb,var(--petrol) 62%,transparent)} .am3-orgtitle{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}.am3-orgtitle h2{margin:1px 0 3px;font-size:clamp(20px,2.2vw,29px)}.am3-orgtitle p{margin:0;color:var(--ink-2)} .am3-orgicon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--petrol);color:white}.am3-orgicon svg{width:24px;height:24px} .am3-seats{display:flex;align-items:baseline;gap:4px;padding:8px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;white-space:nowrap}.am3-seats b{font-size:18px;color:var(--petrol)} .am3-picker{display:grid;grid-template-columns:auto minmax(180px,420px);gap:12px;align-items:center;margin-top:16px;padding:13px 14px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}.am3-picker>span{font-weight:800}.am3-picker select{width:100%} .am3-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:12px}.am3-add .field{margin:0}.am3-add .btn{margin-bottom:1px} .am-empty.compact{margin-top:14px;padding:14px} .home-header-side{display:grid;gap:10px;justify-items:stretch;min-width:min(100%,330px)} .home-manager-quick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 14px;border:1px solid color-mix(in srgb,var(--petrol) 42%,var(--line));border-radius:18px;background:linear-gradient(135deg,var(--petrol-soft),var(--paper));text-decoration:none;color:var(--ink);box-shadow:0 12px 28px -24px color-mix(in srgb,var(--petrol) 70%,transparent);transition:transform .16s ease,border-color .16s ease} .home-manager-quick:hover{transform:translateY(-1px);border-color:var(--petrol)}.home-manager-quick .eyebrow{display:block;margin:0 0 2px}.home-manager-quick b{display:block;font-size:15px}.home-manager-quick small{display:block;margin-top:2px;color:var(--ink-2)} .home-manager-ico{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--petrol);color:white}.home-manager-ico svg{width:20px}.home-manager-go{color:var(--petrol)}.home-manager-go svg{width:18px} @media(max-width:760px){ .am3-orgtitle{grid-template-columns:auto minmax(0,1fr)}.am3-seats{grid-column:1/-1;justify-self:start}.am3-picker{grid-template-columns:1fr}.am3-add{grid-template-columns:1fr}.am3-add .btn{width:100%} .home-header-side{width:100%;min-width:0}.home-manager-quick{width:100%} } .orgdash-hero{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.55fr);gap:18px;align-items:center; margin:0 0 16px;padding:24px;border:1px solid color-mix(in srgb,var(--petrol) 36%,var(--line)); border-radius:24px;background:linear-gradient(135deg,var(--paper),var(--petrol-soft));box-shadow:var(--shadow) } .orgdash-hero h2{margin:3px 0 7px;font:400 clamp(27px,3.5vw,38px)/1.08 var(--display)} .orgdash-hero p{max-width:760px;color:var(--ink-2)} .orgdash-status{display:grid;gap:6px;justify-items:end;text-align:right} .orgdash-status small{color:var(--ink-2);line-height:1.35} .orgdash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px} .orgdash-stats article{display:grid;gap:2px;padding:17px 18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)} .orgdash-stats span{font-size:13px;font-weight:700;color:var(--ink-2)} .orgdash-stats b{font:400 clamp(28px,4vw,38px)/1 var(--display);color:var(--petrol);font-variant-numeric:tabular-nums} .orgdash-stats small{font-size:12.5px;color:var(--ink-3)} .org-manager-bonus{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-bottom:18px;border-color:var(--green-line);background:linear-gradient(135deg,var(--paper),var(--green-soft))} .org-manager-bonus h2{margin:2px 0 6px;font:400 27px/1.1 var(--display)} .org-manager-bonus p{color:var(--ink-2);max-width:760px} .orgdash-grid{display:grid;gap:18px} .orgdash-grid>div{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);gap:14px} .orgdash-grid .form-card{margin:0} .orgdash-invites{display:grid;gap:12px} .org-invite-list{display:grid;gap:9px} .org-invite-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 17px;border-radius:17px;box-shadow:none} .org-invite-row>div:first-child{min-width:0} .org-invite-row h3{margin:6px 0 2px;font:700 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--petrol);overflow-wrap:anywhere} .org-invite-row .row{justify-content:flex-end} .org-claim-card{max-width:720px;margin:24px auto;text-align:left} .org-big-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--petrol-soft);color:var(--petrol)} .org-big-icon svg{width:28px;height:28px} .org-claim-card h2{margin:2px 0 8px;font:400 clamp(28px,4vw,38px)/1.08 var(--display)} .org-claim-card>p{color:var(--ink-2)} .orgdash-gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);gap:16px;align-items:start} .orgdash-gate .form-card{margin:0} .orgdash-gate aside h2{font:400 27px/1.12 var(--display);margin:2px 0 7px} .orgdash-gate aside p{color:var(--ink-2)} @media(max-width:900px){ .orgdash-hero,.orgdash-gate,.orgdash-grid>div{grid-template-columns:1fr} .orgdash-status{justify-items:start;text-align:left} .orgdash-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .org-manager-bonus{grid-template-columns:1fr}.org-manager-bonus .btn{justify-self:start} } @media(max-width:620px){ .orgdash-hero{padding:18px} .orgdash-stats{grid-template-columns:1fr 1fr} .orgdash-stats article{padding:14px} .org-invite-row{grid-template-columns:1fr} .org-invite-row .row{justify-content:flex-start;align-items:stretch;flex-direction:column} .org-invite-row .btn{width:100%} .orgdash-grid .row{align-items:stretch;flex-direction:column} .orgdash-grid .row .btn{width:100%} } .b2b-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0} .b2b-compare-grid>.card{display:grid;align-content:start;gap:9px} .b2b-compare-grid h3{margin:0;font:400 clamp(24px,3vw,31px)/1.08 var(--display)} .b2b-compare-highlight{border-color:color-mix(in srgb,var(--petrol) 42%,var(--line));background:linear-gradient(145deg,var(--paper),var(--petrol-soft))} .b2b-compare-list{display:grid;gap:0;margin:5px 0 0} .b2b-compare-list>div{display:grid;grid-template-columns:minmax(125px,.38fr) minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--line)} .b2b-compare-list dt{font-weight:700;color:var(--ink)} .b2b-compare-list dd{margin:0;color:var(--ink-2);line-height:1.45} .am2-public-demo{padding:24px;border:1px solid color-mix(in srgb,var(--petrol) 32%,var(--line));border-radius:24px;background:linear-gradient(145deg,var(--paper),var(--petrol-soft))} .am2-public-demo .am-section-head{align-items:end} .am2-demo-board{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)} .am2-demo-top{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)} .am2-demo-top h3{margin:7px 0 2px;font:400 24px/1.1 var(--display)} .am2-demo-top p{color:var(--ink-2)} .am2-demo-status{font-size:13px;font-weight:700;color:var(--petrol);background:var(--petrol-soft);padding:7px 10px;border-radius:999px;white-space:nowrap} .am2-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .am2-demo-grid article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:17px 18px;border-bottom:1px solid var(--line)} .am2-demo-grid article:nth-child(odd){border-right:1px solid var(--line)} .am2-demo-grid article:nth-last-child(-n+2){border-bottom:0} .am2-demo-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--bg);color:var(--petrol)} .am2-demo-ico svg{width:20px;height:20px} .am2-demo-grid small{display:block;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em} .am2-demo-grid b{display:block;margin:2px 0 3px} .am2-demo-grid p{color:var(--ink-2);font-size:14px;line-height:1.4} .contact-form.contact-lead{max-width:720px} .contact-form.contact-lead .form-grid{grid-template-columns:1fr} @media(max-width:760px){ .b2b-compare-grid,.am2-demo-grid{grid-template-columns:1fr} .am2-demo-grid article,.am2-demo-grid article:nth-child(odd),.am2-demo-grid article:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--line)} .am2-demo-grid article:last-child{border-bottom:0} .am2-demo-top{align-items:flex-start;flex-direction:column} .am2-public-demo{padding:17px} .b2b-compare-list>div{grid-template-columns:1fr;gap:3px} } .home-dashboard-simple { display: grid; gap: 26px; } .home-header-simple { margin-bottom: -4px; } .home-header-simple > div { max-width: 720px; } .home-header-simple p:last-child { max-width: 640px; } .home-simple-start { display: grid; gap: 12px; } .home-simple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .home-simple-card { min-width: 0; min-height: 112px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(18, 48, 58, 0.04); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .home-simple-card:hover { border-color: var(--petrol); box-shadow: var(--shadow); transform: translateY(-1px); } .home-simple-card.primary { border-color: color-mix(in srgb, var(--petrol) 48%, var(--line)); background: color-mix(in srgb, var(--petrol-soft) 58%, var(--paper)); } .home-simple-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--petrol-soft); color: var(--petrol); } .home-simple-card b { display: block; margin-bottom: 3px; font-size: 17px; line-height: 1.25; } .home-simple-card small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.35; } .home-simple-card > .icon:last-child { width: 18px; color: var(--ink-3); } .home-more { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: clip; } .home-more > summary { list-style: none; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; user-select: none; } .home-more > summary::-webkit-details-marker { display: none; } .home-more > summary > span { display: flex; align-items: center; gap: 12px; min-width: 0; } .home-more > summary > span > .icon { width: 24px; color: var(--petrol); } .home-more > summary b { display: block; line-height: 1.3; } .home-more > summary small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14px; line-height: 1.35; } .home-more > summary > .icon { width: 18px; color: var(--ink-3); transition: transform .15s ease; } .home-more[open] > summary > .icon { transform: rotate(90deg); } .home-more[open] > summary { border-bottom: 1px solid var(--line); } .home-more-body { display: grid; gap: 24px; padding: 18px; } .home-more-body .home-personal, .home-more-body .home-section { margin: 0; } .home-more-section { padding-top: 2px; } @media (max-width: 880px) { .home-simple-grid { grid-template-columns: 1fr; } .home-simple-card { min-height: 86px; } } @media (max-width: 560px) { .home-dashboard-simple { gap: 20px; } .home-simple-card { grid-template-columns: 40px minmax(0, 1fr) 18px; padding: 15px; border-radius: 16px; } .home-simple-icon { width: 40px; height: 40px; border-radius: 12px; } .home-more > summary { padding: 14px 15px; } .home-more-body { padding: 14px; } } .legal-consent-dialog { width: min(680px, calc(100% - 32px)); max-height: min(860px, calc(100dvh - 28px)); padding: 0; overflow: hidden; } .legal-consent-dialog::backdrop { background: rgb(5 18 23 / .56); backdrop-filter: blur(7px); } .legal-consent-body { display: grid; grid-template-rows:minmax(0,1fr) auto; height:min(860px,calc(100dvh - 28px)); gap:0; padding:0; max-height: min(860px, calc(100dvh - 28px)); } .legal-consent-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .legal-consent-head .eyebrow { margin: 0 0 4px; color: var(--petrol); } .legal-consent-head h2 { margin: 0; font-family: var(--display); font-size: clamp(27px, 5vw, 34px); font-weight: 400; line-height: 1.1; } .legal-consent-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--petrol-soft); color: var(--petrol); } .legal-consent-icon .icon { width: 25px; height: 25px; } .legal-consent-lead { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.62; } .legal-consent-cards { display: grid; gap: 8px; } .legal-consent-cards > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2, var(--bg)); } .legal-consent-cards p { margin: 0; display: grid; gap: 2px; line-height: 1.46; } .legal-consent-cards b { font-size: 14px; color: var(--ink); } .legal-consent-cards p span { color: var(--ink-2); font-size: 14px; } .legal-mini-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--paper); color: var(--petrol); border: 1px solid var(--line); } .legal-mini-icon .icon { width: 17px; height: 17px; } .legal-consent-links, .legal-doc-links { display: flex; flex-wrap: wrap; gap: 7px 13px; } .legal-consent-links { padding: 2px 0 1px; } .legal-consent-links a { color: var(--petrol); font-size: 13.5px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal-consent-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px; padding: 15px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--bg); font-size: 15px; line-height: 1.5; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .legal-consent-check:hover { border-color: var(--petrol); } .legal-consent-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--petrol); cursor: pointer; } .legal-consent-check:focus-within { outline: 2px solid var(--petrol); outline-offset: 2px; } .legal-consent-check.has-error { border-color: var(--coral); background: color-mix(in srgb, var(--coral-soft) 72%, var(--paper)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent); } .legal-consent-error { margin: -6px 0 0; padding: 11px 13px; border: 1px solid var(--coral-line, var(--coral)); border-radius: 12px; background: var(--coral-soft); color: var(--coral); font-size: 14px; font-weight: 700; line-height: 1.45; } .legal-consent-error[hidden] { display: none !important; } .legal-consent-note { margin: 0; padding: 11px 13px; border-radius: 12px; background: var(--paper-2, var(--paper)); border: 1px solid var(--line); font-size: 13px; line-height: 1.52; color: var(--ink-2); } .legal-consent-actions { display: grid; padding-top: 2px; } .legal-consent-actions .btn { min-height: 48px; font-size: 15.5px; } .legal-center-ack { display: grid; gap: 12px; margin-top: 14px; } .legal-center-ack .btn { justify-self: start; } .legal-doc-links { margin-top: 4px; } @keyframes legalErrorPulse { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } } .legal-error-pulse { animation: legalErrorPulse .24s ease; } .legal-consent-dialog[dir="rtl"] .legal-consent-head, .legal-consent-dialog[dir="rtl"] .legal-consent-cards > div, .legal-consent-dialog[dir="rtl"] .legal-consent-check { grid-template-columns: minmax(0, 1fr) auto; } .legal-consent-dialog[dir="rtl"] .legal-consent-icon, .legal-consent-dialog[dir="rtl"] .legal-mini-icon, .legal-consent-dialog[dir="rtl"] .legal-consent-check input { grid-column: 2; grid-row: 1; } .legal-consent-dialog[dir="rtl"] .legal-consent-head > div, .legal-consent-dialog[dir="rtl"] .legal-consent-cards p, .legal-consent-dialog[dir="rtl"] .legal-consent-check span { grid-column: 1; grid-row: 1; } @media (prefers-reduced-motion: reduce) { .legal-error-pulse { animation: none; } } @media (max-width: 560px) { .legal-consent-dialog { width: min(100% - 18px, 680px); max-height: calc(100dvh - 18px); } .legal-consent-body { padding:0; max-height:calc(100dvh - 18px); gap:0; } .legal-consent-head h2 { font-size: 27px; } .legal-consent-links { display: grid; gap: 7px; } .legal-doc-links { display: grid; } .legal-doc-links .btn { width: 100%; justify-content: center; } } @media print { .legal-consent-dialog { display: none !important; } } .login-card { max-width: 780px; gap: 18px; } .login-card #login-role { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .login-card #login-role button { min-height: 94px; } .login-legal { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); } .legal-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .legal-preview-row > div { display: grid; gap: 2px; min-width: 0; } .legal-preview-row b { font-size: 14.5px; line-height: 1.3; } .legal-preview-row span { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; } .legal-preview-row select { min-width: 210px; max-width: 300px; min-height: 42px; padding: 8px 36px 8px 11px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; } .legal-preview-row select:focus { outline: 2px solid var(--petrol); outline-offset: 2px; } .login-legal-intro { display: grid; gap: 3px; } .login-legal-intro > b { font-size: 16px; } .login-legal-intro > span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; } .login-legal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } .login-legal-summary > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); } .login-legal-summary p { margin: 0; display: grid; gap: 2px; line-height: 1.4; } .login-legal-summary p b { font-size: 13.5px; } .login-legal-summary p span { color: var(--ink-2); font-size: 12.5px; } .login-legal .legal-consent-check { background: var(--paper); } .login-legal .legal-consent-note { padding: 0; border: 0; background: transparent; } .login-card .auth-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .auth-err.note-box { border: 1px solid var(--coral-line, var(--coral)); background: var(--coral-soft); color: var(--coral); font-weight: 700; } .auth-err.note-box a, .auth-err.note-box b { color: inherit; } .login-legal .legal-consent-check.has-error { border-color: var(--coral); background: var(--coral-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 14%, transparent); } .legal-consent-dialog .legal-preview-row { padding: 10px 0 12px; } @media (max-width: 760px) { .login-card { max-width: 520px; } .login-card #login-role, .login-legal-summary, .login-card .auth-actions { grid-template-columns: minmax(0, 1fr); } .login-card #login-role button { min-height: 86px; } .legal-preview-row { display: grid; } .legal-preview-row select { width: 100%; max-width: none; } .login-legal { padding: 13px; } } .institution-activation{max-width:none} .institution-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0} .institution-data-grid .institution-wide{grid-column:1/-1} .institution-confirm{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin:10px 0 4px;border:1px solid var(--line);border-radius:14px;background:var(--soft)} .institution-confirm input{width:24px;height:24px;flex:0 0 auto;margin-top:0} .institution-confirm span{line-height:1.45} .b2b-institution>.field{margin-top:12px} .b2b-institution .note-box.compact{margin:8px 0 12px} .am5-orgbar{display:grid;gap:16px} .am5-room-tools{display:grid;gap:12px} .am5-new-room{border:1px solid var(--line);border-radius:14px;background:var(--panel)} .am5-new-room>summary{padding:12px 14px;font-weight:800;cursor:pointer} .am5-new-room .am3-add{padding:0 14px 14px} .am4-room-list{display:flex;flex-wrap:wrap;gap:8px} .am4-room{min-width:210px;max-width:320px;flex:1 1 220px} .am4-room-search{max-width:420px} .am5-people{margin-top:14px} .am5-people>summary{font-weight:800} .am5-people form.row{align-items:flex-end} .am5-people form.row .field{min-width:220px;margin:0} .am4-collab{grid-template-columns:minmax(0,1.35fr) minmax(330px,.85fr);gap:18px;align-items:start} .am4-comms,.am4-tasks{min-width:0} .am4-composer{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important} .am4-compose-top{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:8px;width:100%} .am4-recipient-tabs{display:flex!important;flex-wrap:wrap;gap:8px;width:100%} .am4-recipient{min-height:40px;padding:8px 12px;white-space:nowrap} .am4-composer textarea{display:block;width:100%!important;min-width:0!important;min-height:112px!important;max-height:280px;resize:vertical;padding:12px 14px;line-height:1.5} .am4-compose-actions{display:flex!important;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .am4-send{min-width:110px} .am4-message-list{max-height:520px} .am4-message p{white-space:pre-wrap;overflow-wrap:anywhere} .am5-task-form{display:grid!important;gap:10px} .am5-task-form>.field{margin:0} .am5-task-form>div{display:grid!important;grid-template-columns:minmax(120px,1fr) minmax(145px,1fr) auto;gap:8px;align-items:end} .am5-task-form>div .field{margin:0} .am5-task{align-items:flex-start} .am5-task>div{min-width:0;flex:1} .am5-task-target{display:block;margin-top:2px} .am5-task-meta{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:5px} .am5-task-meta small{display:inline-flex;align-items:center} .am5-task-meta .done-meta{font-weight:700} .am5-task-meta .open-meta{font-weight:700} .am5-task.done{opacity:.76} .am5-task.done>div>b{text-decoration:line-through} @media (max-width:1100px){ .am4-collab{grid-template-columns:1fr} } @media (max-width:720px){ .institution-data-grid{grid-template-columns:1fr} .institution-data-grid .institution-wide{grid-column:auto} .am4-room{max-width:none;min-width:0;flex-basis:100%} .am5-task-form>div{grid-template-columns:1fr} .am5-people form.row{align-items:stretch} .am5-people form.row .field{min-width:0;width:100%} } .institution-home-v2{gap:24px} .institution-start-hero{ display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);gap:18px; padding:26px;border:1px solid var(--line);border-radius:24px; background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 58%,var(--paper))); box-shadow:var(--shadow) } .institution-start-copy{min-width:0} .institution-start-copy h1{margin:5px 0 9px;font:400 clamp(32px,4vw,46px)/1.08 var(--display)} .institution-start-copy>p:not(.eyebrow){margin:0;max-width:760px;color:var(--ink-2);font-size:16.5px;line-height:1.55} .institution-start-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .institution-start-badges span{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13px;font-weight:700;color:var(--ink-2)} .institution-start-badges svg{width:15px;height:15px;color:var(--green)} .institution-start-summary{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px;padding:16px;border:1px solid var(--line);border-radius:19px;background:var(--paper)} .institution-start-summary>.chip{grid-column:1/-1;justify-self:start} .institution-start-summary>div{display:grid;gap:2px;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--bg)} .institution-start-summary>div b{font:400 28px/1 var(--display);color:var(--petrol)} .institution-start-summary>div span{font-size:12.5px;color:var(--ink-2)} .institution-start-summary>.btn{grid-column:1/-1;margin-top:2px;justify-content:center} .institution-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .institution-action{ display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:13px;align-items:start; min-width:0;padding:18px;border:1px solid var(--line);border-radius:19px;background:var(--paper); color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease } .institution-action:hover{transform:translateY(-2px);border-color:var(--petrol)} .institution-action>span:first-child{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--petrol-soft);color:var(--petrol)} .institution-action>span:first-child svg{width:22px;height:22px} .institution-action>div{display:grid;gap:3px;min-width:0} .institution-action small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)} .institution-action b{font-size:18px;line-height:1.25} .institution-action p{margin:2px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.45} .institution-action>.icon:last-child{width:18px;height:18px;margin-top:4px;color:var(--ink-3)} .institution-action.primary{border-color:color-mix(in srgb,var(--petrol) 40%,var(--line));background:linear-gradient(145deg,var(--paper),var(--petrol-soft))} .azubi-start-hero{align-items:center;padding:4px 0 20px} .azubi-start-state{display:grid;justify-items:end;gap:7px;min-width:180px} .azubi-start-state small{max-width:230px;color:var(--ink-2);font-size:13px;text-align:right} .home-premium-highlight{ display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px; border:1px solid color-mix(in srgb,var(--petrol) 35%,var(--line));border-radius:20px; background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 70%,var(--paper)));box-shadow:var(--shadow) } .home-premium-highlight>div{display:flex;align-items:flex-start;gap:13px;min-width:0} .home-premium-icon{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--petrol);color:#fff} .home-premium-icon svg{width:22px;height:22px} .home-premium-highlight h2{margin:2px 0 3px;font:400 23px/1.2 var(--display)} .home-premium-highlight p:not(.eyebrow){margin:0;max-width:760px;color:var(--ink-2);font-size:14px;line-height:1.45} .home-premium-highlight>.btn{flex:0 0 auto} .student-referral{ display:grid;grid-template-columns:48px minmax(0,1fr);gap:15px;padding:20px;margin:16px 0; border-color:color-mix(in srgb,var(--petrol) 32%,var(--line));background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 45%,var(--paper))) } .student-referral-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--petrol-soft);color:var(--petrol)} .student-referral-icon svg{width:25px;height:25px} .student-referral h2{margin:2px 0 5px;font:400 24px/1.18 var(--display)} .student-referral p:not(.eyebrow){margin:0;color:var(--ink-2);line-height:1.5} .student-referral-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .student-referral-url{display:block;margin-top:9px;color:var(--ink-3);font-size:11.5px;overflow-wrap:anywhere} .student-referral.compact{padding:16px} .student-referral.compact h2{font-size:21px} .student-own-access{display:grid;gap:8px;margin-top:14px;padding:20px} .student-own-access h2{margin:0;font:400 25px/1.16 var(--display)} .student-own-access>p:not(.eyebrow){margin:0;color:var(--ink-2)} .premium-first,.b2b-premium-first{border-color:color-mix(in srgb,var(--petrol) 45%,var(--line));background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 42%,var(--paper)))} .b2b-premium-first .b2b-staffel li:first-child{border-color:color-mix(in srgb,var(--petrol) 45%,var(--line));background:var(--petrol-soft)} @media(max-width:980px){ .institution-start-hero{grid-template-columns:1fr} .institution-action-grid{grid-template-columns:1fr} .institution-start-summary{grid-template-columns:1fr 1fr} } @media(max-width:700px){ .institution-start-hero{padding:18px;border-radius:20px} .institution-start-summary{grid-template-columns:1fr} .institution-start-summary>.chip,.institution-start-summary>.btn{grid-column:1} .azubi-start-state{justify-items:start;min-width:0} .azubi-start-state small{text-align:left} .home-premium-highlight{display:grid;padding:16px} .home-premium-highlight>.btn{width:100%;justify-content:center} .student-referral{grid-template-columns:1fr;padding:16px} .student-referral-actions .btn{width:100%;justify-content:center} } .azubi-connect{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,auto) auto;gap:12px;align-items:end;margin:16px 0;padding:18px;border-color:color-mix(in srgb,var(--petrol) 28%,var(--line));background:var(--paper)} .azubi-connect h2{margin:2px 0 5px;font:400 22px/1.18 var(--display)} .azubi-connect p:not(.eyebrow){margin:0;color:var(--ink-2);line-height:1.45} .azubi-connect .field{margin:0} .azubi-connect .auth-err{grid-column:1/-1;margin:0} .azubi-connect.loading{grid-template-columns:1fr} @media(max-width:760px){.azubi-connect{grid-template-columns:1fr;align-items:stretch}.azubi-connect>.btn{width:100%;justify-content:center}} html.nm-sanft .rv, html.nm-sanft .rv.rv-in { opacity: 1 !important; transform: none !important; transition: none !important; } html.nm-sanft .hero::before, html.nm-sanft .hero::after, html.nm-sanft .hero-pulse path, html.nm-sanft .gd-hero-pulse path, html.nm-sanft .tf-card::before, html.nm-sanft .bonus-ribbon, html.nm-sanft .price .price-save { animation: none !important; } html.nm-sanft .topbar, html.nm-sanft .chipnav, html.nm-sanft .kb-jump, html.nm-sanft .sim-bar, html.nm-sanft .am-jump, html.nm-sanft .am2-lock, html.nm-sanft .hero-count { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.nm-sanft .topbar { background: var(--bg); } html.nm-sanft .page > *, html.nm-sanft .fade-in, html.nm-sanft .fb, html.nm-sanft .sb-tr { animation-duration: .18s !important; } @supports (content-visibility: auto) { @media (max-width: 900px) { .page .sec, .page .legal-sec, .page .job-group, .page .src-box, .page .gd-kb, .page .faq details { content-visibility: auto; contain-intrinsic-size: auto 280px; } } } .auth-shell{min-height:100dvh;overflow-x:hidden;overflow-y:visible} .auth-main{place-items:start center;align-content:start;min-height:0} .login-card{margin-inline:auto} .home-guidance{ display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:16px;align-items:center; padding:20px 22px;border-color:color-mix(in srgb,var(--petrol) 36%,var(--line)); background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 58%,var(--paper))); box-shadow:var(--shadow) } .home-guidance-setup{border-style:dashed} .home-guidance-icon{ display:grid;place-items:center;width:50px;height:50px;border-radius:15px; background:var(--petrol);color:#fff } .home-guidance-icon svg{width:24px;height:24px} .home-guidance h2{margin:2px 0 5px;font:400 25px/1.18 var(--display)} .home-guidance p:not(.eyebrow){margin:0;color:var(--ink-2);line-height:1.48} .home-guidance-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .home-guidance-meta span{ display:inline-flex;padding:5px 9px;border:1px solid var(--line);border-radius:999px; background:var(--paper);color:var(--ink-2);font-size:12.5px;font-weight:700 } .home-guidance>.btn{white-space:nowrap} .home-today-single{grid-template-columns:minmax(0,560px)} .home-repeat-section{padding-top:2px} .hub-paths-primary{padding:20px 22px;overflow:visible;border-color:color-mix(in srgb,var(--petrol) 35%,var(--line));background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--petrol-soft) 46%,var(--paper)))} .hub-paths-primary .hub-paths-body{padding:0;margin-top:16px} .hub-paths-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center} .hub-paths-head h2{margin:2px 0 4px;font:400 27px/1.16 var(--display)} .hub-paths-head p:not(.eyebrow){margin:0;color:var(--ink-2);line-height:1.45} .hub-quick-practice{display:grid;gap:10px} .hub-quick-practice .tf-card{margin:0} .hub-quick-practice .tf-card::before{display:none} .sim-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){ .home-guidance{grid-template-columns:46px minmax(0,1fr)} .home-guidance>.btn{grid-column:1/-1;width:100%;justify-content:center} .sim-mode-grid{grid-template-columns:1fr} } @media(max-width:700px){ .auth-main{padding:8px 12px 28px} .auth-top{padding:14px 12px} .auth-card{padding:24px 18px;border-radius:22px} .login-card{gap:15px} .home-guidance{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:16px} .home-guidance-icon{width:42px;height:42px;border-radius:13px} .home-guidance h2{font-size:22px} .hub-paths-primary{padding:17px} .hub-paths-head{grid-template-columns:1fr} .hub-paths-head>.btn{width:100%;justify-content:center} .hub-paths-primary .hub-paths-body{padding:0} } .sb-item{min-height:50px;padding:11px 12px} .sb-item:focus-visible, .home-main-card:focus-visible, .home-direct-grid a:focus-visible, .hub-find-card:focus-visible, .learning-hub .hub-card:focus-visible, .mobile-dock a:focus-visible{ outline:3px solid color-mix(in srgb,var(--petrol) 30%,transparent); outline-offset:2px } .mobile-dock{ display:none } @media(max-width:1000px){ .main{padding-bottom:76px} .foot{padding-bottom:10px} .mobile-dock{ position:fixed; left:50%; bottom:10px; z-index:35; transform:translateX(-50%); width:min(560px,calc(100% - 20px)); min-height:62px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:6px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb,var(--paper) 94%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25); box-shadow:0 12px 34px rgba(12,24,29,.18) } .mobile-dock a{ min-width:0; min-height:50px; display:grid; place-items:center; align-content:center; gap:2px; padding:5px 4px; border-radius:14px; color:var(--ink-2); text-decoration:none; font-size:11.5px; font-weight:700; line-height:1.1 } .mobile-dock a .icon{width:20px;height:20px} .mobile-dock a[aria-current="page"]{ background:var(--petrol-soft); color:var(--petrol) } .sidebar{width:min(330px,92vw)} .sb-item{min-height:52px;font-size:16px} } @media(max-width:430px){ .mobile-dock{bottom:7px;width:calc(100% - 14px);border-radius:18px} .mobile-dock a{font-size:10.8px} } .home-dashboard-v3{display:grid;gap:28px} .home-start-clean{margin-bottom:0} .home-main-actions,.home-direct,.home-visible-tools{display:grid;gap:12px} .home-main-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px } .home-main-card{ min-height:132px; display:grid; grid-template-columns:54px minmax(0,1fr) 22px; align-items:center; gap:15px; padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink); text-decoration:none; box-shadow:0 2px 8px rgba(18,48,58,.05); transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease } .home-main-card:hover{border-color:var(--petrol);box-shadow:var(--shadow);transform:translateY(-1px)} .home-main-card.primary{ border-color:color-mix(in srgb,var(--petrol) 48%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--petrol-soft) 72%,var(--paper)),var(--paper)) } .home-main-icon{ width:54px;height:54px;display:grid;place-items:center;border-radius:16px; background:var(--petrol-soft);color:var(--petrol) } .home-main-icon .icon{width:26px;height:26px} .home-main-card b{display:block;font-size:20px;line-height:1.18;margin-bottom:5px} .home-main-card small{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.4} .home-main-card>.icon:last-child{width:20px;color:var(--ink-3)} .home-direct-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px } .home-direct-grid a{ min-height:96px; display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; gap:2px 11px; align-content:center; padding:15px; border:1px solid var(--line); border-radius:17px; background:var(--paper); color:var(--ink); text-decoration:none; transition:border-color .15s ease,background .15s ease } .home-direct-grid a:hover{border-color:var(--petrol);background:color-mix(in srgb,var(--petrol-soft) 28%,var(--paper))} .home-direct-grid a>span:first-child{ grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border-radius:12px; background:var(--bg);color:var(--petrol) } .home-direct-grid a>span:first-child .icon{width:20px;height:20px} .home-direct-grid b{font-size:16px;line-height:1.2} .home-direct-grid small{color:var(--ink-3);font-size:13px;line-height:1.25} .home-plan-card{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:20px 22px } .home-plan-card h2{margin:2px 0 5px;font:400 24px/1.18 var(--display)} .home-plan-card p:not(.eyebrow){margin:0;color:var(--ink-2)} .home-premium-lower{margin-top:0} .home-tools-visible{grid-template-columns:repeat(2,minmax(0,1fr))} .home-tools-visible>a{min-height:82px} @media(max-width:820px){ .home-main-grid{grid-template-columns:1fr} .home-main-card{min-height:100px} .home-direct-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .home-plan-card{grid-template-columns:1fr} .home-plan-card>.btn{width:100%;justify-content:center} } @media(max-width:520px){ .home-dashboard-v3{gap:22px} .home-main-card{ grid-template-columns:46px minmax(0,1fr) 18px; min-height:92px;padding:15px;border-radius:17px } .home-main-icon{width:46px;height:46px;border-radius:14px} .home-main-card b{font-size:18px} .home-direct-grid{grid-template-columns:1fr;gap:8px} .home-direct-grid a{min-height:76px} .home-tools-visible{grid-template-columns:1fr} } .home-learning-orbit{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); align-items:center; gap:28px; min-height:410px; padding:34px 38px; border:1px solid color-mix(in srgb,var(--petrol) 28%,var(--line)); border-radius:30px; background: radial-gradient(circle at 82% 50%,color-mix(in srgb,var(--petrol-soft) 84%,transparent) 0 22%,transparent 55%), linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--bg) 70%,var(--paper))); box-shadow:var(--shadow-lg) } .home-learning-orbit::before{ content:"";position:absolute;inset:-35% auto auto -12%;z-index:-1; width:360px;height:360px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--green) 12%,transparent),transparent 68%) } .home-learning-orbit-copy{display:grid;gap:10px;align-content:center;max-width:590px} .home-learning-orbit-copy h2{ margin:0;font:400 clamp(31px,4vw,45px)/1.06 var(--display);letter-spacing:-.02em;text-wrap:balance } .home-learning-orbit-copy>p:not(.eyebrow){ margin:2px 0 4px;max-width:620px;color:var(--ink-2);font-size:17px;line-height:1.55 } .lernrad-status{ display:inline-flex;align-items:center;gap:9px;justify-self:start; margin-top:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px; background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--ink-2);font-size:13.5px;font-weight:700 } .lernrad-status-dot{ width:8px;height:8px;border-radius:50%;background:var(--petrol); box-shadow:0 0 0 4px color-mix(in srgb,var(--petrol) 14%,transparent) } .lernrad-wrap{position:relative;display:grid;justify-items:center;align-items:center;min-width:0} .lernrad-glow{ position:absolute;width:min(92%,355px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--petrol) 20%,transparent),transparent 66%); filter:blur(20px);transform:scale(1.08);pointer-events:none } .lernrad{ position:relative; width:min(100%,344px);aspect-ratio:1; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px; overflow:hidden;border-radius:50%; background:var(--line); border:7px solid color-mix(in srgb,var(--paper) 90%,var(--line)); box-shadow:0 22px 50px -24px rgba(12,24,29,.48),inset 0 0 0 1px var(--line) } .lernrad-part{ position:relative;min-width:0;min-height:0;border:0;padding:24px 18px; display:flex;flex-direction:column;justify-content:center;gap:2px; cursor:pointer;color:var(--ink);transition:filter .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),background .2s ease,color .2s ease } .lernrad-part:hover{filter:brightness(1.035)} .lernrad-part:active{transform:scale(.985)} .lernrad-part:focus-visible{outline:4px solid var(--ink);outline-offset:-7px;z-index:3} .lernrad-part-1{align-items:flex-start;text-align:left;padding-left:30px;padding-bottom:32px;background:linear-gradient(145deg,var(--green-soft),color-mix(in srgb,var(--green-soft) 68%,var(--paper)))} .lernrad-part-2{align-items:flex-end;text-align:right;padding-right:30px;padding-bottom:32px;background:linear-gradient(215deg,var(--ochre-soft),color-mix(in srgb,var(--ochre-soft) 65%,var(--paper)))} .lernrad-part-3{align-items:flex-start;text-align:left;padding-left:30px;padding-top:32px;background:linear-gradient(35deg,var(--coral-soft),color-mix(in srgb,var(--coral-soft) 64%,var(--paper)))} .lernrad-part-4{align-items:flex-end;text-align:right;padding-right:30px;padding-top:32px;background:linear-gradient(325deg,var(--petrol-soft),color-mix(in srgb,var(--petrol-soft) 68%,var(--paper)))} .lernrad-num{ font:700 11px/1 var(--body);letter-spacing:.14em;opacity:.58;margin-bottom:3px } .lernrad-label{font:700 18px/1.08 var(--body);letter-spacing:-.01em} .lernrad-part small{font-size:11.5px;line-height:1.2;opacity:.72} .lernrad-center{ position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%); width:112px;aspect-ratio:1;border-radius:50%; display:grid;place-items:center;align-content:center;gap:5px;text-align:center; background:linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--bg) 80%,var(--paper))); border:1px solid var(--line); box-shadow:0 12px 32px -18px rgba(12,24,29,.7),inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent); pointer-events:none } .lernrad-center>span{ width:30px;height:30px;display:grid;place-items:center;border-radius:10px; background:var(--petrol);color:var(--petrol-ink) } .lernrad-center .icon{width:17px;height:17px} .lernrad-center b{font-size:13px;line-height:1.05;letter-spacing:.02em} .lernrad-hint{margin-top:10px;color:var(--ink-3);font-size:12.5px;font-weight:700;letter-spacing:.03em} .lernrad[data-selected="sicher"] .lernrad-part-1, .lernrad[data-selected="unsicher"] .lernrad-part-2, .lernrad[data-selected="nicht"] .lernrad-part-3, .lernrad[data-selected="wiederholen"] .lernrad-part-4{ z-index:2;color:#fff;filter:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.36) } .lernrad[data-selected="sicher"] .lernrad-part-1{background:linear-gradient(145deg,#2f8255,#4ca06c)} .lernrad[data-selected="unsicher"] .lernrad-part-2{background:linear-gradient(215deg,#9a6b2e,#bd8a44)} .lernrad[data-selected="nicht"] .lernrad-part-3{background:linear-gradient(35deg,#a94433,#ca654f)} .lernrad[data-selected="wiederholen"] .lernrad-part-4{background:linear-gradient(325deg,#175b64,#2d7c85)} .home-learning-orbit.lernrad-picked .lernrad-center{box-shadow:0 14px 36px -16px color-mix(in srgb,var(--petrol) 70%,transparent)} html.nm-bewegung .lernrad{animation:lernrad-float 5.6s ease-in-out infinite} html.nm-bewegung .home-learning-orbit.lernrad-picked .lernrad-center{animation:lernrad-pop .48s cubic-bezier(.2,.9,.2,1)} html.nm-bewegung .lernrad-status-dot{animation:lernrad-dot 2.1s ease-in-out infinite} @keyframes lernrad-float{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-6px) rotate(.35deg)}} @keyframes lernrad-pop{0%{transform:translate(-50%,-50%) scale(.93)}65%{transform:translate(-50%,-50%) scale(1.05)}100%{transform:translate(-50%,-50%) scale(1)}} @keyframes lernrad-dot{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--petrol) 14%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--petrol) 4%,transparent)}} @media(max-width:860px){ .home-learning-orbit{grid-template-columns:1fr;padding:28px;gap:20px} .home-learning-orbit-copy{text-align:center;justify-items:center;margin-inline:auto} .home-learning-orbit-copy>p:not(.eyebrow){max-width:650px} .lernrad-status{justify-self:center} .lernrad{width:min(100%,340px)} } @media(max-width:520px){ .home-learning-orbit{padding:24px 16px 22px;border-radius:24px;gap:16px} .home-learning-orbit-copy h2{font-size:32px} .home-learning-orbit-copy>p:not(.eyebrow){font-size:15.5px;line-height:1.48} .lernrad-status{border-radius:16px;text-align:left;font-size:12.5px} .lernrad{width:min(92vw,320px);border-width:6px} .lernrad-part{padding:19px 13px} .lernrad-part-1,.lernrad-part-3{padding-left:23px} .lernrad-part-2,.lernrad-part-4{padding-right:23px} .lernrad-part-1,.lernrad-part-2{padding-bottom:27px} .lernrad-part-3,.lernrad-part-4{padding-top:27px} .lernrad-label{font-size:16px} .lernrad-part small{font-size:10.5px} .lernrad-center{width:98px} } html.nm-ruhig .lernrad, html.nm-ruhig .lernrad-center, html.nm-ruhig .lernrad-status-dot, html.nm-sanft .lernrad, html.nm-sanft .lernrad-center, html.nm-sanft .lernrad-status-dot{animation:none!important} .lernrad-part-ready{ box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--green) 38%,transparent) } .lernrad-part-ready::after{ content:"";position:absolute;inset:10px;border-radius:999px 10px 10px 10px; border:1px solid color-mix(in srgb,var(--green) 28%,transparent);pointer-events:none } .lernrad-part-soon{opacity:.82} .lernrad-part-soon:hover{opacity:1} .lernrad-portal-opening{animation:lernrad-portal-out .34s cubic-bezier(.4,0,.7,.2) both} html.nm-ruhig .lernrad-portal-opening, html.nm-sanft .lernrad-portal-opening{animation:none} @keyframes lernrad-portal-out{ 0%{opacity:1;transform:scale(1);filter:blur(0)} 65%{opacity:.88;transform:scale(1.018);filter:blur(1px)} 100%{opacity:0;transform:scale(.97);filter:blur(5px)} } .lernwelt{ display:grid;gap:24px;max-width:1120px;margin:0 auto } .lernwelt-enter{animation:lernwelt-enter .48s cubic-bezier(.18,.8,.25,1) both} @keyframes lernwelt-enter{ from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)} to{opacity:1;transform:none;filter:none} } html.nm-ruhig .lernwelt-enter, html.nm-sanft .lernwelt-enter{animation:none} .lernwelt-back{justify-self:start;margin-bottom:-6px} .lernwelt-hero{ position:relative;overflow:hidden;isolation:isolate; min-height:260px;display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;align-items:center; padding:34px 38px;border-radius:30px; background: radial-gradient(circle at 88% 35%,rgba(255,255,255,.18),transparent 24%), linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:#fff;box-shadow:var(--shadow-lg) } .lernwelt-hero::before{ content:"";position:absolute;z-index:-1;left:-8%;bottom:-70%;width:420px;aspect-ratio:1;border-radius:50%; border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 86px rgba(255,255,255,.025) } .lernwelt-hero h1{ margin:4px 0 10px;max-width:720px;font:400 clamp(35px,5vw,54px)/1.04 var(--display);letter-spacing:-.02em } .lernwelt-hero p:not(.eyebrow){max-width:720px;margin:0;color:rgba(255,255,255,.9);font-size:17px;line-height:1.5} .lernwelt-orb{ position:relative;justify-self:end;width:146px;aspect-ratio:1;border-radius:50%; display:grid;place-items:center;background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 0 30px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.13) } .lernwelt-orb span{position:absolute;border:1px solid rgba(255,255,255,.32);border-radius:50%} .lernwelt-orb span:nth-child(1){inset:14px} .lernwelt-orb span:nth-child(2){inset:29px} .lernwelt-orb span:nth-child(3){inset:44px} .lernwelt-orb b{font:400 38px/1 var(--display);letter-spacing:.05em} html.nm-bewegung .lernwelt-orb span:nth-child(1){animation:lernwelt-ring 5s linear infinite} html.nm-bewegung .lernwelt-orb span:nth-child(2){animation:lernwelt-ring 4s linear infinite reverse} @keyframes lernwelt-ring{to{transform:rotate(360deg)}} .lernstand-summary{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px } .lernstand-summary>div{ min-height:92px;display:grid;align-content:center;justify-items:center;gap:4px; padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 3px 12px rgba(18,48,58,.05) } .lernstand-summary b{font:400 31px/1 var(--display);color:var(--petrol);font-variant-numeric:tabular-nums} .lernstand-summary span{font-size:13px;font-weight:700;color:var(--ink-2)} .lernstand-tools{display:grid;gap:13px;padding:18px 20px} .lernstand-tools .search-big{margin:0} .lernstand-filters{ display:flex;gap:8px;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:thin } .lernstand-filters button{ flex:0 0 auto;min-height:40px;padding:8px 13px;border:1px solid var(--line);border-radius:999px; background:var(--bg);color:var(--ink-2);font-weight:700;font-size:13.5px;cursor:pointer } .lernstand-filters button[aria-pressed="true"]{background:var(--petrol-soft);border-color:var(--petrol);color:var(--petrol)} .lernstand-tool-note{margin:0;color:var(--ink-3);font-size:13px} .lernstand-section{display:grid;gap:14px} .lernstand-section+.lernstand-section{margin-top:8px} .lernstand-section-head{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding:0 2px } .lernstand-section-head h2{margin:2px 0 4px;font:400 28px/1.12 var(--display)} .lernstand-section-head p:not(.eyebrow){margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.45} .lernstand-section-head>span{ align-self:center;padding:6px 10px;border-radius:999px;background:var(--bg);color:var(--ink-3);font-size:12.5px;font-weight:700 } .lernstand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .lernstand-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .lernstand-world{ display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--paper) 76%,var(--bg)) } .lernstand-world+.lernstand-world{margin-top:12px} .lernstand-world-head{ display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:2px 3px 6px } .lernstand-world-icon{ width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--petrol-soft);color:var(--petrol) } .lernstand-world-icon .icon{width:22px;height:22px} .lernstand-world-head h3{margin:0 0 2px;font-size:19px;line-height:1.2} .lernstand-world-head p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.35} .lernstand-world-head>span:last-child{ padding:5px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-3) } .lernstand-item{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center; min-width:0;padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--paper); transition:border-color .18s ease,background .18s ease,transform .18s ease } .lernstand-item[data-state="kann"]{border-color:color-mix(in srgb,var(--green) 42%,var(--line));background:color-mix(in srgb,var(--green-soft) 28%,var(--paper))} .lernstand-item[data-state="unsicher"]{border-color:color-mix(in srgb,var(--ochre) 42%,var(--line));background:color-mix(in srgb,var(--ochre-soft) 32%,var(--paper))} .lernstand-item[data-state="lernen"]{border-color:color-mix(in srgb,var(--coral) 40%,var(--line));background:color-mix(in srgb,var(--coral-soft) 28%,var(--paper))} .lernstand-item-main{display:grid;grid-template-columns:40px minmax(0,1fr);gap:11px;align-items:center;min-width:0} .lernstand-item-icon{ width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--bg);color:var(--petrol) } .lernstand-item-icon .icon{width:19px;height:19px} .lernstand-item-main>span:last-child{min-width:0;display:grid;gap:2px} .lernstand-item-main small{color:var(--ink-3);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em} .lernstand-item-main b{font-size:15.5px;line-height:1.2;min-width:0} .lernstand-item-main b a{color:var(--ink);text-decoration:none} .lernstand-item-main b a:hover{color:var(--petrol);text-decoration:underline} .lernstand-item-main>span:last-child>span{color:var(--ink-2);font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lernstand-pick{display:grid;grid-template-columns:repeat(3,auto);gap:5px} .lernstand-pick button{ min-height:38px;display:inline-flex;align-items:center;gap:5px;padding:7px 9px; border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink-2); font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap } .lernstand-pick button .icon{width:14px;height:14px} .lernstand-pick button[data-ls-status="kann"][aria-pressed="true"]{background:var(--green-soft);border-color:var(--green);color:var(--green)} .lernstand-pick button[data-ls-status="unsicher"][aria-pressed="true"]{background:var(--ochre-soft);border-color:var(--ochre);color:var(--ochre)} .lernstand-pick button[data-ls-status="lernen"][aria-pressed="true"]{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)} .lernstand-item-changed{animation:lernstand-pulse .36s ease} @keyframes lernstand-pulse{50%{transform:scale(1.008)}} html.nm-ruhig .lernstand-item-changed, html.nm-sanft .lernstand-item-changed{animation:none} @supports(content-visibility:auto){ .lernstand-world{content-visibility:auto;contain-intrinsic-size:auto 520px} } @media(max-width:860px){ .lernwelt-hero{grid-template-columns:1fr 116px;padding:28px} .lernwelt-orb{width:112px} .lernstand-grid,.lernstand-area-grid{grid-template-columns:1fr} } @media(max-width:620px){ .lernwelt{gap:18px} .lernwelt-hero{grid-template-columns:1fr;min-height:0;padding:25px 20px;border-radius:24px} .lernwelt-orb{display:none} .lernwelt-hero h1{font-size:35px} .lernwelt-hero p:not(.eyebrow){font-size:15.5px} .lernstand-summary{grid-template-columns:1fr 1fr;gap:8px} .lernstand-summary>div{min-height:76px;padding:10px} .lernstand-summary b{font-size:27px} .lernstand-tools{padding:14px} .lernstand-section-head{grid-template-columns:1fr;gap:7px} .lernstand-section-head>span{justify-self:start} .lernstand-world{padding:11px;border-radius:18px} .lernstand-world-head{grid-template-columns:40px minmax(0,1fr) auto;gap:9px} .lernstand-world-icon{width:40px;height:40px} .lernstand-world-head p{display:none} .lernstand-item{grid-template-columns:1fr;gap:10px;padding:12px} .lernstand-pick{grid-template-columns:repeat(3,minmax(0,1fr))} .lernstand-pick button{justify-content:center;min-height:42px;padding:7px 5px;font-size:11.5px} .lernstand-item-main>span:last-child>span{white-space:normal} } @media(max-width:520px){ .lernrad{width:min(86vw,296px)} .lernrad-label{font-size:15px} .lernrad-part small{font-size:9.8px} .lernrad-num{font-size:9.5px} .lernrad-center{width:92px} } .home-learning-orbit-v2{ min-height:0; grid-template-columns:minmax(0,1fr) minmax(260px,330px); gap:24px; padding:26px 30px; border-radius:26px; background: radial-gradient(circle at 82% 48%,color-mix(in srgb,var(--petrol-soft) 58%,transparent) 0 18%,transparent 46%), linear-gradient(145deg,var(--paper),color-mix(in srgb,var(--bg) 72%,var(--paper))); box-shadow:0 14px 36px -26px rgba(12,24,29,.5) } .home-learning-orbit-v2::before{display:none} .home-learning-orbit-v2 .home-learning-orbit-copy{gap:7px;max-width:560px} .home-learning-orbit-v2 .home-learning-orbit-copy h2{ font-size:clamp(28px,3.4vw,39px); line-height:1.07 } .home-learning-orbit-v2 .home-learning-orbit-copy>p:not(.eyebrow){ margin:0; font-size:15.5px; line-height:1.48 } .home-learning-orbit-v2 .lernrad-wrap{padding:8px 0} .home-learning-orbit-v2 .lernrad-glow{ width:min(100%,314px); filter:none; background: repeating-conic-gradient( from -1deg, color-mix(in srgb,var(--petrol) 30%,transparent) 0 1deg, transparent 1deg 15deg ); -webkit-mask:radial-gradient(circle,transparent 0 48%,#000 49% 50%,transparent 51%); mask:radial-gradient(circle,transparent 0 48%,#000 49% 50%,transparent 51%); opacity:.55 } .lernrad-v2{ width:min(100%,286px); gap:2px; border:5px solid color-mix(in srgb,var(--paper) 86%,var(--line)); background:color-mix(in srgb,var(--line) 68%,transparent); box-shadow:0 16px 38px -24px rgba(12,24,29,.55),0 0 0 1px color-mix(in srgb,var(--petrol) 14%,transparent) } .lernrad-v2 .lernrad-part{ padding:0; display:block; overflow:hidden } .lernrad-v2 .lernrad-part-1{ background:linear-gradient(145deg,color-mix(in srgb,var(--green-soft) 76%,var(--paper)),color-mix(in srgb,var(--green) 16%,var(--paper))) } .lernrad-v2 .lernrad-part-2{ background:linear-gradient(215deg,color-mix(in srgb,var(--paper) 86%,var(--ochre-soft)),var(--paper)) } .lernrad-v2 .lernrad-part-3{ background:linear-gradient(35deg,color-mix(in srgb,var(--paper) 88%,var(--coral-soft)),var(--paper)) } .lernrad-v2 .lernrad-part-4{ background:linear-gradient(325deg,color-mix(in srgb,var(--paper) 84%,var(--petrol-soft)),var(--paper)) } .lernrad-v2 .lernrad-part-1::after{ content:""; position:absolute; inset:10px; border-radius:999px 8px 8px 8px; border:1px solid color-mix(in srgb,var(--green) 40%,transparent); pointer-events:none } .lernrad-v2 .lernrad-num, .lernrad-v2 .lernrad-label, .lernrad-v2 .lernrad-start{ position:absolute; z-index:2 } .lernrad-v2 .lernrad-num{ font:700 10px/1 var(--body); letter-spacing:.15em; opacity:.6 } .lernrad-v2 .lernrad-label{ font:700 16px/1.05 var(--body); letter-spacing:-.015em; white-space:nowrap } .lernrad-v2 .lernrad-start{ display:inline-flex; align-items:center; justify-content:center; min-height:22px; padding:3px 7px; border-radius:999px; background:var(--green); color:var(--green-ink); font-size:9px; font-weight:800; letter-spacing:.11em } .lernrad-v2 .lernrad-part-1 .lernrad-num{left:25px;top:26px} .lernrad-v2 .lernrad-part-1 .lernrad-label{left:25px;top:49px} .lernrad-v2 .lernrad-part-1 .lernrad-start{left:25px;top:76px} .lernrad-v2 .lernrad-part-2 .lernrad-num{right:25px;top:26px} .lernrad-v2 .lernrad-part-2 .lernrad-label{right:25px;top:49px} .lernrad-v2 .lernrad-part-3 .lernrad-num{left:25px;bottom:53px} .lernrad-v2 .lernrad-part-3 .lernrad-label{left:25px;bottom:26px} .lernrad-v2 .lernrad-part-4 .lernrad-num{right:25px;bottom:53px} .lernrad-v2 .lernrad-part-4 .lernrad-label{right:25px;bottom:26px} .lernrad-v2 .lernrad-center{ width:88px; gap:3px; background:color-mix(in srgb,var(--paper) 94%,var(--bg)); border:2px solid color-mix(in srgb,var(--petrol) 30%,var(--line)); box-shadow:0 9px 24px -16px rgba(12,24,29,.75) } .lernrad-v2 .lernrad-center>span{ width:26px; height:26px; border-radius:9px } .lernrad-v2 .lernrad-center .icon{width:15px;height:15px} .lernrad-v2 .lernrad-center b{font-size:11.5px;line-height:1.05} .home-learning-orbit-v2 .lernrad-hint{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:8px; font-size:12px; letter-spacing:0; color:var(--ink-2) } .home-learning-orbit-v2 .lernrad-hint span{ width:22px;height:22px;display:grid;place-items:center;border-radius:50%; background:var(--green);color:var(--green-ink);font-weight:800 } .home-learning-orbit-v2 .lernrad-part-soon{opacity:.72} .home-learning-orbit-v2 .lernrad-part-soon:hover{opacity:.9} .home-learning-orbit-v2 .lernrad-part-ready:hover{ filter:brightness(1.04); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--green) 45%,transparent) } @media(max-width:860px){ .home-learning-orbit-v2{ grid-template-columns:1fr; gap:14px; padding:22px 22px 18px } .home-learning-orbit-v2 .home-learning-orbit-copy{ text-align:left; justify-items:start; margin:0 } .home-learning-orbit-v2 .lernrad-wrap{padding:2px 0 0} } @media(max-width:520px){ .home-learning-orbit-v2{ padding:18px 16px 16px; border-radius:22px } .home-learning-orbit-v2 .home-learning-orbit-copy{ gap:5px } .home-learning-orbit-v2 .home-learning-orbit-copy .eyebrow{ font-size:11px } .home-learning-orbit-v2 .home-learning-orbit-copy h2{ font-size:27px } .home-learning-orbit-v2 .home-learning-orbit-copy>p:not(.eyebrow){ font-size:14px; line-height:1.42 } .home-learning-orbit-v2 .lernrad{ width:min(76vw,272px); border-width:4px } .home-learning-orbit-v2 .lernrad-glow{ width:min(83vw,296px) } .lernrad-v2 .lernrad-label{font-size:14px} .lernrad-v2 .lernrad-num{font-size:9px} .lernrad-v2 .lernrad-part-1 .lernrad-num{left:21px;top:23px} .lernrad-v2 .lernrad-part-1 .lernrad-label{left:21px;top:43px} .lernrad-v2 .lernrad-part-1 .lernrad-start{left:21px;top:66px} .lernrad-v2 .lernrad-part-2 .lernrad-num{right:21px;top:23px} .lernrad-v2 .lernrad-part-2 .lernrad-label{right:21px;top:43px} .lernrad-v2 .lernrad-part-3 .lernrad-num{left:21px;bottom:47px} .lernrad-v2 .lernrad-part-3 .lernrad-label{left:21px;bottom:23px} .lernrad-v2 .lernrad-part-4 .lernrad-num{right:21px;bottom:47px} .lernrad-v2 .lernrad-part-4 .lernrad-label{right:21px;bottom:23px} .lernrad-v2 .lernrad-center{width:82px} .home-learning-orbit-v2 .lernrad-hint{margin-top:6px;font-size:11.5px} } .home-learning-orbit-v3{ display:block; min-height:0; padding:22px; border:1px solid color-mix(in srgb,var(--petrol) 28%,var(--line)); border-radius:24px; background: linear-gradient(145deg,color-mix(in srgb,var(--paper) 96%,var(--petrol-soft)),var(--paper)); box-shadow:0 12px 30px -24px rgba(12,24,29,.55); overflow:hidden } .home-learning-orbit-v3::before{display:none} .lernkompass-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; margin-bottom:18px } .lernkompass-head>div{min-width:0} .lernkompass-head .eyebrow{margin-bottom:5px} .lernkompass-head h2{ margin:0; font:400 clamp(28px,3.4vw,38px)/1.05 var(--display); letter-spacing:-.02em } .lernkompass-head p:not(.eyebrow){ margin:8px 0 0; max-width:680px; color:var(--ink-2); font-size:15px; line-height:1.45 } .lernkompass-step{ display:inline-grid; justify-items:start; align-items:center; min-height:34px; padding:6px 10px; border:1px solid color-mix(in srgb,var(--green) 35%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--green-soft) 62%,var(--paper)); color:var(--green); font-size:12px; font-weight:800; white-space:normal } .lernkompass-body{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:22px; align-items:center } .lernkompass-visual{ position:relative; display:grid; place-items:center; min-width:0 } .lernkompass-halo{ position:absolute; width:236px; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle,transparent 56%,color-mix(in srgb,var(--petrol) 11%,transparent) 57% 60%,transparent 61%), repeating-conic-gradient(from -1deg,color-mix(in srgb,var(--petrol) 25%,transparent) 0 1deg,transparent 1deg 15deg); opacity:.7; pointer-events:none } .lernkompass-dial{ position:relative; z-index:1; width:218px; aspect-ratio:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; overflow:hidden; border:4px solid color-mix(in srgb,var(--paper) 86%,var(--line)); border-radius:50%; background:var(--line); box-shadow: 0 16px 34px -24px rgba(12,24,29,.7), 0 0 0 1px color-mix(in srgb,var(--petrol) 16%,transparent) } .lernkompass-quarter{ position:relative; min-width:0; min-height:0; border:0; margin:0; padding:0; display:grid; place-items:center; cursor:pointer; color:var(--ink-2); transition:filter .18s ease,transform .18s ease,opacity .18s ease } .lernkompass-quarter:hover{filter:brightness(1.035)} .lernkompass-quarter:active{transform:scale(.98)} .lernkompass-quarter:focus-visible{ outline:3px solid var(--ink); outline-offset:-5px; z-index:3 } .lernkompass-quarter span{ font:400 34px/1 var(--display); opacity:.72; transform:translate(0,0) } .lernkompass-quarter.q1{ background: radial-gradient(circle at 78% 78%,color-mix(in srgb,var(--green) 18%,transparent),transparent 50%), color-mix(in srgb,var(--green-soft) 62%,var(--paper)); color:var(--green) } .lernkompass-quarter.q2{ background:color-mix(in srgb,var(--paper) 88%,var(--ochre-soft)) } .lernkompass-quarter.q3{ background:color-mix(in srgb,var(--paper) 90%,var(--coral-soft)) } .lernkompass-quarter.q4{ background:color-mix(in srgb,var(--paper) 84%,var(--petrol-soft)) } .lernkompass-quarter.q1::after{ content:""; position:absolute; inset:9px; border-radius:999px 8px 8px 8px; border:1px solid color-mix(in srgb,var(--green) 38%,transparent); pointer-events:none } .lernkompass-quarter.q1 span{font-weight:700;opacity:1} .lernkompass-quarter.q2, .lernkompass-quarter.q3, .lernkompass-quarter.q4{opacity:.74} .lernkompass-center{ position:absolute; left:50%; top:50%; z-index:4; width:72px; aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; align-content:center; gap:2px; border:2px solid color-mix(in srgb,var(--petrol) 30%,var(--line)); border-radius:50%; background:var(--paper); box-shadow:0 8px 20px -13px rgba(12,24,29,.7); pointer-events:none } .lernkompass-center>span{ width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:var(--petrol); color:var(--petrol-ink) } .lernkompass-center .icon{width:14px;height:14px} .lernkompass-center b{font-size:10.5px;line-height:1.02;text-align:center} .lernkompass-panel{ display:grid; gap:12px; min-width:0 } .lernkompass-steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px } .lernkompass-row{ min-width:0; min-height:62px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px 11px; border:1px solid var(--line); border-radius:15px; background:var(--bg); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease } .lernkompass-row:hover{border-color:var(--petrol);transform:translateY(-1px)} .lernkompass-row.active{ border-color:color-mix(in srgb,var(--green) 40%,var(--line)); background:color-mix(in srgb,var(--green-soft) 42%,var(--paper)) } .lernkompass-row-n{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--paper); border:1px solid var(--line); color:var(--ink-2); font-weight:800; font-size:13px } .lernkompass-row.active .lernkompass-row-n{ background:var(--green); border-color:var(--green); color:var(--green-ink) } .lernkompass-row>span:nth-child(2){ min-width:0; display:grid; gap:1px } .lernkompass-row b{ font-size:14px; line-height:1.1 } .lernkompass-row small{ color:var(--ink-3); font-size:11.5px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .lernkompass-ready{ display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; border-radius:999px; background:var(--green); color:var(--green-ink); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase } .lernkompass-cta{ justify-self:start; min-width:190px; justify-content:center } @media(max-width:760px){ .home-learning-orbit-v3{ padding:18px 16px 16px; border-radius:22px } .lernkompass-head{ grid-template-columns:1fr auto; gap:10px; margin-bottom:14px } .lernkompass-head h2{ font-size:27px } .lernkompass-head p:not(.eyebrow){ font-size:13.8px; line-height:1.4; margin-top:6px } .lernkompass-step{ min-height:30px; padding:5px 8px; font-size:10.5px } .lernkompass-body{ grid-template-columns:1fr; gap:14px } .lernkompass-halo{ width:226px } .lernkompass-dial{ width:208px } .lernkompass-quarter span{ font-size:30px } .lernkompass-center{ width:68px } .lernkompass-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px } .lernkompass-row{ min-height:56px; grid-template-columns:27px minmax(0,1fr); gap:8px; padding:9px } .lernkompass-row-n{ width:27px; height:27px; font-size:12px } .lernkompass-row b{font-size:13px} .lernkompass-row small{font-size:10.5px} .lernkompass-ready{ grid-column:1/-1; justify-self:start; margin-left:35px; margin-top:-3px } .lernkompass-cta{ width:100%; justify-self:stretch } } @media(max-width:430px){ .home-learning-orbit-v3{ padding:16px 14px 14px } .lernkompass-head{ display:block } .lernkompass-step{ margin-top:10px } .lernkompass-head h2{ font-size:25px } .lernkompass-head p:not(.eyebrow){ font-size:13.2px } .lernkompass-halo{ width:214px } .lernkompass-dial{ width:198px } .lernkompass-quarter span{ font-size:28px } .lernkompass-center{ width:64px } .lernkompass-center>span{ width:22px; height:22px } .lernkompass-steps{ gap:6px } .lernkompass-row{ min-height:53px; border-radius:13px; padding:8px; gap:7px } .lernkompass-row b{font-size:12.5px} .lernkompass-row small{font-size:10px} .lernkompass-ready{ margin-left:34px } } .learning-hub-v3{display:grid;gap:30px} .hub-find{display:grid;gap:12px} .hub-find-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px } .hub-find-card{ min-height:102px; display:grid; grid-template-columns:44px minmax(0,1fr) 18px; align-items:center; gap:12px; padding:15px 16px; border:1px solid var(--line); border-radius:17px; background:var(--paper); color:var(--ink); text-decoration:none } .hub-find-card:hover{border-color:var(--petrol);background:color-mix(in srgb,var(--petrol-soft) 30%,var(--paper))} .hub-find-card .tool-ico{width:44px;height:44px} .hub-find-card b{display:block;font-size:16.5px;line-height:1.2;margin-bottom:3px} .hub-find-card small{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.3} .hub-find-card>.icon:last-child{width:17px;color:var(--ink-3)} .hub-jump-v3{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:thin } .hub-jump-v3 a{ min-height:46px; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink-2); text-decoration:none; font-weight:700 } .hub-jump-v3 a:hover{border-color:var(--petrol);color:var(--petrol)} .hub-jump-v3 .icon{width:18px;height:18px} .hub-visible-worlds{display:grid;gap:30px} .hub-visible-section{scroll-margin-top:calc(var(--topbar) + 18px)} .hub-visible-head{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:14px; align-items:center; margin-bottom:13px } .hub-visible-icon{ width:48px;height:48px;display:grid;place-items:center;border-radius:15px; background:var(--petrol-soft);color:var(--petrol) } .hub-visible-icon .icon{width:24px;height:24px} .hub-visible-head h2{margin:0 0 3px;font:400 27px/1.15 var(--display)} .hub-visible-head p{margin:0;color:var(--ink-2);line-height:1.4} .hub-visible-count{ align-self:start;padding:6px 10px;border-radius:999px;background:var(--bg); color:var(--ink-3);font-size:12.5px;font-weight:700 } .hub-grid-visible{grid-template-columns:repeat(3,minmax(0,1fr))} .learning-hub-v3 .hub-card{min-height:100px} @media(max-width:980px){ .hub-find-grid,.hub-grid-visible{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:650px){ .hub-find-grid,.hub-grid-visible{grid-template-columns:1fr} .hub-visible-head{grid-template-columns:42px minmax(0,1fr)} .hub-visible-count{grid-column:2;justify-self:start} .hub-visible-icon{width:42px;height:42px;border-radius:13px} .hub-visible-head h2{font-size:23px} .hub-find-card{min-height:84px} } .btn,.icon-btn,.menu-btn,.sb-close,.sb-logout{min-height:44px} @media(max-width:720px){ .btn{min-height:46px} } @media(min-width:821px){ .home-dashboard-v3 .home-main-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } .lernkompass-quarter.q1, .lernkompass-quarter.q2, .lernkompass-quarter.q3, .lernkompass-quarter.q4{opacity:.82} .lernkompass-quarter.is-current{ opacity:1; filter:saturate(1.08); box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--petrol) 34%,transparent) } .lernkompass-quarter.is-current span{font-weight:700;opacity:1} .lernstand-optional{ border:1px solid var(--line); border-radius:22px; background:var(--paper); overflow:hidden } .lernstand-optional>summary{ min-height:84px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:18px 20px; cursor:pointer; list-style:none } .lernstand-optional>summary::-webkit-details-marker{display:none} .lernstand-optional>summary>span:first-child{display:grid;gap:4px} .lernstand-optional>summary b{font-size:17px} .lernstand-optional>summary small{color:var(--ink-2);font-size:13.5px;line-height:1.4} .lernstand-optional>summary>span:last-child{ padding:6px 10px;border-radius:999px;background:var(--bg);color:var(--ink-3);font-size:12px;font-weight:800 } .lernstand-optional[open]>summary{border-bottom:1px solid var(--line)} .lernstand-optional-body{display:grid;gap:14px;padding:16px} .lernweg-next-strip{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; padding:22px 24px; border-color:color-mix(in srgb,var(--petrol) 28%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--petrol-soft) 48%,var(--paper)),var(--paper)) } .lernweg-next-strip h2{margin:2px 0 5px;font:400 25px/1.15 var(--display)} .lernweg-next-strip p:not(.eyebrow){margin:0;color:var(--ink-2)} .lernplan-layout{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr); gap:18px; align-items:start } .lernplan-main{display:grid;gap:12px} .lernplan-settings{ position:sticky; top:calc(var(--topbar) + 18px); display:grid; gap:15px; padding:22px } .lernplan-settings h2{margin:0;font:400 27px/1.12 var(--display)} .lernplan-settings .field{margin:0} .lernplan-settings select{ width:100%; min-height:46px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); padding:10px 12px; font:inherit } .lernplan-exams{display:grid;gap:8px} .lernplan-exam-row{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px 10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:13px; background:var(--bg) } .lernplan-exam-row>span:nth-child(2){display:grid;gap:2px} .lernplan-exam-row b{font-size:13px} .lernplan-exam-row small{color:var(--ink-3);font-size:11px;line-height:1.25} .lernplan-exam-row input{ grid-column:2; min-width:0; min-height:42px; width:100%; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); padding:8px 10px; font:inherit } .lernweg-cards{display:grid;gap:10px} .lernweg-card{ display:grid; grid-template-columns:34px 48px minmax(0,1fr) auto; gap:12px; align-items:center; padding:15px 16px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 2px 8px rgba(18,48,58,.04) } .lernweg-card.done{ border-color:color-mix(in srgb,var(--green) 32%,var(--line)); background:color-mix(in srgb,var(--green-soft) 22%,var(--paper)) } .lernweg-card-n{ width:30px;height:30px;display:grid;place-items:center;border-radius:50%; background:var(--bg);color:var(--ink-3);font-size:12px;font-weight:800 } .lernweg-card-icon{ width:46px;height:46px;display:grid;place-items:center;border-radius:14px; background:var(--petrol-soft);color:var(--petrol) } .lernweg-card-icon .icon{width:23px;height:23px} .lernweg-card>div{min-width:0} .lernweg-card small{display:block;color:var(--ink-3);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.035em} .lernweg-card h3{margin:3px 0 4px;font-size:17px;line-height:1.2} .lernweg-card p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.38} .lernweg-card-actions{display:grid;gap:7px;justify-items:stretch} .lernweg-done-note{ display:inline-flex;align-items:center;gap:5px;margin-top:7px;color:var(--green);font-size:12px;font-weight:800 } .lernweg-done-note .icon{width:15px;height:15px} .lernplan-actions{ display:flex;flex-wrap:wrap;gap:9px;margin-top:14px } .lernweg-practice{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px } .lernweg-practice h2{margin:2px 0 6px;font:400 25px/1.15 var(--display)} .lernweg-practice p:not(.eyebrow){margin:0;color:var(--ink-2)} .lernfortschritt-split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px } .lernfortschritt-split>.card{display:grid;align-content:start;gap:12px;padding:22px} .lernfortschritt-split h2{margin:0;font:400 27px/1.15 var(--display)} .lernfortschritt-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px } .lernfortschritt-metrics>div{ min-height:82px;display:grid;place-items:center;align-content:center;gap:4px; padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg) } .lernfortschritt-metrics b{font:400 28px/1 var(--display);color:var(--petrol)} .lernfortschritt-metrics span{font-size:11.5px;font-weight:700;color:var(--ink-2);text-align:center} .lernfortschritt-history{display:grid;gap:12px;padding:22px} .lernfortschritt-list{display:grid;gap:7px} .lernfortschritt-list a{ min-height:58px; display:grid; grid-template-columns:34px minmax(0,1fr) 18px; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:13px; color:var(--ink); text-decoration:none } .lernfortschritt-list a:hover{border-color:var(--petrol);background:var(--bg)} .lernfortschritt-list a>span:first-child{ width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--green-soft);color:var(--green) } .lernfortschritt-list a>span:nth-child(2){display:grid;gap:2px} .lernfortschritt-list small{color:var(--ink-3)} @media(max-width:900px){ .lernplan-layout{grid-template-columns:1fr} .lernplan-settings{position:static} } @media(max-width:720px){ .lernweg-next-strip,.lernweg-practice{grid-template-columns:1fr} .lernweg-next-strip>.btn,.lernweg-practice>.btn{width:100%;justify-content:center} .lernfortschritt-split{grid-template-columns:1fr} .lernweg-card{grid-template-columns:30px 42px minmax(0,1fr)} .lernweg-card>.btn,.lernweg-card-actions{grid-column:2/-1;width:100%} .lernweg-card-actions .btn{width:100%;justify-content:center} } @media(max-width:520px){ .lernstand-optional>summary{grid-template-columns:1fr;padding:15px} .lernstand-optional>summary>span:last-child{justify-self:start} .lernweg-card{grid-template-columns:28px minmax(0,1fr)} .lernweg-card-icon{display:none} .lernweg-card>div{grid-column:2} .lernweg-card>.btn,.lernweg-card-actions{grid-column:2} .lernplan-exam-row{grid-template-columns:24px minmax(0,1fr)} } .sim-history{display:grid;gap:12px;margin-top:18px;padding:20px} .sim-history-list{display:grid;gap:7px} .sim-history-list button{ width:100%; min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) 18px; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer } .sim-history-list button:hover{border-color:var(--petrol);background:var(--bg)} .sim-history-list button>span{display:grid;gap:2px} .sim-history-list small{color:var(--ink-3);font-size:12px} .sim-history-list .icon{width:17px;color:var(--ink-3)} @media(min-width:980px){ .lernfortschritt-split{grid-template-columns:repeat(3,minmax(0,1fr))} } [data-language-locked="1"]{ opacity:.64; border-style:dashed !important } .lang-menu [data-language-locked="1"] .ld, .sb-lang-chips [data-language-locked="1"]{ color:var(--ink-3) } .lang-offer.language-locked{ border-style:dashed; background:color-mix(in srgb,var(--paper) 90%,var(--bg)); box-shadow:none } .lang-offer.language-locked .go{color:var(--ink-3)} .lang-offer.language-locked:hover{border-color:var(--line);transform:none} .nm-ui-translation{ display:block; margin-top:.16em; font-size:.88em; line-height:1.45; font-weight:500; opacity:.82; color:inherit; unicode-bidi:plaintext; text-wrap:pretty; } .nm-ui-translation[dir="rtl"]{ direction:rtl; text-align:right; } .lernkompass-step>.nm-ui-translation{ margin-top:2px; font-size:.86em; line-height:1.25; } h1>.nm-ui-translation,h2>.nm-ui-translation,h3>.nm-ui-translation{ font-size:.62em; line-height:1.35; font-weight:600; margin-top:.22em; } button .nm-ui-translation,a .nm-ui-translation{ font-size:.8em; line-height:1.35; } .eyebrow>.nm-ui-translation{ font-size:.92em; } .onb-language-choice{ margin:18px 0 22px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); } .onb-language-choice h2{ margin:3px 0 5px; font-size:1.2rem; } .onb-language-choice>p:not(.eyebrow){ margin:0 0 14px; } .onb-language-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .onb-language-grid button{ min-height:62px; padding:10px 11px; border:1px solid var(--line); border-radius:13px; background:var(--card); color:var(--text); text-align:left; cursor:pointer; } .onb-language-grid button b, .onb-language-grid button span{ display:block; } .onb-language-grid button span{ margin-top:3px; font-size:.88rem; opacity:.78; } .onb-language-grid button[aria-pressed="true"]{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent); } .onb-language-grid button.is-ready b::after{ content:" · jetzt"; font-weight:600; font-size:.74em; opacity:.7; } .onb-language-note{ margin:12px 0 0!important; font-size:.86rem; opacity:.76; } @media (max-width:700px){ .onb-language-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .onb-language-choice{padding:14px} } .topbar-lang{ display:inline-flex; align-items:center; gap:6px; min-width:0; padding:4px 6px 4px 9px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:.76rem; font-weight:700; white-space:nowrap; } .topbar-lang>span[aria-hidden="true"]{opacity:.72} .topbar-lang select{ max-width:190px; min-width:0; min-height:32px; padding:5px 2px; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-weight:700; cursor:pointer; } @media (max-width:820px){ .topbar-lang{padding:4px 5px} .topbar-lang>span[aria-hidden="true"]{display:none} .topbar-lang select{max-width:126px;font-size:.72rem} } @media (max-width:520px){ .topbar-lang select{max-width:92px} } .auth-shell::before{opacity:.34} .auth-main{padding-top:8px} .onb-card{max-width:760px;padding:26px 28px;gap:18px} .onb-welcome{align-items:flex-start} .onb-welcome h1{font-size:clamp(30px,5vw,38px)} .onb-welcome .lead{font-size:16px;line-height:1.5;max-width:660px} .onb-first-choice{margin-top:2px} .onb-paths{gap:10px} .onb-paths button{min-height:84px;border-radius:16px} .onb-trust{margin:2px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.45} .onb-quiet-action{display:flex;justify-content:flex-start} .onb-language-choice{margin:2px 0 6px;padding:0;border:0;background:transparent;border-radius:0} .onb-language-choice>p:not(.eyebrow){margin-bottom:12px} .onb-language-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .onb-language-grid button{min-height:58px;background:var(--paper)} .onb-nav{display:flex;justify-content:space-between;gap:10px;align-items:center} .onb-nav .btn{min-width:132px} .login-card{max-width:680px;padding:28px;gap:16px} .login-card .stack{gap:7px!important} .login-card .stack h1{font-size:clamp(30px,5vw,38px)} .login-card .lead{font-size:16px;line-height:1.5} .login-current-role{background:var(--bg-2);border:1px solid var(--line)} .login-card .auth-actions{grid-template-columns:minmax(0,1fr)} .login-card .auth-actions .btn{min-height:50px} .login-secondary{display:grid;gap:8px;padding-top:2px;color:var(--ink-2);font-size:14px} .login-secondary>b{color:var(--ink);font-size:14px} .login-preview-links{display:flex;flex-wrap:wrap;gap:8px 16px} .login-preview-links a{font-weight:700;text-decoration:none;color:var(--petrol)} .login-preview-links a:hover{text-decoration:underline} .login-preview-links a+a::before{content:"·";margin-right:16px;color:var(--ink-3);font-weight:400} .login-card .auth-note{margin-top:0} .lernwelt-focus-first{gap:22px} .lernwelt-hero-compact{ min-height:0; padding:24px 26px; border-radius:22px; grid-template-columns:minmax(0,1fr) 90px; } .lernwelt-hero-compact h1{font-size:clamp(29px,4vw,40px);margin-bottom:7px} .lernwelt-hero-compact p:not(.eyebrow){max-width:760px} .lernwelt-hero-compact .lernwelt-orb{width:78px;height:78px} .lernwelt-today{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; padding:24px 26px; border-radius:22px; border:1px solid color-mix(in srgb,var(--petrol) 38%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--petrol-soft) 70%,var(--paper)),var(--paper)); box-shadow:var(--shadow); } .lernwelt-today h2{margin:3px 0 7px;font:400 clamp(25px,3vw,34px)/1.15 var(--display)} .lernwelt-today h2 span{font:700 14px/1.3 var(--body);color:var(--ink-3);white-space:nowrap} .lernwelt-today p:not(.eyebrow){margin:0;max-width:720px;color:var(--ink-2)} .lernwelt-today-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .lernwelt-mini-list{display:grid;gap:8px} .lernwelt-mini-list>a{ min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; } .lernwelt-mini-list>a:first-child{border-top:1px solid var(--line)} .lernwelt-mini-list>a:hover{background:color-mix(in srgb,var(--petrol-soft) 38%,transparent)} .lernwelt-mini-list>a>span:first-child{display:grid;gap:2px} .lernwelt-mini-list small{color:var(--ink-3);font-size:12px} .lernwelt-mini-list>a>span:last-child{display:inline-flex;align-items:center;gap:5px;color:var(--petrol);font-weight:800;font-size:13px} .lernwelt-mini-list .icon{width:15px;height:15px} .lernwelt-all{display:grid;gap:10px} .lernwelt-library-link{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; padding:20px 0 2px; border-top:1px solid var(--line); } .lernwelt-library-link h2{margin:2px 0 5px;font:400 25px/1.15 var(--display)} .lernwelt-library-link p:not(.eyebrow){margin:0;color:var(--ink-2)} .lernweg-card{box-shadow:none} .lernweg-card-actions{grid-template-columns:repeat(2,minmax(0,1fr));min-width:190px} .lernweg-card-actions .btn{justify-content:center} @media(max-width:760px){ .onb-card,.login-card{padding:22px 18px;border-radius:22px} .onb-language-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .login-preview-links{display:grid;gap:8px} .login-preview-links a+a::before{content:none} .lernwelt-hero-compact{grid-template-columns:1fr;padding:20px} .lernwelt-hero-compact .lernwelt-orb{display:none} .lernwelt-today,.lernwelt-library-link{grid-template-columns:1fr;padding:20px} .lernwelt-today-actions{justify-content:stretch} .lernwelt-today-actions .btn,.lernwelt-library-link .btn{width:100%;justify-content:center} .lernwelt-mini-list>a{grid-template-columns:1fr;gap:6px} .lernweg-card-actions{grid-template-columns:1fr;min-width:0} } @media(max-width:520px){ .auth-top{padding:16px 14px} .auth-main{padding:6px 12px 28px} .onb-card,.login-card{padding:20px 15px} .onb-paths button{min-height:76px} .onb-language-grid{grid-template-columns:1fr 1fr;gap:7px} .onb-language-grid button{min-height:54px;padding:9px} .lernwelt-focus-first{gap:18px} .lernwelt-today{padding:18px 16px} .lernwelt-today h2 span{display:block;margin-top:5px;white-space:normal} } .onb-landing{margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--line)} .onb-landing h2{margin:4px 0 8px;font-size:clamp(1.35rem,4.6vw,1.75rem);line-height:1.2} .onb-landing>p{margin:0 0 14px;color:var(--ink-2)} .onb-benefits{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px} .onb-benefits li{display:flex;gap:10px;align-items:flex-start;line-height:1.45} .onb-benefits li svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--petrol)} .onb-try{min-height:52px;font-size:1.05rem} .onb-examples-title{margin:16px 0 8px;font-size:14px;color:var(--ink-3)} .onb-examples{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .onb-examples a{display:flex;gap:8px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--petrol-soft);color:inherit;text-decoration:none;min-width:0} .onb-examples a span{overflow-wrap:anywhere} .onb-examples a svg{flex:0 0 auto;width:18px;height:18px;color:var(--petrol)} .onb-examples a:hover,.onb-examples a:focus-visible{border-color:var(--petrol)} .de-only-hint{display:flex;flex-direction:column;gap:2px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--petrol);border-radius:10px;background:var(--petrol-soft);font-size:14.5px;line-height:1.45} .de-only-hint .de-only-de{color:var(--ink-3);font-size:13px} .home-dashboard-compact{gap:18px} .home-dashboard-compact .home-header{padding-bottom:14px} .home-next-step{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px} .home-next-step h2{margin:2px 0 5px;font:400 24px/1.15 var(--display)} .home-next-step p:not(.eyebrow){margin:0;color:var(--ink-2)} .home-main-actions{gap:8px} .home-dashboard-compact .home-main-card{min-height:96px;padding:15px 16px} .home-dashboard-compact .home-main-card b{font-size:18px} .home-dashboard-compact .home-main-card small{font-size:13.5px} .home-plan-strip{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:12px;padding:14px 16px} .home-plan-strip>div{display:grid;gap:2px}.home-plan-strip b{font-size:16px;line-height:1.25}.home-plan-strip small{color:var(--ink-3)} .home-plan-strip>a{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--petrol-soft);color:var(--petrol)} .home-compact-tools{display:grid;gap:10px} .home-compact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .home-compact-grid>a{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:9px;min-height:68px;padding:10px 12px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);text-decoration:none} .home-compact-grid>a>.icon{width:21px;color:var(--petrol)}.home-compact-grid a span{display:grid;gap:1px}.home-compact-grid b{font-size:14.5px;line-height:1.2}.home-compact-grid small{font-size:12px;color:var(--ink-3)} .home-today-strip{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--petrol-soft) 28%,var(--paper));color:var(--ink);text-decoration:none} .home-today-strip>span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--petrol-soft);color:var(--petrol)} .home-today-strip>span:nth-child(2){display:grid;gap:1px}.home-today-strip small{color:var(--ink-3)}.home-today-strip b{font-size:15px} .home-beginner-link{margin:0;color:var(--ink-2);font-size:14px} .home-more-details,.hub-secondary-details,.language-ui-picker,.language-help,.exam-details,.sb-deepdives{border:1px solid var(--line);border-radius:17px;background:var(--paper);overflow:hidden} .home-more-details>summary,.hub-secondary-details>summary,.language-ui-picker>summary,.language-help>summary,.exam-details>summary,.sb-deepdives>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px} .home-more-details>summary::-webkit-details-marker,.hub-secondary-details>summary::-webkit-details-marker,.language-ui-picker>summary::-webkit-details-marker,.language-help>summary::-webkit-details-marker,.exam-details>summary::-webkit-details-marker,.sb-deepdives>summary::-webkit-details-marker{display:none} .home-more-details-body,.hub-secondary-body,.language-ui-picker-body,.language-help>div,.exam-details-body{padding:0 14px 14px;display:grid;gap:14px} @media(max-width:720px){.topbar .color-toggle{display:none!important}.topbar .topbar-lang{display:flex!important;min-width:0}.topbar-inner{padding-inline:12px;gap:8px}.page{padding-inline:14px;padding-top:20px}} .learning-hub-compact{gap:18px}.learning-hub-compact .page-head{margin-bottom:8px}.hub-accordion-list{gap:9px} .hub-accordion{border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden} .hub-accordion>summary{list-style:none;display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;align-items:center;gap:12px;padding:14px 15px;cursor:pointer} .hub-accordion>summary::-webkit-details-marker{display:none}.hub-accordion-copy{display:grid;gap:2px;min-width:0}.hub-accordion-copy b{font-size:17px;line-height:1.2}.hub-accordion-copy small{font-size:13px;color:var(--ink-2);line-height:1.3} .hub-accordion[open]>summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--petrol-soft) 24%,var(--paper))} .hub-accordion>summary>.icon:last-child{transition:transform .18s ease}.hub-accordion[open]>summary>.icon:last-child{transform:rotate(180deg)}.hub-accordion-body{padding:10px} .sb-world-panels-compact{margin-top:12px;gap:8px}.sb-world-panels-compact .sb-world-panel{box-shadow:none}.sb-world-panels-compact .sb-world-panel>summary{padding:14px 15px} .sb-deepdives{margin-top:10px}.sb-deepdives>summary>span{display:grid;gap:2px}.sb-deepdives>summary small{color:var(--ink-2);font-weight:400}.sb-deepdives>.sb-grid{padding:10px} .sb-lang{padding:0!important;background:var(--paper)!important}.sb-lang>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:10px;padding:13px 15px;cursor:pointer}.sb-lang>summary::-webkit-details-marker{display:none} .sb-lang>summary>span:first-child{display:flex;align-items:center;gap:10px}.sb-lang>summary>span:first-child>.icon{width:20px;color:var(--petrol)}.sb-lang>summary span span{display:grid;gap:1px}.sb-lang>summary small{font-size:12px;color:var(--ink-3);font-weight:400} .sb-lang[open]>summary{border-bottom:1px solid var(--line)}.sb-lang-body{padding:12px 14px 14px;display:grid;gap:10px}.sb-lang-status{margin:0;color:var(--ink-2);font-size:13.5px} .language-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px}.language-summary h2{margin:2px 0 4px;font-size:21px}.language-summary p:not(.eyebrow){margin:0;color:var(--ink-2)} .language-ui-picker{margin-top:12px}.language-ui-picker>summary span{color:var(--petrol);font-weight:700}.lang-offers-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px} .lang-offers-compact .lang-offer{grid-template-columns:minmax(62px,auto) minmax(0,1fr) 30px;min-height:76px;padding:11px 12px;border-radius:15px;box-shadow:none}.lang-offers-compact .lang-offer-code{font-size:14px}.lang-offers-compact .lang-offer b{font-size:14.5px}.lang-offers-compact .lang-offer .s{font-size:12px} .exam-band-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.exam-band-grid .gd-feature{margin:0!important;min-height:150px;align-content:start}.exam-details{margin-top:12px}.exam-details-body>.bk-cards{margin-top:0} @media(max-width:820px){.home-next-step{grid-template-columns:1fr}.home-next-step .btn{width:100%;justify-content:center}.home-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exam-band-grid{grid-template-columns:1fr}.exam-band-grid .gd-feature{min-height:0}} @media(max-width:560px){.home-dashboard-compact{gap:14px}.home-dashboard-compact .home-header{display:grid;gap:8px}.home-dashboard-compact .home-header h1{font-size:32px;margin-bottom:4px}.home-next-step{padding:15px}.home-next-step h2{font-size:21px}.home-dashboard-compact .home-main-grid{gap:7px}.home-dashboard-compact .home-main-card{min-height:82px;padding:12px 13px;grid-template-columns:42px minmax(0,1fr) 16px;gap:10px}.home-dashboard-compact .home-main-icon{width:42px;height:42px;border-radius:12px}.home-dashboard-compact .home-main-card b{font-size:16.5px}.home-dashboard-compact .home-main-card small{font-size:12.5px}.home-compact-grid{grid-template-columns:1fr 1fr}.home-compact-grid>a{min-height:62px;padding:9px}.hub-find-grid{grid-template-columns:1fr 1fr}.hub-find-card{min-height:76px;grid-template-columns:36px minmax(0,1fr) 14px;padding:10px}.hub-find-card .tool-ico{width:36px;height:36px}.hub-find-card small{display:none}.hub-accordion>summary{grid-template-columns:40px minmax(0,1fr) auto;padding:12px}.hub-accordion>summary>.icon:last-child{display:none}.hub-accordion-copy small{display:none}.hub-grid-visible{grid-template-columns:1fr}.language-summary{grid-template-columns:1fr}.lang-offers-compact{grid-template-columns:repeat(2,minmax(0,1fr))}.lang-offers-compact .lang-offer{grid-template-columns:1fr auto;gap:4px 8px;align-content:center}.lang-offers-compact .lang-offer-code{grid-column:1/3}.lang-offers-compact .lang-offer .s{font-size:11px}.sb-world-panel-copy small{display:none}}


/* Kompetenzbereiche: zuerst konkreter Lernstoff, danach Prüfungsrahmen. */
.kb-learn-flow{display:flex;flex-direction:column}
.kb-learn-flow #kb-lernstoff{order:1}
.kb-learn-flow .ce-kb-topics{order:2}
.kb-learn-flow #kb-krank{order:3}
.kb-learn-flow #kb-kompetenzen{order:4}

/* B4: Lange Krankheitsbild-Titel dürfen auf schmalen Geräten nie den Root-Viewport verbreitern.
   text-wrap:balance kann bei sehr langen deutschen Komposita eine zu große intrinsische Breite erzeugen. */
@media (max-width: 720px) {
  .article .d-title {
    max-width: 100%;
    text-wrap: wrap;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}


.legal-consent-scroll{min-height:0;overflow:auto;padding:20px;display:grid;gap:14px}.legal-consent-footer{padding:16px 20px;display:grid;gap:10px;border-top:1px solid var(--line)}.legal-consent-links>div{display:flex;flex-wrap:wrap;gap:8px}.legal-consent-dialog .legal-preview-row select{min-width:0;max-width:158px}.onb-scope{margin:16px 0}.onb-scope summary{cursor:pointer;font-weight:700;color:var(--petrol)}.article .d-title,.public-disease-preview .d-title{overflow-wrap:anywhere}