/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

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

/*
  Prevent font size inflation.

  There is only partial, experimental browser support for this:
  - https://caniuse.com/mdn-css_properties_text-size-adjust_none
  - https://devdoc.net/web/developer.mozilla.org/en-US/docs/Web/CSS/-moz-text-size-adjust.html
*/
html {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-text-size-adjust: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.07;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentcolor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Variables */
:root {
  /* @link https://utopia.fyi/type/calculator?c=325,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step-0: clamp(1rem, 0.9112rem + 0.4372vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0712rem + 0.6339vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2577rem + 0.8973vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4746rem + 1.2475vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.7262rem + 1.7104vw, 3.0518rem);
  --step-5: clamp(2.4883rem, 2.0172rem + 2.3193vw, 3.8147rem);

  /* https://utopia.fyi/space/calculator/?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|2xs-3xl&g=s,l,xl,12 */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
  --space-2xs-3xl: clamp(0.5625rem, -1.8505rem + 12.0652vw, 7.5rem);
  --wrapper-max-width: clamp(16rem, 100vw, 70rem);
  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
  --gutter: var(--space-s-l);
  --measure-compact: 20ch;
  --measure-longform: 60ch;
  --border-thin: 2px var(--color-text);
  --border-thick-width: 6px;
  --border-thick: var(--border-thick-width) var(--color-text);
  --focus-outline-size: medium;
  --focus-outline: var(--focus-outline-size) dotted currentcolor;
  --hover-underline-thickness: 0.2em;
  --color-light: #fffeff;
  --color-dark: #010004;
  --color-highlight: var(--color-fuchsia);
  --color-horizontal-line: var(--color-blue);
  --color-text: var(--color-dark);
  --color-darker-fuchsia: oklch(from var(--color-fuchsia) calc(l - 0.3) calc(c + 0.1) h);

  /* fallback if oklch is not supported */
  --color-active: var(--color-darker-fuchsia, var(--color-fuchsia));
  --color-blue: #3678f5;
  --color-fuchsia: #9e24f2;

  color-scheme: light dark;

  --header-size: 96px;

  @media (width < 760px) {
    --header-size: 48px;
  }

  @media (prefers-color-scheme: light) {
    --color-background: var(--color-light);
    --color-text: var(--color-dark);
  }

  @media (prefers-color-scheme: dark) {
    --color-text: #c8ccdb;
    --color-background: #14152b;
  }
}

@font-face {
  src: url("/fonts/ZenDots-Regular.woff2") format("woff2");
  font-family: "Zen Dots";
  font-weight: normal;
  font-style: normal;
}

@font-face {
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-family: Inter;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-family: Inter;
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: Inter, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Zen Dots", sans-serif;
}

/* Global CSS */
body {
  color: var(--color-text);
  background-color: var(--color-background);
  font-size: var(--step-1);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: var(--tracking);
  overflow-x: hidden;

  @media (prefers-contrast: less) {
    filter: contrast(0.75);
  }

  @media (prefers-contrast: more) {
    filter: contrast(1.25);
  }
}

p,
li:not([class]),
blockquote:not([class]) {
  max-width: var(--measure-longform);
}

:focus {
  outline: var(--focus-outline);
  outline-color: currentcolor;
  outline-color: var(--color-focus-ring, var(--color-text, currentColor));
  outline-offset: var(--space-3xs);
}

::selection {
  color: var(--color-background);
  background-color: var(--color-fuchsia);
}

main {
  padding-top: var(--header-size);
}

/* Blocks */
.main > * + * {
  --flow-space: var(--space-m);
}


.button {
  align-items: center;
  background: var(--color-highlight);
  border: .17em solid transparent;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: var(--step-0);
  gap: 0 var(--space-2xs);
  justify-content: center;
  line-height: 1;
  padding: .8em 1em;
  text-align: center;
  text-decoration: none;
}

.button:focus,
button:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-highlight);
}

.button:focus {
  outline: none;
  border-block-end: .17em solid var(--color-highlight);
  border-inline-end: .17em solid var(--color-highlight);

}

footer {
  font-size: clamp(0.8333rem, 0.7741rem + 0.2914vw, 1rem);
  margin: auto;

  nav {
    ul {
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
      list-style: none;
      padding-inline: 0;

      li {
        display: block;
        margin-bottom: 0;
      }

      li::before {
        display: none;
      }

      @media (width >= 450px) {
        flex-direction: row;

        li:not(:last-of-type) {
          &::after {
            color: var(--color-fuchsia);
            content: "|";
            width: var(--space-m);
            position: absolute;
            text-align: center;
          }
        }
      }
    }
  }
}

label {
  display: block;
  width: 100%;
  line-height: 1.7;
}

form,
form * {
  width: 100%;
}

