/* =========================================================
   Nagel & Sauskojus Architektur
   user.css
   ========================================================= */

/* =========================================================
   1. Design Variablen
   ========================================================= */

@import url("/templates/cassiopeia_nagel_sauskojus_architektur_content/css/alternierenderblog.css");
@import url("/templates/cassiopeia_nagel_sauskojus_architektur_content/css/sticky-tab.css");
@import url("projektkarte.css");

@font-face {
  font-family: "Open Sans Light";
  src: url("../fonts/open-sans/open-sans-v44-latin_latin-ext_math_symbols-300.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/open-sans-v44-latin_latin-ext_math_symbols-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/open-sans-v44-latin_latin-ext_math_symbols-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans/open-sans-v44-latin_latin-ext_math_symbols-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grundfarben */
  --body-bg: transparent !important;
  --body-bg-rgb: transparent;
  --nagel-sauskojus-color-background: #f3f3f1;
  --nagel-sauskojus-color-surface: #ffffff;
  --nagel-sauskojus-color-surface-soft: #f7f7f5;
  --nagel-sauskojus-background-transparent: rgba(255, 255, 255, 0.8);

  --nagel-sauskojus-color-text: #111111;
  --nagel-sauskojus-color-text-soft: #4f4f4a;

  --nagel-sauskojus-color-border: #d8d7d1;

  /* Markenfarben */

  --nagel-sauskojus-color-accent: var(--nagel-sauskojus-color-accent-strong);
  --nagel-sauskojus-color-accent-strong: rgb(55, 107, 147);
  --nagel-sauskojus-color-accent-soft: #d3c98f;
  --nagel-sauskojus-color-accent-soft-transparent: var(
    --nagel-sauskojus-color-accent-strong
  );

  /* Dunkle Kontrastfarbe */

  --nagel-sauskojus-color-dark: #111111;
  --nagel-sauskojus-color-dark-2: #1a1a1a;

  /* Links */

  --nagel-sauskojus-color-link: #111111;
  --nagel-sauskojus-color-link-hover: var(
    --nagel-sauskojus-color-accent-strong
  );

  /* Buttons */

  --nagel-sauskojus-button-text: #ffffff;
  --nagel-sauskojus-button-background: var(--nagel-sauskojus-color-accent);
  --nagel-sauskojus-button-background-hover: var(
    --nagel-sauskojus-color-accent-strong
  );

  /* Info / Hinweis */

  --nagel-sauskojus-info-background: #ece9dd;
  --nagel-sauskojus-info-border: #d4cca7;
  --nagel-sauskojus-info-text: #4f4a2d;

  /* Header */

  --nagel-sauskojus-header-background: var(--nagel-sauskojus-color-background);
  --nagel-sauskojus-header-border-color: var(--nagel-sauskojus-color-accent);
  --nagel-sauskojus-header-border-width: 6px;
  --nagel-sauskojus-header-transparent: rgba(79, 74, 45, 0.554);

  /* Navigation */

  --nagel-sauskojus-nav-link-color: var(--nagel-sauskojus-color-text);
  --nagel-sauskojus-nav-link-hover: var(--nagel-sauskojus-color-accent);
  --nagel-sauskojus-nav-link-active: var(--nagel-sauskojus-color-accent);

  --nagel-sauskojus-nav-dropdown-background: var(--nagel-sauskojus-color-dark);
  --nagel-sauskojus-nav-dropdown-link: rgb(88, 141, 182);
  --nagel-sauskojus-nav-dropdown-link-hover: hsl(206, 37%, 19%);

  /* Navigation Layout */

  --nagel-sauskojus-nav-font-size: 1rem;
  /* --nagel-sauskojus-nav-letter-spacing: 0.12em; */
  --nagel-sauskojus-nav-gap: 0rem;
  --nagel-sauskojus-nav-dropdown-width: 670px;

  /* Typografie */

  --nagel-sauskojus-font-body:
    "Open Sans Light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --nagel-sauskojus-font-navigation:
    "Open Sans Light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --cassiopeia-font-family-headings: var(--nagel-sauskojus-font-headings);
  --nagel-sauskojus-font-headings:
    "Open Sans Light", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  /* Radius */

  --nagel-sauskojus-radius-small: 4px;
  --nagel-sauskojus-radius-medium: 8px;
  --nagel-sauskojus-radius-large: 12px;
}

::selection {
  background: var(
    --nagel-sauskojus-color-accent-soft
  ); /* Hintergrund der Markierung */
  color: var(--nagel-sauskojus-color-dark); /* Textfarbe */
}

html {
  scroll-behavior: smooth;
  background-color: #464645;
}

a:not([class]) {
  text-decoration: none;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  text-transform: uppercase;
  font-family: var(--nagel-sauskojus-font-headings);
  font-weight: 100;
}
h1 {
  /* font-size: 2.3em; */
  letter-spacing: 0.1em;
  text-align: center;
}

h2 {
  /* font-size: 3.3em; */
  letter-spacing: 0.2em;
  text-align: center;
  color: #fff;
}

h3 {
  /* font-size: 2.1em; */
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  padding-top: 0.5em;
}

.titel-trennlinie-fuer-kategorieblogs {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin: 1em auto;
  padding: 0em 1em;
  max-width: 90vw;
  width: fit-content;
  color: #fff;
}

.titel-ohne-trennlinie-fuer-kategorieblogs {
  margin: 1em auto;
  text-align: center;
}

.titel-trennlinie-fuer-kategorieblogs h1,
.titel-ohne-trennlinie-fuer-kategorieblogs h1 {
  display: inline-block;
  font-size: clamp(1.5rem, 5.85vw, 7rem);
}

.titel-trennlinie-fuer-kategorieblogs + h2,
.titel-ohne-trennlinie-fuer-kategorieblogs h2 {
  font-size: clamp(1rem, 4.65vw, 3.6rem);
  margin-top: 2.5em;
  color: #fff;
}

.titel-trennlinie-fuer-kategorieblogs + h2 + h3,
.titel-ohne-trennlinie-fuer-kategorieblogs h3 {
  font-size: clamp(0.9rem, 3.6vw, 3rem);
  color: #fff;
  margin: -0.5em 0;
}

@media (max-width: 575.98px) {
  .titel-trennlinie-fuer-kategorieblogs h1,
  .titel-ohne-trennlinie-fuer-kategorieblogs h1 {
    font-size: clamp(1rem, 5.4vw, 4rem);
  }

  .titel-trennlinie-fuer-kategorieblogs + h2,
  .titel-ohne-trennlinie-fuer-kategorieblogs h2 {
    font-size: clamp(0.8rem, 3.65vw, 2.5rem);
    margin-top: 1.5em;
  }

  .titel-trennlinie-fuer-kategorieblogs + h2 + h3,
  .titel-ohne-trennlinie-fuer-kategorieblogs h3 {
    font-size: clamp(0.9rem, 2.6vw, 2rem);
    margin: -0.5em 0;
  }
}

/* =========================================================
   2. Basis
   ========================================================= */

body {
  color: var(--nagel-sauskojus-color-text);
  font-family: var(--nagel-sauskojus-font-body);
  /* overflow: hidden; */
  /* background-image: url("/images/header/hintergrund01_hell.webp"); */
  /* background-image: var(
    --header-image,
    url("/images/header/hintergrund01_hell.webp")
  ); */
  background-image: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a {
  color: var(--nagel-sauskojus-color-link);
  text-decoration: none;
}

a:hover {
  color: var(--nagel-sauskojus-color-accent-strong);
  text-decoration: none;
}

p.readmore {
  text-align: center;
}

a.btn.btn-secondary {
  background-color: transparent;
  font-family: var(--nagel-sauskojus-font-navigation);
  font-size: 1em;
  color: var(--nagel-sauskojus-color-dark);
  border: 2px var(--nagel-sauskojus-color-dark) solid;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 500;
  margin: 1em 0 0 0;
}

a.btn.btn-secondary:hover,
a.btn.btn-secondary:active {
  color: var(--nagel-sauskojus-color-accent-strong);
  border: 2px var(--nagel-sauskojus-color-accent-strong) solid;
  background-color: #ffffff;
}

/* =========================================================
   3 Header
   ========================================================= */

.nagel-sauskojus-background > div {
  min-height: 100vh;
  min-width: 100vw;
  position: fixed;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  filter: brightness(0.9);
  /* background-attachment: fixed; */
}

.container-header {
  z-index: 50;
  background-color: transparent;
  background-image: none;
  position: relative;
  box-shadow: none;
  margin: 0 0 4em 0;
}

.container-header nav {
  margin-top: 0em;
  padding: 0;
}

.com-content-category-blog.blog {
  background-color: transparent;
  background-image: none;
  padding: 0em 0em 0em 0em;
}

.page-header:has(> h1:first-child) {
  padding: 0.5em 1em 0.1em 1em;
  margin: 0 0 2.5em 0;
}

.page-header > h1,
.seite-start .com-content-category-blog.blog > h1,
.seite-start .moduletable h1.page-header {
  margin: 0em 0 0em 0;
  font-size: clamp(2.5rem, 3vw, 4rem);
  font-weight: 100;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
}

body.seite-start main > .page-header {
  padding: 5em 0 0 0;
}

.seite-start .moduletable h1.page-header {
  padding: 1.5em 1em 0em 1em;
  margin: 2.5em 0 0.5em -0.1em;
}

/* =========================================================
   3.1 Custum Modules in header
   ========================================================= */

.container-overlay {
  display: none;
  position: absolute;
  top: 180px;
  left: 0;
  z-index: 20;
}

.moduletable.nagel-sauskojus-center {
  margin: 5em 0 0 0;
}

.header-claim .header-claim__separator {
  display: inline-block;
  margin: 0em 0.3em 0em 0.3em;
}

/* .nagel-sauskojus-center {
  display: block;
  position: fixed;
  left: calc(50vw - (233px / 2));
  top: calc(50vh - 230px);
} */

.nagel-sauskojus-right-50 {
  color: #fff;
  font-size: 110%;
  margin-left: 52%;
  margin-right: 2em;
  margin-bottom: 1em;
  padding: 1.2em;
  /* background-color: var(--nagel-sauskojus-header-transparent); */
  backdrop-filter: blur(5px) brightness(1.1);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.nagel-sauskojus-left-50 {
  color: #fff;
  font-size: 110%;
  margin-right: 52%;
  margin-left: 2em;
  margin-bottom: 1em;
  padding: 1.2em;
  /* background-color: var(--nagel-sauskojus-header-transparent); */
  backdrop-filter: blur(5px) brightness(1.1);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}
.nagel-header,
.sauskojus-header {
  transition: all 0.7s ease;
}

.nagel-header:hover,
.sauskojus-header:hover,
.nagel-header:active,
.sauskojus-header:active {
  cursor: pointer;
  backdrop-filter: blur(5px) brightness(0.5);
  background-color: var(--nagel-sauskojus-info-text);
}

@media screen and (max-width: 991px) {
  .container-overlay {
    display: block;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 10;
  }
  .nagel-sauskojus-right-50,
  .nagel-sauskojus-left-50 {
    margin: 0.5em 1em;
    padding: 1em;
    font-size: 90%;
  }

  .nagel-sauskojus-right-50 p,
  .nagel-sauskojus-left-50 p {
    margin-bottom: 0;
  }
}

/* =========================================================
   4. Breadcrumbs
   ========================================================= */

.mod-breadcrumbs.breadcrumb {
  /* background: transparent; */
  border: 1px solid var(--nagel-sauskojus-color-border);
}

/* =========================================================
   5. Alerts
   ========================================================= */

.alert-info {
  background: var(--nagel-sauskojus-info-background);
  border: 1px solid var(--nagel-sauskojus-info-border);
  color: var(--nagel-sauskojus-info-text);
}

/* =========================================================
   6. Cards / Sidebar
   ========================================================= */

.card {
  /* background: transparent; */
  border: 1px solid var(--nagel-sauskojus-color-border);
}

.card-header {
  /* background: transparent; */
  border-bottom: 1px solid var(--nagel-sauskojus-color-border);
}

/* =========================================================
   7. Formulare
   ========================================================= */

.form-control,
.input-group-text {
  /* background: transparent; */
  border: 1px solid var(--nagel-sauskojus-color-border);
}

.form-control:focus {
  border-color: var(--nagel-sauskojus-color-accent);
  box-shadow: 0 0 0 0.2rem rgba(179, 168, 106, 0.18);
}

/* =========================================================
   8. Buttons
   ========================================================= */

.btn-primary {
  background: var(--nagel-sauskojus-button-background);
  border-color: var(--nagel-sauskojus-button-background);
  color: var(--nagel-sauskojus-button-text);
}

.btn-primary:hover {
  background: var(--nagel-sauskojus-button-background-hover);
  border-color: var(--nagel-sauskojus-button-background-hover);
}

/* =========================================================
   9. Navigation Desktop
   ========================================================= */

.nagel-sauskojus-nav {
  background-color: #fff;
}

.nagel-sauskojus-nav.mod-menu {
  display: flex;
  justify-content: flex-end;
  gap: var(--nagel-sauskojus-nav-gap);
  margin: 0;
  padding: 0;
  font-weight: 400;
  background-color: #000;
}

@media (min-width: 768px) {
  .nagel-sauskojus-nav li {
    padding: 0;
  }

  .nagel-sauskojus-nav.mod-menu {
    display: flex;
    display: flex;
    flex-flow: row nowrap !important;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: var(--nagel-sauskojus-nav-gap);
    margin: 0;
    padding: 0 0.4em 0 0;
    font-weight: 400;
  }

  .nagel-sauskojus-nav.mod-menu > .nav-item {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    border-bottom: 0;
  }

  .nagel-sauskojus-nav.mod-menu > .nav-item > a {
    display: block;
    padding: 0.1rem 1rem 0.1rem 1rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--nagel-sauskojus-nav-letter-spacing);
    font-size: var(--nagel-sauskojus-nav-font-size);
    font-family: var(--nagel-sauskojus-font-navigation);
  }

  .nagel-sauskojus-nav.mod-menu > .nav-item:hover > a,
  .nagel-sauskojus-nav.mod-menu > .nav-item.active > a,
  .nagel-sauskojus-nav.mod-menu > .nav-item.current > a {
    color: var(--nagel-sauskojus-nav-link-active);
    font-weight: 900;
  }

  .container-header .mod-menu > li.active:after,
  .container-header .mod-menu > li:hover:after {
    background: transparent;
    left: 0;
    right: 2px;
  }
}
@media (width >= 992px) {
  .container-header .mod-menu > li:after {
    content: none;
    opacity: 0.2;
    background: 0 0;
    height: 2px;
    margin: auto;
    transition:
      all 0.2s,
      background-color 0.2s;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
  }
}

@media (width <= 991.98px) {
  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub span {
    color: #000;
  }

  .container-header .mod-menu.mod-list > li > a:hover {
    text-decoration: none;
  }
}

.container-header .mod-menu .mod-menu__sub a:hover {
  text-decoration: none;
}
/* Dropdown */

/* Dropdown */

.nagel-sauskojus-nav .mod-menu__sub {
  position: absolute;
  top: 100%;
  left: -4rem;
  transform: none;

  width: max-content;
  min-width: 180px;
  max-width: 420px;
  background-color: #fff;

  /* background: var(--nagel-sauskojus-nav-dropdown-background); */
  padding: 0.9rem 0;
  list-style: none;
  display: none;
  margin: 0;
  z-index: 200;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nagel-sauskojus-nav > .nav-item.parent:hover > .mod-menu__sub {
  display: block;
}

.nagel-sauskojus-nav .mod-menu__sub li {
  display: block;
  width: 100%;
}

.nagel-sauskojus-nav .mod-menu__sub a {
  display: block;
  padding: 1rem 1rem;

  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  font-size: 16px;
}

.nagel-sauskojus-nav .mod-menu__sub a:hover {
  color: var(--nagel-sauskojus-nav-dropdown-link-hover);
}

/* .nagel-sauskojus-nav .mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: var(--nagel-sauskojus-nav-dropdown-width);

    background: var(--nagel-sauskojus-nav-dropdown-background);
    padding: 1.2rem 0;
    list-style: none;
    display: none;
  }

  .nagel-sauskojus-nav > .nav-item.parent:hover > .mod-menu__sub {
    display: block;
  }

  .nagel-sauskojus-nav .mod-menu__sub a {
    display: block;
    padding: 1rem 2.8rem;

    color: var(--nagel-sauskojus-nav-dropdown-link);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .nagel-sauskojus-nav .mod-menu__sub a:hover {
    color: var(--nagel-sauskojus-nav-dropdown-link-hover);
  } */

/* Chevron / Dropdown-Pfeile im Menü ausblenden */

.nagel-sauskojus-nav .icon-chevron-down,
.nagel-sauskojus-nav .mod-menu__toggle-sub,
.nagel-sauskojus-nav .mod-menu__toggle-sub span {
  display: none !important;
}

/* Zweite Dropdown-Ebene anzeigen */
@media (min-width: 992px) {
  .nagel-sauskojus-nav .mod-menu__sub .nav-item.parent {
    position: relative;
  }

  .nagel-sauskojus-nav .mod-menu__sub .nav-item.parent > .mod-menu__sub {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 260px;
    background: var(--nagel-sauskojus-nav-dropdown-background);
    padding: 1.2rem 0;
    z-index: 300;
  }

  .nagel-sauskojus-nav .mod-menu__sub .nav-item.parent:hover > .mod-menu__sub {
    display: block;
  }

  .nav-item.item-109 {
    display: none;
  }
}

/* =========================================================
   10. Mobile Navigation
   ========================================================= */

@media (max-width: 991px) {
  .sticky-kontakt-tab {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .nagel-sauskojus-nav.mod-menu > .nav-item > a {
    padding: 1rem;
  }
}

/* =========================================================
   11 Main
   ========================================================= */

main {
  /* background-color: var(--nagel-sauskojus-background-transparent); */
  background-image: none;
  margin: 2em 0 2em 0;
  padding: 1em 2em 0em 2em;
}

/* =========================================================
   11.1 Site-Grid
   ========================================================= */

@supports (display: grid) {
  .site-grid {
    z-index: 0;
    gap: 0 1em;
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] repeat(4, minmax(0, 19.875rem))
      [main-end] minmax(0, 1fr)
      [full-end];

    grid-template-areas:
      ". banner        banner        banner        banner        ."
      ". projekt-top-a projekt-top-a projekt-top-a projekt-top-a ."
      ". top-a         top-a         top-a         top-a         ."
      ". top-b         top-b         top-b         top-b         ."
      ". projekt-top-b projekt-top-b projekt-top-b projekt-top-b ."
      ". side-l        comp          comp          side-r        ."
      ". bot-a         bot-a         bot-a         bot-a         ."
      ". bot-b         bot-b         bot-b         bot-b         .";
  }
}
@media (width >= 992px) {
  @supports (display: grid) {
    .site-grid {
      grid-template-areas:
        ". banner        banner        banner        banner        ."
        ". projekt-top-a projekt-top-a projekt-top-a projekt-top-a ."
        ". top-a         top-a         top-a         top-a         ."
        ". top-b         top-b         top-b         top-b         ."
        ". projekt-top-b projekt-top-b projekt-top-b projekt-top-b ."
        ". side-l        comp          comp          side-r        ."
        ". bot-a         bot-a         bot-a         bot-a         ."
        ". bot-b         bot-b         bot-b         bot-b         .";
      z-index: 20;
    }
  }
}

@supports (display: grid) {
  .site-grid > [class^="projekt-"],
  .site-grid > [class*="\ projekt-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }
}

.projekt-top-a,
.projekt-top-b {
  position: relative;
}

.projekt-top-a {
  grid-area: projekt-top-a;
}

.projekt-top-b {
  grid-area: projekt-top-b;
}

.grid-child .container-component {
  height: 0;
}

/* =========================================================
   12. Footer
   ========================================================= */

.footer {
  color: #fff;
  background-color: #464645;
  background-image: none;
  margin-top: 1em;
  z-index: 1;
  margin: 10em 0 0 0;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer .h1,
.footer .h2,
.footer .h3,
.footer .h4,
.footer .h5,
.footer .h6,
.footer p {
  color: #fff;
  font-size: 85%;
  letter-spacing: 0.05em;
}

.footer .grid-child {
  padding: 0.5rem 0.5em;
}

footer.moduletable.nagel-sauskojus-footer {
  width: 100%;
}

.nagel-sauskojus-stoerer {
  font-size: 1.3rem;
  color: var(--nagel-sauskojus-color-accent-strong);
  font-style: italic;
  font-weight: 500;
  padding: 2rem 1rem 1rem 1rem;
  border-top: var(--nagel-sauskojus-color-accent-strong) 6px solid;
  border-bottom: var(--nagel-sauskojus-color-accent-strong) 6px solid;
}

.footer .mod-menu {
  display: block;
  margin: 10px 0;
}

.footer_menu .nav-item {
  width: fit-content;
  display: inline-block;
  padding: 0 10px;
}

/* Styling des Top-Headers und des kleinen Logos */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.site-header .container-header {
  position: relative;
  top: auto;
  z-index: auto;
}

.top-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  width: 100%;
  min-height: 120px;
  background: #fff;
}

.logo-left {
  position: static;
}

.logo-left #mod-custom119 {
  position: static;
  min-height: 0;
  max-height: none;
}

.logo-left p {
  display: block;
  margin: 0 !important;
  float: none !important;
}

.logo-left img {
  width: auto;
  height: 91px;
  margin: 10px;
}

.top-header__content {
  align-self: end;
  min-width: 0;
}

.top-header .moduletable.right {
  width: auto;
  margin: 0;
  padding: 0 0.5rem 12px;
  text-align: right;
}

.top-header .header-claim {
  margin: 0;
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  line-height: 1.3;
  margin-bottom: -6px;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .top-header .header-claim {
    white-space: normal;
  }
  .header-claim .header-claim__separator {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .top-header {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 90px;
    white-space: normal;
  }

  .logo-left img {
    height: 70px;
    margin: 10px 6px !important;
  }

  .top-header .moduletable.right {
    padding: 0 0.75rem 10px;
  }

  .top-header .header-claim {
    font-size: clamp(1.1rem, 3vw, 2rem);
    white-space: normal;
  }
}

@media (max-width: 361px) {
  .top-header {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 90px;
    white-space: normal;
  }

  .logo-left img {
    height: 60px;
    margin: 10px 6px !important;
  }

  .top-header .moduletable.right {
    padding: 0 0.75rem 10px;
  }

  .top-header .header-claim {
    font-size: clamp(1rem, 3vw, 2rem);
    white-space: normal;
    margin-bottom: 1px;
  }
}
/* Styling Logo auf der Startseite (vor dem Projektauszug) */

/* .title-wrapper:has(.logo-auf-startseite-ueber-projektauszug) {
  display: block;
  min-height: 300px;
  margin: 0em 0 20em 0;
} */

/* Startseite: Hero-Bereich exakt eine Viewport-Höhe */
.seite-start .title-wrapper:has(.nagel-sauskojus-center) {
  min-height: calc(100svh - 120px);
  margin: 0;
  position: relative;
}

/* Logo mittig, aber NICHT fixed */
/* .seite-start .moduletable.logo-auf-startseite-ueber-projektauszug {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-47%, -426px);
  margin: 0;
  z-index: 5;
} */

/* Bild selbst sauber zentrieren */
.seite-start .logo-auf-startseite-ueber-projektauszug img {
  display: block;
  margin: 0 auto !important;
}

/* main beginnt erst unterhalb des ersten sichtbaren Bereichs */
.seite-start main {
  margin-top: 0;
}

/* =========================================================
   Seite Start mit Projektauszug
   ========================================================= */

@media (min-width: 992px) {
  img.ib-plus-logo {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: clamp(100px, 30vw, 200px);
  }
}

@media (max-width: 991.98px) {
  img.ib-plus-logo {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: clamp(100px, 30vw, 200px);
  }
}

@media (max-width: 768px) {
  img.ib-plus-logo {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: clamp(100px, 30vw, 200px);
  }
}

/* Modul Articlegrid */
@media (max-width: 575.98px) {
  img.ib-plus-logo {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: clamp(100px, 20vw, 250px);
  }
}

.moduletable:has(> .mod-articlegrid:nth-child(2)) {
  background-color: var(--nagel-sauskojus-background-transparent);
  margin: 8em 0 2em 0;
  padding: 1em 3em 2em 3em;
  box-shadow: 1px -1px 19px -9px #000000;
}

/* =========================================================
   Styling der Artikel des Kategorieblogs
   ========================================================= */
@supports (display: grid) {
  .blog-items {
    grid-gap: 1.5em;
  }
}

.intro-image-with-item-header {
  position: relative;
  overflow: hidden;
  margin-bottom: 1em;
  aspect-ratio: 5 / 4;
}

.intro-image-with-item-header .item-image {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro-image-with-item-header .item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    opacity 0.35s ease;
  transform-origin: center center;
  filter: saturate(55%);
  opacity: 0.75;
}

.intro-image-with-item-header .page-header {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 2;
}

.intro-image-with-item-header .page-header h1,
.intro-image-with-item-header .page-header h2,
.intro-image-with-item-header .page-header .h1,
.intro-image-with-item-header .page-header .h2 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.15em 0.35em;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  line-height: 1.15;
}

.intro-image-with-item-header:hover .item-image img {
  transform: scale(1.06);
  filter: saturate(100%);
  opacity: 1;
}

.intro-image-with-item-header .item-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 141, 182, 0.18);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.intro-image-with-item-header:hover .item-image::after {
  opacity: 0.08;
}

/* =========================================================
   Halbtransparenter Streifen, auf dem die Artikel des Kategorieblogs liegen
   ========================================================= */

.blog-wrapper,
.aktuelles-meldungen-auf-der-startseite {
  position: relative;
  z-index: 0;
  padding: 2rem 0 1.5rem 0;
}

.blog-wrapper::before,
.aktuelles-meldungen-auf-der-startseite::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--nagel-sauskojus-background-transparent);
  z-index: -1;
}

