@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 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 {
  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.1;
}

/* 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, button,
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;
}

:root {
  --clr-pri-100:hsl(46, 100%, 48%);
  --clr-pri-200:hsl(46, 100%, 70%);
  --clr-pri-300:hsl(46, 100%, 60%);
  --clr-pri-400:hsl(46, 100%, 43%);
  --clr-pri-500:hsl(46, 100%, 20%);
  --clr-sec-100:hsl(0, 0%, 100%);
  --clr-sec-200:hsla(0, 0%, 100%, 0.8);
  --clr-sec-300:hsla(0, 0%, 100%, 0.6);
  --clr-sec-400:hsla(0, 0%, 100%, 0.4);
  --clr-sec-500:hsla(0, 0%, 95%, 0.6);
  --clr-thi-100:hsl(210, 100%, 18%);
  --clr-thi-200:hsl(210, 100%, 28%);
  --clr-thi-300:hsl(210, 100%, 38%);
  --clr-thi-400:hsl(210, 100%, 48%);
  --clr-thi-500:hsl(210, 100%, 58%);
  --clr-fou-100:hsl(266, 50%, 67%);
  --clr-fou-200:hsl(266, 50%, 77%);
  --clr-fou-300:hsl(266, 50%, 82%);
  --clr-fou-400:hsl(266, 50%, 88%);
  --clr-fou-500:hsl(266, 50%, 95%);
  --p-sm:1rem;
  --p-t-sm:1rem;
  --p-r-sm:1rem;
  --p-bt-sm:1rem;
  --p-l-sm:1rem;
  --p-md:2rem;
  --p-t-md:2rem;
  --p-r-md:2rem;
  --p-bt-md:2rem;
  --p-l-md:2rem;
  --p-lg:6rem;
  --p-t-lg:6rem;
  --p-r-lg:6rem;
  --p-bt-lg:6rem;
  --p-l-lg:6rem;
  --m-sm:1rem;
  --m-md:2rem;
  --m-lg:6rem;
}
@media only screen and (min-widht: 65em) {
  :root {
    --p-sm:2.5rem;
    --p-md:6rem;
    --p-lg:9rem;
    --m-sm:2.5rem;
    --m-md:6rem;
    --m-lg:9rem;
  }
}
:root {
  --fs-100:1rem;
  --fs-200:1.125rem;
  --fs-300:1.563rem;
  --fs-400:1.953rem;
  --fs-500:2.441rem;
  --fs-600:3.052rem;
}
@media only screen and (min-widht: 65em) {
  :root {
    --fs-100:1rem;
    --fs-200:1.425rem;
    --fs-300:2rem;
    --fs-400:2.827rem;
    --fs-500:4rem;
    --fs-600:5.653rem;
  }
}

.txt-clr-pri-100 {
  color: var(--clr-pri-100);
}

.bg-clr-pri-100 {
  background-color: var(--clr-pri-100);
}

.txt-clr-pri-200 {
  color: var(--clr-pri-200);
}

.bg-clr-pri-200 {
  background-color: var(--clr-pri-200);
}

.txt-clr-pri-300 {
  color: var(--clr-pri-300);
}

.bg-clr-pri-300 {
  background-color: var(--clr-pri-300);
}

.txt-clr-pri-400 {
  color: var(--clr-pri-400);
}

.bg-clr-pri-400 {
  background-color: var(--clr-pri-400);
}

.txt-clr-pri-500 {
  color: var(--clr-pri-500);
}

.bg-clr-pri-500 {
  background-color: var(--clr-pri-500);
}

.txt-clr-sec-100 {
  color: var(--clr-sec-100);
}

.bg-clr-sec-100 {
  background-color: var(--clr-sec-100);
}

.txt-clr-sec-200 {
  color: var(--clr-sec-200);
}

.bg-clr-sec-200 {
  background-color: var(--clr-sec-200);
}

.txt-clr-sec-300 {
  color: var(--clr-sec-300);
}

.bg-clr-sec-300 {
  background-color: var(--clr-sec-300);
}

.txt-clr-sec-400 {
  color: var(--clr-sec-400);
}

.bg-clr-sec-400 {
  background-color: var(--clr-sec-400);
}

.txt-clr-sec-500 {
  color: var(--clr-sec-500);
}

.bg-clr-sec-500 {
  background-color: var(--clr-sec-500);
}

.txt-clr-thi-100 {
  color: var(--clr-thi-100);
}

.bg-clr-thi-100 {
  background-color: var(--clr-thi-100);
}

.txt-clr-thi-200 {
  color: var(--clr-thi-200);
}

.bg-clr-thi-200 {
  background-color: var(--clr-thi-200);
}

.txt-clr-thi-300 {
  color: var(--clr-thi-300);
}

.bg-clr-thi-300 {
  background-color: var(--clr-thi-300);
}

.txt-clr-thi-400 {
  color: var(--clr-thi-400);
}

.bg-clr-thi-400 {
  background-color: var(--clr-thi-400);
}

.txt-clr-thi-500 {
  color: var(--clr-thi-500);
}

.bg-clr-thi-500 {
  background-color: var(--clr-thi-500);
}

.txt-clr-fou-100 {
  color: var(--clr-fou-100);
}

.bg-clr-fou-100 {
  background-color: var(--clr-fou-100);
}

.txt-clr-fou-200 {
  color: var(--clr-fou-200);
}

.bg-clr-fou-200 {
  background-color: var(--clr-fou-200);
}

.txt-clr-fou-300 {
  color: var(--clr-fou-300);
}

.bg-clr-fou-300 {
  background-color: var(--clr-fou-300);
}

.txt-clr-fou-400 {
  color: var(--clr-fou-400);
}

.bg-clr-fou-400 {
  background-color: var(--clr-fou-400);
}

.txt-clr-fou-500 {
  color: var(--clr-fou-500);
}

.bg-clr-fou-500 {
  background-color: var(--clr-fou-500);
}

:root {
  --body-font: "Poppins", sans-serif;
  --bs-font-sans-serif: "Poppins", sans-serif; /* für Bootstrap-Komponenten */
}

