/*fonts*/
/* source-sans-3-regular - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/source-sans-3-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-italic - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/source-sans-3-v19-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/source-sans-3-v19-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-600 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/source-sans-3-v19-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/source-sans-3-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-800 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 800;
  src: url("/fonts/source-sans-3-v19-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-800italic - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 800;
  src: url("/fonts/source-sans-3-v19-latin-800italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-900 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 900;
  src: url("/fonts/source-sans-3-v19-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-900italic - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 900;
  src: url("/fonts/source-sans-3-v19-latin-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-regular - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/pt-serif-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-italic - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/pt-serif-v19-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-700 - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/pt-serif-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-700italic - latin */
@font-face {
  font-display: optional; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 700;
  src: url("/fonts/pt-serif-v19-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*Font sizes*/
:root {
  --fs-11: calc(11 / 16 * 1rem);
  --fs-12: calc(12 / 16 * 1rem); /*base font size is 16px*/
  --fs-13: calc(13 / 16 * 1rem);
  --fs-14: calc(14 / 16 * 1rem);
  --fs-15: calc(15 / 16 * 1rem);
  --fs-16: calc(16 / 16 * 1rem);
  --fs-17: calc(17 / 16 * 1rem);
  --fs-18: calc(18 / 16 * 1rem);
  --fs-20: calc(20 / 16 * 1rem);
  --fs-21: calc(21 / 16 * 1rem);
  --fs-22: calc(22 / 16 * 1rem);
  --fs-24: calc(24 / 16 * 1rem);
  --fs-28: calc(28 / 16 * 1rem);
  --fs-30: calc(30 / 16 * 1rem);
  --fs-34: calc(34 / 16 * 1rem);
  --fs-40: calc(40 / 16 * 1rem);
  --fs-49: calc(49 / 16 * 1rem);
  --fs-50: calc(50 / 16 * 1rem);

  /*Mobile font sizes*/
  --font-size-topnav: var(--fs-13);
  --font-size-h1: var(--fs-34);
  --font-size-hero: var(--fs-18);
  --font-size-body: var(--fs-14);
  --font-size-h2: var(--fs-30);
  --font-size-section: var(--fs-13);
  --font-size-bottomnav: var(--fs-12);
  --font-size-h3: var(--fs-15);
  --font-size-h4: var(--fs-12);

  /*font sizes for tablets and up*/
  @media (width >= calc(600/16 * 1rem)) {
    --font-size-topnav: var(--fs-24);
    --font-size-h1: var(--fs-49);
    --font-size-hero: var(--fs-28);
    --font-size-body: var(--fs-24);
    --font-size-h2: var(--fs-40);
    --font-size-section: var(--fs-22);
    --font-size-bottomnav: var(--fs-18);
    --font-size-h3: var(--fs-16);
    --font-size-h4: var(--fs-14);
  }
}

/*----------------------------------------------------*/

/*colors*/
:root {
  --c-white: #ffffff;
  --c-gold-dark: #7e6400;
  --c-green-text: #015034;
  --c-green-body: hsla(129, 21%, 37%, 0.82);
  --c-beige-header: #dddbd2;
  --c-beige-body: #d2cfc2;
  --c-gold-border: #7e6400;
  --c-grey: #dfdfdf;

  --color-main-bg: var(--c-grey);
  --color-text-gold: var(--c-gold-dark);
  --color-text-light: var(--c-white);
  --color-hero1-bg: var(--c-beige-header);
  --color-hero-bg: var(--c-green-body);
  --color-menu-primary: var(--c-green-text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0; /*removes default margin from all elements to ensure consistent spacing across different browsers and elements*/
}

html {
  overflow-x: hidden;
  overflow-y: scroll; /* add this — forces scrollbar always visible */
}

header {
  overflow: hidden;
}

body {
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
  background-color: var(--color-main-bg);
  line-height: 1.3; /*sets the default line height for body text to 1.3 times the font size, providing adequate spacing between lines for improved readability*/
  padding-inline: 0;
  /*padding-block-end: 50vh; /*TEMPORARY adds padding to the bottom of the body element equal to 50% of the viewport height, creating extra space at the end of the page which can be useful for visual balance or to accommodate fixed-position elements without overlapping content*/
  overflow-x: hidden;
  max-width: 100%;
}

@media (width >= calc(900/16 * 1rem)) {
  body {
    padding-inline: clamp(1rem, 15vw, 15rem); /* Rand erst ab Tablet */
  }
}

/*compound selectors*/
h1,
h2 {
  line-height: 1.1; /*sets the line height for heading elements h1 and h2 to 1.1 times the font size, making the lines of text closer together for a more compact appearance*/
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: 800;
  margin-bottom: 0.5rem;
  /* white-space: nowrap; */
  text-shadow: 3px 3px #333;
}

@media (width >= calc(1000/16 * 1rem)) {
  h1 {
    white-space: nowrap;
  }
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--fs-21);
}

a {
  text-decoration: none;
}

img,
picture,
svg {
  max-width: 100%; /*ensures that images, pictures, and SVGs do not exceed the width of their containing element, allowing them to scale down appropriately on smaller screens or within constrained layouts*/
  height: auto;
  display: block;
}

/*how ws behaves on mobile*/
.wrapper {
  width: min(100%, calc(1200 / 16 * 1rem));
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  /*padding-inline: 2rem; /* kontrollierter Innenabstand, 1.5 rem alt */
  /*width: min(
      calc(100% - 100px),
      calc(1200 / 16 * 1rem)
    ); /*calculates the width of the wrapper by subtracting the total horizontal padding (20px on each side) from 100% of the viewport width*/
  /*margin-inline: auto; /*centers the wrapper horizontally by setting the left and right margins to auto*/
}

/* ──-- GOLD BORDER LINE --── */
.gold-border {
  height: 4px;
  background-color: var(--c-gold-dark);
}

.white-border {
  height: 3px;
  background-color: var(--c-white);
}
/* */
/* */
/* */
/* */

/*--------- TOPNAV HEADER ---------------------------*/

.topnav {
  background-color: var(--c-beige-header);
}

.topnav__wrapper {
  /* flexbox for top nav wrapper */
  display: flex;
  /* height: 102px; /*temporary*/
  justify-content: space-between;

  overflow: hidden;
  /*padding-block: 19px 11px; */
  padding-block: 16px 12px;

  /* MOBILE FIRST → untereinander stacked */
  flex-direction: column; /**/
  align-items: center; /*insetd of flex-start;*/
  gap: 1rem;
}

@media (width >= calc(900/16 * 1rem)) {
  .topnav__wrapper {
    /*AI*/
    flex-direction: row;
    padding-block: 30px 6px;
  }
}

.topnav__homelink {
  position: relative;
  display: block; /* statt inline-block*/
  /*margin-inline: auto;*/
  width: auto;
  height: auto;
  &:hover {
    opacity: 0.6; /*reduces the opacity of the home link to 80% when hovered over, creating a visual effect that indicates interactivity and provides feedback to the user*/
    color: var(
      --color-text-gold
    ); /*changes the color of the home link to gold when hovered over, providing visual feedback to the user and enhancing interactivity*/
  }
}

@media (width >= calc(900/16 * 1rem)) {
  .topnav__homelink {
    width: auto;
    height: auto;
  }
}

.topnav__logo {
  /*width: calc(
    220 / 16 * 1rem
  ); /*sets the width of the logo to 259 pixels, converted to rem units for scalability and responsiveness across different screen sizes*/
  position: relative;
  aspect-ratio: 259 / 74;
  width: calc(220 / 16 * 1rem); /* ← Logo-Breite unabhängig anpassen */
  height: auto;
  background-color: var(
    --c-beige-header
  ); /* matches header bg, hides alt text */
}

@media (width >= calc(600/16 * 1rem)) {
  .topnav__logo {
    width: calc(398 / 16 * 1rem); /* GRÖßE für LOGO desktop verändern */
    aspect-ratio: 259 / 74;
    background-color: var(--c-beige-header);
  }
}

.topnav__links {
  /*Flexbox for top nav - flexbox within flexbox, parent is ul */
  display: flex; /*arranges the top navigation links in a horizontal row */
  justify-content: center; /*chatgpt, zentriet menüpunkte*/
  width: 100%;
  align-items: center; /*chatgpt*/
  gap: 12px;
  list-style-type: none;
  padding: 0;
  color: green;
}

@media (width >= calc(900/16 * 1rem)) {
  .topnav__links {
    justify-content: flex-end;
    gap: 28px;
    flex-wrap: nowrap;
    padding-block-start: 1.5rem;
    margin-inline: 3rem;
  }
}

.topnav__item {
  flex-shrink: 0;
}

.topnav__link {
  white-space: nowrap; /*prevents the top navigation links from wrapping onto multiple lines, ensuring that each link remains on a single line regardless of its length*/
  font-size: var(--font-size-topnav);
  font-weight: 700; /*sets the font weight of the top navigation links to bold*/
  letter-spacing: 0.05em; /*adds extra space between the letters of the top navigation links, in figma 5%*/
  text-transform: uppercase;
  color: var(
    --color-green-text
  ); /*sets color of the top navigation links, have to set here otherwise it might not take effect*/

  /*  margin-left: 20px;
      text-transform: uppercase; 
      font-weight: 600; */

  &:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 1px;
    opacity: 0.7;
  }
}
/* */
/* */
/* */
/* */

/* ──--------- HERO ----------── */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 300px; /* 340 */
  height: auto;
  display: flex;
  align-items: center;
}