.blog-wrapper .com-content-category-blog {
  background: transparent;
}

/* =========================================================
   Ausrichtung der Readmore-Buttons in den Artikeln des Kategorieblogs
   ========================================================= */

.com-content-category-blog__item .item-content {
  display: none;
  flex-direction: column;
  flex-grow: 1;
}

.com-content-category-blog__item .readmore {
  margin-top: auto;
}

.com-content-category-blog__item p.readmore {
  text-align: left;
}

/* =========================================================
   Paginierung/Pagination Styling/Seitenzahlen/Seitennummerierung
   ========================================================= */

.pagination {
  --pagination-padding-x: 0.75rem;
  --pagination-padding-y: 0.375rem;
  --pagination-font-size: 1rem;
  --pagination-color: var(--link-color);
  --pagination-bg: var(--body-bg);
  --pagination-border-width: var(--border-width);
  --pagination-border-color: transparent;
  --pagination-border-radius: none;
  --pagination-hover-color: var(--link-hover-color);
  --pagination-hover-bg: transparent;
  --pagination-hover-border-color: var(--border-color);
  --pagination-focus-color: var(--link-hover-color);
  --pagination-focus-bg: var(--secondary-bg);
  --pagination-focus-box-shadow: 0 0 0 0.25rem #01015640;
  --pagination-active-color: var(--nagel-sauskojus-color-accent-strong);
  --pagination-active-bg: transparent;
  --pagination-active-border-color: var(--nagel-sauskojus-color-accent-strong);
  --pagination-disabled-color: var(--secondary-color);
  --pagination-disabled-bg: transparent;
  --pagination-disabled-border-color: transparent;
  padding-left: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

.com-content-category-blog__pagination {
  margin: 1em 0 0em 0;
}
.com-content-category-blog__counter {
  display: none;
}
.page-link.active,
.active > .page-link {
  color: var(--pagination-active-color);
  background-color: var(--pagination-active-bg);
  border-color: var(--pagination-active-border-color);
}

.page-link,
.page-link:hover {
  color: var(--nagel-sauskojus-color-accent-strong);
  background-color: transparent;
}

.page-link:hover {
  border-color: var(--nagel-sauskojus-color-accent-strong);
}
.mb-4 {
  margin-bottom: 0rem !important;
}

/* ****************************************************************
   Große Titel und Untertitel vor allem in "Alternierender Blog"
   ************************************************ */

body.view-category.page-with-top-header-and-tags .container-component {
  display: block;
  min-height: 0;
}

body.view-category.page-with-top-header-and-tags .title-wrapper {
  min-height: calc(100svh - 135px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  box-sizing: border-box;
}

.view-category.seite-start.page-with-top-header-and-tags .title-wrapper {
  align-items: stretch;
}

body.view-category.page-with-top-header-and-tags .module-top-header {
  font-size: clamp(1.8rem, 3vw, 3.5rem);
  font-weight: 100;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  margin-bottom: 2rem;
}

body.view-category.page-with-top-header-and-tags .hero-keywords-module,
.seite-start .hero-keywords-module {
  margin-top: auto;
  padding-bottom: 7rem;
  position: relative;
  z-index: 5;
}

.seite-start .hero-keywords-module {
  margin-top: 24vh;
  padding-bottom: 0rem;
  position: relative;
  z-index: 5;
}

@media (max-width: 575.98px) {
  .seite-start .moduletable.nagel-sauskojus-center {
    margin-top: 0em;
  }

  .seite-start .hero-keywords-module {
    margin-top: 24vh;
    margin-bottom: 1rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 5;
  }
}

body.view-category.page-with-top-header-and-tags .hero-keywords,
.seite-start .hero-keywords-module {
  text-align: center;
  color: #fff;
  font-size: clamp(0.9rem, 1.4vw, 1.25rem);
  line-height: 2;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.view-category.page-with-top-header-and-tags .hero-keywords div,
.seite-start .hero-keywords div {
  margin-top: 0.35rem;
}

body.view-category.page-with-top-header-and-tags .hero-keywords span,
.seite-start .hero-keywords span {
  display: inline-block;
  margin: 0 0.8em;
  opacity: 0.7;
}

body.view-category.page-with-top-header-and-tags main {
  margin-top: 0;
}

.page-with-top-header-and-tags .alternierender-blog-item-header h2,
.alternierender-blog-item-header h2 {
  color: #000;
  text-align: left;
  font-size: clamp(1.7em, 9vw, 2.8em);
  letter-spacing: 0.04em;
}

@media (max-width: 991px) {
  body.view-category.page-with-top-header-and-tags .hero-keywords,
  .seite-start .hero-keywords-module {
    font-size: clamp(0.8rem, 2vw, 1rem);
    letter-spacing: 0.18em;
    line-height: 1.8;
    padding-inline: 0rem;
  }

  body.view-category.page-with-top-header-and-tags .hero-keywords span,
  .seite-start .hero-keywords span {
    margin: 0 0.45em;
  }
}

@media (max-width: 640px) {
  body.view-category.page-with-top-header-and-tags .hero-keywords,
  .seite-start .hero-keywords {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
  }

  body.view-category.page-with-top-header-and-tags .hero-keywords span,
  .seite-start .hero-keywords span {
    margin: 0 0.1em;
  }

  .mod-custom.custom .hero-keywords {
    margin: 0 -1em;
  }
}

@media (max-width: 361px) {
  body.view-category.page-with-top-header-and-tags .hero-keywords,
  .seite-start .hero-keywords {
    font-size: 0.68rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
  }

  body.view-category.page-with-top-header-and-tags .hero-keywords span,
  .seite-start .hero-keywords span {
    margin: 0 0.1em;
  }
}
/*  Titel-Trennlinie für Kategorieblogs   */

.titel-trennlinie-fuer-kategorieblogs hr {
  color: #fff;
  border: 0;
  border-top: 2px solid;
  opacity: 1;
  margin: 0.7rem auto 0.8rem auto;
  width: 95%;
}

/* ****************************************************************
   Seite Innenarchitektur - Anpassungen für die Artikelansicht im Kategorieblog
     - Ausblenden des großen Titelbilds, da es in diesem Kontext nicht passend ist
      - Einblenden der Artikeltexte, die standardmäßig ausgeblendet sind, um den Fokus auf die Bilder zu legen
   ************************************************ */

.page-buttons .intro-image-with-item-header {
  display: none;
}

.page-buttons .com-content-category-blog__item .item-content {
  display: revert;
}

.page-buttons .com-content-category-blog__item.blog-item .wf-column {
  padding: 1em;
}

.page-buttons .com-content-category-blog__item.blog-item.wf-column p {
  overflow: hidden;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
}

.page-buttons .com-content-category-blog__item.blog-item .linked-button {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  border-radius: 50%;
}

.page-buttons .com-content-category-blog__item.blog-item .blog-wrapper::before {
  margin: 2rem 0 3rem 0;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.5);
  z-index: -1;
}

/* =========================================================
   Innenarchitektur – runde Bereichsbuttons
   Desktop:    4 Spalten
   Tablet:     2 Spalten
   Smartphone: 1 Spalte
   ========================================================= */

/* JCE-Spalten für diesen Bereich selbst steuern */
.page-buttons
  .com-content-category-blog__item.blog-item
  .wf-columns.wf-columns-stack-medium {
  display: grid !important;

  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: clamp(1rem, 2.5vw, 2rem);

  width: 100%;
}

/* Einzelne Spalte */
.page-buttons .com-content-category-blog__item.blog-item .wf-column {
  width: auto !important;
  min-width: 0;

  padding: 1em;
}

/* Kreisförmiger Bildcontainer */
.page-buttons .com-content-category-blog__item.blog-item .wf-column > p {
  width: 100%;
  max-width: 320px;

  aspect-ratio: 1 / 1;

  margin: 0 auto 1rem;

  overflow: hidden;

  border-radius: 50%;
}

/* Link füllt den gesamten Kreis */
.page-buttons .com-content-category-blog__item.blog-item .wf-column > p > a {
  display: block;

  width: 100%;
  height: 100%;
}

/* Bild */
.page-buttons .com-content-category-blog__item.blog-item .linked-button {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50%;

  transition:
    transform 0.45s ease,
    filter 0.45s ease,
    opacity 0.45s ease;

  transform-origin: center center;
}

/* Hover */
.page-buttons .com-content-category-blog__item.blog-item .linked-button:hover {
  transform: scale(1.1);

  filter: saturate(100%);

  opacity: 1;
}

/* =========================================================
   Tablet / schmaler Desktop
   2 Spalten
   ========================================================= */

@media (max-width: 960px) and (min-width: 768px) {
  .page-buttons
    .com-content-category-blog__item.blog-item
    .wf-columns.wf-columns-stack-medium {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    /*
     * Verhindert, dass die beiden Buttons plötzlich riesig werden.
     */
    max-width: 650px;

    margin-inline: auto;
  }
}

/* =========================================================
   Smartphone
   1 Spalte
   ========================================================= */

@media (max-width: 767px) {
  .page-buttons
    .com-content-category-blog__item.blog-item
    .wf-columns.wf-columns-stack-medium {
    grid-template-columns: minmax(0, 1fr) !important;

    max-width: 320px;

    margin-inline: auto;
  }

  .page-buttons .com-content-category-blog__item.blog-item .wf-column {
    padding: 0.75rem;
  }
}

/* .page-buttons {
 padding-bottom: 6rem;
} */

/* =========================================================
   Projekt-Detailseiten – Bilderraster
   ========================================================= */

/*
 * Maximale Rastergröße:
 * 4 × 300px + 3 × 24px Abstand = 1272px
 *
 * Unterhalb dieser Breite verkleinern sich sowohl
 * Spalten als auch Zeilen proportional.
 */

main:has(.com-content-article) {
  margin-top: 0;
  padding: 0;
  background-color: var(--nagel-sauskojus-background-transparent);
}

.projekt-grid {
  --projekt-gap: 24px;

  /*
   * Eine Rasterzelle ist maximal 300px groß.
   * Bei kleineren Viewports schrumpft sie automatisch.
   *
   * 120px =
   * 48px Außenabstand + 72px für drei Zwischenräume.
   */
  --projekt-cell: clamp(180px, calc((100vw - 120px) / 4), 300px);

  box-sizing: border-box;

  display: grid;

  /* Vier gleich breite, flexibel schrumpfende Spalten */
  grid-template-columns: repeat(4, minmax(0, 1fr));

  /* Zeilen schrumpfen zusammen mit den Spalten */
  grid-auto-rows: var(--projekt-cell);

  gap: var(--projekt-gap);

  width: calc(100% - 48px);
  max-width: 1272px;

  margin: 48px auto 24px;
}

/* =========================================================
   Allgemeines Verhalten der Rasterelemente
   ========================================================= */

.projekt-grid > *,
.projekt-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

.projekt-item {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* =========================================================
   Bilder
   ========================================================= */

.projekt-item img,
.projekt-grid > img {
  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  object-fit: cover;
  object-position: center;
}

/* =========================================================
   Größenklassen
   ========================================================= */

/* 1 × 1 */
.projekt-1x1 {
  grid-column: span 1;
  grid-row: span 1;
}

/* 2 × 1 */
.projekt-2x1 {
  grid-column: span 2;
  grid-row: span 1;
}

/* 3 × 1 */
.projekt-3x1 {
  grid-column: span 3;
  grid-row: span 1;
}

/* 4 × 1 */
.projekt-4x1 {
  grid-column: span 4;
  grid-row: span 1;
}

/* 1 × 2 */
.projekt-1x2 {
  grid-column: span 1;
  grid-row: span 2;
}

/* 2 × 2 */
.projekt-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

/* 3 × 2 */
.projekt-3x2 {
  grid-column: span 3;
  grid-row: span 2;
}

/* 4 × 2 */
.projekt-4x2 {
  grid-column: span 4;
  grid-row: span 2;
}

/* Optional: falls auf Projektseiten verwendet */
.projekt-4x3 {
  grid-column: span 4;
  grid-row: span 3;
}

/* =========================================================
   Smartphone / kleine Tablets
   ========================================================= */

@media (max-width: 991px) {
  .projekt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    /*
     * Keine künstliche Rasterhöhe mehr.
     * Das Bild bestimmt seine Höhe selbst.
     */
    grid-auto-rows: auto;

    gap: 16px;

    width: auto;
    max-width: none;

    margin: 32px 16px 24px;
  }

  /*
   * Auf kleinen Geräten werden sämtliche Rastergrößen
   * auf eine Spalte zurückgesetzt.
   */
  .projekt-grid > *,
  .projekt-1x1,
  .projekt-2x1,
  .projekt-3x1,
  .projekt-4x1,
  .projekt-1x2,
  .projekt-2x2,
  .projekt-3x2,
  .projekt-4x2,
  .projekt-4x3 {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /*
   * Bilder behalten im mobilen Layout ihr natürliches
   * Seitenverhältnis und werden nicht beschnitten.
   */
  .projekt-item,
  .projekt-grid > img {
    width: 100%;
    height: auto;
  }

  .projekt-item img,
  .projekt-grid > img {
    width: 100%;
    height: auto;

    object-fit: contain;
  }
}

.projekt-text-tile {
  box-sizing: border-box;
  overflow: auto;
  padding: 1em 0.3em;
  background-color: #40586a;
  color: #fff;
  font-size: 1em;
  line-height: 2.4em;
}

.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4,
.com-content-article__body h5,
.com-content-article__body h6,
.com-content-article__body p {
  padding: 0 24px;
  color: #000;
  text-align: left;
  margin: 1em 0 0.5em 0;
  letter-spacing: 0.02em;
}

.com-content-article__body h1 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.com-content-article__body h2 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

.com-content-article__body h3 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.com-content-article .fields-container,
.com-content-article .page-header {
  display: none;
}

/*  =========================================================
Gestaltung des Moduls "Aktuelle Meldungen" auf der Startseite 
    =========================================================   */

.seite-start .aktuelles-meldungen-auf-der-startseite .mod-articlegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5em;
}

.seite-start .aktuelles-meldungen-auf-der-startseite .mod-articlegrid__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
}

.seite-start
  .aktuelles-meldungen-auf-der-startseite
  .mod-articlegrid__image-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.seite-start .aktuelles-meldungen-auf-der-startseite .mod-articlegrid__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(55%);
  opacity: 0.75;
  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    opacity 0.35s ease;
  transform-origin: center center;
}

