/* die Lerninsel — website kit */
/* =========================================================================
   die Lerninsel — Design Tokens
   Integrative Lerntherapie auf der Reichenau
   ========================================================================= */

/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/b38ed3f8-d8cc-45ea-879a-783eca099c42.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/f3cb9526-9e10-40e5-b49e-510e34601001.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/352ce902-bf73-4400-baa9-7950f3708fe9.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b38ed3f8-d8cc-45ea-879a-783eca099c42.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f3cb9526-9e10-40e5-b49e-510e34601001.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/352ce902-bf73-4400-baa9-7950f3708fe9.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/b38ed3f8-d8cc-45ea-879a-783eca099c42.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f3cb9526-9e10-40e5-b49e-510e34601001.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/352ce902-bf73-4400-baa9-7950f3708fe9.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/380a1fb6-3bea-49cf-9633-e27c3af61f5e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/976ff590-af71-4573-9bbe-c38921eee042.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/f6852c62-ce5d-4965-97b4-bdfa6e49e834.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/380a1fb6-3bea-49cf-9633-e27c3af61f5e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/976ff590-af71-4573-9bbe-c38921eee042.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/f6852c62-ce5d-4965-97b4-bdfa6e49e834.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/380a1fb6-3bea-49cf-9633-e27c3af61f5e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/976ff590-af71-4573-9bbe-c38921eee042.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/f6852c62-ce5d-4965-97b4-bdfa6e49e834.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/380a1fb6-3bea-49cf-9633-e27c3af61f5e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/976ff590-af71-4573-9bbe-c38921eee042.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/f6852c62-ce5d-4965-97b4-bdfa6e49e834.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;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/380a1fb6-3bea-49cf-9633-e27c3af61f5e.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;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/976ff590-af71-4573-9bbe-c38921eee042.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;
}
/* latin */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/f6852c62-ce5d-4965-97b4-bdfa6e49e834.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/50f6f0dc-811a-4018-9c5a-97bec1d270b0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/0d60d85e-0182-4a57-8a53-8a573603f8aa.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/b8f36f34-329d-4aee-adf2-227404f94ba8.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;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/1052c9a6-0942-486e-8f5e-9cb2564f13a4.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/5a1a4c84-62b9-40c9-bb8f-01ed1de35cb3.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/50f6f0dc-811a-4018-9c5a-97bec1d270b0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/0d60d85e-0182-4a57-8a53-8a573603f8aa.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b8f36f34-329d-4aee-adf2-227404f94ba8.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;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/1052c9a6-0942-486e-8f5e-9cb2564f13a4.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/5a1a4c84-62b9-40c9-bb8f-01ed1de35cb3.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/50f6f0dc-811a-4018-9c5a-97bec1d270b0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/0d60d85e-0182-4a57-8a53-8a573603f8aa.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/b8f36f34-329d-4aee-adf2-227404f94ba8.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;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/1052c9a6-0942-486e-8f5e-9cb2564f13a4.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/5a1a4c84-62b9-40c9-bb8f-01ed1de35cb3.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/50f6f0dc-811a-4018-9c5a-97bec1d270b0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/0d60d85e-0182-4a57-8a53-8a573603f8aa.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/b8f36f34-329d-4aee-adf2-227404f94ba8.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;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/1052c9a6-0942-486e-8f5e-9cb2564f13a4.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/5a1a4c84-62b9-40c9-bb8f-01ed1de35cb3.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/50f6f0dc-811a-4018-9c5a-97bec1d270b0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/0d60d85e-0182-4a57-8a53-8a573603f8aa.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/b8f36f34-329d-4aee-adf2-227404f94ba8.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;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/1052c9a6-0942-486e-8f5e-9cb2564f13a4.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/5a1a4c84-62b9-40c9-bb8f-01ed1de35cb3.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/50f6f0dc-811a-4018-9c5a-97bec1d270b0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/0d60d85e-0182-4a57-8a53-8a573603f8aa.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/b8f36f34-329d-4aee-adf2-227404f94ba8.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;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/1052c9a6-0942-486e-8f5e-9cb2564f13a4.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/5a1a4c84-62b9-40c9-bb8f-01ed1de35cb3.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;
}


