@charset "UTF-8";
/* CSS Document */
/* ysabeau-regular - latin */


/* ysabeau-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ysabeau';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/ysabeau-v5-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ysabeau-300italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ysabeau';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/ysabeau-v5-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

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

/* ysabeau-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ysabeau';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/ysabeau-v5-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ysabeau-500italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ysabeau';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/ysabeau-v5-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ysabeau-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ysabeau';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/ysabeau-v5-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ysabeau-600italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Ysabeau';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/ysabeau-v5-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

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

/* lavishly-yours-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lavishly Yours';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/lavishly-yours-v7-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

html, body {
    height: auto;
    overflow-y: auto;
}

/* Verhindert Scrollen der Seite, wenn ein Overlay geöffnet ist */
body.overlay-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* ---------- GLOBAL: Header-Collapse darf NICHT nur im Desktop-Breakpoint sein ---------- */
:root {
    --snap: 190px;
}


main {
    margin-top: 0;
    padding-top: 0;              /* WICHTIG: nicht mehr über main verschieben */
}

/* Wrapper auf Startseite initial ausblenden */
body:not(.header-collapsed) .wrapper {
    opacity: 0;
    pointer-events: none;
}

body.header-collapsed .wrapper {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}
/* NEU: Spacer hält Platz für den Header im Dokumentfluss */
#header-spacer {
    height: 100vh;               /* Start: Header vollflächig (nur index.html) */
    transition: height 0.7s ease;
}

/* Collapsed: Einheitliche Höhe für alle Seiten mit collapsed Header */
body.header-collapsed #header-spacer {
    height: 170px !important;
    transition: none;            /* Keine Animation auf Unterseiten */
}


#topheader {
    position: fixed;
   top: 0;
    bottom: auto;
    left: 0;
    right: 0;

    height: 100vh;
    overflow: hidden;
    z-index: 100;

    transition: height 0.9s ease;
}

#topheader > img#topheader-bg {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

#topheader.is-collapsed > img#topheader-bg {
    transform: translateY(-20px);
}

.header-logo {
    position: absolute;
    width: 26vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: left top;
    z-index: 120;

    transition: transform 0.9s ease, top 0.9s ease, left 0.9s ease, width 0.9s ease;
}

.header-logo a {
    display: block;
    width: 100%;
}

.header-logo a img {
    width: 100%;
    height: auto;
}

.header-logo h3 {
    color: rgba(236, 234, 221, 0.8);
    font: 1.6rem 'Ysabeau';
    font-weight: 300;
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 48%;
    white-space: nowrap;
    transition: opacity 0.35s ease;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    z-index: 130;

    background: rgba(0, 0, 0, 0.25);
    color: #eceadd;
    border: 1px solid rgba(236, 234, 221, 0.5);
    width: 52px;
    height: 52px;
    border-radius: 999px;
    cursor: pointer;

    display: grid;
    place-items: center;

    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;

    transition: opacity 0.35s ease, transform 0.35s ease;
}

.scroll-cue span {
    display: block;
    transform: scaleY(0.7);
}

#topheader.is-collapsed {
    height: var(--snap); /* geändert: nur noch 120px hoch */
    transform: none;     /* geändert: kein Verschieben mehr */
}

#topheader.is-collapsed .header-logo {
    top: 20px;
    left: 60px;
    transform: translate(0, 0) scale(1);
}

#topheader.is-collapsed .header-logo h3 {
    opacity: 0;
}

#topheader.is-collapsed .scroll-cue {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    pointer-events: none;
}

/* ---------- Ende GLOBAL ---------- */

