/* Selbst gehostete Webfonts */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/826e9975-0860-4f51-a03e-0dbaa9cb651e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/70f9c933-0ce7-4a89-a54e-93fa80dc1067.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/c7eb5faf-d6a8-4077-a8f2-985a74daa292.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/2ab85612-8c11-482b-9667-09890af32f78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/45f04b2d-4eaf-4105-b10a-fd59305a2543.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/54aca13b-ccec-4d49-9e17-0addab37a742.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/826e9975-0860-4f51-a03e-0dbaa9cb651e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/70f9c933-0ce7-4a89-a54e-93fa80dc1067.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/c7eb5faf-d6a8-4077-a8f2-985a74daa292.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/2ab85612-8c11-482b-9667-09890af32f78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/45f04b2d-4eaf-4105-b10a-fd59305a2543.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/54aca13b-ccec-4d49-9e17-0addab37a742.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/826e9975-0860-4f51-a03e-0dbaa9cb651e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/70f9c933-0ce7-4a89-a54e-93fa80dc1067.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/c7eb5faf-d6a8-4077-a8f2-985a74daa292.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/2ab85612-8c11-482b-9667-09890af32f78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/45f04b2d-4eaf-4105-b10a-fd59305a2543.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/54aca13b-ccec-4d49-9e17-0addab37a742.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/826e9975-0860-4f51-a03e-0dbaa9cb651e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/70f9c933-0ce7-4a89-a54e-93fa80dc1067.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/c7eb5faf-d6a8-4077-a8f2-985a74daa292.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/2ab85612-8c11-482b-9667-09890af32f78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/45f04b2d-4eaf-4105-b10a-fd59305a2543.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/54aca13b-ccec-4d49-9e17-0addab37a742.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/826e9975-0860-4f51-a03e-0dbaa9cb651e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/70f9c933-0ce7-4a89-a54e-93fa80dc1067.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/c7eb5faf-d6a8-4077-a8f2-985a74daa292.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/2ab85612-8c11-482b-9667-09890af32f78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/45f04b2d-4eaf-4105-b10a-fd59305a2543.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/54aca13b-ccec-4d49-9e17-0addab37a742.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/826e9975-0860-4f51-a03e-0dbaa9cb651e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/70f9c933-0ce7-4a89-a54e-93fa80dc1067.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/c7eb5faf-d6a8-4077-a8f2-985a74daa292.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/2ab85612-8c11-482b-9667-09890af32f78.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/45f04b2d-4eaf-4105-b10a-fd59305a2543.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/54aca13b-ccec-4d49-9e17-0addab37a742.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/a66a83ab-c56b-44bd-89c9-e02d4747e81e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/62686f7b-5873-4e62-99ea-7c724c610a4a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Seiten-Styles (aus dem Artifact gerendert) */
.sc-placeholder{background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:rgba(0,0,0,.7);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:rgba(0,0,0,.5);background:rgba(0,0,0,.05);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }

x-dc{display:none!important}

html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

/* Finanz Cockpit — Webfonts
 * Primary UI/display: Schibsted Grotesk (neutral editorial grotesque)
 * Numeric / tabular / mono: Geist Mono
 * Hosted via Google Fonts. To self-host, replace with local @font-face + .woff2 in assets/fonts/.
 */
/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* Finanz Cockpit — Color tokens
 * Swiss/editorial neutral palette, signal-green accent, full light + dark theming.
 * Base values live in :root (light). Dark theme via [data-theme="dark"] (and prefers-color-scheme fallback).
 * Semantic aliases reference base scales so consumers theme one layer.
 */

:root {
  /* ---- Base neutral scale (cool, near-neutral grey) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f6;
  --neutral-100: #eef0ef;
  --neutral-150: #e4e6e4;
  --neutral-200: #d6d9d7;
  --neutral-300: #b9bdba;
  --neutral-400: #929895;
  --neutral-500: #6e746f;
  --neutral-600: #565b57;
  --neutral-700: #3d423f;
  --neutral-800: #262a28;
  --neutral-900: #15201c;
  --neutral-950: #0b0d0c;

  /* ---- Signal green (accent / positive) ---- */
  --green-50:  #e6f8ef;
  --green-100: #c4eed8;
  --green-200: #8fdfb4;
  --green-300: #54cd8d;
  --green-400: #25bb70;
  --green-500: #12b76a;  /* core accent */
  --green-600: #0e9e5b;
  --green-700: #0b7e48;
  --green-800: #0a5e37;
  --green-900: #084026;

  /* ---- Loss red ---- */
  --red-50:  #fdecec;
  --red-100: #f9d2d3;
  --red-300: #f08a8d;
  --red-500: #e5484d;
  --red-600: #cf3236;
  --red-700: #a82327;

  /* ---- Warning amber ---- */
  --amber-100: #fbeccb;
  --amber-500: #f2a93b;
  --amber-600: #d98e1d;

  /* ---- Info blue ---- */
  --blue-100: #d8e3fb;
  --blue-500: #3b6fe0;
  --blue-600: #2b58c4;

  /* ---- Data-viz categorical (works in both themes) ---- */
  --chart-1: #12b76a;  /* green */
  --chart-2: #3b6fe0;  /* blue */
  --chart-3: #c79a3f;  /* gold */
  --chart-4: #8a6fe0;  /* violet */
  --chart-5: #1fa6a6;  /* teal */
  --chart-6: #e5484d;  /* red */
  --chart-7: #5b6770;  /* slate */
  --chart-8: #de7a3a;  /* orange */
}