body,
body * {
  font-family: var(--body-font) !important;
}

h1, h2, h3, h4 {
  font-style: normal;
  line-height: normal;
}

h1 {
  font-size: 18px;
  font-weight: 400;
}

h2 {
  font-size: 55px;
  font-weight: 400;
}

h3 {
  font-size: 25px;
  font-weight: 400;
}
h3.semi-bold {
  font-weight: 600;
}

h4 {
  font-size: 40px;
  font-weight: 700;
}

.field--name-field-inhalt img {
  height: 100%;
}
.field--name-field-inhalt figure {
  margin-block: 1rem;
}
.field--name-field-inhalt figure.caption {
  position: relative;
}
.field--name-field-inhalt figure.caption figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0.25rem;
  background: var(--clr-thi-100);
  color: var(--clr-sec-100);
}

.field--name-field-bildergalerie > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.field--name-field-bildergalerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.field--name-field-bildergalerie {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  position: relative;
  float: unset !important;
  margin: 0 !important;
  margin-top: var(--p-m) !important;
}

.field--name-field-bildergalerie .wide {
  grid-column: span 2;
}

.field--name-field-bildergalerie .tall {
  grid-row: span 2;
}

.field--name-field-bildergalerie .big {
  grid-column: span 2;
  grid-row: span 2;
}

.btn.btn-custom {
  border: 0;
  font-weight: 400 !important;
  background-color: var(--clr-pri-100);
  padding: 12px;
  border-radius: 16px;
  min-width: 150px;
}
.btn.btn-custom * {
  font-weight: bold !important;
}
.btn.btn-custom:hover {
  background-color: var(--clr-pri-400);
}
.btn.btn-custom.yell {
  background-color: var(--clr-pri-100);
}
.btn.btn-custom.yell:hover {
  background-color: var(--clr-pri-400);
}
.btn.btn-custom.blue {
  background-color: var(--clr-thi-100);
  color: white;
}
.btn.btn-custom.blue:hover {
  background-color: var(--clr-thi-200);
}

/* Teasers small big wide */
.paragraph .teaser-inner img {
  height: auto;
  max-width: 100%;
}

/* Bezirke Block */
.view-seniorenheime-bezirke .view-content.row,
.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
}

.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row .card {
  grid-template-rows: 230px 1fr 50px;
}

.view-seniorenheime-bezirke .view-content.row > *,
.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row > * {
  box-sizing: border-box;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  padding: 10px;
  counter-increment: item-counter;
}

.view-seniorenheime-bezirke .view-content.row > h3,
.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row > h3 {
  background: var(--clr-thi-100);
  color: white;
  font-weight: normal;
  grid-column: span 10;
  grid-row: span 1;
  min-width: 400px;
  margin: 0;
  padding: 40px;
}

.bezirk_content {
  z-index: 10;
}

.view-seniorenheime-bezirke .view-content.row .bezirk__item,
.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row .card {
  /* padding: 40px; */
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  display: grid;
  min-height: 325px;
}

.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row .card {
  gap: 0;
  border: 1px solid var(--clr-thi-100);
}
.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row .card img {
  max-height: 225px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.view-seniorenheime-bezirke .view-content.row .bezirk__item a:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: hsla(0, 0%, 0%, 0.3);
  transition: All 200ms;
  /* opacity: .05; */
}

.view-seniorenheime-bezirke .view-content.row .bezirk__item a {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--clr-sec-100);
  text-decoration: none;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  position: relative;
}

.view-seniorenheime-bezirke .view-content.row .bezirk__item:hover a:before {
  background: hsla(0, 0%, 0%, 0.05);
}

.view-id-seniorenheime_map .js-form-item-field-bezirk-target-id {
  display: none;
}

/* Seniorenwohnheime Layout */
form#views-exposed-form-seniorenheime-map-page-1 .js-form-item-field-bezirk-target-id {
  display: none;
}

