/* Inline styles extracted from footer.njk */
#s-unsere-partner .gp-section__inner {
  --gp-section-pt: 0;
  --gp-section-pb: 24px;
}

#s-unsere-partner .gp-branding + .gp-spacer {
  --gp-height: 6vh;
}

#s-unsere-partner .gp-our-partner-maxw-container .gp-spacer {
  --gp-height: 30px;
}

/* Section-specific styles extracted from style.css */
.gp-footer-section-scroller {
  position: relative;
}

.gp-footer-section-scroller__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-footer-section-scroller-item {
  font-family: var(--gp-font-family-neue);
  font-size: 52px;
  color: var(--gp-brand-color-1);
  white-space: nowrap;
  line-height: 1;
}

@media (max-width: 767px) {
  .gp-footer-section-scroller-item {
    font-size: 28px;
  }
}

.gp-section-unsere-partner {
  overflow: hidden;
}

.gp-section-unsere-partner .gp-section__inner {
  justify-content: space-between;
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-unsere-partner .gp-section__inner {
    --gp-section-pt: 120px !important;
  }
}

@media (max-width: 767px) {
  /* padding-top derives from the floating G's actual visible height so
     "Unsere Partner" always starts below the G regardless of viewport.
     The G scales with vmax via the clamp() on --gp-branding-font-size,
     so a fixed px padding would overlap on wider phones. +12px is breathing
     space between G's bottom and the heading. */
  .gp-section-unsere-partner .gp-section__inner {
    --gp-section-pt: calc(var(--gp-g-visible-height) + 12px) !important;
    --gp-section-pb: 10px !important;
  }
  /* The branding placeholder above the heading is now redundant — its
     own height (line-height of the hidden G) was adding ~30px to the
     stack. Collapse it so the calc above is the sole top spacer. */
  #s-unsere-partner .gp-branding {
    display: none;
  }
  #s-unsere-partner .gp-branding + .gp-spacer {
    --gp-height: 0;
  }
}

/* Shrink the partner-block on small phones so marquee + contact + legal
   all fit inside 100svh (iPhone 13 Pro Chrome computes ~620px with both
   URL and bottom toolbars visible — legal was being clipped). */