/* ============ Semantic aliases — LIGHT (default + explicit [data-theme="light"]) ============ */
:root, [data-theme="light"] {
  color-scheme: light;

  --bg:            var(--neutral-50);
  --surface:       var(--neutral-0);
  --surface-2:     var(--neutral-50);
  --surface-sunken:var(--neutral-100);
  --surface-inverse: var(--neutral-950);

  --text-1: var(--neutral-950);   /* primary */
  --text-2: var(--neutral-600);   /* secondary */
  --text-3: var(--neutral-500);   /* muted / labels */
  --text-inverse: var(--neutral-0);
  --text-on-accent: #ffffff;

  --line:        var(--neutral-150);  /* hairline borders */
  --line-2:      var(--neutral-200);  /* stronger divider */
  --line-strong: var(--neutral-950);  /* editorial 1px black rule */

  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-active: var(--green-700);
  --accent-weak:   var(--green-50);
  --accent-text:   var(--green-700);

  --pos:        var(--green-600);
  --pos-weak:   var(--green-50);
  --neg:        var(--red-600);
  --neg-weak:   var(--red-50);
  --warn:       var(--amber-600);
  --warn-weak:  var(--amber-100);
  --info:       var(--blue-600);
  --info-weak:  var(--blue-100);

  --focus-ring: var(--green-500);
  --overlay:    rgba(11, 13, 12, 0.45);
}

/* ============ Semantic aliases — DARK ============ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--neutral-950);
  --surface:       #121514;
  --surface-2:     #171a19;
  --surface-sunken: #0e100f;
  --surface-inverse: var(--neutral-50);

  --text-1: #f4f5f3;
  --text-2: #a7ada9;
  --text-3: #767c77;
  --text-inverse: var(--neutral-950);
  --text-on-accent: #04150c;

  --line:        #232624;
  --line-2:      #2e322f;
  --line-strong: #f4f5f3;

  --accent:        var(--green-400);
  --accent-hover:  var(--green-300);
  --accent-active: var(--green-200);
  --accent-weak:   rgba(18, 183, 106, 0.14);
  --accent-text:   var(--green-300);

  --pos:        var(--green-400);
  --pos-weak:   rgba(18, 183, 106, 0.14);
  --neg:        #f0696d;
  --neg-weak:   rgba(229, 72, 77, 0.16);
  --warn:       var(--amber-500);
  --warn-weak:  rgba(242, 169, 59, 0.16);
  --info:       #6f97ec;
  --info-weak:  rgba(59, 111, 224, 0.18);

  --focus-ring: var(--green-400);
  --overlay:    rgba(0, 0, 0, 0.6);
}

/* Finanz Cockpit — Typography tokens
 * Schibsted Grotesk for everything UI/display; Geist Mono for tabular numerals & tickers.
 * Tabular figures are enabled on numeric contexts via --num-features.
 */

:root {
  /* Families */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-display: var(--font-sans);

  /* Feature settings */
  --num-features: "tnum" 1, "lnum" 1; /* @kind font */

  /* Weights */
  --w-regular: 400;   /* @kind font */
  --w-medium: 500;    /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold: 700;      /* @kind font */
  --w-black: 800;     /* @kind font */

  /* Type scale (px). Editorial: large confident display, tight tracking. */
  --text-display: 56px;
  --text-h1: 38px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-h4: 16px;
  --text-body: 15px;
  --text-sm: 13px;
  --text-xs: 11px;     /* eyebrow / overline labels */

  /* Metric numerals — for KPI / balance displays */
  --text-metric-xl: 44px;
  --text-metric-lg: 32px;
  --text-metric-md: 22px;

  /* Line heights */
  --lh-tight: 1.02;    /* @kind font */
  --lh-snug: 1.12;     /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-relaxed: 1.6;   /* @kind font */

  /* Tracking */
  --tracking-display: -0.022em;  /* @kind font */
  --tracking-head: -0.014em;     /* @kind font */
  --tracking-normal: 0em;        /* @kind font */
  --tracking-label: 0.08em;      /* @kind font */
  --tracking-wide: 0.14em;       /* @kind font */
}

/* Finanz Cockpit — Spacing, radii, shadows, motion, layout tokens */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---- Radii (tight / sharp editorial) ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px;
  --border-thick: 2px;

  /* ---- Elevation — used sparingly; editorial prefers hairlines ---- */
  --shadow-xs: 0 1px 2px rgba(11, 13, 12, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 13, 12, 0.06), 0 2px 6px rgba(11, 13, 12, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 13, 12, 0.08), 0 1px 3px rgba(11, 13, 12, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 13, 12, 0.14), 0 2px 8px rgba(11, 13, 12, 0.08);
  --shadow-pop: 0 8px 28px rgba(11, 13, 12, 0.16);

  /* ---- Motion — quick + precise, no bounce ---- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 180ms;   /* @kind other */
  --dur-slow: 240ms;   /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1440px;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --control-h: 38px;        /* default control height */
  --control-h-sm: 30px;
  --control-h-lg: 46px;
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* Finanz Cockpit — Base layer
 * Minimal element defaults wired to tokens. Consumers get sane typography & theming for free.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numbers align by default in data UIs */
.fc-num, .fc-metric, td.fc-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-features);
}

