:root {
  --gruga-ink: #17363a;
  --gruga-petrol: #1d7989;
  --gruga-petrol-dark: #0e3b43;
  --gruga-coral: #ce3c37;
  --gruga-sand: #f4f0e8;
  --gruga-paper: #fffdfa;
  --gruga-muted: #617477;
  --gruga-line: rgba(23, 54, 58, .14);
  --gruga-shadow: 0 18px 50px rgba(23, 54, 58, .10);
  --gruga-radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body.site {
  background: var(--gruga-sand);
  color: var(--gruga-ink);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.04rem;
  line-height: 1.72;
}

a {
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.container-header {
  position: relative;
  z-index: 10;
  padding: 0;
  background: rgba(255, 253, 250, .97);
  border-top: 5px solid var(--gruga-coral);
  border-bottom: 1px solid var(--gruga-line);
  box-shadow: 0 8px 30px rgba(23, 54, 58, .07);
}

.container-header .grid-child {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.2rem 0;
}

.container-header .navbar-brand {
  margin: 0;
}

.container-header .brand-logo {
  display: inline-flex;
  align-items: center;
}

.container-header .logo {
  width: min(288px, 72vw);
  height: auto;
}

.site-grid {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 4.5rem) 0 4.5rem;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
}

.container-component {
  min-width: 0;
}

main {
  background: var(--gruga-paper);
  border: 1px solid var(--gruga-line);
  border-radius: var(--gruga-radius);
  box-shadow: var(--gruga-shadow);
  overflow: hidden;
}

.item-page {
  padding: clamp(1.6rem, 4vw, 3.5rem);
}

.item-page > .page-header:first-of-type {
  margin: 0 0 2rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--gruga-line);
}

.item-page > .page-header h1 {
  margin: 0;
  color: var(--gruga-ink);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.itemid-101 .item-page > .page-header:first-of-type {
  display: none;
}

.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3 {
  color: var(--gruga-ink);
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -.025em;
}

.com-content-article__body h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.45rem, 7vw, 4.9rem);
}

.com-content-article__body h2 {
  margin: 2.2rem 0 .8rem;
  font-size: clamp(1.55rem, 3.3vw, 2.35rem);
}

.com-content-article__body h3 {
  margin: 1.8rem 0 .65rem;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

.com-content-article__body p {
  max-width: 74ch;
}

.com-content-article__body .lead {
  color: var(--gruga-petrol);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 650;
  line-height: 1.4;
}

.gruga-hero {
  position: relative;
  margin: calc(clamp(1.6rem, 4vw, 3.5rem) * -1);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.6rem, 5vw, 4.5rem);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 15%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(135deg, var(--gruga-petrol-dark), var(--gruga-petrol));
}

.gruga-hero::after {
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 19rem;
  height: 19rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  content: "";
}

.gruga-hero h1,
.gruga-hero h2,
.gruga-hero .lead,
.gruga-hero p {
  position: relative;
  z-index: 1;
  color: #fff;
}

.gruga-hero h2 {
  max-width: 23ch;
  margin-top: clamp(2.7rem, 7vw, 5rem);
}

.gruga-hero p:not(.lead) {
  max-width: 65ch;
  color: rgba(255,255,255,.88);
}

.gruga-intro {
  max-width: 780px;
}

.gruga-intro h2 {
  padding-left: 1rem;
  border-left: 4px solid var(--gruga-coral);
}

.container-sidebar-right {
  align-self: start;
}

.sidebar-right.card {
  position: sticky;
  top: 1.5rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--gruga-radius);
  background: var(--gruga-ink);
  box-shadow: var(--gruga-shadow);
}