.seite-start
  .aktuelles-meldungen-auf-der-startseite
  .mod-articlegrid__item:hover
  .mod-articlegrid__image {
  transform: scale(1.06);
  filter: saturate(100%);
  opacity: 1;
}

.seite-start
  .aktuelles-meldungen-auf-der-startseite
  .mod-articlegrid__image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(88, 141, 182, 0.18);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.seite-start
  .aktuelles-meldungen-auf-der-startseite
  .mod-articlegrid__item:hover
  .mod-articlegrid__image-link::after {
  opacity: 0.08;
}

h3.mod-articlegrid__title {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.seite-start .aktuelles-meldungen-auf-der-startseite .mod-articlegrid__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  z-index: 2;
}

.seite-start .aktuelles-meldungen-auf-der-startseite .mod-articlegrid__title a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.15em 0.35em;
  background-color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  line-height: 1.15;
  color: var(--nagel-sauskojus-color-text);
  text-decoration: none !important;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .seite-start .aktuelles-meldungen-auf-der-startseite .mod-articlegrid {
    grid-template-columns: 1fr;
  }
}

.seite-aktuelles-meldungen
  .com-content-article.item-pageseite-aktuelles-meldungen
  .page-header {
  display: block;
}

.seite-aktuelles-meldungen
  .com-content-article.item-pageseite-aktuelles-meldungen
  .page-header
  :is(h1, h2, h3, h4, h5, h6),