/* mobile ------------------------------------*/
@media screen and (max-width:768px) {
  :root {
    --snap: 120px;
  }

  html {
    font: 1rem 'Ysabeau';
    font-weight: 400;
    scroll-behavior: smooth;
  }

  h1 {
    font: 2.5rem 'Lavishly Yours';
    font-weight: 400;
    color: #bf3d1e;
  }

  h2 {
    font: 2rem 'Lavishly Yours';
    font-weight: 400;
    color: #bf3d1e;
    margin-bottom: 0.5rem;
  }

  h3 {
    font: 1.4rem 'Ysabeau';
    font-weight: 400;
  }

  .kontakt-hinweis {
    font: 1rem 'Ysabeau';
    font-weight: 400;
    margin-top: 1rem;
    color: #3d5926;
  }

  h4 {
    font: 1rem 'Ysabeau';
    font-weight: 400;
  }

  strong {
    display: inline-block;
    font: 0.9rem 'Ysabeau';
    font-weight: 500;
    padding-top: 0.5rem;
  }

  body {
    background: url("../img/cr_hg_blumen.png") center bottom/cover fixed;
  }

  /* Header Mobile */
  #header-spacer {
    height: 100vh;
  }

  body.header-collapsed #header-spacer {
    height: 120px !important;
  }

  #topheader {
    height: 100vh;
  }

  #topheader.is-collapsed {
    height: 120px;
  }

  .header-logo {
    width: 50vw;
  }

  .header-logo h3 {
    font: 1rem 'Ysabeau';
    bottom: 0;
    left: 48%;
  }

  #topheader.is-collapsed .header-logo {
    top: 15px;
    left: 20px;
    width: 22vw;
  }

  .scroll-cue {
    bottom: 120px;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
  }

  /* Burger Button Mobile */
  .burger-fixed {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2000;
  }

  .burger-fixed .button {
    position: relative;
    right: auto;
    top: auto;
  }

  .button {
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 950;
    background: none;
    border: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transform: scale(0.7);
  }

  .burger-5 {
    transform: scale(1.1);
    height: 40px;
  }

  .burger-5 svg {
    height: 40px;
    transform: translate(-1px, -1px) rotate(0deg);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .burger-5 .line {
    fill: none;
    stroke: #eceadd;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.0;
    transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .button.burger-action .burger-5 .line {
    stroke: #3d5926;
  }

  .burger-5 .line-top-bottom {
    stroke-dasharray: 12 63;
    stroke-dashoffset: 0;
  }

  .button.burger-action svg {
    transform: rotate(-45deg) translate(0);
  }

  .button.burger-action .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }

  /* Navigation Mobile */
  #topnavigation {
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: auto;
    z-index: 1500;
    background: rgba(228, 231, 219, 0.95);
    width: 50vw;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    height: 100vh;
  }

  #topnavigation.burger-action {
    transform: translateX(0);
  }

  #topnavigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  #topnavigation a {
    height: auto;
    color: #3d5926;
    font: 1.1rem 'Ysabeau';
    border-top: 1px solid rgb(61, 89, 38);
    text-decoration: none;
    margin: 0 1.5rem;
    padding: 1rem 0;
    line-height: 1.5rem;
    display: block;
  }

  #topnavigation > ul > li:first-child > a {
    border-top: none;
    margin-top: 100px;
  }

  #topnavigation ul ul {
    position: relative;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease, max-height 0.5s ease;
  }

  #topnavigation ul li:hover ul {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
  }

  #topnavigation ul ul a {
    font: 0.95rem 'Ysabeau';
    font-weight: 300;
    padding: 0.5rem 0 0.5rem 1rem;
    border-top: none;
  }

  #topnavigation ul ul li > a {
    height: auto;
    border-top: none !important;
  }

  /* Inhalt Mobile */
  .wrapper {
    width: 92vw;
    margin: -20px auto 0;
  }

  body.header-collapsed .wrapper {
    margin-top: 0;
  }

  .grid-container {
    width: 90vw;
    margin: 0 auto 50px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .headline-standalone {
    width: 90vw;
    margin: 0 auto 1rem;
  }

  .headline-standalone h2 {
    font-size: 2.5rem;
  }

  .grid-container .headline {
    order: 1;
  }

  .grid-container .copytext {
    order: 2;
  }

  .grid-container .picture_1 {
    order: 3;
    margin-top: 2rem;
    border-radius: 4px;
  }

  .grid-container .picture_2 {
    order: 4;
    margin-top: 2rem;
    border-radius: 4px;
  }

  *[class*="grid"] > img {
    max-height: none;
    width: 100%;
    padding-left: 0;
    border-radius: 4px;
  }

  .headline {
    color: #bf3d1e;
  }

  .copytext {
    color: #3d5926;
  }

  .subheadline h2 {
    color: #bf3d1e;
    margin-bottom: 0.5rem;
  }

  .subheadline h3 {
    color: #bf3d1e;
    font: 2rem 'Lavishly Yours';
    font-weight: 400;
    margin-bottom: 0.5rem;
  }

  .kurs-anker {
    scroll-margin-top: 140px;
    margin-bottom: 140px;
  }

  .kurs-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
  }

  .kurs-tabelle td {
    color: #3d5926;
    font: 0.9rem 'Ysabeau';
    padding: 0.4rem 0;
    vertical-align: top;
    white-space: normal;
  }

  .kurs-tabelle td:first-child {
    font-weight: 500;
    width: 60px;
    padding-right: 0.5rem;
  }

  /* Presse Mobile */
  .presse-zitate {
    width: 90vw;
    padding-top: 50px;
  }

  .zitat {
    width: 100%;
      color: #3d5926;
  }

  .zitat:not(:last-child)::after {
    content: '';
    display: block;
    width: 60vw;
    height: 1px;
    background-color: #3d5926;
    margin: 50px auto 50px;
  }

  .zitat h3 {
      color: #3d5926;
    font: 1.2rem 'Ysabeau';
    font-weight: 600;
    font-style: italic;
  }

  .presse-datum p {
      color: #3d5926;
    font: 0.9rem 'Ysabeau';
    padding-top: 8px;
  }

  .presse-text p {
      color: #3d5926;
    font: 1rem 'Ysabeau';
    font-weight: 500;
    font-style: italic;
    padding-top: 15px;
    margin-bottom: 50px;
  }

  section {
    margin-bottom: 150px;
  }

  /* Footer Mobile */
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 90px;
  }

  #footer p, #footer a {
    color: #eceadd;
    font: 0.8rem 'Ysabeau';
    font-weight: 300;
    padding-left: 10px;
    text-decoration: none;
  }

  #footer-bg {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 110px;
    transform: translateY(100%);
    transition: transform 1s ease;
    z-index: -1;
    object-fit: cover;
  }

  body.header-collapsed #footer-bg {
    transform: translateY(0);
  }

  .superspalter {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    z-index: 1;
  }

  .superspalter .social {
    display: flex;
    align-items: center;
  }

  .superspalter .social svg {
    width: 1.2rem;
    padding-left: 8px;
    margin-top: 8px;
  }

  .superspalter .telefon {
    width: 100%;
    text-align: center;
    margin-top: 8px;
    padding-right: 0;
  }

  .superspalter .telefon a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #eceadd;
    text-decoration: none;
    font: 0.9rem 'Ysabeau';
  }

  .superspalter .telefon svg {
    width: 0.7rem;
    height: 0.7rem;
    vertical-align: middle;
    display: flex;
    align-self: center;
    margin-top: 4px;
  }

  /* Overlay Mobile */
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(61, 89, 38, 0.8);
    justify-content: center;
    align-items: center;
  }

  body.overlay-open #topnavigation,
  body.overlay-open #topheader,
  body.overlay-open .wrapper,
  body.overlay-open #footer {
    pointer-events: none;
  }

  body.overlay-open .overlay {
    pointer-events: auto;
  }

  .overlay-content {
    background-color: rgba(43, 43, 37, 0.4);
    color: #eee6c8;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    position: relative;
    width: 90%;
    max-height: 80%;
    padding: 1.5rem;
    overflow-y: auto;
  }

  .overlay-content h1 {
    font: 1.3rem 'Ysabeau';
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    line-height: 1.6rem;
  }

  .overlay-content h2 {
    font: 1.1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    line-height: 1.4rem;
  }

  .overlay-content h3 {
    font: 0.95rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 0.4rem;
  }

  .overlay-content h4 {
    font: 0.9rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
  }

  .overlay-content h5 {
    font: 0.9rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    margin-bottom: 0.4rem;
  }

  .overlay-content strong {
    font: 0.9rem 'Ysabeau';
    font-weight: 400;
  }

  .overlay-content > p, ul {
    font: 0.85rem 'Ysabeau';
    font-weight: 100;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 0.4rem;
  }

  .overlay-content a[href] {
    color: #9d9e52;
    text-decoration: none;
  }

  .index-link {
    color: #9d9e52;
    text-decoration: none;
  }

  .index li {
    list-style: none;
  }

  .overlay-content > * li {
    list-style: none;
  }

  .close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 28px;
    cursor: pointer;
    color: #eee6c8;
  }

  /* Kontaktformular Mobile */
  #kontakt {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: flex-start;
    padding-top: 0.5rem;
  }

  .kontaktformular {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
  }

  .kontaktformular h1 {
    font: 2.5rem 'Lavishly Yours';
    font-weight: 400;
    color: #bf3d1e;
    padding-bottom: 0.5rem;
    text-align: center;
  }

  form {
    width: 100%;
    height: auto;
    text-align: center;
  }

  #contactForm p {
    display: block;
    color: #3d5926;
    font: 0.7rem 'Ysabeau';
    font-weight: 300;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  #contactForm label {
    width: 100%;
    display: block;
    text-align: left;
    font: 0.95rem 'Ysabeau';
    color: #3d5926;
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
  }

  #contactForm label:first-of-type {
    margin-top: 0;
  }

  #contactForm br {
    display: none;
  }

  #contactForm label[for="dsgvo"] {
    display: inline;
    width: auto;
    padding-left: 0.5rem;
  }

  #contactForm a {
    color: #3d5926;
    text-decoration: underline;
  }

  input, textarea {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(61, 89, 38, 0.8);
    outline: none;
    font: 1rem 'Ysabeau';
    color: #3d5926;
    text-align: left;
    padding: 0.4rem;
    margin-bottom: 0.5rem;
    transition: 0.2s;
  }

  input:hover {
    background-color: rgba(61, 89, 38, 0.1);
    box-shadow: 0 -2px 2px 2px rgba(61, 89, 38, 0.4);
  }

  textarea:hover {
    background-color: rgba(61, 89, 38, 0.1);
    box-shadow: 0 -2px 2px 2px rgba(61, 89, 38, 0.4);
  }

  input[type="checkbox"], input[type="radio"] {
    width: auto;
    accent-color: #9d9e52;
  }

  input:focus, textarea:focus {
    background: rgba(61, 89, 38, 0.75);
  }

  #contactForm textarea {
    height: 100px;
    resize: none;
  }

  button[type="submit"] {
    color: #3d5926;
    background-color: rgba(61, 89, 38, 0.3);
    font: 0.95rem 'Ysabeau';
    font-weight: 500;
    text-align: center;
    border: 1px solid rgb(61, 89, 38);
    width: 100%;
    max-width: 280px;
    margin: 1.5rem auto 0.5rem;
    padding: 10px 30px;
  }

  button[type="submit"]:hover {
    color: #eee6c8;
    background-color: rgba(61, 89, 38, 0.5);
  }

  .recaptcha-notice {
    font-size: 0.65rem !important;
    color: #3d5926 !important;
    margin-top: 1rem !important;
    line-height: 1.3;
  }

  .recaptcha-notice a {
    color: #3d5926;
    text-decoration: underline;
  }

  .grecaptcha-badge {
    visibility: hidden;
  }

  /* Status-Seiten (Erfolg/Fehler) Mobile */
  #nachricht-status {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
  }

  .status-box {
    text-align: center;
    max-width: 400px;
    padding: 2rem 1.5rem;
    background: rgba(61, 89, 38, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(61, 89, 38, 0.2);
  }

  .status-icon {
    margin-bottom: 1.5rem;
  }

  .status-erfolg .status-icon {
    color: #3d5926;
  }

  .status-fehler .status-icon {
    color: #bf3d1e;
  }

  .status-box h1 {
    font: 2.5rem 'Lavishly Yours';
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 1rem;
  }

  .status-erfolg h1 {
    color: #bf3d1e;
  }

  .status-fehler h1 {
    color: #bf3d1e;
  }

  .status-box p {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    color: #3d5926;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }

  .status-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .status-box .btn {
    display: inline-block;
    padding: 12px 24px;
    font: 0.95rem 'Ysabeau';
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .status-box .btn-primary {
    background-color: #3d5926;
    color: #eceadd;
    border: 1px solid #3d5926;
  }

  .status-box .btn-primary:hover {
    background-color: #4a6b2e;
  }

  .status-box .btn-secondary {
    background-color: transparent;
    color: #3d5926;
    border: 1px solid #3d5926;
  }

  .status-box .btn-secondary:hover {
    background-color: rgba(61, 89, 38, 0.1);
  }

  .status-alternative {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  .status-alternative a {
    color: #3d5926;
    text-decoration: underline;
  }

  /* Galerie Mobile */
  .gallery-container {
    width: 92vw;
    margin-bottom: 5rem;
  }

  .gallery-grid {
    column-count: 2;
    column-gap: 0.5rem;
  }

  .gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }

  .gallery-grid.hovering .gallery-item {
    filter: saturate(0.3);
  }

  .gallery-grid.hovering .gallery-item:hover {
    filter: saturate(1);
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 10;
  }

  .gallery-item:hover img {
    transform: scale(1.02);
  }

  .gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    justify-content: center;
    align-items: center;
  }

  .gallery-lightbox.active {
    display: flex;
  }

  .lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(80, 80, 80, 0.7);
    cursor: pointer;
  }

  .lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 85vh;
    z-index: 4001;
  }

  .lightbox-content img {
    max-width: 95vw;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.25);
    color: #eceadd;
    border: 1px solid rgba(236, 234, 221, 0.5);
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 0.9;
  }

  .lightbox-close:hover {
    opacity: 1;
    transform: scale(1.05);
  }

  .lightbox-title {
    font: 0.95rem 'Ysabeau';
    margin-top: 0.5rem;
  }

  /* Video Grid Mobile */
  .medien-intro {
    width: 90vw;
    margin: 0 auto 2rem;
  }

  .video-row {
    width: 90vw;
    margin: 0 auto;
  }

  .video-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .video-item-wrapper {
    margin-bottom: 2.5rem;
  }

  .video-description {
    font: 0.9rem 'Ysabeau';
    margin-top: 0.3rem;
  }

  .video-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
  }

  .video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
  }

  /* YouTube Zwei-Klick-Lösung (DSGVO-konform) */
  .youtube-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1a1a1a;
  }

  .youtube-placeholder-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .youtube-placeholder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
  }

  .youtube-placeholder:hover .youtube-placeholder-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  .youtube-placeholder-button {
    width: 68px;
    height: 48px;
    background: #cc0000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .youtube-placeholder:hover .youtube-placeholder-button {
    background: #ff0000;
    transform: scale(1.1);
  }

  .youtube-placeholder-button::after {
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
  }

  .youtube-placeholder-notice {
    margin-top: 15px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    color: #eceadd;
    font-size: 0.75rem;
    text-align: center;
    max-width: 90%;
    line-height: 1.4;
  }

  .youtube-placeholder-notice a {
    color: #a8c686;
    text-decoration: underline;
  }

  .video-item {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
  }

  .play-icon {
    font-size: 3rem;
    color: #eceadd;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }

  /* Scroll Animation Mobile */
  .grid-container img,
  .video-item img,
  .gallery-item img {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  .grid-container img.visible,
  .video-item img.visible,
  .gallery-item img.visible {
    opacity: 1;
    transform: translateY(0);
  }
}



/* tablet ------------------------------------*/
@media screen and (min-width:769px) and (max-width:1200px) {
  :root {
    --snap: 150px;
  }

  html {
    font: 1.3rem 'Ysabeau';
    font-weight: 400;
    scroll-behavior: smooth;
  }

  h1 {
    font: 2.5rem 'Lavishly Yours';
    font-weight: 400;
    color: #bf3d1e;
  }

  h2 {
    font: 1.8rem 'Lavishly Yours';
    font-weight: 400;
    color: #bf3d1e;
  }

  h3 {
    font: 1.8rem 'Ysabeau';
    font-weight: 400;
  }

  .kontakt-hinweis {
    font: 1rem 'Ysabeau';
    font-weight: 400;
    margin-top: 1rem;
    color: #3d5926;
  }

  h4 {
    font: 1.3rem 'Ysabeau';
    font-weight: 300;
    margin-bottom: 0.9rem;
  }

  strong {
    display: inline-block;
    font: 1rem 'Ysabeau';
    font-weight: 500;
    padding-top: 0.9rem;
  }

  body {
    background: url("../img/cr_hg_blumen.png") center bottom/cover fixed;
  }

  /* Header Tablet */
  #header-spacer {
    height: 100vh;
  }

  body.header-collapsed #header-spacer {
    height: 150px !important;
  }

  #topheader.is-collapsed {
    height: 150px;
  }

  .header-logo {
    width: 42vw;
  }

  .header-logo h3 {
    font: 1.3rem 'Ysabeau';
    bottom: 0;
    left: 48%;
  }

  #topheader.is-collapsed .header-logo {
    top: 18px;
    left: 40px;
    width: 22vw;
  }

  .scroll-cue {
    top: 78%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
  }

  /* Burger Button Tablet */
  .burger-fixed {
    position: fixed;
    right: 30px;
    top: 25px;
    z-index: 2000;
  }

  .burger-fixed .button {
    position: relative;
    right: auto;
    top: auto;
  }

  .button {
    position: fixed;
    right: 30px;
    top: 25px;
    z-index: 950;
    background: none;
    border: 0;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transform: scale(0.75);
  }

  .burger-5 {
    transform: scale(1.2);
    height: 44px;
  }

  .burger-5 svg {
    height: 44px;
    transform: translate(-1px, -1px) rotate(0deg);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .burger-5 .line {
    fill: none;
    stroke: #eceadd;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.0;
    transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .button.burger-action .burger-5 .line {
    stroke: #3d5926;
  }

  .burger-5 .line-top-bottom {
    stroke-dasharray: 12 63;
    stroke-dashoffset: 0;
  }

  .button.burger-action svg {
    transform: rotate(-45deg) translate(0);
  }

  .button.burger-action .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }

  /* Navigation Tablet */
  #topnavigation {
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: auto;
    z-index: 1500;
    background: rgba(228, 231, 219, 0.85);
    width: 320px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    height: 100vh;
  }

  #topnavigation.burger-action {
    transform: translateX(0);
  }

  #topnavigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  #topnavigation a {
    height: auto;
    color: #3d5926;
    font: 1rem 'Ysabeau';
    border-top: 1px solid rgb(61, 89, 38);
    text-decoration: none;
    margin: 0 1.2rem;
    padding: 0.9rem 0;
    line-height: 1.4rem;
    display: block;
  }

  #topnavigation a:hover {
    text-shadow: 0px 0px 6px #fff;
    filter: drop-shadow(0 0 6px #fff);
  }

  #topnavigation > ul > li:first-child > a {
    border-top: none;
    margin-top: 160px;
  }

  #topnavigation ul ul {
    position: relative;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease, max-height 0.5s ease;
  }

  #topnavigation ul li:hover ul {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
  }

  #topnavigation ul ul a {
    font: 0.9rem 'Ysabeau';
    font-weight: 300;
    padding: 0.4rem 0 0.4rem 0.8rem;
    border-top: none;
  }

  #topnavigation ul ul li > a {
    height: auto;
    border-top: none !important;
  }

  /* Inhalt Tablet */
  .wrapper {
    width: 85vw;
    margin: -12px auto 0;
  }

  body.header-collapsed .wrapper {
    margin-top: 0;
  }

  .grid-container {
    width: 80vw;
    margin: 0 auto 70px;
    display: grid;
    column-gap: 2rem;
    row-gap: 18px;
    grid-template-columns: 6fr 3fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head head"
      "txt bild_1"
      "txt bild_2";
  }

  .headline-standalone {
    width: 80vw;
    margin: 0 auto 1rem;
  }

  .headline-standalone h2 {
    font-size: 2.5rem;
  }

  *[class*="grid"] > img {
    max-height: 55vh;
    width: auto;
    margin-left: 15%;
    border-radius: 4px;
  }

  .picture_1 {
    grid-area: bild_1;
    align-self: start;
    border-radius: 4px;
  }

  .picture_2 {
    grid-area: bild_2;
    align-self: start;
    border-radius: 4px;
  }

  .grid-container img {
    border-radius: 4px;
  }

  .headline {
    color: #bf3d1e;
    grid-area: head;
  }

  .copytext {
    color: #3d5926;
    font-size: 0.8rem;
    grid-area: txt;
    align-self: start;
  }

  .subheadline {
    grid-area: head;
  }

  .subheadline h3 {
    color: #bf3d1e;
    font: 2rem 'Lavishly Yours';
    font-weight: 400;
    margin-bottom: 0.9rem;
  }

  .kurs-anker {
    scroll-margin-top: 200px;
    margin-bottom: 200px;
  }

  .kurs-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
  }

  .kurs-tabelle td {
    color: #3d5926;
    font: 1rem 'Ysabeau';
    padding: 0.5rem 0;
    vertical-align: top;
    white-space: nowrap;
  }

  .kurs-tabelle td:first-child {
    font-weight: 500;
    width: 80px;
    padding-right: 1rem;
  }

  /* Presse Tablet */
  .presse-zitate {
    width: 80vw;
    padding-top: 85px;
  }

  .presse-zitate .headline h2 {
    font-size: 2.05rem;
    margin-bottom: 2rem;
  }

  .zitat {
    width: 80vw;
  }

  .zitat:not(:last-child)::after {
    content: '';
    display: block;
    width: 60vw;
    height: 2px;
    background-color: #3d5926;
    margin: 70px auto 70px;
  }

  .zitat h3 {
    color: #3d5926;
    font: 1.2rem 'Ysabeau';
    font-weight: 600;
    font-style: italic;
  }

  .presse-datum p {
    color: #3d5926;
    font: 0.8rem 'Ysabeau';
    font-weight: 100;
    font-style: normal;
    padding-top: 9px;
  }

  .presse-text p {
    color: #3d5926;
    font: 0.8rem 'Ysabeau';
    font-weight: 500;
    font-style: italic;
    padding-top: 19px;
    margin-bottom: 70px;
  }

  section {
    margin-bottom: 175px;
  }

  /* Footer Tablet */
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 70px;
  }

  #footer p, #footer a {
    color: #eceadd;
    font: 0.9rem 'Ysabeau';
    font-weight: 300;
    padding-left: 15px;
  }

  #footer-bg {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(100%);
    transition: transform 1s ease;
    z-index: -1;
  }

  body.header-collapsed #footer-bg {
    transform: translateY(calc(100% - 100px));
  }

  .superspalter {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .superspalter .social svg {
    width: 1.4rem;
    padding-left: 8px;
    padding-top: 4px;
  }

  .superspalter .telefon {
    margin-left: auto;
    padding-right: 20px;
  }

  .superspalter .telefon a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eceadd;
    text-decoration: none;
    font: 1rem 'Ysabeau';
  }

  .superspalter .telefon svg {
    width: 0.8rem;
    height: 0.8rem;
    vertical-align: middle;
    display: flex;
    align-self: center;
  }

  /* Overlay Tablet */
  .overlay-content {
    background-color: rgba(43, 43, 37, 0.4);
    color: #eee6c8;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    width: 75%;
    max-height: 72%;
    padding: 1.9rem;
    border-radius: 3px;
    overflow-y: auto;
  }

  .overlay-content h1 {
    font: 1.5rem 'Ysabeau';
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    line-height: 1.6rem;
  }

  .overlay-content h2 {
    font: 1.2rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    line-height: 1.6rem;
  }

  .overlay-content h3 {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 0.5rem;
  }

  .overlay-content h4 {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
  }

  .overlay-content h5 {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    margin-bottom: 0.5rem;
  }

  .overlay-content strong {
    font: 1rem 'Ysabeau';
    font-weight: 400;
  }

  .overlay-content > p, ul {
    font: 0.9rem 'Ysabeau';
    font-weight: 100;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 0.5rem;
  }

  .overlay-content a[href] {
    color: #9d9e52;
    text-decoration: none;
  }

  .index-link {
    color: #9d9e52;
    text-decoration: none;
  }

  .index li {
    list-style: none;
  }

  .overlay-content > * li {
    list-style: none;
  }

  .close {
    top: 10px;
    right: 14px;
    font-size: 34px;
    cursor: pointer;
  }

  /* Kontaktformular Tablet */
  #kontakt {
    min-height: calc(100vh - 170px);
    display: flex;
    align-items: flex-start;
    padding-top: 0.9rem;
  }

  .kontaktformular {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }

  .kontaktformular h1 {
    color: #bf3d1e;
    font: 2.5rem 'Lavishly Yours';
    font-weight: 400;
    font-style: normal;
    padding-bottom: 0.9rem;
    text-align: center;
  }

  form {
    width: 100%;
    height: auto;
    text-align: center;
  }

  #contactForm p {
    display: block;
    color: #3d5926;
    font: 0.7rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  #contactForm label {
    width: 100%;
    display: block;
    text-align: left;
    margin-bottom: 0.45rem;
    margin-top: 0.95rem;
    color: #3d5926;
    text-decoration: none;
    font: 0.8rem 'Ysabeau';
  }

  #contactForm label:first-of-type {
    margin-top: 0;
  }

  #contactForm br {
    display: none;
  }

  #contactForm label[for="dsgvo"] {
    display: inline;
    width: auto;
    padding-left: 0.5rem;
  }

  #contactForm a {
    color: #3d5926;
    text-decoration: underline;
  }

  input, textarea {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(61, 89, 38, 0.8);
    outline: none;
    font: 0.8rem 'Ysabeau';
    color: #3d5926;
    text-align: left;
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    transition: 0.2s;
  }

  input:hover {
    background-color: rgba(61, 89, 38, 0.1);
    box-shadow: 0 -2px 2px 2px rgba(61, 89, 38, 0.4);
  }

  textarea:hover {
    background-color: rgba(61, 89, 38, 0.1);
    box-shadow: 0 -2px 2px 2px rgba(61, 89, 38, 0.4);
  }

  input[type="checkbox"], input[type="radio"] {
    width: auto;
    accent-color: #9d9e52;
  }

  input:focus, textarea:focus {
    background: rgba(61, 89, 38, 0.75);
  }

  #contactForm textarea {
    height: 85px;
    resize: none;
  }

  button[type="submit"] {
    color: #3d5926;
    background-color: rgba(61, 89, 38, 0.3);
    font: 0.8rem 'Ysabeau';
    font-weight: 500;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgb(61, 89, 38);
    width: 290px;
    margin: 1.5rem auto 0.5rem;
    padding: 10px 38px;
  }

  button[type="submit"]:hover {
    color: #eee6c8;
    background-color: rgba(61, 89, 38, 0.5);
  }

  .recaptcha-notice {
    font-size: 0.65rem !important;
    color: #3d5926 !important;
    margin-top: 1rem !important;
    line-height: 1.3;
  }

  .recaptcha-notice a {
    color: #3d5926;
    text-decoration: underline;
  }

  .grecaptcha-badge {
    visibility: hidden;
  }

  /* Status-Seiten (Erfolg/Fehler) Tablet */
  #nachricht-status {
    min-height: calc(100vh - 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
  }

  .status-box {
    text-align: center;
    max-width: 500px;
    padding: 2.5rem 2rem;
    background: rgba(61, 89, 38, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(61, 89, 38, 0.2);
  }

  .status-icon {
    margin-bottom: 1.5rem;
  }

  .status-erfolg .status-icon {
    color: #3d5926;
  }

  .status-fehler .status-icon {
    color: #bf3d1e;
  }

  .status-box h1 {
    font: 3rem 'Lavishly Yours';
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 1rem;
  }

  .status-erfolg h1 {
    color: #bf3d1e;
  }

  .status-fehler h1 {
    color: #bf3d1e;
  }

  .status-box p {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    color: #3d5926;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  .status-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .status-box .btn {
    display: inline-block;
    padding: 12px 28px;
    font: 0.95rem 'Ysabeau';
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .status-box .btn-primary {
    background-color: #3d5926;
    color: #eceadd;
    border: 1px solid #3d5926;
  }

  .status-box .btn-primary:hover {
    background-color: #4a6b2e;
  }

  .status-box .btn-secondary {
    background-color: transparent;
    color: #3d5926;
    border: 1px solid #3d5926;
  }

  .status-box .btn-secondary:hover {
    background-color: rgba(61, 89, 38, 0.1);
  }

  .status-alternative {
    font-size: 0.9rem !important;
    margin-bottom: 0 !important;
  }

  .status-alternative a {
    color: #3d5926;
    text-decoration: underline;
  }

  /* Galerie Tablet */
  .gallery-container {
    width: 80vw;
    margin-bottom: 7rem;
  }

  .gallery-grid {
    column-count: 4;
    column-gap: 0.9rem;
  }

  .gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }

  .gallery-grid.hovering .gallery-item {
    filter: saturate(0.3);
  }

  .gallery-grid.hovering .gallery-item:hover {
    filter: saturate(1);
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 10;
  }

  .gallery-item:hover img {
    transform: scale(1.02);
  }

  .lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 4001;
  }

  .lightbox-content img {
    max-width: 88vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  .lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.25);
    color: #eceadd;
    border: 1px solid rgba(236, 234, 221, 0.5);
    border-radius: 999px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 0.9;
  }

  .lightbox-close:hover {
    opacity: 1;
    transform: scale(1.05);
  }

  .lightbox-title {
    font: 1.05rem 'Ysabeau';
    margin-top: 0.9rem;
  }

  /* Video Grid Tablet */
  .medien-intro {
    width: 80vw;
    margin: 0 auto 2.8rem;
  }

  .medien-intro .headline {
    margin-bottom: 1rem;
  }

  .medien-intro .copytext {
    color: #3d5926;
  }

  .video-row {
    width: 80vw;
    margin: 0 auto 2.8rem;
  }

  .video-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
  }

  .video-description {
    color: #3d5926;
    font: 1rem 'Ysabeau';
    font-weight: 400;
    text-align: left;
    margin-top: 0.5rem;
  }

  .video-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
  }

  .video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
  }

  /* YouTube Zwei-Klick-Lösung (DSGVO-konform) */
  .youtube-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1a1a1a;
  }

  .youtube-placeholder-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .youtube-placeholder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
  }

  .youtube-placeholder:hover .youtube-placeholder-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  .youtube-placeholder-button {
    width: 68px;
    height: 48px;
    background: #cc0000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .youtube-placeholder:hover .youtube-placeholder-button {
    background: #ff0000;
    transform: scale(1.1);
  }

  .youtube-placeholder-button::after {
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
  }

  .youtube-placeholder-notice {
    margin-top: 15px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    color: #eceadd;
    font-size: 0.8rem;
    text-align: center;
    max-width: 90%;
    line-height: 1.4;
  }

  .youtube-placeholder-notice a {
    color: #a8c686;
    text-decoration: underline;
  }

  .video-item {
    border: 1px solid #3d5926;
    border-radius: 4px;
  }

  .play-icon {
    color: #eceadd;
    font-size: 2.9rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }

  /* Scroll Animation Tablet */
  .grid-container img,
  .video-item img,
  .gallery-item img {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }

  .grid-container img.visible,
  .video-item img.visible,
  .gallery-item img.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Overlay Styles */
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(61, 89, 38, 0.8);
    justify-content: center;
    align-items: center;
  }

  body.overlay-open #topnavigation,
  body.overlay-open #topheader,
  body.overlay-open .wrapper,
  body.overlay-open #footer {
    pointer-events: none;
  }

  /* Lightbox Tablet */
  .gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    justify-content: center;
    align-items: center;
  }

  .gallery-lightbox.active {
    display: flex;
  }

  .lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(80, 80, 80, 0.7);
    cursor: pointer;
  }
}