input:not([type="checkbox"], [type="radio"], [type="range"]),
select,
textarea {
  background: var(--color-background);
  border: .17em solid var(--color-text);
  border-radius: 0;
  padding: var(--space-xs);
  text-indent: 0;
  width: 100%;

  &:focus {
    border-block-end: .17em solid var(--color-highlight);
    border-inline-end: .17em solid var(--color-highlight);
    outline: none;
  }
}

.grid {
  --gutter: var(--space-xl);

  border-bottom: .2rem solid var(--color-blue);
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding-bottom: var(--space-xl);

  .row {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);

    @media (width > 800px) {
      flex-direction: row;

      p {
        flex: 1;
        position: relative;

        &:not(:last-of-type)::after {
          border-right: .2rem solid var(--color-fuchsia);
          content: " ";
          display: block;
          height: 100%;
          position: absolute;
          right: calc(-0.5 * var(--gutter));
          top: 0;
        }
      }
    }
  }
}

header {
  align-items: center;
  background: var(--color-background);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 0 var(--space-m);
  position: fixed;
  right: 0;
  z-index: 50;

  #logo {
    height: var(--header-size);
    width: var(--header-size);
  }

  #organization-name {
    max-height: var(--step-3);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: 1.1;

  /* letter-spacing: var(--tracking-s); */
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

h1,
h2 {
  background: var(--color-background);
  box-shadow: .3em 0 var(--color-background);
  display: inline;

  &::after {
    border-bottom: .1em solid var(--color-horizontal-line);
    content: '';
    display: block;
    z-index: -1;
    position: relative;
    bottom: .3em;
  }
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-3);
}

a {
  --color-underline-default: currentcolor;
  --underline-thickness-default: 0.1em;
  --underline-offset-default: 0.15em;

  transition: text-decoration-thickness 150ms ease-out;
  text-decoration: underline;
  text-decoration-color: currentcolor;
  text-decoration-color: var(--color-underline, var(--color-underline-default));
  text-decoration-thickness: var(--underline-thickness, var(--underline-thickness-default));
  text-decoration-skip-ink: auto;
  text-underline-offset: var(--underline-offset, var(--underline-offset-default));
  color: var(--color-link, currentcolor);
}

a:hover,
a:focus {
  --color-underline: var(--color-active);
  --underline-thickness: var(--hover-underline-thickness);

  color: var(--color-link-focus, var(--color-active));
}

@counter-style abc {
  system: alphabetic;
  symbols: a b c d e f g h i j k l m n o p q r s t u v w x y z;
  suffix: ") ";
}

dl {
  counter-reset: term;
  list-style: abc;

  dt {
    display: list-item;
    counter-increment: term;
    margin-left: 1em;
    padding-top: 1em;
  }

  dd {
    margin-left: 1em;
  }
}

ul {
  list-style-type: none;
  padding-left: 0;
  font-weight: 500;
  margin: var(--space-l) 0;
  padding-inline: var(--space-2xl);

  li {
    display: flex;
    gap: var(--space-xs);
    line-height: 1.5;
    margin-bottom: var(--space-l);
  }

  li::before {
    color: var(--color-blue);
    content: "+";
    font-size: var(--step-4);
    line-height: 0;
    position: relative;
    top: var(--space-xs);
  }
}

ul.partner-list {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  padding-inline: 0;

  li img {
    height: var(--step-5);
  }

  li::before {
    display: none;
  }
}

#main-navigation {
  --drawer-transition-time: 100ms;
  --drawer-width: calc(20 * var(--step-1));

  @media (prefers-reduced-motion) {
    --drawer-transition-time: 0;
  }

  @media (width <= 512px) {
    --drawer-width: 100%;
  }

  /* make sure the header is centered */
  width: var(--header-size);

  ul {
    background: var(--color-background);
    border-left: var(--space-3xs) solid var(--color-text);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    max-width: 100%;
    top: 0;
    list-style: none;
    margin-top: 0;
    z-index: 100;
    padding-left: var(--space-s);
    padding-top: calc(var(--space-m) + var(--space-s));
    transition: all var(--drawer-transition-time) ease-in-out;
    width: var(--drawer-width);
    height: 100%;

    li {
      line-height: inherit;
      margin-bottom: 0;
    }

    li::before {
      display: none;
    }

    svg {
      height: calc(var(--step-1));
      vertical-align: middle;
      width: auto;
    }

    .current-page {
      color: var(--color-highlight);
    }
  }
}

#main-navigation-toggle {
  display: none;

  ~ label {
    cursor: pointer;
    line-height: 1;
    text-align: right;
    z-index: 200;

    svg {
      color: var(--color-blue);
      height: calc(var(--step-3));
      vertical-align: middle;
      width: auto;
    }

    svg:hover {
      color: var(--color-fuchsia);
    }

    .open {
      padding: var(--space-s);
      position: absolute;
      transition: all var(--drawer-transition-time) ease-in-out;
      top: var(--space-m);
      z-index: 200;
    }
  }

  ~ ul, ~ label .open {
    position: fixed;
    right: calc(-1 * var(--drawer-width));
  }

  &:checked ~ ul, &:checked ~ label .open {
    right: 0;
  }
}

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-direction='rtl'] > :first-child {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;

  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-direction='rtl'] > :last-child {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
  min-inline-size: unset;
}