:root {
  /* ---------- BRAND COLORS ---------- */
  /* Deep "Bodensee" — primary, trust, depth */
  --li-petrol:        #0B4A66;
  --li-petrol-700:    #083A52;
  --li-petrol-500:    #2A6585;
  --li-petrol-300:    #7197AB;

  /* Sand / paper — primary background */
  --li-sand:          #FCF3E3;
  --li-sand-deep:     #F6E9CE;
  --li-sand-ink:      #EADDBE;

  /* Seafoam — soft surface, calming */
  --li-seafoam:       #BDD3CE;
  --li-seafoam-deep:  #9FBCB5;
  --li-seafoam-soft:  #DCE7E4;

  /* Sage — secondary, growth, nature */
  --li-sage:          #708C69;
  --li-sage-deep:     #56704F;
  --li-sage-soft:     #A4B79F;

  /* Apricot — warm accent, optimism */
  --li-apricot:       #F4AB59;
  --li-apricot-deep:  #D98E3A;
  --li-apricot-soft:  #FACB90;

  /* Neutrals — derived, not invented */
  --li-ink:           #0B1E2A;
  --li-ink-2:         #2C3E48;
  --li-ink-3:         #5F7079;
  --li-line:          #E6D9BD;
  --li-line-soft:     #F0E5CE;
  --li-white:         #FFFDF8;

  /* ---------- SEMANTIC ---------- */
  --bg:               var(--li-sand);
  --bg-elev:          var(--li-white);
  --bg-deep:          var(--li-petrol);
  --surface:          var(--li-white);
  --surface-soft:     var(--li-sand-deep);
  --surface-cool:     var(--li-seafoam-soft);

  --fg:               var(--li-ink);
  --fg-muted:         var(--li-ink-2);
  --fg-soft:          var(--li-ink-3);
  --fg-on-deep:       var(--li-sand);

  --accent:           var(--li-apricot);
  --accent-hover:     var(--li-apricot-deep);
  --primary:          var(--li-petrol);
  --primary-hover:    var(--li-petrol-700);

  --border:           var(--li-line);
  --border-soft:      var(--li-line-soft);
  --border-strong:    var(--li-petrol-300);

  --success:          var(--li-sage);
  --info:             var(--li-petrol-500);
  --warning:          var(--li-apricot-deep);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:     'Crimson Pro', 'Iowan Old Style', Georgia, serif;
  --font-body:        'Mulish', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — major third (1.25) anchored at 17px body */
  --fs-xs:    13px;
  --fs-sm:    15px;
  --fs-base:  17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   62px;
  --fs-6xl:   80px;

  --lh-tight: 1.12; /* @kind font */
  --lh-snug:  1.28; /* @kind font */
  --lh-base:  1.55; /* @kind font */
  --lh-loose: 1.7; /* @kind font */

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.16em;

  /* ---------- SPACING (8pt base, with 4pt half-steps) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---------- RADIUS ---------- */
  /* Generous, organic, never too sharp — pebble-like */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-pill: 999px;

  /* ---------- SHADOW ---------- */
  /* Warm, soft, never blue-grey */
  --sh-1: 0 1px 2px rgba(1, 61, 90, 0.06), 0 1px 1px rgba(1, 61, 90, 0.04);
  --sh-2: 0 6px 18px -8px rgba(1, 61, 90, 0.18), 0 2px 4px rgba(1, 61, 90, 0.06);
  --sh-3: 0 18px 40px -16px rgba(1, 61, 90, 0.22), 0 4px 8px rgba(1, 61, 90, 0.06);
  --sh-4: 0 30px 70px -24px rgba(1, 61, 90, 0.28), 0 8px 16px rgba(1, 61, 90, 0.08);
  --sh-inset: inset 0 1px 0 rgba(255, 253, 248, 0.5);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  /* gentle, not springy */
  --ease-back:  cubic-bezier(0.34, 1.46, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}

/* =========================================================================
   SEMANTIC TYPE — drop these classes on elements
   ========================================================================= */

.li-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--li-sage-deep);
}

.li-display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 5.5vw, var(--fs-6xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--li-petrol);
  text-wrap: balance;
}

.li-h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-5xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--li-petrol);
  text-wrap: balance;
}

.li-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--li-petrol);
  text-wrap: balance;
}

.li-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--li-petrol);
  text-wrap: balance;
}

.li-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--li-ink);
}

.li-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--li-ink-2);
  text-wrap: pretty;
}

.li-body, .li-p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--li-ink-2);
  text-wrap: pretty;
}