/* desktop ------------------------------------*/
@media screen and (min-width:1201px) {
  html {
    font: 1.4rem 'Ysabeau';
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
  }

  h1 {
    font: 4rem 'Lavishly Yours';
    font-weight: 400;
    font-style: normal;
    color: #bf3d1e;

  }

  h2 {
    font: 3rem 'Lavishly Yours';
    font-weight: 400;
    font-style: normal;
    color: #bf3d1e;

  }

  h3 {
    font: 1.6rem 'Ysabeau';
    font-weight: 400;
    font-style: normal;
  }

  .kontakt-hinweis {
    font: 1rem 'Ysabeau';
    font-weight: 400;
    font-style: normal;
    margin-top: 1rem;
    color: #3d5926;
  }

  h4 {
    font: 1.4rem 'Ysabeau';
    font-weight: 600;
    font-style: normal;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
  }

  address {
      font: 1.4rem 'Ysabeau';
      font-weight: 300;
      font-style: normal;
      margin-bottom: 1rem;
  }
  strong {
    display: inline-block;
    font: 1rem 'Ysabeau';
    font-weight: 600;
    padding-top: 1rem;
  }

  /* Fade-in Animation für sanfte Seitenübergänge */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  body {
    background: url("../img/cr_hg_blumen.png") left bottom/cover fixed;
    width: 100%; /* Stellt sicher, dass der Hintergrund sichtbar ist */
    animation: fadeIn 0.4s ease-in-out;
    transition: background-image 1s ease-in-out;
  }

  main {
    animation: fadeIn 0.5s ease-in-out;
  }

  /* Header Logo Desktop */
  #topheader.is-collapsed .header-logo {
    width: 6vw;
  }

    /* Burger-Button */
    .burger-fixed {
        position: fixed;
        right: 50px;
        top: 30px;
        z-index: 2000; /* über Header (100) und Navigation (1000) */
    }

    /* Der Button kann jetzt wieder relativ "normal" sein,
       weil der Wrapper fixed ist. Falls du es so lassen willst, geht auch.
       Empfehlung: button innerhalb burger-fixed nicht mehr selbst fixed. */
    .burger-fixed .button {
        position: relative;
        right: auto;
        top: auto;
    }

    .button {
        position: fixed;
        right: 50px;
        top: 50px;
        z-index: 950;
        background: none;
        border: 0;
        width: 80px;
        height: 80px;
        display: grid;
        place-items: center;
        cursor: pointer;
        padding: 0;
        opacity: 1;
        transform: scale(0.8);
        border-radius: 8px;
        overflow: hidden;
        transition: background 0.3s ease, transform 0.175s ease; /* Animation (Hintergrund und Skalierung) */
    }

    .button:hover {
        opacity: 1;
        background: none; /* Hover-Effekt */
    }



    /* SVG-Styling */
    .burger-5 {
        transform: scale(1.3);
        height: 46px;
    }

    .burger-5 svg {
        height: 46px;
        transform: translate(-1px, -1px) rotate(0deg); /* Anfangsstatus */
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Animation für das SVG */
    }

    /* Allgemeine Linien (Path im SVG) */
    .burger-5 .line {
        fill: none;
        stroke: #eceadd;
        stroke-linecap: round; /* Abgerundete Enden */
        stroke-linejoin: round; /* Abgerundete Ecken */
        stroke-width: 2.0;
        transition:
                stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Animierte Übergänge */
    }

    /* Linien für die obere und untere Bewegung */
    .burger-5 .line-top-bottom {
        stroke-dasharray: 12 63; /* Anfangszustand der Linien (sichtbarer Bereich und Abstand) */
        stroke-dashoffset: 0;    /* Anfangssichtbarkeit */
    }

    /* Aktivierter Zustand */
    .button.burger-action svg {
        transform: rotate(-45deg) translate(0); /* Drehung bei Aktivierung */

    }

    .button.burger-action .line-top-bottom {
        stroke-dasharray: 20 300; /* Veränderung bei Aktivierung */
        stroke-dashoffset: -32.42; /* Nach links verschieben */
    }
    .burger-action {
        display: block;
    }

    /* Navigationsleiste */
    #topnavigation {
        position: fixed;
        top: 0;
        right: 0;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1500;
        background: rgba(228, 231, 219, 0.6);
        width: clamp(200px, 50%, 300px);
        transform: translateX(200%);
        transition: transform 0.3s ease-in-out;
        height: 100vh;

    }

    #topnavigation.burger-action {
        transform: translateX(0);

    }

    #topnavigation ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #topnavigation a {
        height: 80px;
        color: #3d5926;
        font: 1rem 'Ysabeau';
        border-top: 1px solid rgb(61, 89, 38);
        text-decoration: none;
        margin-left: 1rem;
        margin-right: 1rem;
        line-height: 3rem;
        display: block;
        transition: 0.5s ease;
    }


    #topnavigation a:hover, #topnavigation .akt:hover {
        color: #3d5926;
        text-shadow: 0px 0px 6px #fff;
        filter: drop-shadow(0 0 6px #fff);  /* Effekte bei Hover */
    }

    #topnavigation ul ul li{
        line-height: 1.2rem;
    }
    #topnavigation ul ul li a{
        padding-left: 0.5rem;

    }
    #topnavigation li {
        position: relative; /* Wichtig, um das Untermenü korrekt relativ zu platzieren */
    }

    #topnavigation ul ul {
        position: relative; /* Entfernt die absolute Positionierung */
        top: 0; /* Kein Versatz, da es direkt unterhalb des Hauptmenüs eingeblendet wird */
        left: 0;
        list-style: none;
        width: 100%;
        opacity: 0; /* Unsichtbar als Ausgangszustand */
        visibility: hidden;
        max-height: 0; /* Höhe des Untermenüs ist 0, solange es nicht sichtbar ist */
        overflow: hidden; /* Überstehenden Inhalt ausblenden */
        transition: opacity 1s ease, visibility 1s ease, max-height 1s ease; /* Glatte Übergänge */
        z-index: 960; /* Stellt sicher, dass das Untermenü über anderen Stilen hervorgehoben wird */
    }

    #topnavigation ul li:hover ul {
        opacity: 1; /* Sichtbar machen des Untermenüs */
        visibility: visible; /* Sichtbarkeit aktivieren */
        max-height: 300px; /* Max-Höhe für Untermenü setzen; passt für mehrere Einträge */
    }

    /* Untermenü-Einträge Styling */
    #topnavigation ul ul a {
        display: block;
        color: #3d5926;
        font: 0.9rem 'Ysabeau';
        font-weight: 200;
        line-height: 1.2rem;
        font-style: normal;
        text-decoration: none;
        white-space: nowrap;
        border-top: none;
        margin-top: 0;
        transition: background 0.3s ease; /* Glatter Übergang */
    }

    /* Erster Eintrag im Hauptmenü: Abstand nach oben */
    #topnavigation > ul > li:first-child > a {
        border-top: none;
        margin-top: 200px;
    }

    /* Untermenü-Einträge: keine Linien, kleine Abstände, auto Höhe */
    #topnavigation ul ul li > a {
        height: auto;
        border-top: none !important;

        padding-bottom: 0.7rem;
        line-height: 1.4rem;
    }


    /* Hovereffekte für Hauptmenü-Einträge */
    #topnavigation ul li a:hover {
        color: #3d5926;
    }

    /* Aktive Links im Hauptmenü */
    #topnavigation a .akt {
        color: #9d9e52;
    }





    /*-----inhalt*/


    .wrapper {
        width: 80vw;
        z-index: 100;
        margin-left: auto;
        margin-right: auto;
        margin-top: -10px;
    }

    body.header-collapsed .wrapper {
        margin-top: 0;
    }


    .grid-container {
        width: 75vw;
        height: auto;
        margin: 0 auto 80px;
        display: grid;
        column-gap: 2rem;
        row-gap: 20px;
        grid-template-columns: 6fr 3fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
                    "head head"
                    "txt bild_1"
                    "txt bild_2";
    }

    .headline-standalone {
        width: 75vw;
        margin: 0 auto 1rem;
    }

    #aquarellmalerei {
        margin-bottom: 800px;
    }

    .presse-zitate {
        width: 75vw;
        height: auto;
        margin: 0 auto;
        padding-top: 100px;

    }

    .zitat {
        width: 60vw;
        height: auto;
    }

    .zitat:not(:last-child)::after {
        content: '';
        display: block;
        width: 60vw;
        height: 2px;
        background-color: #3d5926;
        margin: 80px auto 80px;
    }

    .zitat h3 {
        color: #3d5926;
        font: 1.8rem 'Ysabeau';
        font-weight: 600;
        font-style: italic;

    }

    .presse-datum p {
        color: #3d5926;
        font: 1rem 'Ysabeau';
        font-weight: 100;
        font-style: normal;
        padding-top: 10px;
    }

    .presse-text p {
        color: #3d5926;
        font: 1.2rem 'Ysabeau';
        font-weight: 500;
        font-style: italic;
        padding-top: 20px;
        margin-bottom: 80px;
    }

    /* grid-zuordnung -------*/
    .picture_1 {
        grid-area: bild_1;
        align-self: start;
        border-radius: 4px;
    }
    .picture_2 {
        grid-area: bild_2;
        align-self: start;
        border-radius: 4px;
    }

    .grid-container img {
        border-radius: 4px;
    }

    .headline {
        color: #bf3d1e;
        grid-area: head;
    }

    .subheadline {
        grid-area: head;
    }

    .subheadline h2 {
        color: #bf3d1e;
    }

    .subheadline h3 {
        color: #bf3d1e;
        font: 2.6rem 'Lavishly Yours';
        font-weight: 400;
        line-height: 1;
        margin-top: -0.3rem;
        margin-bottom: 1rem;
    }

    .copytext {
        color: #3d5926;
        grid-area: txt;
        align-self: start;
    }

    .kurs-anker {
        scroll-margin-top: 200px;
        margin-bottom: 200px;
    }

    .kurs-tabelle {
        width: 100%;
        border-collapse: collapse;
        margin-top: 0.5rem;
    }

    .kurs-tabelle td {
        color: #3d5926;
        font: 1rem 'Ysabeau';
        padding: 0.5rem 0;
        vertical-align: top;
        white-space: nowrap;
    }

    .kurs-tabelle td:first-child {
        font-weight: 500;
        width: 80px;
        padding-right: 1rem;
    }


    *[class*="grid"] > img {
        max-height: 60vh; /* Beschränkt die maximale Höhe */
        width: auto; /* Beibehaltung des Seitenverhältnisses */
        margin-left: 18%;
        border-radius: 4px;
    }