/* Headings */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text-1); }
h1 { font-size: var(--text-h1); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
h2 { font-size: var(--text-h2); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
h3 { font-size: var(--text-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
h4 { font-size: var(--text-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); }

p { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }

/* Editorial overline / eyebrow label */
.fc-overline {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Display metric numeral */
.fc-metric {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-head);
}

::selection { background: var(--accent); color: var(--text-on-accent); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Finanz Cockpit — Component styles
 * Visual layer for the React primitives. Components apply these classes + tokens.
 * Shipped to consumers via styles.css so hover/focus/active states work everywhere.
 */

/* ============================================================ BUTTON */
.fc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: var(--control-h); padding: 0 16px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-semibold);
  letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fc-btn:active { transform: scale(0.985); }
.fc-btn[disabled], .fc-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.fc-btn--sm { height: var(--control-h-sm); padding: 0 12px; font-size: var(--text-xs); }
.fc-btn--lg { height: var(--control-h-lg); padding: 0 22px; font-size: var(--text-body); }
.fc-btn--block { display: flex; width: 100%; }

.fc-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.fc-btn--primary:hover { background: var(--accent-hover); }
.fc-btn--primary:active { background: var(--accent-active); }

.fc-btn--secondary { background: var(--surface); color: var(--text-1); border-color: var(--line-2); }
.fc-btn--secondary:hover { background: var(--surface-2); border-color: var(--text-3); }
.fc-btn--secondary:active { background: var(--surface-sunken); }

.fc-btn--ghost { background: transparent; color: var(--text-1); }
.fc-btn--ghost:hover { background: var(--surface-sunken); }

.fc-btn--danger { background: var(--neg); color: #fff; }
.fc-btn--danger:hover { filter: brightness(1.06); }

.fc-btn__icon { display: inline-flex; }

/* ============================================================ ICON BUTTON */
.fc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fc-iconbtn:hover { background: var(--surface-sunken); color: var(--text-1); }
.fc-iconbtn:active { transform: scale(0.94); }
.fc-iconbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.fc-iconbtn--outline { border-color: var(--line-2); background: var(--surface); }
.fc-iconbtn--outline:hover { border-color: var(--text-3); }
.fc-iconbtn[disabled] { opacity: 0.45; pointer-events: none; }

/* ============================================================ INPUT / FIELD */
.fc-field { display: flex; flex-direction: column; gap: 6px; }
.fc-field__label { font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
.fc-field__hint { font-size: var(--text-xs); color: var(--text-3); }
.fc-field__hint--error { color: var(--neg); }

.fc-input-wrap { position: relative; display: flex; align-items: center; }
.fc-input {
  width: 100%; height: var(--control-h);
  padding: 0 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-1);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fc-input::placeholder { color: var(--text-3); }
.fc-input:hover { border-color: var(--text-3); }
.fc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-input--invalid { border-color: var(--neg); }
.fc-input--invalid:focus { box-shadow: 0 0 0 3px var(--neg-weak); }
.fc-input:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-input--with-adorn-l { padding-left: 36px; }
.fc-input--with-adorn-r { padding-right: 36px; }
.fc-input--num { font-feature-settings: var(--num-features); text-align: right; }
.fc-input__adorn { position: absolute; display: inline-flex; color: var(--text-3); pointer-events: none; }
.fc-input__adorn--l { left: 11px; }
.fc-input__adorn--r { right: 11px; }

/* ============================================================ SELECT */
.fc-select-wrap { position: relative; display: inline-flex; width: 100%; }
.fc-select {
  appearance: none; width: 100%; height: var(--control-h);
  padding: 0 36px 0 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-1);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fc-select:hover { border-color: var(--text-3); }
.fc-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-select-wrap__chevron { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: inline-flex; }

/* ============================================================ SWITCH */
.fc-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 10px; }
.fc-switch__track {
  width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--line-2); transition: background var(--dur-base) var(--ease-out); flex: none;
}
.fc-switch__thumb {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out);
}
.fc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-switch input:checked + .fc-switch__track { background: var(--accent); }
.fc-switch input:checked + .fc-switch__track .fc-switch__thumb { transform: translateX(16px); }
.fc-switch input:focus-visible + .fc-switch__track { box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-switch__label { font-size: var(--text-sm); color: var(--text-1); }
.fc-switch[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================ CHECKBOX */
.fc-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-sm); color: var(--text-1); }
.fc-check__box {
  width: 18px; height: 18px; flex: none; border-radius: var(--radius-xs);
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-check input:checked + .fc-check__box { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.fc-check input:focus-visible + .fc-check__box { box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-check[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================ SEGMENTED CONTROL */
.fc-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken); border-radius: var(--radius-md); border: 1px solid var(--line); }
.fc-seg__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 28px; padding: 0 14px; border-radius: 6px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fc-seg__item:hover { color: var(--text-1); }
.fc-seg__item[aria-pressed="true"], .fc-seg__item[data-active="true"] {
  background: var(--surface); color: var(--text-1); font-weight: var(--w-semibold); box-shadow: var(--shadow-xs);
}

/* ============================================================ BADGE / TAG */
.fc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: 0.01em; white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-2); border: 1px solid var(--line);
}
.fc-badge--solid { background: var(--text-1); color: var(--surface); border-color: transparent; }
.fc-badge--accent { background: var(--accent-weak); color: var(--accent-text); border-color: transparent; }
.fc-badge--pos { background: var(--pos-weak); color: var(--pos); border-color: transparent; }
.fc-badge--neg { background: var(--neg-weak); color: var(--neg); border-color: transparent; }
.fc-badge--warn { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.fc-badge--info { background: var(--info-weak); color: var(--info); border-color: transparent; }
.fc-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================ DELTA PILL */
.fc-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--text-sm);
  font-feature-settings: var(--num-features); line-height: 1;
}
.fc-delta--pos { color: var(--pos); }
.fc-delta--neg { color: var(--neg); }
.fc-delta--flat { color: var(--text-3); }
.fc-delta--chip { padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); }
.fc-delta--chip.fc-delta--pos { background: var(--pos-weak); }
.fc-delta--chip.fc-delta--neg { background: var(--neg-weak); }
.fc-delta--chip.fc-delta--flat { background: var(--surface-sunken); }
.fc-delta__arrow { font-size: 0.82em; line-height: 1; }

/* ============================================================ CARD / STATCARD */
.fc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fc-card--flush { padding: 0; }
.fc-card--hover { transition: border-color var(--dur-fast) var(--ease-out); }
.fc-card--hover:hover { border-color: var(--line-2); }

.fc-stat { display: flex; flex-direction: column; gap: 10px; }
.fc-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-stat__label { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.fc-stat__value { font-family: var(--font-display); font-weight: var(--w-bold); letter-spacing: var(--tracking-head); color: var(--text-1); font-feature-settings: var(--num-features); line-height: 1.05; }
.fc-stat__value--xl { font-size: var(--text-metric-xl); }
.fc-stat__value--lg { font-size: var(--text-metric-lg); }
.fc-stat__value--md { font-size: var(--text-metric-md); }
.fc-stat__foot { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-3); }

/* ============================================================ PROGRESS / METER */
.fc-progress { width: 100%; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.fc-progress__fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.fc-progress--thin { height: 5px; }
.fc-progress__fill--neg { background: var(--neg); }
.fc-progress__fill--warn { background: var(--warn); }

/* ============================================================ TABLE */
.fc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fc-table thead th {
  text-align: left; padding: 10px 14px; font-size: var(--text-xs); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fc-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text-1); }
.fc-table tbody tr:last-child td { border-bottom: 0; }
.fc-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.fc-table--hover tbody tr:hover { background: var(--surface-sunken); }
.fc-table .fc-num, .fc-table th.fc-num { text-align: right; font-feature-settings: var(--num-features); }
.fc-table__sub { color: var(--text-3); font-size: var(--text-xs); }

/* ============================================================ AVATAR */
.fc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: var(--surface-sunken); color: var(--text-2);
  font-weight: var(--w-semibold); overflow: hidden; border: 1px solid var(--line);
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fc-avatar--square { border-radius: var(--radius-md); }

/* ============================================================ TABS */
.fc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.fc-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 11px 14px; margin-bottom: -1px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-3);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fc-tab:hover { color: var(--text-1); }
.fc-tab[data-active="true"] { color: var(--text-1); font-weight: var(--w-semibold); border-bottom-color: var(--accent); }
.fc-tab__count { font-size: var(--text-xs); color: var(--text-3); background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--radius-pill); }