form#views-exposed-form-seniorenheime-map-page-1 input {
  padding-left: 35px;
  background-size: 20px !important;
  background-position-x: 5px !important;
}
form#views-exposed-form-seniorenheime-map-page-1 input#edit-name, form#views-exposed-form-seniorenheime-map-page-1 input#edit-name--2 {
  background: url("/sites/default/files/uploads/system/search.svg") no-repeat left;
}
form#views-exposed-form-seniorenheime-map-page-1 input#edit-field-ort-value, form#views-exposed-form-seniorenheime-map-page-1 input#edit-field-ort-value--2 {
  background: url("/sites/default/files/uploads/system/search_home.svg") no-repeat left;
}
form#views-exposed-form-seniorenheime-map-page-1 button#edit-submit-seniorenheime-map,
form#views-exposed-form-seniorenheime-map-page-1 button#edit-submit-seniorenheime-map--2 {
  background: url(/sites/default/files/uploads/system/arrow_right.svg) no-repeat left var(--clr-fou-100);
  padding-left: 35px;
  background-size: 20px !important;
  background-position-x: 95% !important;
  color: var(--clr-sec-100);
  border-color: var(--clr-fou-100);
  text-transform: uppercase;
  padding-inline: var(--p-md);
  border-radius: 14px;
}

.card.heime, .card.heime * {
  padding-inline: 0 !important;
  margin: 0;
}

.card-inner {
  row-gap: 1rem;
  padding-block: 1rem;
}

.card.heime .btn {
  padding: 12px !important;
}

.line-btm {
  margin-bottom: 1rem;
}

.line-btm:after {
  content: "";
  display: block;
  background: var(--clr-thi-100);
  width: 25%;
  height: 1px;
  margin-top: 1rem;
}

.card.heime .views-field.views-field-nothing,
.card.heime .views-field.views-field-field-website-url {
  padding-inline: 1rem !important;
}

.card.heime {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

div#main-wrapper {
  background: #f5f7f9;
  padding-block: 2rem;
}

.view-id-seniorenheime_map.view-display-id-page_1 .view-content.row .card {
  padding-top: 0 !important;
}

nav ul {
  list-style: none;
  display: flex;
}
nav li {
  margin: 0;
}
nav li a {
  text-decoration: underline;
}
@media (min-widht: 40em) {
  nav li {
    padding: 2rem;
  }
}

/* Teasers small big wide */
.paragraph .teaser-inner {
  display: flex;
  flex-direction: row;
  margin-block: var(--p-lg);
}
.paragraph .teaser-inner .teaser-content {
  display: inline-flex;
  gap: var(--p-sm);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-left: var(--p-lg);
}
.paragraph .teaser-inner.teaser--klein {
  flex-direction: row-reverse;
}
.paragraph .teaser-inner.teaser--klein .teaser_img {
  max-width: 55%;
}
.paragraph .teaser-inner.teaser--klein .teaser-content {
  max-width: 45%;
}
.paragraph .teaser-inner.teaser--groß .teaser_img {
  max-width: 40%;
}
.paragraph .teaser-inner.teaser--groß .teaser-content {
  max-width: 60%;
}
.paragraph .teaser-inner.teaser--volle.breite {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.paragraph .teaser-inner.teaser--volle.breite .teaser-content {
  padding: var(--p-lg);
  align-items: center;
}
.paragraph .teaser-inner.bg--grau {
  background-color: var(--clr-sec-500);
}
.paragraph:has(.teaser--volle.breite) .teaser--volle.breite {
  /* margin-inline:44px; */
}

div#block-vds-main-prefooterlinksblock {
  margin-block: 2rem 5rem;
}

.paragraph.links-block {
  display: flex;
  padding-block: 2rem;
  min-height: 190px;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.paragraph.links-block * {
  margin: 0;
}
.paragraph.links-block a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  color: white;
  text-decoration: none;
  font-weight: 100;
  text-transform: uppercase;
}
.paragraph.links-block .links-block_title {
  width: 60%;
  text-align: center;
  margin-inline: auto;
}

.quick-links {
  background-color: rgba(40, 34, 34, 0.04);
  padding: 2rem;
  max-width: 1706px;
  margin-inline: auto;
}

.grid {
  display: grid;
}

.grid-4-col {
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.quick_link {
  max-height: 380px;
  min-height: 190px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #002E5D;
  border-radius: 30px;
  color: white;
  padding: 3rem;
}
.quick_link.highlighted {
  background: var(--clr-fou-200);
}

.quick-links:has(.quick_link:nth-child(5):last-child) .quick_link:nth-child(2) {
  grid-column: 2/span 2;
}

.quick-links:has(.quick_link:nth-child(5):last-child) .quick_link:nth-child(4) {
  grid-column: 1/span 2;
}

.quick-links:has(.quick_link:nth-child(5):last-child) .quick_link:nth-child(5) {
  grid-column: 3/span 2;
}

.quick-links:has(.quick_link:nth-child(6):last-child) .quick_link:nth-child(3) {
  grid-column: 3/span 2;
}

.quick-links:has(.quick_link:nth-child(6):last-child) .quick_link:nth-child(4) {
  grid-column: 1/span 2;
}

/*# sourceMappingURL=style.css.map */