_general.scss

base/_general.scss

@use "../abstracts/" as *;

body {
  min-height: 100vh;
  background-color: $body-background-color;
  font-family: $body-font-family;
  font-weight: $body-font-weight;
  font-size: $body-font-size;
  color: $body-text-color;
  line-height: $body-line-height;
  @media (width < $tweakpoint-30) {
    line-height: $body-line-height-mobile;
  }
}

// global tinyMCE-styles
.intro {
  font-size: $font-size-500;
}
.alert {
  font-weight: $font-weight-bold;
  color: $color-alert;
}

// links
@layer default {
  a:not([class]) {

    color: currentColor;
    text-decoration-color: currentColor;
    text-underline-offset: 0.3ex;

    &:visited {
      color: currentColor;
      text-decoration-color: currentColor;
    }
    &:hover {
      color: $color-accent-600;
      text-decoration-color: $color-accent-600;
      text-decoration-thickness: 3px;
    }
    &:active {
      background-color: $color-accent-600;
      color: $color-neutral-000;
      transform: scale(0.95);
    }
  }

  a.btn {
    @include button;
  }
} // @layer default end

@layer theme {
  a:not([class]) {
    &:hover {
      color: $color-accent-300;
      text-decoration-color: $color-accent-300;
    }
    &:active {
      background-color: $color-accent-300;
      color: $color-neutral-000;
    }
  }

  a.btn {
    --button-bg: #{$color-cd-beige};
    --button-border-color: #{$color-cd-beige};
    --button-color: #{$color-cd-stahlblau};
    transition: background-color 0.5s ease-in-out,
                color 0.5s ease-in-out;
    &:hover {
      --button-bg: #{$color-cd-stahlblau};
      --button-color: #{$color-cd-beige};
      transition: background-color 0.5s ease-in-out,
      color 0.5s ease-in-out;
    }
    &:active {
      transform: scale(0.97);
    }
  }
  a.btn-inverse {
    --button-bg: #{$color-cd-stahlblau};
    --button-border-color: #{$color-cd-stahlblau};
    --button-color: #{$color-cd-beige};
    transition: background-color 0.5s ease-in-out,
                color 0.5s ease-in-out;
    &:hover {
      --button-bg: #{$color-cd-beige};
      --button-color: #{$color-cd-stahlblau};
      transition: background-color 0.5s ease-in-out,
      color 0.5s ease-in-out;
    }
    &:active {
      transform: scale(0.97);
    }
  }
} // @layer theme end

// paragraphs
// https://12daysofweb.dev/2024/css-margin-trim-line-height-units/
p {
  max-width: $paragraph-max-ch;

  .text-align-center & {
    margin-inline: auto;
    max-width: unset;
  }

  &.error {
    font-weight: $font-weight-bold;
    color: $color-alert;
    // siehe _a11y.scss
  }
  &.confirm {
    // siehe _a11y.scss
  }
}

// paragraphs with simple links
@layer default {
  p {
    &.info,
    &.more,
    &.back {
      a {
        // link styles
      }
    }
    &.back {
      padding-block: 1.5lh;
    }
  }
}  // @layer default end

// Lists
:where(.content-text) ul,
:where(.content-text) ol {
  padding-inline-start: 1rem;
  line-height: $body-line-height;
  li {
    max-width: $paragraph-max-ch;
    overflow-wrap: break-word;
  }
}

// headings
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: $font-weight-bold;
  text-wrap: balance;
}
h1 {
  //max-width: 30ch; ??
  font-family: $font-family-accent;
  font-size: $font-size-h1;
  line-height: 1;
}
h2 {
  //max-width: 30ch; ??
  font-size: $font-size-h2;
  line-height: 1.2;
}
h3 {
  //max-width: 60ch; ??
  font-size: $font-size-h3;
  line-height: 1.2;
}
h4, h5, h6 {
  line-height: 1.2;
}

// Überschriften und Kombinationen
// h1-h6 als separates Inhaltselement
.headline {
  margin-block-end: 0.5lh;
}
// Überschrift innerhalb eines .rte bzw. eines content-elements
.rte :where(h1, h2, h3, h4, h5, h6),
[class^="content-"] > .headline,
[class^="ce_rsce_"] > .headline {
  margin-block-end: 0.5lh;
}
// Überschriften bei Modulen (im Bedarfsfall hier ergänzen)
.mod_customnav.service :where(h1, h2, h3, h4, h5, h6) {
  margin-block-end: 0.75lh;
}

// Abstand zwischen Absätzen
// und zwischen Absatz und nachfolgender Überschrift ohne separates Headline-Element
// https://12daysofweb.dev/2024/css-margin-trim-line-height-units/
.rte {
  p + p {
    margin-block-start: $paragraph-space;
  }
  p + :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0.75lh;
  }
  // FIXME das geht noch besser ...
  p + p a:where([class]),
  ul + p a:where([class]) {
    margin-block-start: 0.5lh;
  }
}

Check

• blumenbeete: p.journal
• generell: das muss noch überarbeitet werden, hier gibt es viele Änderungen