/* ============================================================ SIDEBAR NAV */
.fc-side { display: flex; flex-direction: column; gap: 2px; }
.fc-side__group-label { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); padding: 14px 12px 6px; }
.fc-nav {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius-md); color: var(--text-2);
  font-size: var(--text-sm); font-weight: var(--w-medium);
  border: 0; background: transparent; width: 100%; text-align: left;
  position: relative; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fc-nav:hover { background: var(--surface-sunken); color: var(--text-1); }
.fc-nav[data-active="true"] { background: var(--surface-sunken); color: var(--text-1); font-weight: var(--w-semibold); }
.fc-nav[data-active="true"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2.5px; border-radius: 2px; background: var(--accent); }
.fc-nav__icon { color: inherit; display: inline-flex; flex: none; }
.fc-nav__badge { margin-left: auto; }

/* ============================================================ DIALOG */
.fc-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; animation: fc-fade var(--dur-base) var(--ease-out); }
.fc-dialog {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; padding: var(--space-7);
  animation: fc-pop var(--dur-base) var(--ease-out);
}
.fc-dialog__title { font-size: var(--text-h3); font-weight: var(--w-bold); letter-spacing: var(--tracking-head); }
.fc-dialog__body { margin-top: 8px; color: var(--text-2); font-size: var(--text-sm); line-height: var(--lh-normal); }
.fc-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-7); }
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* ============================================================ TOOLTIP */
.fc-tooltip-host { position: relative; display: inline-flex; }
.fc-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: var(--w-medium); padding: 6px 9px; border-radius: var(--radius-sm);
  white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; z-index: 50;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); 
}
.fc-tooltip-host:hover .fc-tooltip, .fc-tooltip-host:focus-within .fc-tooltip { opacity: 1; }

/* ============================================================ TOAST */
.fc-toast {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 12px 14px; min-width: 280px; max-width: 380px;
  animation: fc-toast-in var(--dur-slow) var(--ease-out);
}
.fc-toast__icon { display: inline-flex; flex: none; }
.fc-toast__icon--pos { color: var(--pos); }
.fc-toast__icon--neg { color: var(--neg); }
.fc-toast__icon--info { color: var(--info); }
.fc-toast__body { font-size: var(--text-sm); color: var(--text-1); }
.fc-toast__title { font-weight: var(--w-semibold); }
@keyframes fc-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* shared icon helper */
.fc-icon { display: inline-flex; align-items: center; justify-content: center; }
.fc-icon svg { display: block; }

/* Finanz Cockpit — Design System
 * Global stylesheet entry point. Consumers link THIS one file.
 * Keep this file as @import lines only — no rules.
 */
/* Finanz Cockpit — Webfonts
 * Primary UI/display: Schibsted Grotesk (neutral editorial grotesque)
 * Numeric / tabular / mono: Geist Mono
 * Hosted via Google Fonts. To self-host, replace with local @font-face + .woff2 in assets/fonts/.
 */
/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* symbols2 */

/* vietnamese */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */

/* latin-ext */

/* latin */



/* Finanz Cockpit — Color tokens
 * Swiss/editorial neutral palette, signal-green accent, full light + dark theming.
 * Base values live in :root (light). Dark theme via [data-theme="dark"] (and prefers-color-scheme fallback).
 * Semantic aliases reference base scales so consumers theme one layer.
 */