/* Vienna photo behind everything */
.hero__bg {
  aspect-ratio: 16 / 9;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  background-color: var(--c-beige-header);
}

@media (width >= calc(800/16 * 1rem)) {
  .hero__bg {
    height: 415px;
    object-position: left top; /*center top*/
  }
}

/* Green semi-transparent overlay (covers left ~65%) */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--c-green-body);
  /* background: rgba(28, 85, 37, 0.82); */
  z-index: 1;
}

@media (width >= calc(700/16 * 1rem)) {
  .hero__overlay {
    /* Diagonal cut: green on left, transparent on right */
    clip-path: polygon(
      0 0,
      82% 0,
      55% 100%,
      0 100%
    ); /* old clip-path: polygon(0 0, 72% 0, 55% 100%, 0 100%); */
    background: var(--c-green-body);
    /*background: rgba(28, 85, 37, 0.88); */
  }
}

.hero__wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 3.5rem;
  width: min(100%, calc(1200 / 16 * 1rem));
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}
/* */
/* */
.hero2 {
  position: relative;
  overflow: hidden;
  min-height: 190px; /* smaller than hero's 300px */
  height: auto;
  display: flex;
  align-items: center;
}

.hero2__bg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  /*height: 230px !important;*/
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  background-color: #b6b19dc4;
}