.seite-aktuelles-meldungen
  .com-content-article.item-pageseite-aktuelles-meldungen
  p {
  color: var(--nagel-sauskojus-color-text);
}

.link-zu-weiteren-aktuelles-meldungen {
  text-align: left;
  margin-top: 2rem;
}

.link-zu-weiteren-aktuelles-meldungen a {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  background-color: #40586a;
  color: #fff;
  text-decoration: none;
  font-family:
    "Open Sans Light",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  text-align: center;
  width: 424px;
}

.seite-aktuelles-meldungen .items-more {
  padding: 1rem 10rem 1rem 1rem;
  background-color: #40586a99;
  width: 402px;
}

.seite-aktuelles-meldungen .items-more ol {
  list-style: none;
  padding-left: 0;
}

.seite-aktuelles-meldungen .items-more ol li a {
  display: block;
  margin-bottom: 0.75rem;
  color: #fff;
}

.view-article.seite-projekte main {
  background: #fff !important;
}

.seite-projekte .nagel-sauskojus-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  backdrop-filter: blur(0.3px);
}

.seite-projekte .page-with-top-header-and-tags .com-content-article__body h1 {
  font-size: clamp(1.8rem, 3vw, 3.5rem);
}

.seite-projekte .page-with-top-header-and-tags .com-content-article__body h2 {
  font-size: clamp(1.3rem, 2.7vw, 3.2rem);
}