.li-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--li-ink-3);
}

.li-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--li-petrol);
  text-wrap: balance;
}

.li-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--li-ink);
}


* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--li-sand); color: var(--li-ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.li-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.li-section   { padding: 96px 0; }
.li-section--tight { padding: 64px 0; }

/* ---------- Top nav ---------- */
.li-nav-wrap { position: sticky; top: 0; z-index: 50; padding: 16px 0; background: linear-gradient(to bottom, rgba(252,243,227,1), rgba(252,243,227,.92) 70%, rgba(252,243,227,0)); }
.li-nav { display: flex; align-items: center; gap: 22px; background: #FFFDF8; border: 1px solid var(--border-soft); border-radius: 999px; padding: 8px 10px 8px 20px; box-shadow: var(--sh-1); }
.li-brand { display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.li-brand img { width: 36px; height: 36px; }
.li-brand-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 21px; color: var(--li-petrol); line-height: 1.05; white-space: nowrap; }
.li-brand-sub  { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--li-sage-deep); text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
.li-nav-items { display: flex; gap: 2px; margin-left: auto; }
.li-nav-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--li-ink-2); padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: all .18s var(--ease-out); white-space: nowrap; }
.li-nav-item:hover { color: var(--li-petrol); background: var(--li-sand-deep); }
.li-nav-item.is-active { background: var(--li-seafoam-soft); color: var(--li-petrol); }
.li-nav-item .caret { width: 12px; height: 12px; transition: transform .2s var(--ease-out); margin-left: 2px; }
.li-nav-item .caret.is-open { transform: rotate(180deg); }
button.li-nav-item { font-family: inherit; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Dropdown ---------- */
.li-nav-menu-wrap { position: relative; }
.li-nav-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #FFFDF8;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  box-shadow: var(--sh-3);
  padding: 8px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  animation: liMenuIn .18s var(--ease-out);
}
@keyframes liMenuIn {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.li-nav-menu::before {
  content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #FFFDF8;
  border-left: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
}
.li-nav-menu-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 14px;
  cursor: pointer; transition: background .15s var(--ease-out);
  text-decoration: none;
}
.li-nav-menu-item:hover { background: var(--li-sand-deep); }
.li-nav-menu-item.is-active { background: var(--li-seafoam-soft); }
.li-nav-menu-label { font-size: 15px; font-weight: 700; color: var(--li-petrol); line-height: 1.2; }
.li-nav-menu-sub   { font-size: 13px; color: var(--li-ink-3); line-height: 1.3; }

/* ---------- Buttons ---------- */
.li-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: all .18s var(--ease-out);
}
.li-btn--primary { background: var(--li-petrol); color: var(--li-sand); }
.li-btn--primary:hover { background: var(--li-petrol-700); transform: translateY(-1px); }
.li-btn--accent  { background: var(--li-apricot); color: var(--li-petrol); }
.li-btn--accent:hover { background: var(--li-apricot-deep); color: var(--li-sand); }
.li-btn--ghost   { background: transparent; color: var(--li-petrol); border-color: var(--li-petrol); }
.li-btn--ghost:hover { background: var(--li-petrol); color: var(--li-sand); }
.li-btn .arr { transition: transform .2s var(--ease-out); }
.li-btn:hover .arr { transform: translateX(3px); }

/* ---------- Eyebrow ---------- */
.li-eyebrow-inline { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--li-sage-deep); }
.li-eyebrow-inline .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--li-apricot); }

/* ---------- Hero ---------- */
.li-hero { position: relative; padding: 128px 0 184px; overflow: hidden; }
.li-hero .li-container { position: relative; z-index: 1; }
.li-hero-text { max-width: 100%; position: relative; }
.li-hero-bgmark {
  position: absolute;
  left: 42%;
  top: 46%;
  transform: translateY(-50%);
  width: min(720px, 54vw);
  height: auto;
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.li-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.li-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.9vw, 54px); line-height: 1.1; letter-spacing: -0.015em; color: var(--li-petrol); margin: 0 0 22px; text-wrap: balance; }: pretty; }
.li-hero h1 em { font-style: italic; font-weight: 400; color: var(--li-sage-deep); }
.li-hero .lead { font-size: 19px; line-height: 1.6; color: var(--li-ink-2); margin: 0 0 28px; max-width: 520px; }
.li-hero-ctas { display: flex; gap: 12px; align-items: center; }
.li-hero-meta { margin-top: 28px; display: flex; gap: 24px; font-size: 13px; color: var(--li-ink-3); }
.li-hero-meta div { display: flex; align-items: center; gap: 8px; }
.li-hero-meta svg { width: 16px; height: 16px; color: var(--li-sage); }