:root {
  /* ---- Base neutral scale (cool, near-neutral grey) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f6;
  --neutral-100: #eef0ef;
  --neutral-150: #e4e6e4;
  --neutral-200: #d6d9d7;
  --neutral-300: #b9bdba;
  --neutral-400: #929895;
  --neutral-500: #6e746f;
  --neutral-600: #565b57;
  --neutral-700: #3d423f;
  --neutral-800: #262a28;
  --neutral-900: #15201c;
  --neutral-950: #0b0d0c;

  /* ---- Signal green (accent / positive) ---- */
  --green-50:  #e6f8ef;
  --green-100: #c4eed8;
  --green-200: #8fdfb4;
  --green-300: #54cd8d;
  --green-400: #25bb70;
  --green-500: #12b76a;  /* core accent */
  --green-600: #0e9e5b;
  --green-700: #0b7e48;
  --green-800: #0a5e37;
  --green-900: #084026;

  /* ---- Loss red ---- */
  --red-50:  #fdecec;
  --red-100: #f9d2d3;
  --red-300: #f08a8d;
  --red-500: #e5484d;
  --red-600: #cf3236;
  --red-700: #a82327;

  /* ---- Warning amber ---- */
  --amber-100: #fbeccb;
  --amber-500: #f2a93b;
  --amber-600: #d98e1d;

  /* ---- Info blue ---- */
  --blue-100: #d8e3fb;
  --blue-500: #3b6fe0;
  --blue-600: #2b58c4;

  /* ---- Data-viz categorical (works in both themes) ---- */
  --chart-1: #12b76a;  /* green */
  --chart-2: #3b6fe0;  /* blue */
  --chart-3: #c79a3f;  /* gold */
  --chart-4: #8a6fe0;  /* violet */
  --chart-5: #1fa6a6;  /* teal */
  --chart-6: #e5484d;  /* red */
  --chart-7: #5b6770;  /* slate */
  --chart-8: #de7a3a;  /* orange */
}

/* ============ Semantic aliases — LIGHT (default + explicit [data-theme="light"]) ============ */
:root, [data-theme="light"] {
  color-scheme: light;

  --bg:            var(--neutral-50);
  --surface:       var(--neutral-0);
  --surface-2:     var(--neutral-50);
  --surface-sunken:var(--neutral-100);
  --surface-inverse: var(--neutral-950);

  --text-1: var(--neutral-950);   /* primary */
  --text-2: var(--neutral-600);   /* secondary */
  --text-3: var(--neutral-500);   /* muted / labels */
  --text-inverse: var(--neutral-0);
  --text-on-accent: #ffffff;

  --line:        var(--neutral-150);  /* hairline borders */
  --line-2:      var(--neutral-200);  /* stronger divider */
  --line-strong: var(--neutral-950);  /* editorial 1px black rule */

  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-active: var(--green-700);
  --accent-weak:   var(--green-50);
  --accent-text:   var(--green-700);

  --pos:        var(--green-600);
  --pos-weak:   var(--green-50);
  --neg:        var(--red-600);
  --neg-weak:   var(--red-50);
  --warn:       var(--amber-600);
  --warn-weak:  var(--amber-100);
  --info:       var(--blue-600);
  --info-weak:  var(--blue-100);

  --focus-ring: var(--green-500);
  --overlay:    rgba(11, 13, 12, 0.45);
}

/* ============ Semantic aliases — DARK ============ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--neutral-950);
  --surface:       #121514;
  --surface-2:     #171a19;
  --surface-sunken: #0e100f;
  --surface-inverse: var(--neutral-50);

  --text-1: #f4f5f3;
  --text-2: #a7ada9;
  --text-3: #767c77;
  --text-inverse: var(--neutral-950);
  --text-on-accent: #04150c;

  --line:        #232624;
  --line-2:      #2e322f;
  --line-strong: #f4f5f3;

  --accent:        var(--green-400);
  --accent-hover:  var(--green-300);
  --accent-active: var(--green-200);
  --accent-weak:   rgba(18, 183, 106, 0.14);
  --accent-text:   var(--green-300);

  --pos:        var(--green-400);
  --pos-weak:   rgba(18, 183, 106, 0.14);
  --neg:        #f0696d;
  --neg-weak:   rgba(229, 72, 77, 0.16);
  --warn:       var(--amber-500);
  --warn-weak:  rgba(242, 169, 59, 0.16);
  --info:       #6f97ec;
  --info-weak:  rgba(59, 111, 224, 0.18);

  --focus-ring: var(--green-400);
  --overlay:    rgba(0, 0, 0, 0.6);
}


/* Finanz Cockpit — Typography tokens
 * Schibsted Grotesk for everything UI/display; Geist Mono for tabular numerals & tickers.
 * Tabular figures are enabled on numeric contexts via --num-features.
 */

:root {
  /* Families */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-display: var(--font-sans);

  /* Feature settings */
  --num-features: "tnum" 1, "lnum" 1; /* @kind font */

  /* Weights */
  --w-regular: 400;   /* @kind font */
  --w-medium: 500;    /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold: 700;      /* @kind font */
  --w-black: 800;     /* @kind font */

  /* Type scale (px). Editorial: large confident display, tight tracking. */
  --text-display: 56px;
  --text-h1: 38px;
  --text-h2: 28px;
  --text-h3: 20px;
  --text-h4: 16px;
  --text-body: 15px;
  --text-sm: 13px;
  --text-xs: 11px;     /* eyebrow / overline labels */

  /* Metric numerals — for KPI / balance displays */
  --text-metric-xl: 44px;
  --text-metric-lg: 32px;
  --text-metric-md: 22px;

  /* Line heights */
  --lh-tight: 1.02;    /* @kind font */
  --lh-snug: 1.12;     /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-relaxed: 1.6;   /* @kind font */

  /* Tracking */
  --tracking-display: -0.022em;  /* @kind font */
  --tracking-head: -0.014em;     /* @kind font */
  --tracking-normal: 0em;        /* @kind font */
  --tracking-label: 0.08em;      /* @kind font */
  --tracking-wide: 0.14em;       /* @kind font */
}

