:root {
  --content-padding: 2rem;
  /* adjust this value to match your layout */
}

/* Base styles */
body {
  max-width: var(--three-col-width);
  font-size: 1.6em;
  margin: 0 auto;
}

main {
  margin: 0 var(--hor-margin-main);
  font-family: 'MD';
}

/* External link icons */
footer a[href^="http"]::after,
footer a[href^="https://"]::after,
main a[href^="http"]::after,
main a[href^="https://"]::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

/* Layout components */
.aside {
  grid-area: aside;
}

.content {
  grid-area: content;
}

footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  padding: 2rem 0;
}

img.aside {
  margin: 10px 20px;
}

/* Typography */
h1 {
  font-size: var(--h1-font-size);
  color: var(--blue-color);
  margin-bottom: var(--h1-margin-bottom);
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
}


h2 {
  color: var(--rose-color);
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: .75em;
  line-height: 1.15em;
  word-wrap: break-word;
  font-size: var(--h1-font-size);
}

p,
h3,
ol li,
ol li p {
  color: var(--blue-color);
  font-family: 'Glory';
  font-weight: 400;
  line-height: var(--p-line-height);
  margin-bottom: var(--p-margin-bottom);
  font-size: var(--p-font-size);
}

h3 {
  text-align: center;
}

a {
  font-family: 'Glory';
  font-weight: 400;
}

/* Section layout */
section {
  margin: var(--section-vert-margin-mobile) 0;
}

section hgroup {
  grid-area: section-title;
}

section hgroup h1,
.box h1 {
  margin-bottom: 62px;
}

section .section-img {
  grid-area: section-img;
  margin-bottom: var(--section-vert-margin);
}

section content {
  grid-area: section-content;
  min-height: 80px;
}

section content .infobox,
section content .box {
  margin-bottom: var(--section-vert-margin);
}

section content .infobox {
  background-color: #f7ebf0;
  margin-left: 0;
  margin-right: 0;
  padding: var(--content-padding, 2rem);
  max-width: 100%;
  box-sizing: border-box;
}

.infobox h1 {
  text-align: left;
  font-weight: 400;
}

.infobox ul li,
.infobox ul li p {
  font-weight: 600;
}

section .section-gallery img.gallery {
  margin-bottom: var(--p-margin-bottom);
}

/* Lists */
ul,
ol {
  margin-left: 1em;
  margin-bottom: var(--p-margin-bottom);
  color: var(--blue-color);
}

ul li,
ul li p,
ol li,
ol li p {
  margin: 0;
  padding: 0;
  font-family: 'Glory';
  line-height: var(--p-line-height);
}

ul li,
ul li p {
  margin-bottom: calc(var(--p-margin-bottom) / 4);
}

ul li p {
  /* margin-left: 1em; */
}

ol li,
ol li p {
  margin-bottom: calc(var(--p-margin-bottom));
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

/* Responsive layout */
@media(min-width: 620px) {
  section {
    display: grid;
    align-items: start;
    column-gap: 2rem;
    grid-template-areas:
      "section-title section-title ."
      "section-img section-content section-content"
      "section-gallery section-gallery section-gallery";
    grid-template-columns: 1fr 1fr 1fr;
    margin: var(--section-vert-margin) 0;
  }

  section .section-gallery {
    grid-area: section-gallery;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }
}

section content .testimonial {
  /* padding: var(--content-padding, 2rem); */
  margin-bottom: var(--section-vert-margin);
}

section content .testimonial p:first-of-type::before {
  content: '„';
  font-weight: 600;
  font-style: italic;
  margin-right: 0.2em;
}

section content .testimonial p:not(.author)::after {
  content: '„';
  font-weight: 600;
  font-style: italic;
  margin-left: 0.2em;
}

section content .testimonial p {
  font-weight: 600;
  line-height: 1.4em;
}

section content .testimonial em {
  display: block;
  text-align: center;
  font-style: normal;
  font-weight: 400;
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  /* or whatever your background color is */
  width: 100%;
}

/* Optional: Add a subtle shadow when scrolling */
header.scrolled {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}