.seite-projekte .page-with-top-header-and-tags .com-content-article__body h3 {
  font-size: clamp(1rem, 2.5vw, 3rem);
}

.seite-projekte .projektauszug__grid:first-of-type {
  position: relative;
  isolation: isolate;

  /* Breitenänderungen der vorherigen Lösung zurücksetzen */
  width: auto;
  margin-inline: 0;
  padding-inline: 0;
}

.seite-projekte .projektauszug__grid:first-of-type::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: -2rem;
  bottom: -2rem;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);

  background-color: rgb(255 255 255 / 65%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#mod-custom181 {
  margin-top: 4em;
}

/* Gestaltung der Seite Büro (Über uns) */

.seite-buero-ueber-uns h2,
.seite-buero-ueber-uns .h2,
.page-with-top-header-and-tags h2:not(.projektkarte__title) {
  letter-spacing: 0.1em;
}

/* ul {
  list-style-type: none !important;
} */
/* =========================================================
   Mobiles Offcanvas-Menü
   ========================================================= */

@media (max-width: 767.98px) {
  /* Schwarze Zeile unter dem weißen Kopfbereich */
  .container-header nav.navbar {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 70px;
    padding: 0 1rem;
  }

  /* Hamburger rechts */
  .container-header .navbar-toggler {
    position: relative;
    z-index: 1201;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #000;
    background: #fff;
    box-shadow: none;
  }

  .container-header .navbar-toggler .icon-menu {
    color: #000;
    font-size: 2rem;
    line-height: 1;
  }

  .container-header .navbar-toggler:hover,
  .container-header .navbar-toggler:focus-visible {
    color: #000;
    background: #fff;
  }

  .container-header .navbar-toggler:focus-visible {
    outline: 2px solid var(--nagel-sauskojus-color-accent);
    outline-offset: 3px;
  }

  .container-header .navbar-toggler,
  .container-header .navbar-toggler[aria-expanded="true"],
  .container-header .navbar-toggler[aria-expanded="false"] {
    position: relative;
    top: auto;
    right: auto;
    z-index: 1201;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    margin: 0 0 0 auto;
  }

  /* Offcanvas-Fläche */
  .container-header .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;

    display: block !important;
    width: min(88vw, 420px);
    height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;

    padding: 135px 1.5rem 2rem;
    color: #fff;
    background: #111;

    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 350ms ease,
      visibility 0s linear 350ms;

    pointer-events: none;
  }

  /* Sichtbares Menü */
  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    height: 100dvh !important;
    visibility: visible;
    transform: translateX(0);
    transition:
      transform 350ms ease,
      visibility 0s linear 0s;

    pointer-events: auto;
  }

  /* Logo oben im hineingeschobenen Menü */
  .container-header .navbar-collapse::before {
    position: absolute;
    top: 20px;
    left: 1.5rem;

    display: block;
    width: 166px;
    height: 60px;

    content: "";
    background-image: url("/images/logo/Logo_schwarz%20auf%20transparent_ib+%20Schrift%20neben%20Bild_442px%20x%20242px.webp");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;

    /* Das schwarze Logo auf dem dunklen Hintergrund weiß darstellen */
    filter: invert(1);
  }

  /* Menüliste */
  .nagel-sauskojus-nav.mod-menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    max-width: fit-content;
    margin-top: -50px;
  }

  .nagel-sauskojus-nav.mod-menu > .nav-item {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 25%);
  }

  .nagel-sauskojus-nav.mod-menu a {
    display: block;
    width: 100%;
    padding: 1rem 0.5rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
  }

  .nagel-sauskojus-nav.mod-menu a:hover,
  .nagel-sauskojus-nav.mod-menu a:focus-visible,
  .nagel-sauskojus-nav.mod-menu .current > a,
  .nagel-sauskojus-nav.mod-menu .active > a {
    color: var(--nagel-sauskojus-color-accent);
  }

  /* Schalter der Untermenüs ausblenden */
  .nagel-sauskojus-nav .mod-menu__toggle-sub {
    display: none !important;
  }

  /* Alle Untermenüs permanent anzeigen */
  .nagel-sauskojus-nav .mod-menu__sub,
  .nagel-sauskojus-nav .mod-menu__sub[aria-hidden="true"],
  .nagel-sauskojus-nav .mod-menu__sub[aria-hidden="false"] {
    position: static !important;
    display: block !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 0.5rem 1.25rem;
    border: 0;
    background: #111;
    box-shadow: none;
    transform: none;
    color: #fff;
  }

  /* Unterebenen eingerückt und etwas kleiner */
  .nagel-sauskojus-nav .mod-menu__sub a {
    padding: 0.7rem 0.5rem;
    color: #ddd;
    font-size: 0.9rem;
    white-space: normal;
  }

  .nagel-sauskojus-nav .mod-menu__sub .mod-menu__sub {
    padding-left: 1.25rem;
  }

  /* body.mobile-menu-open {
    overflow: hidden;
  } */
  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub span {
    color: #fff;
  }
}
/* =========================================================
   Kontaktseite – Formularbereich
   ========================================================= */