/* Finanz Cockpit — Spacing, radii, shadows, motion, layout tokens */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---- Radii (tight / sharp editorial) ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px;
  --border-thick: 2px;

  /* ---- Elevation — used sparingly; editorial prefers hairlines ---- */
  --shadow-xs: 0 1px 2px rgba(11, 13, 12, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 13, 12, 0.06), 0 2px 6px rgba(11, 13, 12, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 13, 12, 0.08), 0 1px 3px rgba(11, 13, 12, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 13, 12, 0.14), 0 2px 8px rgba(11, 13, 12, 0.08);
  --shadow-pop: 0 8px 28px rgba(11, 13, 12, 0.16);

  /* ---- Motion — quick + precise, no bounce ---- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 180ms;   /* @kind other */
  --dur-slow: 240ms;   /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1440px;
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --control-h: 38px;        /* default control height */
  --control-h-sm: 30px;
  --control-h-lg: 46px;
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* Finanz Cockpit — Base layer
 * Minimal element defaults wired to tokens. Consumers get sane typography & theming for free.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numbers align by default in data UIs */
.fc-num, .fc-metric, td.fc-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-features);
}

/* Headings */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text-1); }
h1 { font-size: var(--text-h1); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
h2 { font-size: var(--text-h2); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
h3 { font-size: var(--text-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
h4 { font-size: var(--text-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); }

p { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }

/* Editorial overline / eyebrow label */
.fc-overline {
  font-size: var(--text-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Display metric numeral */
.fc-metric {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-head);
}

::selection { background: var(--accent); color: var(--text-on-accent); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Finanz Cockpit — Component styles
 * Visual layer for the React primitives. Components apply these classes + tokens.
 * Shipped to consumers via styles.css so hover/focus/active states work everywhere.
 */

/* ============================================================ BUTTON */
.fc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: var(--control-h); padding: 0 16px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-semibold);
  letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fc-btn:active { transform: scale(0.985); }
.fc-btn[disabled], .fc-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.fc-btn--sm { height: var(--control-h-sm); padding: 0 12px; font-size: var(--text-xs); }
.fc-btn--lg { height: var(--control-h-lg); padding: 0 22px; font-size: var(--text-body); }
.fc-btn--block { display: flex; width: 100%; }

.fc-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.fc-btn--primary:hover { background: var(--accent-hover); }
.fc-btn--primary:active { background: var(--accent-active); }

.fc-btn--secondary { background: var(--surface); color: var(--text-1); border-color: var(--line-2); }
.fc-btn--secondary:hover { background: var(--surface-2); border-color: var(--text-3); }
.fc-btn--secondary:active { background: var(--surface-sunken); }

.fc-btn--ghost { background: transparent; color: var(--text-1); }
.fc-btn--ghost:hover { background: var(--surface-sunken); }

.fc-btn--danger { background: var(--neg); color: #fff; }
.fc-btn--danger:hover { filter: brightness(1.06); }

.fc-btn__icon { display: inline-flex; }

/* ============================================================ ICON BUTTON */
.fc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fc-iconbtn:hover { background: var(--surface-sunken); color: var(--text-1); }
.fc-iconbtn:active { transform: scale(0.94); }
.fc-iconbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.fc-iconbtn--outline { border-color: var(--line-2); background: var(--surface); }
.fc-iconbtn--outline:hover { border-color: var(--text-3); }
.fc-iconbtn[disabled] { opacity: 0.45; pointer-events: none; }

/* ============================================================ INPUT / FIELD */
.fc-field { display: flex; flex-direction: column; gap: 6px; }
.fc-field__label { font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
.fc-field__hint { font-size: var(--text-xs); color: var(--text-3); }
.fc-field__hint--error { color: var(--neg); }

.fc-input-wrap { position: relative; display: flex; align-items: center; }
.fc-input {
  width: 100%; height: var(--control-h);
  padding: 0 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-1);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fc-input::placeholder { color: var(--text-3); }
.fc-input:hover { border-color: var(--text-3); }
.fc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-input--invalid { border-color: var(--neg); }
.fc-input--invalid:focus { box-shadow: 0 0 0 3px var(--neg-weak); }
.fc-input:disabled { opacity: 0.5; cursor: not-allowed; }
.fc-input--with-adorn-l { padding-left: 36px; }
.fc-input--with-adorn-r { padding-right: 36px; }
.fc-input--num { font-feature-settings: var(--num-features); text-align: right; }
.fc-input__adorn { position: absolute; display: inline-flex; color: var(--text-3); pointer-events: none; }
.fc-input__adorn--l { left: 11px; }
.fc-input__adorn--r { right: 11px; }

/* ============================================================ SELECT */
.fc-select-wrap { position: relative; display: inline-flex; width: 100%; }
.fc-select {
  appearance: none; width: 100%; height: var(--control-h);
  padding: 0 36px 0 12px;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-1);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fc-select:hover { border-color: var(--text-3); }
.fc-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-select-wrap__chevron { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; display: inline-flex; }

/* ============================================================ SWITCH */
.fc-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 10px; }
.fc-switch__track {
  width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--line-2); transition: background var(--dur-base) var(--ease-out); flex: none;
}
.fc-switch__thumb {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out);
}
.fc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-switch input:checked + .fc-switch__track { background: var(--accent); }
.fc-switch input:checked + .fc-switch__track .fc-switch__thumb { transform: translateX(16px); }
.fc-switch input:focus-visible + .fc-switch__track { box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-switch__label { font-size: var(--text-sm); color: var(--text-1); }
.fc-switch[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================ CHECKBOX */
.fc-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-sm); color: var(--text-1); }
.fc-check__box {
  width: 18px; height: 18px; flex: none; border-radius: var(--radius-xs);
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-check input:checked + .fc-check__box { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.fc-check input:focus-visible + .fc-check__box { box-shadow: 0 0 0 3px var(--accent-weak); }
.fc-check[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================ SEGMENTED CONTROL */
.fc-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken); border-radius: var(--radius-md); border: 1px solid var(--line); }
.fc-seg__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 28px; padding: 0 14px; border-radius: 6px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fc-seg__item:hover { color: var(--text-1); }
.fc-seg__item[aria-pressed="true"], .fc-seg__item[data-active="true"] {
  background: var(--surface); color: var(--text-1); font-weight: var(--w-semibold); box-shadow: var(--shadow-xs);
}

/* ============================================================ BADGE / TAG */
.fc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: 0.01em; white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-2); border: 1px solid var(--line);
}
.fc-badge--solid { background: var(--text-1); color: var(--surface); border-color: transparent; }
.fc-badge--accent { background: var(--accent-weak); color: var(--accent-text); border-color: transparent; }
.fc-badge--pos { background: var(--pos-weak); color: var(--pos); border-color: transparent; }
.fc-badge--neg { background: var(--neg-weak); color: var(--neg); border-color: transparent; }
.fc-badge--warn { background: var(--warn-weak); color: var(--warn); border-color: transparent; }
.fc-badge--info { background: var(--info-weak); color: var(--info); border-color: transparent; }
.fc-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================================================ DELTA PILL */
.fc-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--text-sm);
  font-feature-settings: var(--num-features); line-height: 1;
}
.fc-delta--pos { color: var(--pos); }
.fc-delta--neg { color: var(--neg); }
.fc-delta--flat { color: var(--text-3); }
.fc-delta--chip { padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); }
.fc-delta--chip.fc-delta--pos { background: var(--pos-weak); }
.fc-delta--chip.fc-delta--neg { background: var(--neg-weak); }
.fc-delta--chip.fc-delta--flat { background: var(--surface-sunken); }
.fc-delta__arrow { font-size: 0.82em; line-height: 1; }