.hero2__overlay {
  position: absolute;
  inset: 0;
  background: var(--c-green-body);
  z-index: 1;
}

@media (width >= calc(700/16 * 1rem)) {
  .hero2__overlay {
    clip-path: polygon(0 0, 82% 0, 55% 100%, 0 100%);
  }
}

.hero2__wrapper {
  position: relative;
  z-index: 2; /* ← this was missing, text was hidden under overlay */
  display: flex;
  align-items: center;
  padding-block: 1.8rem; /* less padding than hero */
  width: min(100%, calc(1200 / 16 * 1rem));
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/*------ HERO TEXT ------*/

.hero__text {
  max-width: 100%;
}

@media (width >= calc(800/16 * 1rem)) {
  .hero__text {
    max-width: 560px; /*Breite Text - war 560px*/
  }
}

.hero__text h1 {
  font-family: "PT Serif", serif; /*Lora*/
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: 1rem;
}

.hero__text p {
  font-size: var(--font-size-hero);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  min-height: 4.5rem;
}
/* */
/* */
/* */
/* */

/*-------- OFFICE PHOTO -------*/

.hero__photo {
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  width: clamp(250px, 26vw, 320px);
  aspect-ratio: 1; /* war 1 */
  object-fit: cover;
  border: 4px solid var(--c-white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.486);
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); */
  display: none;
}

@media (width >= calc(700/16 * 1rem)) {
  .hero__photo {
    display: block;
    aspect-ratio: 3/2;
    width: clamp(360px, 26vw, 320px); /* GRÖßE photo */
    margin-inline-start: 20rem; /* 18rem  */
    margin-block-end: -3rem; /*-6.5*/
  }
}
/* */
/* */
/* */
/* */

/* ──---- INFO SECTION ----── */

.info {
  background-color: var(--c-white);
  padding-block: 3rem;
}