.li-hero-illu { position: relative; aspect-ratio: 4/4.4; border-radius: 32px; overflow: hidden; background: var(--li-seafoam-soft); box-shadow: var(--sh-3); }
.li-hero-illu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-hero-badge { position: absolute; bottom: 22px; left: 22px; right: 22px; background: rgba(255,253,248,.94); backdrop-filter: blur(8px); border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--sh-2); }
.li-hero-badge .avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--li-apricot); display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; color: var(--li-petrol); font-size: 19px; }
.li-hero-badge .who   { font-weight: 700; color: var(--li-petrol); font-size: 14px; }
.li-hero-badge .what  { font-size: 12px; color: var(--li-ink-3); }

/* ---------- Hero panel (Das ist die Lerninsel) ---------- */
.li-hero-panel {
  background: var(--li-petrol);
  color: var(--li-sand);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--sh-3);
  position: relative;
  overflow: hidden;
}
.li-hero-panel::after {
  /* faint island wave motif at the bottom */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'><path d='M0 50 C 70 25 130 70 200 50 S 330 25 400 55 L 400 90 0 90 Z' fill='%231A5577' opacity='0.5'/><path d='M0 65 C 80 45 140 80 220 65 S 340 50 400 70 L 400 90 0 90 Z' fill='%236A8FA3' opacity='0.35'/></svg>");
  background-size: cover; background-position: bottom;
  pointer-events: none;
}
.li-hero-panel-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--li-apricot);
  padding-bottom: 20px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(252,243,227,.16);
}
.li-hero-panel-mark { width: 30px; height: 30px; }
.li-hero-panel-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.li-hero-panel-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(252,243,227,.1);
}
.li-hero-panel-list li:last-child { border-bottom: none; }
.li-hero-panel-list svg { width: 24px; height: 24px; color: var(--li-apricot); flex: none; margin-top: 2px; }
.li-hero-panel-list strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--li-sand); margin-bottom: 3px; }
.li-hero-panel-list span { font-size: 14.5px; line-height: 1.45; color: rgba(252,243,227,.78); }

/* ---------- Feature cards ---------- */
.li-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.li-feature {
  background: #FFFDF8; border: 1px solid var(--border-soft); border-radius: 24px;
  padding: 26px; box-shadow: var(--sh-1); display: flex; flex-direction: column;
  transition: transform .25s var(--ease-out), box-shadow .25s;
  cursor: pointer;
}
.li-feature:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.li-feature--tinted { background: var(--li-seafoam-soft); border-color: #C8D9D4; }
.li-feature--deep   { background: var(--li-petrol); border-color: var(--li-petrol-700); color: var(--li-sand); }
.li-feature .icon-box {
  width: 52px; height: 52px; border-radius: 16px; background: var(--li-apricot);
  display: grid; place-items: center; color: var(--li-petrol); margin-bottom: 16px;
}
.li-feature .icon-box svg { width: 24px; height: 24px; }
.li-feature--deep .icon-box { background: var(--li-apricot); }
.li-feature h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.12; margin: 0 0 10px; color: var(--li-petrol); letter-spacing: -0.012em; }
.li-feature--deep h3 { color: var(--li-sand); }
.li-feature p { margin: 0 0 22px; color: var(--li-ink-2); font-size: 15.5px; line-height: 1.55; }
.li-feature--deep p { color: rgba(252,243,227,.85); }
.li-feature .more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--li-petrol); }
.li-feature--deep .more { color: var(--li-apricot); }

/* ---------- Sections / headers ---------- */
.li-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.li-section-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1.1; color: var(--li-petrol); letter-spacing: -0.018em; margin: 10px 0 16px; text-wrap: balance; }
.li-section-head p  { font-size: 18px; color: var(--li-ink-2); line-height: 1.6; margin: 0; text-wrap: pretty; }