/* ============================================================ CARD / STATCARD */
.fc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fc-card--flush { padding: 0; }
.fc-card--hover { transition: border-color var(--dur-fast) var(--ease-out); }
.fc-card--hover:hover { border-color: var(--line-2); }

.fc-stat { display: flex; flex-direction: column; gap: 10px; }
.fc-stat__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-stat__label { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.fc-stat__value { font-family: var(--font-display); font-weight: var(--w-bold); letter-spacing: var(--tracking-head); color: var(--text-1); font-feature-settings: var(--num-features); line-height: 1.05; }
.fc-stat__value--xl { font-size: var(--text-metric-xl); }
.fc-stat__value--lg { font-size: var(--text-metric-lg); }
.fc-stat__value--md { font-size: var(--text-metric-md); }
.fc-stat__foot { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-3); }

/* ============================================================ PROGRESS / METER */
.fc-progress { width: 100%; height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.fc-progress__fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.fc-progress--thin { height: 5px; }
.fc-progress__fill--neg { background: var(--neg); }
.fc-progress__fill--warn { background: var(--warn); }

/* ============================================================ TABLE */
.fc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fc-table thead th {
  text-align: left; padding: 10px 14px; font-size: var(--text-xs); font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fc-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text-1); }
.fc-table tbody tr:last-child td { border-bottom: 0; }
.fc-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.fc-table--hover tbody tr:hover { background: var(--surface-sunken); }
.fc-table .fc-num, .fc-table th.fc-num { text-align: right; font-feature-settings: var(--num-features); }
.fc-table__sub { color: var(--text-3); font-size: var(--text-xs); }

/* ============================================================ AVATAR */
.fc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; background: var(--surface-sunken); color: var(--text-2);
  font-weight: var(--w-semibold); overflow: hidden; border: 1px solid var(--line);
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fc-avatar--square { border-radius: var(--radius-md); }

/* ============================================================ TABS */
.fc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.fc-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 11px 14px; margin-bottom: -1px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-3);
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.fc-tab:hover { color: var(--text-1); }
.fc-tab[data-active="true"] { color: var(--text-1); font-weight: var(--w-semibold); border-bottom-color: var(--accent); }
.fc-tab__count { font-size: var(--text-xs); color: var(--text-3); background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--radius-pill); }

/* ============================================================ SIDEBAR NAV */
.fc-side { display: flex; flex-direction: column; gap: 2px; }
.fc-side__group-label { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); padding: 14px 12px 6px; }
.fc-nav {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius-md); color: var(--text-2);
  font-size: var(--text-sm); font-weight: var(--w-medium);
  border: 0; background: transparent; width: 100%; text-align: left;
  position: relative; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fc-nav:hover { background: var(--surface-sunken); color: var(--text-1); }
.fc-nav[data-active="true"] { background: var(--surface-sunken); color: var(--text-1); font-weight: var(--w-semibold); }
.fc-nav[data-active="true"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2.5px; border-radius: 2px; background: var(--accent); }
.fc-nav__icon { color: inherit; display: inline-flex; flex: none; }
.fc-nav__badge { margin-left: auto; }

/* ============================================================ DIALOG */
.fc-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; animation: fc-fade var(--dur-base) var(--ease-out); }
.fc-dialog {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; padding: var(--space-7);
  animation: fc-pop var(--dur-base) var(--ease-out);
}
.fc-dialog__title { font-size: var(--text-h3); font-weight: var(--w-bold); letter-spacing: var(--tracking-head); }
.fc-dialog__body { margin-top: 8px; color: var(--text-2); font-size: var(--text-sm); line-height: var(--lh-normal); }
.fc-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--space-7); }
@keyframes fc-fade { from { opacity: 0; } }
@keyframes fc-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* ============================================================ TOOLTIP */
.fc-tooltip-host { position: relative; display: inline-flex; }
.fc-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: var(--w-medium); padding: 6px 9px; border-radius: var(--radius-sm);
  white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; z-index: 50;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); 
}
.fc-tooltip-host:hover .fc-tooltip, .fc-tooltip-host:focus-within .fc-tooltip { opacity: 1; }