@media (max-width: 767px) {
  #s-unsere-partner .gp-our-partner-maxw-container .gp-spacer {
    --gp-height: 10px;
  }
  /* "Unsere Partner" — down from 30px so the heading + paragraph block
     leaves room for the bottom block. */
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-heading.gp-font-30 {
    font-size: 22px;
  }
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-paragraph {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Very narrow phones (<=440px): contact addresses wrap to more lines and
   the floating G eats more of the available height, so tighten further. */
@media (max-width: 440px) {
  .gp-footer-section-scroller-item {
    font-size: 22px;
  }
  .gp-section-unsere-partner .gp-section__inner .gp-section-contact-info__item {
    font-size: 12px;
  }
  .gp-section-unsere-partner .gp-section-contact-info {
    padding-top: 8px;
    padding-bottom: 2px;
  }
  .gp-section-unsere-partner .gp-section-contact-info__brand { --gp-contact-logo-size: 32px; }
  /* Both logo lines inherit the same compact size. */
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-paragraph {
    font-size: 12px;
  }
}

.gp-section-unsere-partner .gp-our-partner-maxw-container {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1000px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container {
    padding-left: 380px;
  }
}

@media (max-width: 999px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container {
    max-width: 70%;
    margin-inline: auto;
  }
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-paragraph {
    font-size: 1.8vmax;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container {
    max-width: 55%;
  }
}

@media (max-width: 999px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-flex-container {
    flex-direction: column;
  }
}

@media (min-width: 1000px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-flex-container-item:first-child {
    max-width: 290px;
  }
}

@media (min-width: 1000px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-flex-container-item:last-child {
    max-width: 360px;
  }
}

.gp-section-unsere-partner .gp-section-bottom-block {
  margin-top: auto;
}

.gp-section-unsere-partner .gp-section-bottom-block .gp-footer-section-scroller {
  margin-left: calc(var(--gp-container-side-gutter) * -1);
  margin-right: calc(var(--gp-container-side-gutter) * -1);
  overflow: hidden;
}

.gp-section-unsere-partner .gp-section-contact-info {
  padding-top: 30px;
  padding-bottom: 20px;
}

/* Brand block "G. PIRKER" — appears in design above contact columns,
   tucked into the same grid as the contact items so it shares alignment. */
.gp-section-unsere-partner .gp-section-contact-info__brand {
  display: flex;
  flex-direction: column;
  font-family: var(--gp-font-family-neue);
  color: var(--gp-brand-color-1);
  line-height: 0.88;
  text-transform: uppercase;
}
.gp-section-unsere-partner .gp-section-contact-info__brand-fn,
.gp-section-unsere-partner .gp-section-contact-info__brand-ln {
  font-size: var(--gp-contact-logo-size, 40px);
  letter-spacing: 0;
}
@media (min-width: 1000px) {
  .gp-section-unsere-partner .gp-section-contact-info {
    padding-left: 380px;
  }
}

@media (max-width: 999px) {
  .gp-section-unsere-partner .gp-section-contact-info {
    max-width: 100%;
    margin-inline: 0;
    padding-top: 12px;
    padding-bottom: 4px;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-unsere-partner .gp-section-contact-info {
    max-width: 70%;
    margin-inline: auto;
  }
}

.gp-section-unsere-partner .gp-section-contact-info__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .gp-section-unsere-partner .gp-section-contact-info__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2x2 grid — brand top-left, workshop top-right, person bottom-left,
   office bottom-right. Matches the mobile design mock for the footer. */
@media (max-width: 999px) {
  .gp-section-unsere-partner .gp-section-contact-info__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand    location"
      "person   .";
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
  }
  .gp-section-unsere-partner .gp-section-contact-info__brand   { grid-area: brand; }
  .gp-section-unsere-partner .gp-section-contact-info__item.-person   { grid-area: person; }
  .gp-section-unsere-partner .gp-section-contact-info__item.-location { grid-area: location; }
}

@media (max-width: 767px) {
  .gp-section-unsere-partner .gp-section-contact-info__brand { --gp-contact-logo-size: 32px; }
  /* Drop to 13px so "office@pirkersdach.at" fits one line in its column.
     Extra ancestor selector to outrank the pre-existing 14px rule below. */
  .gp-section-unsere-partner .gp-section__inner .gp-section-contact-info__item {
    font-size: 13px;
  }
}

.gp-section-unsere-partner .gp-section-contact-info__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
  line-height: 1.4;
}

/* Email can be long; allow wrap only when truly needed (vs break-all/anywhere
   which split mid-character on perfectly fitting words). */
.gp-section-unsere-partner .gp-section-contact-info__item .gp-anchor-link {
  overflow-wrap: anywhere;
}

.gp-section-unsere-partner .gp-section-contact-info__item .gp-anchor-link {
  text-decoration: underline;
  transition: text-decoration-color 0.3s ease-in-out;
}

.gp-section-unsere-partner .gp-section-legal-links {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

@media (max-width: 767px) {
  .gp-section-unsere-partner .gp-section-legal-links {
    padding-top: 10px;
  }
}

@media (min-width: 1000px) {
  .gp-section-unsere-partner .gp-section-legal-links {
    padding-left: 380px;
    justify-content: center;
  }
}

.gp-footer-section-scroller {
  overflow: hidden;
}

.gp-footer-section-scroller__inner {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.gp-footer-section-scroller-item {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: marquee var(--marquee-speed, 40s) linear infinite;
}

.gp-footer-section-scroller-item:nth-child(2) {
  animation-direction: reverse;
}

.gp-footer-section-scroller-item:hover {
  animation-play-state: paused;
}

.scroller-sentence {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 5px;
  white-space: nowrap;
  line-height: 1;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Partner names: set large in the display face with thin multiplication signs
   between them, as drawn in the screendesign. */
.gp-partner-list {
  margin: 0;
  font-family: var(--gp-font-family-neue);
  font-size: 45px;
  line-height: 1.12;
  text-transform: uppercase;
}

/* body * sets overflow-wrap: break-word, which was splitting DIHAG across
   two lines. Names break between each other, never inside one. */
.gp-partner-list__name {
  white-space: nowrap;
  overflow-wrap: normal;
}

.gp-partner-list__sep {
  margin: 0 0.22em;
  font-family: var(--gp-font-family-space-grotesk);
  font-size: 0.58em;
  font-weight: 300;
  vertical-align: 0.14em;
}

/* Desktop: the copy block is indented past the floating "G." and the contact
   row uses the screendesign's three fixed columns. */
@media (min-width: 1000px) {
  #s-unsere-partner .gp-branding + .gp-spacer {
    --gp-height: 21vh;
  }
  /* The copy column is a fixed 417px in the screendesign; the partner names
     take the remainder. Both were sizing to content instead of splitting the
     row. */
  #s-unsere-partner .gp-our-partner-maxw-container .gp-flex-container-item:first-child {
    flex: 0 0 417px;
    max-width: 417px;
  }
  /* The heading runs across both columns in the screendesign. */
  #s-unsere-partner .gp-our-partner-heading {
    max-width: none;
  }
  /* 45px is the drawn size, but the drawn column is ~100px wider than this
     build's 1200px content box allows; 40px keeps the same three lines. */
  #s-unsere-partner .gp-partner-list {
    font-size: 40px;
  }
  #s-unsere-partner .gp-our-partner-maxw-container .gp-flex-container-item:last-child {
    flex: 1 1 auto;
  }
  /* The contact row starts at the content edge in the new design (the old
     380px indent cleared a layout that no longer exists); the legal line sits
     under the second column. */
  #s-unsere-partner .gp-section-contact-info {
    padding-left: 0;
  }
  #s-unsere-partner .gp-section-legal-links {
    padding-left: 268px;
    justify-content: flex-start;
  }
  #s-unsere-partner .gp-our-partner-maxw-container {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-left: 217px;
  }
  .gp-section-unsere-partner .gp-section-contact-info__grid {
    grid-template-columns: 268px 262px auto;
    column-gap: 0;
  }
}