.kontaktformular-seite .container-component {
  min-height: calc(100svh - 220px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.kontaktformular-seite main {
  position: relative;
  margin: 0;
  padding: 1rem 2rem 1.5rem;
}

/* Dunkler Streifen über die volle Bildschirmbreite */
.kontaktformular-seite main::before {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;
  transform: translateX(-50%);

  background: rgba(35, 35, 35, 0.68);

  z-index: 0;
}

.kontaktformular-seite main > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Kontakt-Formular
   ========================================================= */

.kontaktformular-seite .com-contact.contact {
  color: #fff;
}

/* Joomla-Überschrift "Kontaktformular" ausblenden */
.kontaktformular-seite .com-contact.contact > h2 {
  display: none;
}

/* Formular insgesamt */
.kontaktformular-seite #contact-form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  grid-template-rows:
    auto
    repeat(4, 3rem);

  column-gap: 0.8rem;
  row-gap: 1rem;

  width: 100%;
  max-width: 720px;

  margin: 0 auto;
  padding: 0;

  background: transparent;
  border: 0;
}

/*
 * Fieldset auflösen, damit seine Kinder direkt
 * am Grid des Formulars teilnehmen können.
 */
.kontaktformular-seite #contact-form fieldset {
  display: contents;
}

/* Formularüberschrift */
.kontaktformular-seite #contact-form legend {
  grid-column: 1 / -1;
  grid-row: 1;

  width: 100%;

  margin: 0 0 0.2rem 0;
  padding: 0;

  color: #fff;

  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.2;

  text-transform: uppercase;
}