/* ---------- Step list ---------- */
.li-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.li-step { background: #FFFDF8; border: 1px solid var(--border-soft); border-radius: 22px; padding: 24px; position: relative; min-height: 200px; }
.li-step .num { font-family: var(--font-display); font-style: italic; color: var(--li-apricot-deep); font-size: 44px; line-height: 1; margin-bottom: 14px; }
.li-step h4  { font-family: var(--font-display); font-weight: 500; color: var(--li-petrol); font-size: 23px; line-height: 1.18; margin: 0 0 8px; letter-spacing: -0.008em; }
.li-step p   { margin: 0; font-size: 14.5px; color: var(--li-ink-2); line-height: 1.5; }

/* ---------- Wave divider ---------- */
.li-wave { width: 100%; height: 110px; display: block; margin: 0; }

/* ---------- Footer ---------- */
.li-footer { background: var(--li-petrol); color: var(--li-sand); padding: 64px 0 28px; }
.li-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.li-footer h5 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--li-apricot); margin: 0 0 14px; font-weight: 700; }
.li-footer a { display: block; padding: 4px 0; font-size: 15px; color: rgba(252,243,227,.85); }
.li-footer a:hover { color: var(--li-sand); }
.li-footer .brand-line { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 28px; color: var(--li-sand); }
.li-footer-brand { display: flex; align-items: center; gap: 12px; }
.li-footer-mark { width: 46px; height: 46px; flex: none; }
.li-footer .blurb { font-size: 14px; line-height: 1.6; color: rgba(252,243,227,.75); margin-top: 12px; max-width: 320px; }
.li-foot-bar { display: flex; justify-content: space-between; padding-top: 28px; margin-top: 40px; border-top: 1px solid rgba(252,243,227,.12); font-size: 13px; color: rgba(252,243,227,.6); }

/* ---------- Page header (sub pages) ---------- */
.li-page-head { padding: 48px 0 56px; position: relative; }
.li-page-head .crumb { font-size: 13px; color: var(--li-ink-3); display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.li-page-head .crumb a { color: var(--li-petrol); font-weight: 600; }
.li-page-head .crumb .sep { color: var(--li-seafoam-deep); }
.li-page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 5vw, 66px); line-height: 1.06; color: var(--li-petrol); letter-spacing: -0.022em; margin: 0 0 20px; max-width: 14ch; text-wrap: balance; }
.li-page-head .lead { font-size: 19px; color: var(--li-ink-2); line-height: 1.6; max-width: 620px; margin: 0; }

/* ---------- Two-col text ---------- */
.li-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.li-two-col h2 { font-family: var(--font-display); font-weight: 500; font-size: 39px; line-height: 1.12; color: var(--li-petrol); margin: 0 0 18px; letter-spacing: -0.015em; }
.li-two-col p  { font-size: 17px; line-height: 1.65; color: var(--li-ink-2); margin: 0 0 14px; }

/* ---------- Symptom list (LRS/Rechen) ---------- */
.li-symptom-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 24px 0 0; padding: 0; list-style: none; }

/* ---------- Anzeichen als Kästchen ---------- */
.li-sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.li-sign-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFFDF8; border: 1px solid var(--border-soft); border-radius: 18px;
  padding: 20px 22px; box-shadow: var(--sh-1);
}
.li-sign-card--tinted { background: var(--li-seafoam-soft); border-color: #C8D9D4; }
.li-sign-card--deep { background: var(--li-petrol); border-color: var(--li-petrol-700); }
.li-sign-card.li-sign-card--deep p { color: var(--li-sand); }
.li-sign-card--deep .li-sign-check { background: var(--li-apricot); color: var(--li-petrol); }
.li-sign-check {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  background: var(--li-petrol); color: var(--li-sand);
  display: grid; place-items: center;
}
.li-sign-check svg { width: 17px; height: 17px; }
.li-sign-card p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--li-ink); }
.li-symptom-list li { display: flex; gap: 12px; font-size: 16px; color: var(--li-ink); padding: 4px 0; }
.li-symptom-list li::before { content: ""; width: 18px; height: 18px; border-radius: 999px; background: var(--li-seafoam); display: grid; place-items: center; flex: none; margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23013D5A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4 10-10'/></svg>");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
/* checks inside the tinted Belief card: petrol circle + cream check */
.li-symptom-card li::before {
  background-color: var(--li-petrol);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCF3E3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4 10-10'/></svg>");
}

/* ---------- Quote ---------- */
.li-quote-block { background: var(--li-seafoam-soft); border-radius: 28px; padding: 48px 56px; max-width: 920px; margin: 0 auto; position: relative; }
.li-quote-block::before { content: "„"; position: absolute; top: -8px; left: 24px; font-family: var(--font-display); font-weight: 500; font-size: 150px; color: var(--li-apricot); line-height: 1; }
.li-quote-block blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--li-petrol); margin: 0 0 24px; text-wrap: balance; letter-spacing: -0.005em; }}
.li-quote-block .who { display: flex; align-items: center; gap: 14px; }
.li-quote-block .who .av { width: 48px; height: 48px; border-radius: 999px; background: var(--li-apricot); display: grid; place-items: center; font-family: var(--font-display); color: var(--li-petrol); font-size: 20px; }
.li-quote-block .who .nm { font-weight: 700; color: var(--li-petrol); }
.li-quote-block .who .rl { font-size: 13px; color: var(--li-ink-3); }