@media (max-width: 999px) {
  .gp-partner-list {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .gp-partner-list {
    font-size: 22px;
  }
}

/* ===== Below desktop: stack the partner row =====
   The copy and the partner names shared a two-column row that is far too
   narrow here — the names ran off the right edge. */
@media (max-width: 999px) {
  .gp-section-unsere-partner .gp-our-partner-maxw-container {
    max-width: 100%;
  }
  #s-unsere-partner .gp-our-partner-maxw-container .gp-flex-container {
    flex-direction: column;
    gap: 12px;
  }
  #s-unsere-partner .gp-our-partner-maxw-container .gp-flex-container-item {
    width: 100%;
  }
}

/* Short phones (SE-class, <=640px tall). */
@media (max-width: 767px) and (max-height: 640px) {
  .gp-partner-list {
    font-size: 16px;
  }
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-heading.gp-font-30 {
    font-size: 16px;
  }
  .gp-section-unsere-partner .gp-our-partner-maxw-container .gp-paragraph {
    font-size: 10.5px;
    line-height: 1.4;
  }
}

/* Short desktops (<=820px tall): the 21vh lead-in plus 40px partner names
   pushed the marquee and contact row past the fold. */
@media (min-width: 1000px) and (max-height: 820px) {
  #s-unsere-partner .gp-branding + .gp-spacer {
    --gp-height: 13vh;
  }
  #s-unsere-partner .gp-partner-list {
    font-size: 30px;
  }
}
