/* Helper 

Mobil endet: 641
Tablet beginnt: 641px
Desktop beginnt: 880px
Widescreen beginnt: 1100px
Fullhd beginnt: 2000px


/* Mobile only 
@media screen and (max-width: 640px) { /* … mobile styles … */ 

/* Tablet only
@media screen and (min-width: 641px) and (max-width: 879px) { /* … tablet styles … */ 

/* Desktop and up
@media screen and (min-width: 880px) { /* … desktop styles … */ 

/* Touch (mobile + tablet), falls gebraucht
@media screen and (max-width: 879px) { /* … touch styles … */ 


/* ####################### */


/* ===== Mobile (≤641px) ===== */
@media screen and (max-width: 640px) {

.is-2by1-mobile {
    aspect-ratio: 2 / 1 !important;
  }


.negative-top-margin{
    margin-top: -6rem;
  }

  .mobile-padding {
    padding-left: var(--bulma-section-padding, 1.5rem);
    padding-right: var(--bulma-section-padding, 1.5rem);
  }

  .columns > .column.mobile-padding { 
    padding-left: var(--bulma-section-padding, 1.5rem);
    padding-right: var(--bulma-section-padding, 1.5rem);
  }

  /* Nur mobil: schmalere horizontale Gutters, Außen bündig */
.columns.narrow-gap-mobile {
    /* pro Seite (!) – innen ergibt sich dann 2 × dieser Wert */
    --col-pad-mobile: .4rem;

    /* Bulma-Default ist -0.75rem; hier passend zu unserem Padding korrigieren */
    margin-left:  calc(-1 * var(--col-pad-mobile));
    margin-right: calc(-1 * var(--col-pad-mobile));
  }
  .columns.narrow-gap-mobile > .column {
    padding:  var(--col-pad-mobile) !important;
  }


.columns.is-centered-mobile {
    justify-content: center !important;
  }

/* z.B. Farbliche Kästen mobil auf 100vw setzen */
  .is-fullwidth-mobile {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }


  .p-0-mobile { padding: 0 !important; }
  .pt-0-mobile { padding-top: 0 !important; }
  .pr-0-mobile { padding-right: 0 !important; }
  .pb-0-mobile { padding-bottom: 0 !important; }
  .pl-0-mobile { padding-left: 0 !important; }
  .px-0-mobile { padding-left: 0 !important; padding-right: 0 !important; }
  .py-0-mobile { padding-top: 0 !important; padding-bottom: 0 !important; }
  .m-0-mobile { margin: 0 !important; }
  .mt-0-mobile { margin-top: 0 !important; }
  .mr-0-mobile { margin-right: 0 !important; }
  .mb-0-mobile { margin-bottom: 0 !important; }
  .ml-0-mobile { margin-left: 0 !important; }
  .mx-0-mobile { margin-left: 0 !important; margin-right: 0 !important; }
  .my-0-mobile { margin-top: 0 !important; margin-bottom: 0 !important; }

  .p-1-mobile { padding: .25rem !important; }
  .pt-1-mobile { padding-top: .25rem !important; }
  .pr-1-mobile { padding-right: .25rem !important; }
  .pb-1-mobile { padding-bottom: .25rem !important; }
  .pl-1-mobile { padding-left: .25rem !important; }
  .px-1-mobile { padding-left: .25rem !important; padding-right: .25rem !important; }
  .py-1-mobile { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .m-1-mobile { margin: .25rem !important; }
  .mt-1-mobile { margin-top: .25rem !important; }
  .mr-1-mobile { margin-right: .25rem !important; }
  .mb-1-mobile { margin-bottom: .25rem !important; }
  .ml-1-mobile { margin-left: .25rem !important; }
  .mx-1-mobile { margin-left: .25rem !important; margin-right: .25rem !important; }
  .my-1-mobile { margin-top: .25rem !important; margin-bottom: .25rem !important; }

  .p-2-mobile { padding: .5rem !important; }
  .pt-2-mobile { padding-top: .5rem !important; }
  .pr-2-mobile { padding-right: .5rem !important; }
  .pb-2-mobile { padding-bottom: .5rem !important; }
  .pl-2-mobile { padding-left: .5rem !important; }
  .px-2-mobile { padding-left: .5rem !important; padding-right: .5rem !important; }
  .py-2-mobile { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .m-2-mobile { margin: .5rem !important; }
  .mt-2-mobile { margin-top: .5rem !important; }
  .mr-2-mobile { margin-right: .5rem !important; }
  .mb-2-mobile { margin-bottom: .5rem !important; }
  .ml-2-mobile { margin-left: .5rem !important; }
  .mx-2-mobile { margin-left: .5rem !important; margin-right: .5rem !important; }
  .my-2-mobile { margin-top: .5rem !important; margin-bottom: .5rem !important; }

  .p-3-mobile { padding: .75rem !important; }
  .pt-3-mobile { padding-top: .75rem !important; }
  .pr-3-mobile { padding-right: .75rem !important; }
  .pb-3-mobile { padding-bottom: .75rem !important; }
  .pl-3-mobile { padding-left: .75rem !important; }
  .px-3-mobile { padding-left: .75rem !important; padding-right: .75rem !important; }
  .py-3-mobile { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .m-3-mobile { margin: .75rem !important; }
  .mt-3-mobile { margin-top: .75rem !important; }
  .mr-3-mobile { margin-right: .75rem !important; }
  .mb-3-mobile { margin-bottom: .75rem !important; }
  .ml-3-mobile { margin-left: .75rem !important; }
  .mx-3-mobile { margin-left: .75rem !important; margin-right: .75rem !important; }
  .my-3-mobile { margin-top: .75rem !important; margin-bottom: .75rem !important; }

  .p-4-mobile { padding: 1rem !important; }
  .pt-4-mobile { padding-top: 1rem !important; }
  .pr-4-mobile { padding-right: 1rem !important; }
  .pb-4-mobile { padding-bottom: 1rem !important; }
  .pl-4-mobile { padding-left: 1rem !important; }
  .px-4-mobile { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-4-mobile { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .m-4-mobile { margin: 1rem !important; }
  .mt-4-mobile { margin-top: 1rem !important; }
  .mr-4-mobile { margin-right: 1rem !important; }
  .mb-4-mobile { margin-bottom: 1rem !important; }
  .ml-4-mobile { margin-left: 1rem !important; }
  .mx-4-mobile { margin-left: 1rem !important; margin-right: 1rem !important; }
  .my-4-mobile { margin-top: 1rem !important; margin-bottom: 1rem !important; }

  .p-5-mobile { padding: 1.5rem !important; }
  .pt-5-mobile { padding-top: 1.5rem !important; }
  .pr-5-mobile { padding-right: 1.5rem !important; }
  .pb-5-mobile { padding-bottom: 1.5rem !important; }
  .pl-5-mobile { padding-left: 1.5rem !important; }
  .px-5-mobile { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .py-5-mobile { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .m-5-mobile { margin: 1.5rem !important; }
  .mt-5-mobile { margin-top: 1.5rem !important; }
  .mr-5-mobile { margin-right: 1.5rem !important; }
  .mb-5-mobile { margin-bottom: 1.5rem !important; }
  .ml-5-mobile { margin-left: 1.5rem !important; }
  .mx-5-mobile { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .my-5-mobile { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

  .p-6-mobile { padding: 3rem !important; }
  .pt-6-mobile { padding-top: 3rem !important; }
  .pr-6-mobile { padding-right: 3rem !important; }
  .pb-6-mobile { padding-bottom: 3rem !important; }
  .pl-6-mobile { padding-left: 3rem !important; }
  .px-6-mobile { padding-left: 3rem !important; padding-right: 3rem !important; }
  .py-6-mobile { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .m-6-mobile { margin: 3rem !important; }
  .mt-6-mobile { margin-top: 3rem !important; }
  .mr-6-mobile { margin-right: 3rem !important; }
  .mb-6-mobile { margin-bottom: 3rem !important; }
  .ml-6-mobile { margin-left: 3rem !important; }
  .mx-6-mobile { margin-left: 3rem !important; margin-right: 3rem !important; }
  .my-6-mobile { margin-top: 3rem !important; margin-bottom: 3rem !important; }

  .p-7-mobile { padding: 4rem !important; }
  .pt-7-mobile { padding-top: 4rem !important; }
  .pr-7-mobile { padding-right: 4rem !important; }
  .pb-7-mobile { padding-bottom: 4rem !important; }
  .pl-7-mobile { padding-left: 4rem !important; }
  .px-7-mobile { padding-left: 4rem !important; padding-right: 4rem !important; }
  .py-7-mobile { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .m-7-mobile { margin: 4rem !important; }
  .mt-7-mobile { margin-top: 4rem !important; }
  .mr-7-mobile { margin-right: 4rem !important; }
  .mb-7-mobile { margin-bottom: 4rem !important; }
  .ml-7-mobile { margin-left: 4rem !important; }
  .mx-7-mobile { margin-left: 4rem !important; margin-right: 4rem !important; }
  .my-7-mobile { margin-top: 4rem !important; margin-bottom: 4rem !important; }
}



/* … tablet styles … */ 
@media screen and (min-width: 641px) and (max-width: 879px) {

  .tablet-padding {
    padding-left: var(--bulma-section-padding, 1.5rem);
    padding-right: var(--bulma-section-padding, 1.5rem);
  }

     .narrow-gap-tablet {
  padding: 0.5rem !important;
}

/* Suche: natives WebKit-Clear-Icon ausblenden, wir nutzen eigenes Icon */
#adressen-filter input[type="search"]::-webkit-search-decoration,
#adressen-filter input[type="search"]::-webkit-search-cancel-button,
#adressen-filter input[type="search"]::-webkit-search-results-button,
#adressen-filter input[type="search"]::-webkit-search-results-decoration { 
  -webkit-appearance: none; appearance: none; display: none; 
}
/* Edge/IE */
#adressen-filter input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }

  .p-0-tablet { padding: 0 !important; }
  .pt-0-tablet { padding-top: 0 !important; }
  .pr-0-tablet { padding-right: 0 !important; }
  .pb-0-tablet { padding-bottom: 0 !important; }
  .pl-0-tablet { padding-left: 0 !important; }
  .px-0-tablet { padding-left: 0 !important; padding-right: 0 !important; }
  .py-0-tablet { padding-top: 0 !important; padding-bottom: 0 !important; }
  .m-0-tablet { margin: 0 !important; }
  .mt-0-tablet { margin-top: 0 !important; }
  .mr-0-tablet { margin-right: 0 !important; }
  .mb-0-tablet { margin-bottom: 0 !important; }
  .ml-0-tablet { margin-left: 0 !important; }
  .mx-0-tablet { margin-left: 0 !important; margin-right: 0 !important; }
  .my-0-tablet { margin-top: 0 !important; margin-bottom: 0 !important; }

  .p-1-tablet { padding: .25rem !important; }
  .pt-1-tablet { padding-top: .25rem !important; }
  .pr-1-tablet { padding-right: .25rem !important; }
  .pb-1-tablet { padding-bottom: .25rem !important; }
  .pl-1-tablet { padding-left: .25rem !important; }
  .px-1-tablet { padding-left: .25rem !important; padding-right: .25rem !important; }
  .py-1-tablet { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .m-1-tablet { margin: .25rem !important; }
  .mt-1-tablet { margin-top: .25rem !important; }
  .mr-1-tablet { margin-right: .25rem !important; }
  .mb-1-tablet { margin-bottom: .25rem !important; }
  .ml-1-tablet { margin-left: .25rem !important; }
  .mx-1-tablet { margin-left: .25rem !important; margin-right: .25rem !important; }
  .my-1-tablet { margin-top: .25rem !important; margin-bottom: .25rem !important; }

  .p-2-tablet { padding: .5rem !important; }
  .pt-2-tablet { padding-top: .5rem !important; }
  .pr-2-tablet { padding-right: .5rem !important; }
  .pb-2-tablet { padding-bottom: .5rem !important; }
  .pl-2-tablet { padding-left: .5rem !important; }
  .px-2-tablet { padding-left: .5rem !important; padding-right: .5rem !important; }
  .py-2-tablet { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .m-2-tablet { margin: .5rem !important; }
  .mt-2-tablet { margin-top: .5rem !important; }
  .mr-2-tablet { margin-right: .5rem !important; }
  .mb-2-tablet { margin-bottom: .5rem !important; }
  .ml-2-tablet { margin-left: .5rem !important; }
  .mx-2-tablet { margin-left: .5rem !important; margin-right: .5rem !important; }
  .my-2-tablet { margin-top: .5rem !important; margin-bottom: .5rem !important; }

  .p-3-tablet { padding: .75rem !important; }
  .pt-3-tablet { padding-top: .75rem !important; }
  .pr-3-tablet { padding-right: .75rem !important; }
  .pb-3-tablet { padding-bottom: .75rem !important; }
  .pl-3-tablet { padding-left: .75rem !important; }
  .px-3-tablet { padding-left: .75rem !important; padding-right: .75rem !important; }
  .py-3-tablet { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .m-3-tablet { margin: .75rem !important; }
  .mt-3-tablet { margin-top: .75rem !important; }
  .mr-3-tablet { margin-right: .75rem !important; }
  .mb-3-tablet { margin-bottom: .75rem !important; }
  .ml-3-tablet { margin-left: .75rem !important; }
  .mx-3-tablet { margin-left: .75rem !important; margin-right: .75rem !important; }
  .my-3-tablet { margin-top: .75rem !important; margin-bottom: .75rem !important; }

  .p-4-tablet { padding: 1rem !important; }
  .pt-4-tablet { padding-top: 1rem !important; }
  .pr-4-tablet { padding-right: 1rem !important; }
  .pb-4-tablet { padding-bottom: 1rem !important; }
  .pl-4-tablet { padding-left: 1rem !important; }
  .px-4-tablet { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-4-tablet { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .m-4-tablet { margin: 1rem !important; }
  .mt-4-tablet { margin-top: 1rem !important; }
  .mr-4-tablet { margin-right: 1rem !important; }
  .mb-4-tablet { margin-bottom: 1rem !important; }
  .ml-4-tablet { margin-left: 1rem !important; }
  .mx-4-tablet { margin-left: 1rem !important; margin-right: 1rem !important; }
  .my-4-tablet { margin-top: 1rem !important; margin-bottom: 1rem !important; }

  .p-5-tablet { padding: 1.5rem !important; }
  .pt-5-tablet { padding-top: 1.5rem !important; }
  .pr-5-tablet { padding-right: 1.5rem !important; }
  .pb-5-tablet { padding-bottom: 1.5rem !important; }
  .pl-5-tablet { padding-left: 1.5rem !important; }
  .px-5-tablet { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .py-5-tablet { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .m-5-tablet { margin: 1.5rem !important; }
  .mt-5-tablet { margin-top: 1.5rem !important; }
  .mr-5-tablet { margin-right: 1.5rem !important; }
  .mb-5-tablet { margin-bottom: 1.5rem !important; }
  .ml-5-tablet { margin-left: 1.5rem !important; }
  .mx-5-tablet { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .my-5-tablet { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

  .p-6-tablet { padding: 3rem !important; }
  .pt-6-tablet { padding-top: 3rem !important; }
  .pr-6-tablet { padding-right: 3rem !important; }
  .pb-6-tablet { padding-bottom: 3rem !important; }
  .pl-6-tablet { padding-left: 3rem !important; }
  .px-6-tablet { padding-left: 3rem !important; padding-right: 3rem !important; }
  .py-6-tablet { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .m-6-tablet { margin: 3rem !important; }
  .mt-6-tablet { margin-top: 3rem !important; }
  .mr-6-tablet { margin-right: 3rem !important; }
  .mb-6-tablet { margin-bottom: 3rem !important; }
  .ml-6-tablet { margin-left: 3rem !important; }
  .mx-6-tablet { margin-left: 3rem !important; margin-right: 3rem !important; }
  .my-6-tablet { margin-top: 3rem !important; margin-bottom: 3rem !important; }

  .p-7-tablet { padding: 4rem !important; }
  .pt-7-tablet { padding-top: 4rem !important; }
  .pr-7-tablet { padding-right: 4rem !important; }
  .pb-7-tablet { padding-bottom: 4rem !important; }
  .pl-7-tablet { padding-left: 4rem !important; }
  .px-7-tablet { padding-left: 4rem !important; padding-right: 4rem !important; }
  .py-7-tablet { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .m-7-tablet { margin: 4rem !important; }
  .mt-7-tablet { margin-top: 4rem !important; }
  .mr-7-tablet { margin-right: 4rem !important; }
  .mb-7-tablet { margin-bottom: 4rem !important; }
  .ml-7-tablet { margin-left: 4rem !important; }
  .mx-7-tablet { margin-left: 4rem !important; margin-right: 4rem !important; }
  .my-7-tablet { margin-top: 4rem !important; margin-bottom: 4rem !important; }
}

/* Toggle (Liste/Karte) – eigener, leichter Switch ohne externes Addon */
#view-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
label[for="view-switch"] {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-left: 52px;          /* Platz für den Schalter links */
  line-height: 22px;
  user-select: none;
}
label[for="view-switch"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 22px;
  background: #dfe6eb;        /* Track off */
  border-radius: 9999px;
  transition: background .18s ease;
}
label[for="view-switch"]::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: #fff;            /* Thumb */
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .18s ease;
}
#view-switch:checked + label::before {
  background: var(--ci-dunkelblau, var(--bulma-primary, #3273dc)); /* Track on */
}
#view-switch:checked + label::after {
  transform: translate(22px, -50%); /* Thumb nach rechts */
}

/* Callout steps list variants */
.callout-list {
  margin-top: 1.5rem !important;
}

.callout-list__item {
  margin-top: 0.5rem !important;
}

.callout-list__item:last-child {
  margin-bottom: 0;
}

.callout-list--checklist {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.callout-list--checklist .callout-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0;
}

.callout-list__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--ci-dunkelblau);
  color: #fff;
  font-size: 0.8rem;
  /* margin-top: 0.2rem; */
}

.callout-list--numbered {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  counter-reset: callout-counter;
}

.callout-list--numbered .callout-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  counter-increment: callout-counter;
  padding-left: 0;
}

.callout-list--numbered .callout-list__item::before {
  content: counter(callout-counter);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--ci-dunkelblau);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.callout-list__icon i {
  color: inherit;
  line-height: 1;
}

.callout-list__content,
.callout-list__title,
.callout-list__text {
  display: block;
}

.callout-list__text {
  margin-bottom: 0.3rem !important ;
}