h1, h2, h3, h4, h5 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300 !important;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  color:var(--color-base);
}

h1 {
  /* font-size: 3.5rem;
  padding-bottom: 2rem; */
  color:var(--color-base);
}

/* EDIT FORM TITLE */
#edit-title-0-value {
  width: 100%;
  font-family: "Noto Sans", sans-serif;
  font-size: 4rem;
  font-weight: 300 !important;
  color:var(--color-base);
}

/* a {
  color:#0d6efd;
} */

h2 {
  border-bottom: 1px solid var(--color-base);
  padding-top: 2rem;
  padding-bottom: 0.6rem;
}

h3 {
  font-size: 1.6rem;
  padding-top: 2rem;
}

h4 {
  font-size: 1.1rem;
  font-weight: 400;
}


p, a, li, td {
  color:var(--color-txt);
  font-family: "Noto Sans";
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

figcaption {
    font-size:small;
    font-style: italic;
    color: var(--color-txt-light);
}


.image-style-inline-large {
    width:100%; 
    max-width: 900px; 
    height:auto
}

.image-style-inline-medium {
    width:66%; 
    max-width: 600px; 
    height:auto
}

.image-style-inline-small {
    width:33%; 
    max-width: 300px; 
    height:auto
}



.node__content, .ck-content {
  /* Initialisiert den Zähler für die oberste Ebene (h2) */
  counter-reset: h2counter;
}

/* --- H2 --- */
.node__content h2, .ck-content h2 {
  counter-reset: h3counter;
}
.node__content h2:before, .ck-content h2:before {
  content: counter(h2counter) "  ";
  counter-increment: h2counter;
  margin-right: 1rem;
  display: inline-block;
}

/* --- H3 --- */
.node__content h3, .ck-content h3 {
  counter-reset: h4counter;
}
.node__content h3:before, .ck-content h3:before {
  content: counter(h2counter) "." counter(h3counter) " ";
  counter-increment: h3counter;
}

/* --- H4 --- */
.node__content h4, .ck-content h4 {
  counter-reset: h5counter;
}
.node__content h4:before, .ck-content h4:before {
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) " ";
  counter-increment: h4counter;
}

/* --- H5 --- */
.node__content h5, .ck-content h5 {
  counter-reset: h6counter;
}
.node__content h5:before, .ck-content h5:before {
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) " ";
  counter-increment: h5counter;
}

/* --- H6 --- */
.node__content h6:before, .ck-content h6:before {
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) " ";
  counter-increment: h6counter;
}




/* Grundstyling für die Überschrift */
.node__content h2, .node__content h3, 
.node__content h4, .node__content h5, .node__content h6 {
    position: relative;
}

/* Das deeplink-Icon standardmässig verstecken */
.heading-deeplink {
    opacity: 0;
    cursor: pointer;
    margin-left: 15px; /* Abstand zum Titel-Text */
    font-size: 0.8rem;
    transition: opacity 0.2s ease-in-out;
    display: inline-block;
}

/* Beim Hover über die Überschrift Icon einblenden */
.node__content h2:hover .heading-deeplink,
.node__content h3:hover .heading-deeplink,
.node__content h4:hover .heading-deeplink,
.node__content h5:hover .heading-deeplink,
.node__content h6:hover .heading-deeplink {
    opacity: 1;
}

/* Optional: Icon beim Drüberfahren einfärben */
.heading-deeplink:hover {
    color: #0056b3;
}