.sidebar-right .card-header {
  margin: 0;
  padding: 1.25rem 1.4rem .65rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sidebar-right .card-body {
  padding: .45rem .75rem 1rem;
}

.sidebar-right .mod-menu {
  display: grid;
  gap: .25rem;
}

.sidebar-right .mod-menu li {
  margin: 0;
}

.sidebar-right .mod-menu a {
  display: block;
  padding: .78rem .9rem;
  border-radius: 10px;
  color: rgba(255,255,255,.88);
  font-weight: 620;
  text-decoration: none;
}

.sidebar-right .mod-menu a:hover,
.sidebar-right .mod-menu a:focus-visible {
  background: rgba(255,255,255,.1);
  color: #fff;
  transform: translateX(3px);
}

.sidebar-right .mod-menu .current > a,
.sidebar-right .mod-menu .active > a {
  background: var(--gruga-coral);
  color: #fff;
}

.btn-primary,
button.btn-primary {
  border-color: var(--gruga-coral);
  background: var(--gruga-coral);
  box-shadow: 0 8px 20px rgba(206, 60, 55, .2);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: #a72d29;
  background: #a72d29;
}

input.form-control,
textarea.form-control,
select.form-select {
  border-color: var(--gruga-line);
  border-radius: 10px;
  background-color: #fff;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-select:focus {
  border-color: var(--gruga-petrol);
  box-shadow: 0 0 0 .2rem rgba(29,121,137,.16);
}

table {
  border-color: var(--gruga-line);
}

@media (max-width: 991.98px) {
  .site-grid {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100% - 2rem));
    padding-top: 1.5rem;
  }

  .container-sidebar-right {
    order: -1;
    width: 100%;
  }

  .sidebar-right.card {
    position: static;
  }

  .sidebar-right .card-header {
    display: none;
  }

  .sidebar-right .card-body {
    padding: .65rem;
  }

  .sidebar-right .mod-menu {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .sidebar-right .mod-menu a {
    padding: .62rem .78rem;
    font-size: .92rem;
  }

  .sidebar-right .mod-menu a:hover,
  .sidebar-right .mod-menu a:focus-visible {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .container-header .grid-child {
    width: calc(100% - 2rem);
    padding: 1rem 0;
  }

  .site-grid {
    width: calc(100% - 1rem);
    padding-bottom: 2rem;
  }

  main,
  .sidebar-right.card {
    border-radius: 14px;
  }

  .item-page {
    padding: 1.35rem;
  }

  .gruga-hero {
    margin: -1.35rem;
    margin-bottom: 2.5rem;
    padding: 2.7rem 1.35rem 3rem;
  }

  .sidebar-right .mod-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sidebar-right .mod-menu a {
    height: 100%;
  }
}


/* Cassiopeia grid placement */
.site-grid > .container-component {
  grid-column: 1;
  grid-row: 1;
}

.site-grid > .container-sidebar-right {
  grid-column: 2;
  grid-row: 1;
}


/* Final two-column layout */
.site-grid {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px) !important;
}

.site-grid > .container-component {
  grid-column: 1 !important;
}

.site-grid > .container-sidebar-right {
  grid-column: 2 !important;
}


/* Mobile navigation toggle */
.mobile-nav-toggle {
  display: none;
}

@media (max-width: 991.98px) {
  .mobile-nav-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 750;
    letter-spacing: .02em;
    text-align: left;
  }

  .mobile-nav-toggle:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .72);
    outline-offset: -4px;
  }

  .mobile-nav-toggle__icon {
    display: grid;
    width: 1.4rem;
    gap: .25rem;
  }

  .mobile-nav-toggle__icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .sidebar-right .card-body {
    display: none;
    padding: 0 .65rem .65rem;
  }

  .sidebar-right.is-open .card-body {
    display: block;
  }

  .sidebar-right.is-open .mobile-nav-toggle__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .sidebar-right.is-open .mobile-nav-toggle__icon span:nth-child(2) {
    opacity: 0;
  }

  .sidebar-right.is-open .mobile-nav-toggle__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}


/* Original Grugapartment logo */
.container-header .navbar-brand img,
.container-header .brand-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 110px;
  max-height: 110px;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .container-header .navbar-brand img,
  .container-header .brand-logo img {
    max-width: 86px;
    max-height: 86px;
  }
}

/* Balanced content width and headings */
.com-content-article__body h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.com-content-article__body h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem);
}

.com-content-article__body .lead {
  font-size: clamp(1.18rem, 2.2vw, 1.55rem);
}

@media (min-width: 992px) {
  .site-grid {
    width: min(1380px, calc(100% - 3rem));
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) !important;
    gap: clamp(1.25rem, 2.3vw, 2.25rem);
  }
}

/* Booking request: clean heading hierarchy and inner spacing */
.itemid-131 main {
  padding: clamp(1.6rem, 4vw, 3.5rem);
}

.itemid-131 .com-contact__container > h2,
.itemid-131 .com-contact > h2 {
  display: none;
}


/* Grugahalle-Skizze auf der Startseite */
.itemid-101 .gruga-hero::after {
    display: none;
  }

.itemid-101 .gruga-hero::before {
    position: absolute;
    right: -6%;
    bottom: 1rem;
    z-index: 0;
    width: min(82%, 760px);
    aspect-ratio: 2 / 1;
    background: url("/images/exec-45e22692-6044-4295-bef5-597d7e007fef.png") center / contain no-repeat;
    content: "";
    opacity: .14;
    pointer-events: none;
  }

@media (max-width: 575.98px) {
    .itemid-101 .gruga-hero::before {
          right: -28%;
          bottom: .75rem;
          width: 115%;
          opacity: .09;
        }
  }

    }
}
}
}

/* Grugahalle oben und deutlicher */
.itemid-101 .gruga-hero::before {
    top: 1rem;
    bottom: auto;
    opacity: .22;
  }

@media (max-width: 575.98px) {
    .itemid-101 .gruga-hero::before {
          top: .75rem;
          bottom: auto;
          opacity: .15;
        }
  }

    }
}
}

/* Transparente Grugahallen-Skizze oben */
.itemid-101 .gruga-hero::before {
    top: 0;
    right: -2%;
    bottom: auto;
    width: min(74%, 720px);
    background-image: url("/images/skizze_weisse_linien_transparent.png");
    mix-blend-mode: normal;
    opacity: .28;
  }

@media (max-width: 575.98px) {
    .itemid-101 .gruga-hero::before {
          top: .5rem;
          right: -24%;
          bottom: auto;
          width: 108%;
          opacity: .17;
        }
  }

    }
}
}