/* "* Benötigtes Feld" entfernen */
.kontaktformular-seite #contact-form .field-spacer {
  display: none;
}

/*
 * Sichtbare Labels ausblenden,
 * für Screenreader aber erhalten
 */
.kontaktformular-seite
  #contact-form
  .control-group:not(:has(#jform_contact_email_copy))
  .control-label {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/* Grundformat der Formulargruppen */
.kontaktformular-seite #contact-form .control-group {
  margin: 0;
}

.kontaktformular-seite #contact-form .controls {
  width: 100%;
  height: 100%;
}

/* =========================================================
   Positionierung der einzelnen Felder
   ========================================================= */

/* Name */
.kontaktformular-seite #contact-form .control-group:has(#jform_contact_name) {
  grid-column: 1;
  grid-row: 2;
}

/* E-Mail */
.kontaktformular-seite #contact-form .control-group:has(#jform_contact_email) {
  grid-column: 1;
  grid-row: 3;
}

/* Betreff */
.kontaktformular-seite
  #contact-form
  .control-group:has(#jform_contact_emailmsg) {
  grid-column: 1;
  grid-row: 4;
}

/* Nachricht rechts */
.kontaktformular-seite
  #contact-form
  .control-group:has(#jform_contact_message) {
  grid-column: 2;
  grid-row: 2 / 6;
}