.info__row {
  /* neu*/
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.info__content {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 680px;
}

.info__content p {
  font-size: var(--font-size-body);
  color: #333;
  line-height: 1.7;
}

p.info__content2 {
  font-size: var(--fs-16);
  color: #333;
  line-height: 1.4;
}

@media (width >= calc(900/16 * 1rem)) {
  p.info__content2 {
    font-size: var(--fs-21);
    color: #333;
    line-height: 1.4;
  }
}

.info__content p.info__label {
  font-weight: 700;
  color: var(--c-green-text);
}

.info__content p.info__indent {
  padding-inline-start: 1.5rem;
  border-left: 3px solid var(--c-gold-dark);
}

.info__under-construction {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  color: var(--c-gold-dark);
  border: 2px dashed var(--c-gold-dark);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  min-width: 180px;
  align-self: center;
}

.info__under-construction span {
  font-size: 2rem;
}

.info__under-construction p:first-of-type {
  font-weight: 700;
  font-size: var(--fs-16);
  color: var(--c-gold-dark);
}

.info__under-construction p:last-of-type {
  font-size: var(--fs-13);
  color: #666;
}

/* */
/* */
/* */
/* */
/* ──---- ABOUT SECTION ----── */

.about {
  background-color: var(--c-beige-body);
  padding-block: 2rem; /* 2rem;*/
  padding-inline: clamp(1.5rem, 4vw, 3rem); /* clamp(1.5rem, 4vw, 3rem);*/
}

.about__box {
  max-width: 1300px; /* 860px;*/
  margin-inline: auto;
  border: 3px solid #ffffff; /* white border */
  border-radius: 8px; /* rounded corners 4px */
  padding: 2.5rem 1.8rem; /*2rem 2.5rem;*/
  background-color: var(--c-beige-body);
}

.about__box h2 {
  font-size: var(--fs-22);
  font-weight: 700;
  color: var(--c-gold-dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}

@media (width >= calc(600/16 * 1rem)) {
  .about__box h2 {
    font-size: var(--fs-28);
  }
}

.about2 {
  background-color: var(--c-beige-body);
  padding-block: 4rem; /* 2rem;*/
  padding-inline: clamp(1.5rem, 4vw, 3rem); /* clamp(1.5rem, 4vw, 3rem);*/
}

.about__box2 {
  max-width: 1000px; /* 1300, 860px;*/
  margin-inline: auto;
  border: 3px solid #ffffff; /* white border */
  border-radius: 8px; /* rounded corners 4px */
  padding: 1.8rem 1.8rem; /*2.5rem 1.8rem; ... 2rem 2.5rem;*/
  background-color: var(--c-beige-body);
}

.about__box2 h2 {
  font-family: "PT Serif", serif;
  text-align: center;
  font-size: var(--fs-22);
  font-weight: 700;
  color: var(--c-gold-dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}

@media (width >= calc(600/16 * 1rem)) {
  .about__box2 h2 {
    font-size: var(--fs-28);
  }
}

.about__box p {
  font-size: var(--font-size-section);
  color: #333;
  line-height: 1.7;
}

/**/
/**/
/* ──---- LEISTUNGEN ----── */

.leistungen__title {
  font-size: var(--fs-22); /* 22 */
  font-weight: 700;
  color: var(--c-gold-border);
  margin-bottom: 2rem;
}

@media (width >= calc(600/16 * 1rem)) {
  .leistungen__title {
    font-size: var(--fs-28);
  }
}

.leistungen__block {
  background-color: #d2cfc29a;
  display: flex;
  gap: 1.5rem;
  align-items: center; /* flex-start */
  margin-bottom: 2.5rem; /*2.5rem*/
  padding: 20px;
}

.leistungen__icon {
  width: 92px; /*60*/
  height: auto;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.leistungen__heading {
  font-size: var(--fs-22); /*16*/
  font-weight: 700;
  color: var(--c-green-text);
  margin-bottom: 0.5rem;
}

.leistungen__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.leistungen__list li {
  font-size: var(--font-size-body);
  color: #333;
  line-height: 1.5;
}

/**/
/**/

/* ──---- PHOTO STRIP ----── */

.photo-strip {
  background: linear-gradient(
    to right,
    var(--c-green-body),
    var(--c-beige-body),
    var(--c-green-body)
  );
  padding-block: 0.3rem; /*0.8*/
}

.photo-strip__inner {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-end; /* all items align to the bottom */
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  padding-block: 0.3rem; /*0.8*/
}

.photo-strip__item {
  flex-shrink: 0;
  overflow: hidden; /*new*/
  cursor: default;
  pointer-events: auto;
  /* no height, no align — let the image define the size */
}

.photo-strip__item--tall img {
  height: 240px !important;
}

.photo-strip__inner img {
  width: auto !important;
  height: 200px !important;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease; /*new*/
  pointer-events: none; /* disables right-click on images */
  user-select: none;
  -webkit-user-select: none;
}

.photo-strip__item:hover img {
  transform: scale(1.1); /*transform: scale(1.08);*/
}

/* ──---- PHOTO GRID ----── */
.photo-grid {
  width: 100%;
  height: 180px;
  display: flex;
  overflow: hidden;
  border-radius: 12px;
  /*
  background-color: var(--c-gold-dark);*/
  background: linear-gradient(to top, var(--c-green-body), var(--c-beige-body));
  gap: 0.5px;
}

.panel {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.panel img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
  clip-path: polygon(1% 0%, 100% 0%, 96% 100%, 0% 100%);
  /* clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); */
  transition: transform 0.4s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.panel:first-child img {
  clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);
  /* clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);*/
}

.panel:last-child img {
  clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%);
  /*clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); */
}

.panel:hover img {
  transform: scale(1.05);
}

/* ──---- FOOTER ----── */
footer {
  background-color: var(--c-green-body);
  color: var(--c-white);
  text-align: center;
  padding-block: 1.5rem;
  font-size: var(--fs-15);
}

/* skip link  @layer utilities {
  .visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

    &.skip:focus {
      left: 0;
      width: auto;
      height: auto;
      background: var(--c-white);
      padding: 10px;
      border: 1px solid;
    }
  }
} */

.footer-impressum {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: 1rem 2.5rem;
  font-size: 0.95rem;
}

.footer-impressum__wrapper {
  max-width: 1200px;
  margin-inline: 0; /*auto*/
  padding-inline: 1.5rem;

  display: flex;
  flex-direction: row; /*instead of chatgpt column*/
  gap: 80px; /*2rem*/

  text-align: left; /*center*/
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-impressum__left,
.footer-impressum__right {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-self: flex-start;
}

.footer-impressum__links {
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.footer-impressum a {
  text-decoration: none;
}

.footer-impressum a:hover {
  text-decoration: underline;
}

.footer-impressum h4 {
  font-weight: 600;
  font-size: var(--fs-15);
  margin-bottom: 0.5rem;
  margin-top: 0;
}

@media (width >= 850px) {
  .footer-impressum__wrapper {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start; /* WICHTIG → oben bündig */
    gap: 80px; /*80px*/
    text-align: left;
  }

  .footer-impressum__left,
  .footer-impressum__right {
    margin: 0; /* sicherstellen */
  }

  .footer-impressum__right {
    padding-top: 0; /* falls irgendwo Padding drin ist */
  }
}

/* ──---- IMPRESSUM ----── */

.impressum {
  padding-block: 3rem;
}

.impressum__wrapper {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.impressum h3 {
  font-size: var(--fs-22);
  font-weight: 800;
  margin-bottom: 1rem;
}

.impressum h4 {
  font-size: var(--fs-20);
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.impressum__block {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.impressum p {
  line-height: 1.5;
}

.impressum a {
  text-decoration: underline;
}

.impressum__back {
  margin-top: 1rem;
}

/* @media (width >= 850px) {
  .impressum__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.1rem;
  }

  .impressum h3 {
    grid-column: 1 / -1;
  }
} */

/*-------datenschutz------- */
.datenschutz {
  padding-block: 3rem;
  background-color: var(--color-main-bg);
}

.datenschutz__wrapper {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.datenschutz h3 {
  font-size: var(--fs-18);
  font-weight: 800;
  margin-bottom: 1rem;
}

.datenschutz h4 {
  font-size: var(--fs-17);
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.datenschutz__block {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.datenschutz p {
  line-height: 1.5;
  font-size: var(--fs-15);
}

.datenschutz ul {
  padding-left: 1.2rem;
  line-height: 1.5;
}

.datenschutz a {
  text-decoration: underline;
}
/* */
/* */
/* */
/* */
/* ──---- KONTAKT ----── */
.kontakt__row {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.kontakt__details {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem; /* was 0.5*/
}

.kontakt__block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.8rem; /* 1.2*/
  font-size: var(--font-size-body);
  color: #333;
  line-height: 1.3; /*1.6*/
}

.kontakt__block a {
  color: var(--c-green-text);
  text-decoration: underline;
}

.kontakt__block a:hover {
  opacity: 0.7;
}

.kontakt__map-wrapper {
  flex: 1.5;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.kontakt__map {
  border: 3px solid var(--c-gold-dark);
  border-radius: 8px;
  overflow: hidden; /* safely clips only the map */
  line-height: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.kontakt__map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

.kontakt__map-note {
  font-size: var(--fs-15);
  color: #555;
  line-height: 1.5;
}

/* */
/* */
/* */
/* */

/* ──---- SKIP LINK ----── */
.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.visually-hidden.skip:focus {
  left: 0;
  width: auto;
  height: auto;
  background: var(--c-white);
  padding: 10px;
  border: 1px solid;
}