section {
    margin-bottom: 200px;
}
    /*-----footer*/
  #footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 80px;
    transition: 1s;
  }

  #footer p, #footer a {
    display: block;
    color: #eceadd;
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    padding-left: 20px;
  }

#footer-bg {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(100%);
    transition: transform 1s ease;
    z-index: -1;
}

body.header-collapsed #footer-bg {
    transform: translateY(calc(100% - 120px));
}





  #footer a:hover, #topnavigation a .akt {
    color: #3d5926;
      text-shadow: 0px 0px 6px #fff;
      filter: drop-shadow(0 0 6px #fff);  /* Effekte bei Hover */

  }

  #footer .social svg:hover {
      color: #3d5926;
      text-shadow: 0px 0px 6px #fff;
      filter: drop-shadow(0 0 6px #fff);  /* Effekte bei Hover */
  }

  .superspalter .social svg{
    display: block;
    color: #eceadd;
    width: 1.6rem;
    height: auto;
    padding-left: 10px;
    padding-top: 6px;
  }

  .superspalter .telefon {
    margin-left: auto;
    padding-right: 30px;
  }

  .superspalter .telefon a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eceadd;
    text-decoration: none;
    font: 1.1rem 'Ysabeau';
  }

  .superspalter .telefon a:hover {
    color: #3d5926;
    text-shadow: 0px 0px 6px #fff;
  }

  .superspalter .telefon a:hover svg {
    filter: drop-shadow(0 0 6px #fff);
  }

  .superspalter .telefon svg {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
  }

  .superspalter {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    display: flex;
    margin-right: 20rem;
    justify-content: flex-start;
    align-items: center;
  }


  /* overlay --------------*/
  .overlay {
    display: none; /* Start mit unsichtbarem Overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(61, 89, 38, 0.8);
    justify-content: center;
    align-items: center;
  }

  body.overlay-open #topnavigation,
  body.overlay-open #topheader,
  body.overlay-open .wrapper,
  body.overlay-open #footer {
    z-index: 0;
    pointer-events: none; /* Verhindert Interaktionen mit diesen Bereichen */
  }

    /* #topnavigation darf zwar nicht klickbar sein, aber z-index behalten */
    body.overlay-open #topnavigation {
        pointer-events: none;
    }

    /* Overlay bleibt interaktiv */
    body.overlay-open .overlay {
        pointer-events: auto;
    }

  .overlay-content h1 {
    font: 1.6rem 'Ysabeau';
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    line-height: 1.6rem;
  }

  .overlay-content h2 {
    font: 1.2rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    line-height: 1.6rem;
  }

  .overlay-content h3 {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 0.5rem;
  }

  .overlay-content h4 {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
  }

  .overlay-content h5 {
    font: 1rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    margin-bottom: 0.5rem;
  }

  .overlay-content strong {
    font: 1rem 'Ysabeau';
    font-weight: 400;
  }

  .overlay-content > p, ul {
    font: 0.9rem 'Ysabeau';
    font-weight: 100;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 0.5rem;
  }

  .overlay-content {
    background-color: rgba(43, 43, 37, 0.4);
    color: #eee6c8;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 2rem;
    border-radius: 3px;
    position: relative;

    width: 70%;
    max-height: 70%;
    overflow-y: auto;
  }

  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font: 1.6rem Exo;
    font-size: 36px;
    z-index: 203;
    cursor: pointer;
  }

  .index-link {
    color: #9d9e52;
    text-decoration: none;
  }

  .index li {
    list-style: none;
  }

  .overlay-content > * li {
    list-style: none;
  }

  .textbox a[href] {
    color: #9d9e52;
    text-decoration: none;
  }

  .overlay-content a[href] {
    color: #9d9e52;
    text-decoration: none;
  }

  /*Kontaktform*/
  #kontakt {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: flex-start;
    padding-top: 1rem;
  }

  .kontaktformular {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .kontaktformular h1 {
    color: #bf3d1e;
      font: 4rem 'Lavishly Yours';
      font-weight: 400;
      font-style: normal;
    padding-bottom: 1rem;
    text-align: center;
  }

  form {
    width: 100%;
    height: auto;
    text-align: center;
  }

  #contactForm p {
    display: block;
    color: #3d5926;
    font: 0.7rem 'Ysabeau';
    font-weight: 300;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }

  #contactForm label {
    width: 100%;
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    color: #3d5926;
    text-decoration: none;
  }

  #contactForm label:first-of-type {
    margin-top: 0;
  }

  #contactForm br {
    display: none;
  }

  #contactForm textarea {
    height: 80px;
    resize: none;
  }

  #contactForm label[for="dsgvo"] {
    display: inline;
    width: auto;
    padding-left: 0.5rem;
  }

  #contactForm a {
    color: #3d5926;
    text-decoration: underline;
  }

  input, textarea {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(61, 89, 38, 0.8);
    outline: none;
    font: 1.2rem 'Ysabeau';
    color: #3d5926;
    text-align: left;
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    transition: 0.2s;
  }

  input:hover {
    background-color: rgba(61, 89, 38, 0.1);
    box-shadow: 0 -2px 2px 2px rgba(61, 89, 38, 0.4);
  }

  textarea:hover {
    background-color: rgba(61, 89, 38, 0.1);
    box-shadow: 0 -2px 2px 2px rgba(61, 89, 38, 0.4);
  }

  input[type="checkbox"], input[type="radio"] {
    width: auto;
    accent-color: #9d9e52;
  }

  input:focus, textarea:focus {
    background: rgba(61, 89, 38, 0.75);
  }

  button[type="submit"] {
      color: #3d5926;
      background-color: rgba(61, 89, 38, 0.3);
    font: 1rem 'Ysabeau';
    font-weight: 500;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgb(61, 89, 38);
    width: 300px;
    margin: 1.5rem auto 0.5rem;
    padding: 8px 40px;
  }

 button[type="submit"]:hover {
     color: #eee6c8;
     background-color: rgba(61, 89, 38, 0.5);
  }

  .gesendet fieldset {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* %-Angaben in translate beziehen sich auf das Element selbst! */
    background: rgb(157, 158, 82);
    color: #3d5926;
    font-size: 1rem;
    padding: 2%;
  }

  .gesendet div {
    width: 600px;
    height: 200px;
    text-align: center;
    color: #3d5926;
    font-size: 1rem;

  }
  .gesendet h2 {
    font-size: 2rem;
    padding-top: 20px;
  }

  .recaptcha-notice {
    font-size: 0.65rem !important;
    color: #3d5926 !important;
    margin-top: 1rem !important;
    line-height: 1.3;
  }

  .recaptcha-notice a {
    color: #3d5926;
    text-decoration: underline;
  }

  /* reCAPTCHA-Badge verstecken – nur zusammen mit Hinweistext verwenden! */
  .grecaptcha-badge {
    visibility: hidden; /* oder: display: none; */
  }

  /* Status-Seiten (Erfolg/Fehler) Desktop */
  #nachricht-status {
    min-height: calc(100vh - 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
  }

  .status-box {
    text-align: center;
    max-width: 550px;
    padding: 3rem 2.5rem;
    background: rgba(61, 89, 38, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(61, 89, 38, 0.2);
  }

  .status-icon {
    margin-bottom: 1.5rem;
  }

  .status-erfolg .status-icon {
    color: #3d5926;
  }

  .status-fehler .status-icon {
    color: #bf3d1e;
  }

  .status-box h1 {
    font: 3.5rem 'Lavishly Yours';
    font-weight: 400;
    line-height: 0.9;
    margin-bottom: 1rem;
  }

  .status-erfolg h1 {
    color: #bf3d1e;
  }

  .status-fehler h1 {
    color: #bf3d1e;
  }

  .status-box p {
    font: 1.1rem 'Ysabeau';
    font-weight: 300;
    color: #3d5926;
    line-height: 1.6;
    margin-bottom: 2rem;
  }

  .status-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .status-box .btn {
    display: inline-block;
    padding: 14px 32px;
    font: 1rem 'Ysabeau';
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .status-box .btn-primary {
    background-color: #3d5926;
    color: #eceadd;
    border: 1px solid #3d5926;
  }

  .status-box .btn-primary:hover {
    background-color: #4a6b2e;
  }

  .status-box .btn-secondary {
    background-color: transparent;
    color: #3d5926;
    border: 1px solid #3d5926;
  }

  .status-box .btn-secondary:hover {
    background-color: rgba(61, 89, 38, 0.1);
  }

  .status-alternative {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
  }

  .status-alternative a {
    color: #3d5926;
    text-decoration: underline;
  }

  /* ========== BILDERGALERIE - MASONRY LAYOUT ========== */

  /* Galerie Container */
  .gallery-container {
    width: 75vw;
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 8rem;
    padding: 0;
  }

  /* Masonry Layout mit CSS Columns - zeigt komplette Bilder */
  .gallery-grid {
    column-count: 4;
    column-gap: 1rem;
  }

  /* Einzelnes Galerie-Item */
  .gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
  }

  /* Bilder behalten ihre Originalproportionen */
  .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }

  /* Hover-Effekt: Alle anderen Bilder entsättigen */
  .gallery-grid.hovering .gallery-item {
    filter: saturate(0.3);
  }

  /* Das gehoverte Bild behält volle Sättigung und hebt sich heraus */
  .gallery-grid.hovering .gallery-item:hover {
    filter: saturate(1);
    transform: scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 10;
  }

  .gallery-item:hover img {
    transform: scale(1.02);
  }

  /* Responsive: Weniger Spalten auf kleineren Bildschirmen */
  @media screen and (max-width: 1200px) {
    .gallery-grid {
      column-count: 3;
    }
  }

  @media screen and (max-width: 900px) {
    .gallery-grid {
      column-count: 2;
    }
  }

  @media screen and (max-width: 500px) {
    .gallery-grid {
      column-count: 1;
    }
  }

  /* ========== LIGHTBOX OVERLAY ========== */

  .gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4000;
    justify-content: center;
    align-items: center;
  }

  .gallery-lightbox.active {
    display: flex;
  }

  /* Grauer Hintergrund mit 70% Deckkraft */
  .lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(80, 80, 80, 0.7);
    cursor: pointer;
  }

  /* Bild-Container im Lightbox */
  .lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 4001;
  }

  .lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  /* Schließen-Button */
  .lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.25);
    color: #eceadd;
    border: 1px solid rgba(236, 234, 221, 0.5);
    border-radius: 999px;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 0.9;
  }

  .lightbox-close:hover {
    opacity: 1;
    transform: scale(1.05);
  }

  /* Bildtitel unter dem Bild */
  .lightbox-title {
    text-align: center;
    margin-top: 1rem;
    font: 1.1rem 'Ysabeau';
    font-weight: 300;
    color: #eceadd;
  }

  /* ========== MEDIENAUFTRITTE - VIDEO GRID ========== */

  .medien-intro {
    width: 75vw;
    margin: 0 auto 3rem;
  }

  .medien-intro .headline {
    margin-bottom: 1rem;
  }

  .medien-intro .copytext {
    color: #3d5926;
  }

  .video-row {
    width: 75vw;
    margin: 0 auto 3rem;
  }

  .video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1rem;
  }

  .video-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #3d5926;
  }

  .video-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
  }

  .video-item:hover img {
    transform: scale(1.03);
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .video-item:hover .video-overlay {
    opacity: 1;
  }

  .play-icon {
    font-size: 3rem;
    color: #eceadd;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }

  .video-item-wrapper {
    display: flex;
    flex-direction: column;
  }

  .video-description {
    color: #3d5926;
    font: 1rem 'Ysabeau';
    font-weight: 400;
    text-align: left;
    margin-top: 0.5rem;
  }

  .video-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
  }

  .video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
  }

  /* YouTube Zwei-Klick-Lösung (DSGVO-konform) */
  .youtube-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 1px solid #3d5926;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1a1a1a;
  }

  .youtube-placeholder-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .youtube-placeholder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
  }

  .youtube-placeholder:hover .youtube-placeholder-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

  .youtube-placeholder-button {
    width: 68px;
    height: 48px;
    background: #cc0000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .youtube-placeholder:hover .youtube-placeholder-button {
    background: #ff0000;
    transform: scale(1.1);
  }

  .youtube-placeholder-button::after {
    content: '';
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
  }

  .youtube-placeholder-notice {
    margin-top: 15px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    color: #eceadd;
    font-size: 0.85rem;
    text-align: center;
    max-width: 90%;
    line-height: 1.4;
  }

  .youtube-placeholder-notice a {
    color: #a8c686;
    text-decoration: underline;
  }

  /* ========== SCROLL ANIMATION - BILDER EINRASTEN ========== */

  .grid-container img,
  .video-item img,
  .gallery-item img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .grid-container img.visible,
  .video-item img.visible,
  .gallery-item img.visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Sternchen vertikal zentriert */
.star {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  margin-right: 0.3em;
}