/* ============================================================ TOAST */
.fc-toast {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 12px 14px; min-width: 280px; max-width: 380px;
  animation: fc-toast-in var(--dur-slow) var(--ease-out);
}
.fc-toast__icon { display: inline-flex; flex: none; }
.fc-toast__icon--pos { color: var(--pos); }
.fc-toast__icon--neg { color: var(--neg); }
.fc-toast__icon--info { color: var(--info); }
.fc-toast__body { font-size: var(--text-sm); color: var(--text-1); }
.fc-toast__title { font-weight: var(--w-semibold); }
@keyframes fc-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* shared icon helper */
.fc-icon { display: inline-flex; align-items: center; justify-content: center; }
.fc-icon svg { display: block; }

:root, [data-theme="light"] { --toon-ink: #0b0d0c; --toon-paper: #fffdf6; --toon-dot: rgba(11,13,12,0.08); }
    [data-theme="dark"] { --toon-ink: #f4f5f3; --toon-paper: #141a17; --toon-dot: rgba(255,255,255,0.07); }
    @keyframes toonWobble { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
    @keyframes toonPop { 0% { transform: scale(0.2) rotate(var(--r,0deg)); opacity: 0; } 60% { transform: scale(1.18) rotate(var(--r,0deg)); } 100% { transform: scale(1) rotate(var(--r,0deg)); opacity: 1; } }
    @keyframes toonThrob { 0%,100% { transform: scale(1) rotate(var(--r,0deg)); } 50% { transform: scale(1.08) rotate(var(--r,0deg)); } }
    .toon-card { transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out); }
    .toon-card:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--toon-ink) !important; }
    .toon-btn { transition: transform 0.1s var(--ease-out), box-shadow 0.1s var(--ease-out); }
    .toon-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--toon-ink) !important; }
    .toon-btn:active { transform: translate(5px, 5px); box-shadow: 0px 0px 0 var(--toon-ink) !important; }
    .toon-nav { transition: transform 0.12s var(--ease-out); }
    .toon-nav:hover { transform: translateY(-2px) rotate(-2deg); }
    .toon-spark { animation: toonWobble 3.2s var(--ease-in-out) infinite; }
    .toon-burst-shape { clip-path: polygon(50% 0%, 58% 18%, 79% 11%, 75% 33%, 97% 33%, 80% 50%, 97% 67%, 75% 67%, 79% 89%, 58% 82%, 50% 100%, 42% 82%, 21% 89%, 25% 67%, 3% 67%, 20% 50%, 3% 33%, 25% 33%, 21% 11%, 42% 18%); }
    .toon-burst { animation: toonThrob 2.6s var(--ease-in-out) infinite; }
    @media (prefers-reduced-motion: reduce) { .toon-spark, .toon-burst { animation: none; } }
    image-slot { display: block; width: 100%; height: 100%; }


/* ===== Sprachumschalter (Toon-Stil) ===== */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px;
  border: 3px solid var(--toon-ink); background: var(--toon-paper); color: var(--toon-ink);
  border-radius: 12px; cursor: pointer; box-shadow: 4px 4px 0 var(--toon-ink);
  font-family: inherit; font-weight: 800; font-size: 14px; line-height: 1;
  transition: transform .1s ease, box-shadow .1s ease;
}
.lang-btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--toon-ink); }
.lang-btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--toon-ink); }
.lang-btn svg { display: block; }
.lang-current { letter-spacing: .03em; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; margin: 0; padding: 6px; list-style: none;
  background: var(--toon-paper); border: 3px solid var(--toon-ink); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--toon-ink); z-index: 60; min-width: 170px;
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 2px solid transparent; border-radius: 8px; background: none; color: var(--toon-ink);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
  transition: background .12s ease, border-color .12s ease;
}
.lang-menu button:hover { background: var(--accent); border-color: var(--toon-ink); }
.lang-menu button[aria-current="true"] { background: var(--accent); border-color: var(--toon-ink); }
.lang-menu .lang-code {
  font-weight: 800; font-size: 11px; min-width: 28px; padding: 2px 5px;
  border: 2px solid var(--toon-ink); border-radius: 6px; text-align: center;
}
@media (max-width: 560px) { .lang-current { display: none; } .lang-btn { padding: 0 10px; } }

/* ===== Header: immer einzeilig auf Mobil (Burger-Menue) ===== */
.nav-burger { transition: transform .1s ease, box-shadow .1s ease; }
.nav-burger:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--toon-ink); }
.nav-burger:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--toon-ink); }
.nav-burger svg { display: block; }

@media (max-width: 767px) {
  /* Kopfzeile darf nicht mehr umbrechen */
  .site-header-inner { padding: 10px 14px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .site-nav { position: relative; gap: 10px !important; flex-wrap: nowrap !important; }
  .site-brand-mark { width: 34px !important; height: 34px !important; }
  .site-brand-name { font-size: 15px !important; min-width: 0; }

  /* Burger sichtbar, Nav-Links werden zum Dropdown */
  .nav-burger { display: inline-flex !important; }
  .nav-links {
    position: absolute; top: calc(100% + 12px); right: 0;
    display: none !important;
    flex-direction: column; align-items: stretch !important; gap: 4px !important;
    min-width: 190px; padding: 8px; margin: 0;
    background: var(--toon-paper); border: 3px solid var(--toon-ink);
    border-radius: 14px; box-shadow: 6px 6px 0 var(--toon-ink); z-index: 60;
  }
  .site-nav.nav-open .nav-links { display: flex !important; }
  .nav-links .toon-nav {
    padding: 10px 12px; border-radius: 10px; font-size: 15px !important;
    border: 2px solid transparent;
  }
  .nav-links .toon-nav:hover { background: var(--accent); border-color: var(--toon-ink); }
}