/* ---------- About page ---------- */
.li-about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.li-portrait { aspect-ratio: 4/5; border-radius: 28px; overflow: hidden; background: var(--li-seafoam); box-shadow: var(--sh-3); display: grid; place-items: center; color: var(--li-petrol); font-family: var(--font-display); font-size: 28px; }
.li-cv { list-style: none; padding: 0; margin: 24px 0 0; }
.li-cv li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); align-items: baseline; }
.li-cv li:last-child { border-bottom: 1px solid var(--border); }
.li-cv .yr { font-family: var(--font-mono); font-size: 13px; color: var(--li-apricot-deep); font-weight: 700; }
.li-cv .desc { font-size: 16px; color: var(--li-ink); }
.li-cv .desc small { display: block; color: var(--li-ink-3); font-size: 13px; margin-top: 2px; }

/* ---------- Contact strip ---------- */
.li-contact-strip { background: var(--li-petrol); color: var(--li-sand); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.li-contact-strip h2 { font-family: var(--font-display); font-weight: 500; font-size: 43px; line-height: 1.08; color: var(--li-sand); margin: 0 0 12px; max-width: 18ch; text-wrap: balance; letter-spacing: -0.018em; }
.li-contact-strip p { font-size: 17px; color: rgba(252,243,227,.8); margin: 0; max-width: 50ch; }

/* ---------- FAQ ---------- */
.li-faq { max-width: 760px; margin: 0 auto; }
.li-faq details { border-top: 1px solid var(--border); padding: 18px 4px; }
.li-faq details:last-of-type { border-bottom: 1px solid var(--border); }
.li-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 500; font-size: 23px; color: var(--li-petrol); }
.li-faq summary::-webkit-details-marker { display: none; }
.li-faq summary .ic { width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--li-petrol); display: grid; place-items: center; flex: none; transition: all .2s; font-weight: 400; }
.li-faq details[open] summary .ic { background: var(--li-petrol); color: var(--li-sand); transform: rotate(45deg); }
.li-faq details p { margin: 12px 0 4px; color: var(--li-ink-2); font-size: 16px; line-height: 1.6; }

/* ---------- Small util ---------- */
.li-section--sand   { background: var(--li-sand-deep); }
.li-section--foam   { background: var(--li-seafoam-soft); }
.li-section--petrol { background: var(--li-petrol); color: var(--li-sand); }