/* "Kopie an mich senden" ausblenden */
.kontaktformular-seite
  #contact-form
  .control-group:has(#jform_contact_email_copy) {
  display: none;
}

/* =========================================================
   Eingabefelder
   ========================================================= */

.kontaktformular-seite #jform_contact_name,
.kontaktformular-seite #jform_contact_email,
.kontaktformular-seite #jform_contact_emailmsg,
.kontaktformular-seite #jform_contact_message {
  box-sizing: border-box;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0.45rem 0.8rem;

  color: #fff;

  font-size: 1.15rem;
  font-weight: 300;

  background: rgba(80, 80, 80, 0.25);

  border: 2px solid #fff;
  border-radius: 0;

  box-shadow: none;
}

/* Textarea */
.kontaktformular-seite #jform_contact_message {
  resize: none;
  overflow-y: auto;
}

/* Placeholder */
.kontaktformular-seite #contact-form ::placeholder {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

/* Fokus */
.kontaktformular-seite #contact-form .form-control:focus {
  color: #fff;

  background: rgba(80, 80, 80, 0.35);

  border-color: #fff;

  box-shadow: none;
}

/* =========================================================
   Absenden-Button
   ========================================================= */

/* Submit-Zeile */
.kontaktformular-seite #contact-form > .control-group {
  grid-column: 1;
  grid-row: 5;

  margin: 0;
}

/* Button */
.kontaktformular-seite #contact-form .btn-primary {
  height: 3rem;

  padding: 0.35rem 1rem;

  color: #fff;

  font-size: 1.15rem;
  font-weight: 300;

  background: rgba(110, 110, 110, 0.45);

  border: 1px solid rgba(40, 40, 40, 0.7);
  border-radius: 0;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.kontaktformular-seite #contact-form .btn-primary:hover {
  background: rgba(140, 140, 140, 0.55);

  border-color: #fff;

  transform: translateY(-1px);
}

/* Captcha-Hinweis ausblenden */
.kontaktformular-seite #jform_captcha_mark + p {
  display: none !important;
}

/* Links auf der Kontaktseite */
.kontaktformular-seite a {
  color: #fff;
}

/* Hintergrundbild etwas heller als auf anderen Seiten */
.kontaktformular-seite .nagel-sauskojus-background > div {
  filter: brightness(0.55);
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767px) {
  .kontaktformular-seite #contact-form {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;

    max-width: 100%;
  }

  .kontaktformular-seite #contact-form legend,
  .kontaktformular-seite #contact-form .control-group:has(#jform_contact_name),
  .kontaktformular-seite #contact-form .control-group:has(#jform_contact_email),
  .kontaktformular-seite
    #contact-form
    .control-group:has(#jform_contact_emailmsg),
  .kontaktformular-seite
    #contact-form
    .control-group:has(#jform_contact_message),
  .kontaktformular-seite #contact-form > .control-group {
    grid-column: 1;
    grid-row: auto;
  }

  .kontaktformular-seite #jform_contact_name,
  .kontaktformular-seite #jform_contact_email,
  .kontaktformular-seite #jform_contact_emailmsg {
    min-height: 3rem;
  }

  .kontaktformular-seite #jform_contact_message {
    min-height: 12rem;
  }
}

/* Anpassungen der Sichtbarkeit der Menüpunkte  */
/* Smartphone */

/* Ab Tablet: Touch */
@media (min-width: 768px) and (hover: none) and (pointer: coarse) {
  .nav-item.item-102 {
    display: none !important;
  }
  #mod-menu117-submenu1 {
    display: none !important;
  }
}

/* Ab Tablet: Maus */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .nav-item.item-102 {
    display: block !important;
  }
  #mod-menu117-submenu1 {
    /* display: block !important; */
  }
}