/* Utilities */
.center {
  /* ↓ Remove padding from the width calculation */
  box-sizing: content-box;

  /* ↓ The maximum width is the maximum measure */
  max-inline-size: 60ch;

  /* ↓ Only affect horizontal margins */
  margin-inline: auto;

  /* ↓ Apply flexbox layout for intrinsic centering */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.simple-center {
  margin-inline: auto;
}

.visible-only-on-mobile {
  @media screen and (width >= 800px) {
    display: none;
  }
}

.visible-only-on-desktop {
  @media screen and (width <= 800px) {
    display: none;
  }
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus, :active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.heading-highlight-text {
  color: var(--color-background);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-text);

  --shadow-distance: .05em;

  text-shadow: var(--shadow-distance) var(--shadow-distance) 0 var(--color-text),
  -1px -1px 0 var(--color-text),
  1px -1px 0 var(--color-text),
  -1px 1px 0 var(--color-text),
  1px 1px 0 var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  transition: text-shadow 0.25s;

  &:hover {
    --shadow-distance: .09em;
  }
}

.region {
  padding-top: var(--region-space, var(--space-xl-2xl));
  padding-bottom: var(--region-space, var(--space-xl-2xl));
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.justify-content-end {
  justify-content: end;
}

/* Composition */

.flow > * + * {
  margin-bottom: var(--flow-space, 1em);
  margin-top: var(--flow-space, 1em);
}

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-m));
}

.wrapper {
  margin-inline: auto;
  max-width: var(--wrapper-max-width);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

@media print {
  header,
  footer,
  nav {
    display: none !important;
  }

  /* with display: grid; the browser can put page breaks in the middle of text lines */
  .home-page {
    display: block !important;
  }

  /* the padding is used to give space for the header, which we hide in print anyway */
  main {
    padding-top: 0;
  }

  /* remove padding from the last element of the page (can cause empty last page) */
  .region:last-child {
    padding-bottom: 0;
  }

  h1,
  h2,
  h3 {
    break-after: avoid; /* keep headings with following text */
    break-inside: avoid; /* keep all lines of a heading on the same page */
  }
}


.home-page {
  display: grid;
  grid-template-rows: min-content 1fr min-content;

  & > * + * {
    --flow-space: var(--space-m);
  }
}

.introduction {
  --flow-space: var(--space-s);

  .wrapper p {
    border-left: .2em solid var(--color-fuchsia);
    padding-left: var(--gutter);
  }
}

.offers {
  --region-space: var(--space-l-xl);
  --flow-space: var(--space-xl);

  ul {
    padding-inline-start: 0;

    --flow-space: var(--space-xl);
  }

  .offer {
    font-size: var(--step-1);

    --sidebar-target-width: 12rem;
    --sidebar-content-min-width: 70%;

    .offer-text {
      --flow-space: var(--space-s);

      /* flex: 1 1 10rem;
         min-width: 10rem;
         // https://caniuse.com/intrinsic-width
         max-width: -webkit-fit-content;
         max-width: -moz-fit-content;
         max-width: fit-content;
       */

      div {
        min-width: 200px;
      }
    }

    img {
      max-width: 12rem;
    }
  }
}

article.datenschutzerklaerung {
  h2, h3 {
    display: list-item;
    list-style: none;
    padding-top: 1em;
  }

  h2 {
    counter-increment: h2-counter;
    counter-reset: h3-counter;

    &::before {
      content: counter(h2-counter) ". ";
    }
  }

  h3 {
    counter-increment: h3-counter;

    &::before {
      content: counter(h2-counter) "." counter(h3-counter) ". ";
    }
  }
}

@counter-style lower-alpha-parantheses {
  system: alphabetic;
  suffix: ") ";

  /* symbols: 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j' 'k' 'l' 'm' 'n' 'o' 'p' 'q' 'r' 's' 't' 'u' 'v' 'w' 'x' 'y' 'z'; */
  symbols: "\61" "\62" "\63" "\64" "\65" "\66" "\67" "\68" "\69" "\6A" "\6B"
    "\6C" "\6D" "\6E" "\6F" "\70" "\71" "\72" "\73" "\74" "\75" "\76" "\77"
    "\78" "\79" "\7A";
}

article.satzung-vorneweg-eg {
  h3 {
    display: list-item;
    list-style: none;
    counter-increment: paragraph;

    &::before {
      content: "§ " counter(paragraph) " ";
    }
  }

  ol ol {
    list-style: lower-alpha-parantheses;
  }
}