/* ---------- Tabs (Angebot pages) ---------- */
.li-tabs { display: inline-flex; padding: 6px; background: var(--li-sand-deep); border-radius: 999px; gap: 4px; }
.li-tab { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--li-ink-2); cursor: pointer; transition: all .18s; border: none; background: transparent; }
.li-tab.is-active { background: #FFFDF8; color: var(--li-petrol); box-shadow: var(--sh-1); }

/* ============================================================
   RESPONSIVE LAYER  — additiv, alle Desktop-Regeln oben bleiben.
   Tablet ≤ 860px · Handy ≤ 560px
   ============================================================ */

/* ---------- Tablet & darunter ---------- */
@media (max-width: 860px) {
  .li-container { padding: 0 24px; }
  .li-section   { padding: 64px 0; }
  .li-section--tight { padding: 48px 0; }

  /* Nav-Umbruch: Logo oben, darunter Links + Button zusammen, zentriert */
  /* Nicht klebend auf kleinen Screens: sonst verdeckt die hohe Navbar beim
     Tastatur-Öffnen das fokussierte Formularfeld. */
  .li-nav-wrap { position: static; }
  .li-nav { flex-wrap: wrap; justify-content: center; border-radius: 28px; padding: 12px 16px; gap: 10px 12px; }
  .li-brand { width: 100%; margin-right: 0; }
  .li-nav-items { width: auto; margin-left: 0; justify-content: center; flex-wrap: wrap; gap: 4px; }
  .li-nav-menu { min-width: min(320px, 84vw); max-width: 92vw; }

  /* Hero (Startseite) */
  .li-hero { padding: 96px 0 96px; }
  .li-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .li-hero-illu { max-width: 480px; margin: 0 auto; }

  /* Section-Köpfe */
  .li-section-head { margin-bottom: 40px; }
  .li-section-head h2 { font-size: 36px; }

  /* Karten-Grids */
  .li-feature-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .li-steps { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .li-step  { min-height: 0; }
  .li-sign-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

  /* Zweispaltige Textblöcke stapeln */
  .li-two-col   { grid-template-columns: minmax(0,1fr) !important; gap: 36px; }
  .li-about-grid{ grid-template-columns: minmax(0,1fr) !important; gap: 40px; }
  .li-symptom-list { grid-template-columns: 1fr; }

  /* Inline-Grids der Unterseiten: Tracks dürfen unter Inhalt schrumpfen */
  .li-form-row     { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .li-contact-row  { grid-template-columns: 52px minmax(0,1fr) !important; }
  .li-two-col input, .li-two-col select, .li-two-col textarea { width: 100%; min-width: 0; box-sizing: border-box; }
  .li-contact-row, .li-impressum-row { overflow-wrap: break-word; }

  /* Kontakt-Strip stapeln */
  .li-contact-strip { grid-template-columns: 1fr; padding: 44px; }

  /* Footer 4 → 2 Spalten, Marke über volle Breite */
  .li-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .li-footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Handy ---------- */
@media (max-width: 560px) {
  .li-container { padding: 0 18px; }
  .li-section   { padding: 48px 0; }
  .li-section--tight { padding: 36px 0; }

  /* Nav-Items etwas kompakter, Touch-Ziel bleibt groß genug */
  .li-nav { gap: 8px 10px; }
  .li-nav-item { font-size: 14px; padding: 10px 12px; }
  /* Button als klare Aktion über volle Breite direkt unter den Links */
  .li-nav-items { width: 100%; }
  .li-nav .li-btn--primary { width: 100%; justify-content: center; }

  /* Hero */
  .li-hero { padding: 72px 0 56px; }
  .li-hero h1 { font-size: clamp(30px, 8.4vw, 40px); margin-bottom: 18px; }
  .li-hero .lead { font-size: 17px; }
  .li-hero-bgmark { opacity: 0.07; }
  .li-hero-ctas { flex-direction: column; align-items: stretch; }
  .li-hero-ctas .li-btn { justify-content: center; width: 100%; }
  .li-hero-meta { flex-direction: column; gap: 10px; }

  /* Restliche Grids voll stapeln */
  .li-feature-grid { grid-template-columns: 1fr; }
  .li-steps { grid-template-columns: 1fr !important; }
  .li-sign-grid { grid-template-columns: 1fr; }
  .li-form-row { grid-template-columns: 1fr !important; }
  .li-impressum-row { grid-template-columns: 1fr !important; gap: 6px; }
  .li-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .li-footer-grid > div:first-child { grid-column: auto; }

  /* Typo-Stufen herunter */
  .li-section-head h2 { font-size: 30px; }
  .li-two-col h2 { font-size: 30px; }
  .li-feature h3 { font-size: 24px; }
  .li-page-head { padding: 32px 0 40px; }
  .li-page-head h1 { font-size: clamp(32px, 8vw, 44px); }
  .li-faq summary { font-size: 20px; }

  /* Kontakt-Strip & Quote kompakter */
  .li-contact-strip { padding: 32px 22px; }
  .li-contact-strip h2 { font-size: 30px; }
  .li-quote-block { padding: 36px 24px; }
  .li-quote-block blockquote { font-size: 24px; }
  .li-quote-block::before { font-size: 110px; left: 16px; }

  /* CV-Zeilen: Jahr über Beschreibung */
  .li-cv li { grid-template-columns: 1fr; gap: 4px; }

  /* Footer-Leiste stapeln */
  .li-foot-bar { flex-direction: column; gap: 10px; }
}