/*
Theme Name: Förderverein BKS Onepager V6
Theme URI: https://wordpress.org/
Author: Förderverein BKS
Description: Eigenständiges Onepager-Theme für den Förderverein der Bischof-Ketteler-Schule, konvertiert aus dem bereitgestellten HTML-Export.
Version: 1.5.0
Text Domain: foerderverein-bks
*/

/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/4db46aa1-a6be-4913-aadb-0bd5de00474c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/29af22bb-706b-404a-b247-a022e2714862.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/1e98ffbf-1043-42e3-8282-88931b407969.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/f9c3ee5b-6230-46bf-99a2-95b00802b659.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/4db46aa1-a6be-4913-aadb-0bd5de00474c.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/29af22bb-706b-404a-b247-a022e2714862.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/1e98ffbf-1043-42e3-8282-88931b407969.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/f9c3ee5b-6230-46bf-99a2-95b00802b659.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/e6033ff6-a2bb-48e3-851b-8901ecbb804b.woff") format('woff');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/6a2f636a-19dc-4ff3-bd46-6b926f7dba55.woff") format('woff');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/e8624b79-4e41-4d65-afc9-c68a58fae9c8.woff") format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bc54500e-c5fe-4b54-90bc-26670ecd78b8.woff") format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/248fccfe-7c33-4e89-8fb0-938f6984378f.woff") format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/19c53580-b094-47a7-89e2-4c0dba31cffa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/b755442c-d7dc-4f60-9c78-cc3435d64b5b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/de12f3f5-fe18-4d80-8549-24c4c183520b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/0446d9e7-86e4-4f92-9e14-a52449c3718e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/a1ae0cfe-f3f8-4a88-b55b-510e6bdcaa8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/19c53580-b094-47a7-89e2-4c0dba31cffa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/b755442c-d7dc-4f60-9c78-cc3435d64b5b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/de12f3f5-fe18-4d80-8549-24c4c183520b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/0446d9e7-86e4-4f92-9e14-a52449c3718e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/a1ae0cfe-f3f8-4a88-b55b-510e6bdcaa8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/19c53580-b094-47a7-89e2-4c0dba31cffa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/b755442c-d7dc-4f60-9c78-cc3435d64b5b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/de12f3f5-fe18-4d80-8549-24c4c183520b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/0446d9e7-86e4-4f92-9e14-a52449c3718e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/a1ae0cfe-f3f8-4a88-b55b-510e6bdcaa8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/19c53580-b094-47a7-89e2-4c0dba31cffa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/b755442c-d7dc-4f60-9c78-cc3435d64b5b.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/de12f3f5-fe18-4d80-8549-24c4c183520b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/0446d9e7-86e4-4f92-9e14-a52449c3718e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/a1ae0cfe-f3f8-4a88-b55b-510e6bdcaa8f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



  html { scroll-behavior: smooth; }
  body { margin: 0; background: #FFFDF9; font-family: Nunito, system-ui, sans-serif; color: #253C63; }
  a { color: #3E7CC4; text-decoration: none; }
  a:hover { color: #2A5E9C; }
  @media (max-width: 820px) {
    [data-doodle] { display: none !important; }
    [data-mobile-nav] { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start !important; padding-bottom: 2px; }
    [data-mobile-nav]::-webkit-scrollbar { display: none; }
    [data-mobile-nav] a { white-space: nowrap; }
    [data-mobile-header] { flex-wrap: wrap; row-gap: 10px; }
    [data-cta] { margin-left: auto; }
  }
  @media (max-width: 620px) {
    [data-sticker] { transform: none !important; }
    [data-hero-photo] { transform: none !important; border-width: 6px !important; }
    [data-stack] { grid-template-columns: 1fr !important; }
  }


/* Static replacement for the original image-slot component. */
.fv-image-slot { display:block; width:100%; height:100%; object-fit:cover; }
.fv-image-circle { border-radius:50%; }
.fv-image-rounded { border-radius:32px; }

/* Keep the one-pager clear of WordPress' logged-in admin bar. */
.admin-bar header[style*="position:sticky"] { top:32px !important; }
@media screen and (max-width:782px) { .admin-bar header[style*="position:sticky"] { top:46px !important; } }

.fv-hover-1:hover {color:#F2755F}
.fv-hover-2:hover {color:#F2755F}
.fv-hover-3:hover {color:#F2755F}
.fv-hover-4:hover {color:#F2755F}
.fv-hover-5:hover {color:#F2755F}
.fv-hover-6:hover {background:#E3624C; color:#fff}
.fv-hover-7:hover {background:#F5C64F; color:#2A3D5E}
.fv-hover-8:hover {color:#F2755F; border-bottom:2px solid #F2755F}
.fv-hover-9:hover {color:#F2755F; border-bottom:2px solid #F2755F}
.fv-hover-10:hover {transform:rotate(0deg) translateY(-6px)}
.fv-hover-11:hover {transform:rotate(0deg) translateY(-6px)}
.fv-hover-12:hover {transform:rotate(0deg) translateY(-6px)}
.fv-hover-13:hover {transform:rotate(0deg) translateY(-6px); box-shadow:0 16px 32px rgba(37,60,99,0.12)}
.fv-hover-14:hover {transform:rotate(0deg) translateY(-6px); box-shadow:0 16px 32px rgba(37,60,99,0.12)}
.fv-hover-15:hover {transform:rotate(0deg) translateY(-6px); box-shadow:0 16px 32px rgba(37,60,99,0.12)}
.fv-hover-16:hover {transform:rotate(0deg) translateY(-6px); box-shadow:0 16px 32px rgba(37,60,99,0.12)}
.fv-hover-17:hover {transform:rotate(0deg) translateY(-6px); box-shadow:0 16px 32px rgba(37,60,99,0.12)}
.fv-hover-18:hover {background:#3D7CBC; color:#fff}
.fv-hover-19:hover {background:#6A9B4D; color:#fff}
.fv-hover-20:hover {background:#3D7CBC; color:#fff}
.fv-hover-21:hover {background:#D07C6B; color:#fff}
.fv-hover-22:hover {color:#fff}
.fv-hover-23:hover {color:#fff}


/* Version 1.1 – visual fine tuning and restored interactions */
@media (hover:hover) and (pointer:fine) {
  .fv-hover-1,.fv-hover-2,.fv-hover-3,.fv-hover-4,.fv-hover-5,
  .fv-hover-6,.fv-hover-7,.fv-hover-8,.fv-hover-9,
  .fv-hover-10,.fv-hover-11,.fv-hover-12,.fv-hover-13,.fv-hover-14,
  .fv-hover-15,.fv-hover-16,.fv-hover-17,.fv-hover-18,.fv-hover-19,
  .fv-hover-20,.fv-hover-21,.fv-hover-22,.fv-hover-23 {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                transform .24s cubic-bezier(.2,.75,.25,1), box-shadow .24s ease;
  }
  .fv-hover-1,.fv-hover-2,.fv-hover-3,.fv-hover-4,.fv-hover-5 {
    padding:7px 10px; margin:-7px -10px; border-radius:10px;
  }
  .fv-hover-1:hover,.fv-hover-2:hover,.fv-hover-3:hover,.fv-hover-4:hover,.fv-hover-5:hover {
    color:#D95F4D !important; background:#FDE8E2;
  }
  .fv-hover-6:hover { transform:translateY(-2px); box-shadow:0 9px 20px rgba(242,117,95,.34) !important; }
  .fv-hover-7:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(251,210,106,.55) !important; }
  [data-hero-photo] { transition:transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease; }
  [data-hero-photo]:hover { transform:rotate(0deg) translateY(-5px) !important; box-shadow:0 24px 48px rgba(37,60,99,.16) !important; }
}

/* Desktop proportions: slightly calmer than the first conversion. */
@media (min-width: 1000px) {
  header [data-mobile-header] { padding-top:10px !important; padding-bottom:10px !important; gap:24px !important; }
  header [data-mobile-nav] { gap:14px 22px !important; font-size:14px !important; }
  #start > div:first-child { padding-top:48px !important; padding-bottom:88px !important; gap:46px !important; }
  #start h1 { font-size:54px !important; line-height:1.06 !important; }
  #start h1 span { font-size:59px !important; }
  #start p { margin-top:22px !important; font-size:18px !important; line-height:1.58 !important; }
  #start h1 + p + div { margin-top:30px !important; }
  section[id]:not(#start) h2 { line-height:1.12; }
}

/* Keep movement restrained on touch devices and for reduced-motion users. */
@media (hover:none), (prefers-reduced-motion:reduce) {
  .fv-hover-10,.fv-hover-11,.fv-hover-12,.fv-hover-13,.fv-hover-14,.fv-hover-15,.fv-hover-16,.fv-hover-17,
  [data-hero-photo] { transition:none !important; }
}

/* Version 1.2 – desktop fine tuning + clearly visible image hover */
@media (min-width: 1000px) {
  /* A slightly tighter header, matching the compact proportions of the source design. */
  header [data-mobile-header] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 22px !important;
  }
  header [data-mobile-nav] {
    gap: 12px 20px !important;
    font-size: 14px !important;
  }
  header [data-mobile-nav] [data-cta] {
    padding: 11px 22px !important;
  }

  /* Hero: more controlled whitespace and typography at common desktop widths. */
  #start > div:first-child {
    padding-top: 42px !important;
    padding-bottom: 84px !important;
    gap: 50px !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  }
  #start > div:first-child > div:first-child > div:first-child {
    margin-bottom: 15px !important;
  }
  #start h1 {
    font-size: 50px !important;
    line-height: 1.075 !important;
    letter-spacing: -0.026em !important;
    text-wrap: pretty !important;
  }
  #start h1 span {
    font-size: 52px !important;
    white-space: nowrap;
    padding-bottom: 1px !important;
  }
  #start p {
    margin-top: 20px !important;
    font-size: 18px !important;
    line-height: 1.58 !important;
    max-width: 31em !important;
  }
  #start h1 + p + div {
    margin-top: 28px !important;
  }
}

/* At narrower desktop/laptop widths keep the handwritten word from crowding the line. */
@media (min-width: 1000px) and (max-width: 1280px) {
  #start h1 { font-size: 46px !important; }
  #start h1 span { font-size: 49px !important; }
  #start > div:first-child { gap: 42px !important; }
}

@media (hover:hover) and (pointer:fine) {
  /* Images now react independently, so the movement remains visible even when a card itself is subtle. */
  .fv-image-slot {
    transform: scale(1) rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .32s ease;
    will-change: transform;
  }

  [data-hero-photo]:hover .fv-image-slot {
    transform: scale(1.035) rotate(-.35deg);
  }

  [data-sticker]:hover .fv-image-slot,
  .fv-hover-10:hover .fv-image-slot,
  .fv-hover-11:hover .fv-image-slot,
  .fv-hover-12:hover .fv-image-slot,
  .fv-hover-13:hover .fv-image-slot,
  .fv-hover-14:hover .fv-image-slot,
  .fv-hover-15:hover .fv-image-slot,
  .fv-hover-16:hover .fv-image-slot,
  .fv-hover-17:hover .fv-image-slot {
    animation: fv-image-wiggle .5s ease both;
    filter: saturate(1.04);
  }

  /* A small playful wiggle rather than a strong shake. */
  @keyframes fv-image-wiggle {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.045) rotate(-1.3deg); }
    70%  { transform: scale(1.035) rotate(1deg); }
    100% { transform: scale(1.04) rotate(0deg); }
  }

  /* Make the hero/card lift easy to notice without changing the base layout. */
  [data-hero-photo]:hover {
    transform: rotate(.15deg) translateY(-7px) !important;
    box-shadow: 0 25px 50px rgba(37,60,99,.18) !important;
  }
  .fv-hover-10:hover,.fv-hover-11:hover,.fv-hover-12:hover,
  .fv-hover-13:hover,.fv-hover-14:hover,.fv-hover-15:hover,.fv-hover-16:hover,.fv-hover-17:hover {
    transform: rotate(0deg) translateY(-7px) !important;
  }
}

@media (hover:none), (prefers-reduced-motion:reduce) {
  .fv-image-slot { animation:none !important; transition:none !important; transform:none !important; }
}


/* Version 1.3 – dedicated mobile layout */
.fv-menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #FFF3DC;
  color: #253C63;
  padding: 0;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.fv-menu-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.fv-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fv-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fv-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  header [data-mobile-header] {
    padding: 9px 18px !important;
    min-height: 68px;
    gap: 12px !important;
    flex-wrap: wrap !important;
    row-gap: 0 !important;
  }
  header [data-mobile-header] > a:first-child {
    min-width: 0;
    gap: 10px !important;
  }
  header [data-mobile-header] > a:first-child > div:first-child {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }
  header [data-mobile-header] > a:first-child > div:first-child svg {
    width: 34px !important;
  }
  header [data-mobile-header] > a:first-child > div:last-child > div:first-child {
    font-size: 18px !important;
  }
  header [data-mobile-header] > a:first-child > div:last-child > div:last-child {
    font-size: 11.5px !important;
  }

  .fv-menu-toggle { display: flex; }

  header [data-mobile-nav] {
    display: none !important;
    order: 3 !important;
    width: 100% !important;
    margin: 9px 0 4px !important;
    padding: 10px 0 2px !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    border-top: 1px solid #F0E7DA;
  }
  header [data-mobile-nav].is-open { display: flex !important; }
  header [data-mobile-nav] > a {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 6px !important;
    margin: 0 !important;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.25;
  }
  header [data-mobile-nav] [data-cta] {
    justify-content: center;
    margin: 8px 0 2px !important;
    padding: 13px 20px !important;
  }

  /* Hero layout: text first, image second, with calmer mobile rhythm. */
  #start > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 32px 24px 66px !important;
  }
  #start > div:first-child > div:first-child > div:first-child {
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: .105em !important;
    margin-bottom: 14px !important;
    max-width: 31ch;
  }
  #start h1 {
    font-size: clamp(36px, 10.2vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-wrap: pretty !important;
  }
  #start h1 span {
    display: block !important;
    width: fit-content;
    margin-top: 3px;
    font-size: clamp(41px, 11.8vw, 50px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
  }
  #start p {
    margin-top: 22px !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
    max-width: 34em !important;
  }
  #start h1 + p + div {
    margin-top: 28px !important;
    gap: 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #start h1 + p + div > a:first-child {
    padding: 15px 28px !important;
    font-size: 16px !important;
  }
  #start h1 + p + div > a:last-child {
    font-size: 16px !important;
  }
  #start [data-hero-photo] {
    width: 100%;
    max-width: 560px;
    justify-self: center;
    border-radius: 27px !important;
    aspect-ratio: 4 / 3.35 !important;
  }
  #start > svg[viewBox="0 0 1440 120"] {
    height: 72px !important;
    margin-top: -72px !important;
  }

  /* Section headings and two-column header rows should stack naturally. */
  #aktuelles {
    padding: 30px 24px 22px !important;
  }
  #aktuelles > div > div:first-child {
    display: block !important;
    margin-bottom: 26px !important;
  }
  #aktuelles > div > div:first-child > a {
    display: inline-block;
    margin: 18px 0 0 !important;
    font-size: 15.5px !important;
  }
  #aktuelles h2 {
    font-size: 34px !important;
  }

  /* Prevent cards and content blocks from feeling oversized on small screens. */
  section[id]:not(#start) {
    scroll-margin-top: 76px;
  }
  article [style*="padding:24px"] { padding: 20px !important; }
}

@media (max-width: 480px) {
  header [data-mobile-header] { padding-left: 16px !important; padding-right: 16px !important; }
  header [data-mobile-header] > a:first-child > div:last-child > div:first-child { font-size: 17px !important; }
  header [data-mobile-header] > a:first-child > div:last-child > div:last-child { font-size: 10.5px !important; }

  #start > div:first-child { padding: 28px 20px 62px !important; gap: 30px !important; }
  #start h1 { font-size: clamp(34px, 10.3vw, 41px) !important; }
  #start h1 span { font-size: clamp(39px, 12vw, 47px) !important; }
  #start p { font-size: 16.5px !important; line-height: 1.56 !important; }
  #start h1 + p + div > a:first-child { width: 100%; text-align: center; box-sizing: border-box; }

  #aktuelles { padding-left: 20px !important; padding-right: 20px !important; }
  #aktuelles h2 { font-size: 32px !important; }

  /* Keep image cards comfortably inside the viewport. */
  [data-sticker], [data-hero-photo] { max-width: 100% !important; }
}

/* Version 1.4 – closer to the original export: finer desktop type, wider gutters, selective hover only */

/* The source file only moves the cards marked data-sticker. The large hero photo
   and the photo in “Über uns” intentionally remain completely still. */
@media (hover:hover) and (pointer:fine) {
  [data-hero-photo],
  [data-hero-photo]:hover,
  [data-hero-photo] .fv-image-slot,
  [data-hero-photo]:hover .fv-image-slot {
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }

  /* Restore each large photo's original tilt instead of changing it on hover. */
  #start [data-hero-photo],
  #start [data-hero-photo]:hover {
    transform: rotate(1.6deg) !important;
    box-shadow: 0 20px 44px rgba(190,160,120,0.22) !important;
  }
  #ueber-uns [data-hero-photo],
  #ueber-uns [data-hero-photo]:hover {
    transform: rotate(-1.8deg) !important;
    box-shadow: 0 16px 34px rgba(37,60,99,0.12) !important;
  }

  /* Match the original interaction: only sticker/news/project cards lift and straighten. */
  [data-sticker] .fv-image-slot,
  [data-sticker]:hover .fv-image-slot {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  [data-sticker] {
    transition: transform .26s cubic-bezier(.2,.75,.25,1), box-shadow .26s ease !important;
  }
  [data-sticker]:hover {
    transform: rotate(0deg) translateY(-6px) !important;
  }
}

/* Laptop/desktop: slightly narrower content canvas creates the larger outer margins
   visible in the original HTML presentation. */
@media (min-width: 1000px) {
  header [data-mobile-header],
  #start > div:first-child,
  #aktuelles > div:last-child,
  #projekte > div:first-child,
  #ueber-uns > div:first-child,
  #mitmachen > div:first-child,
  #kontakt > div:last-child {
    max-width: 1120px !important;
  }

  /* Finer typography: keep Nunito, but avoid the heavy 800-weight appearance. */
  header [data-mobile-header] > a:first-child > div:last-child > div:first-child {
    font-weight: 700 !important;
  }
  header [data-mobile-nav] {
    font-weight: 600 !important;
  }
  #start > div:first-child > div:first-child > div:first-child {
    font-weight: 700 !important;
  }
  #start h1 {
    font-size: 47px !important;
    line-height: 1.09 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
  #start h1 span {
    font-size: 50px !important;
    font-weight: 600 !important;
  }
  #start p {
    font-size: 17px !important;
    line-height: 1.68 !important;
    font-weight: 400 !important;
  }
  section[id]:not(#start) h2 {
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
  }
  section[id] h3 {
    font-weight: 700 !important;
  }

  /* Give the content a little more breathing room from the browser edges on laptop widths. */
  #start > div:first-child {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }
  #aktuelles,
  #projekte,
  #ueber-uns,
  #mitmachen,
  #kontakt {
    padding-left: clamp(36px, 4vw, 52px) !important;
    padding-right: clamp(36px, 4vw, 52px) !important;
  }
}

@media (min-width: 1000px) and (max-width: 1280px) {
  #start h1 { font-size: 44px !important; }
  #start h1 span { font-size: 47px !important; }
}

/* Mobile keeps the V4 structure, but the type is made a touch lighter as well. */
@media (max-width: 820px) {
  #start h1,
  #aktuelles h2,
  #projekte h2,
  #ueber-uns h2,
  #mitmachen h2,
  #kontakt h2 {
    font-weight: 700 !important;
  }
  #start h1 span { font-weight: 600 !important; }
  #start > div:first-child > div:first-child > div:first-child { font-weight: 700 !important; }
}

/* V6 – definitive source-layout alignment and selective motion */
@media (min-width: 1000px) {
  /* Force the generous source-file canvas instead of relying on the older inline max-width values. */
  header [data-mobile-header],
  #start > div:first-child,
  #aktuelles > div,
  #projekte > div,
  #ueber-uns > div,
  #mitmachen > div,
  #kontakt > div {
    width: min(1160px, 72vw) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #start > div:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #aktuelles,
  #projekte,
  #ueber-uns,
  #mitmachen,
  #kontakt {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Closer to the visibly finer Nunito treatment in the source export. */
  body { font-weight: 400 !important; }
  header [data-mobile-nav] { font-weight: 600 !important; }
  #start h1 { font-weight: 700 !important; }
  #start h1 span { font-weight: 600 !important; }
  #start p { font-weight: 400 !important; }
  section[id]:not(#start) h2,
  section[id] h3 { font-weight: 700 !important; }
}

/* The two large source photos NEVER move. This is intentionally unconditional
   so older hover declarations cannot leak through. */
[data-static-photo],
[data-static-photo]:hover,
[data-static-photo] .fv-image-slot,
[data-static-photo]:hover .fv-image-slot {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}
#start [data-static-photo="hero"],
#start [data-static-photo="hero"]:hover {
  transform: rotate(1.6deg) !important;
  box-shadow: 0 20px 44px rgba(190,160,120,0.22) !important;
}
#ueber-uns [data-static-photo="about"],
#ueber-uns [data-static-photo="about"]:hover {
  transform: rotate(-1.8deg) !important;
  box-shadow: 0 16px 34px rgba(37,60,99,0.12) !important;
}
[data-static-photo] .fv-image-slot,
[data-static-photo]:hover .fv-image-slot {
  transform: none !important;
}

@media (hover:hover) and (pointer:fine) {
  /* Motion exists only on the news/project cards that had it in the converted source.
     The photo itself does not shake independently; the whole card lifts/straightens. */
  .fv-hover-10 .fv-image-slot,.fv-hover-11 .fv-image-slot,.fv-hover-12 .fv-image-slot,
  .fv-hover-13 .fv-image-slot,.fv-hover-14 .fv-image-slot,.fv-hover-15 .fv-image-slot,
  .fv-hover-16 .fv-image-slot,.fv-hover-17 .fv-image-slot,
  .fv-hover-10:hover .fv-image-slot,.fv-hover-11:hover .fv-image-slot,.fv-hover-12:hover .fv-image-slot,
  .fv-hover-13:hover .fv-image-slot,.fv-hover-14:hover .fv-image-slot,.fv-hover-15:hover .fv-image-slot,
  .fv-hover-16:hover .fv-image-slot,.fv-hover-17:hover .fv-image-slot {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
  .fv-hover-10:hover,.fv-hover-11:hover,.fv-hover-12:hover,
  .fv-hover-13:hover,.fv-hover-14:hover,.fv-hover-15:hover,.fv-hover-16:hover,.fv-hover-17:hover {
    transform: rotate(0deg) translateY(-6px) !important;
  }
}

/* Keep the V4 mobile layout full-width and do not inherit the desktop canvas rule. */
@media (max-width: 999px) {
  header [data-mobile-header],
  #start > div:first-child,
  #aktuelles > div,
  #projekte > div,
  #ueber-uns > div,
  #mitmachen > div,
  #kontakt > div {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* V8 – desktop layout restored to the exact proportions of the supplied original HTML.
   Mobile/tablet rules from V4–V7 remain in force below 1000px. */
@media (min-width: 1000px) {
  body {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 400 !important;
  }

  /* Header: same 1200px canvas and spacing as the original export. */
  header [data-mobile-header] {
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 12px clamp(16px, 3vw, 32px) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    row-gap: 0 !important;
    gap: 28px !important;
  }
  header [data-mobile-header] > a:first-child > div:last-child > div:first-child {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }
  header [data-mobile-header] > a:first-child > div:last-child > div:last-child {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  header [data-mobile-nav] {
    margin-left: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 16px 26px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  header [data-mobile-nav] [data-cta] {
    padding: 12px 24px !important;
    font-size: inherit !important;
    font-weight: 800 !important;
  }

  /* Hero: restore source max-width, padding, grid, typography and line wrapping. */
  #start > div:first-child {
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(40px, 6vw, 80px) clamp(18px, 4vw, 32px) clamp(70px, 8vw, 110px) !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important;
    gap: 56px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  #start > div:first-child > div:first-child > div:first-child {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    margin-bottom: 20px !important;
  }
  #start h1 {
    margin: 0 !important;
    font-size: clamp(34px, 6.4vw, 60px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance !important;
  }
  #start h1 span {
    font-family: 'Caveat', cursive !important;
    font-size: clamp(38px, 7vw, 66px) !important;
    font-weight: 600 !important;
    padding-bottom: 2px !important;
  }
  #start p {
    margin-top: 28px !important;
    font-size: 19px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    max-width: 30em !important;
  }

  /* Other sections: use the exact source 1200px content canvas rather than the narrower V6 override. */
  #aktuelles > div:last-child,
  #projekte > div:first-child,
  #ueber-uns > div:first-child,
  #mitmachen > div:first-child,
  #kontakt > div:last-child {
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  #aktuelles,
  #projekte,
  #ueber-uns,
  #mitmachen,
  #kontakt {
    padding-left: clamp(18px, 4vw, 32px) !important;
    padding-right: clamp(18px, 4vw, 32px) !important;
  }

  section[id]:not(#start) h2,
  section[id] h3 {
    font-weight: 800 !important;
  }
}

/* The two large photos are static in the original file. Keep this rule after all
   interaction CSS so it wins regardless of browser cache/order. */
#start [data-static-photo="hero"],
#start [data-static-photo="hero"]:hover {
  animation: none !important;
  transition: none !important;
  transform: rotate(1.6deg) !important;
  box-shadow: 0 20px 44px rgba(190,160,120,.22) !important;
}
#ueber-uns [data-static-photo="about"],
#ueber-uns [data-static-photo="about"]:hover {
  animation: none !important;
  transition: none !important;
  transform: rotate(-1.8deg) !important;
  box-shadow: 0 16px 34px rgba(37,60,99,.12) !important;
}
#start [data-static-photo="hero"] .fv-image-slot,
#start [data-static-photo="hero"]:hover .fv-image-slot,
#ueber-uns [data-static-photo="about"] .fv-image-slot,
#ueber-uns [data-static-photo="about"]:hover .fv-image-slot {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}


/* V9 – balanced desktop width between V7 and V8. Keep original fonts/mobile rules. */
@media (min-width: 1000px) {
  header [data-mobile-header],
  #start > div:first-child {
    width: 100% !important;
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Keep the source-like outer breathing room without making the hero feel cramped. */
  header [data-mobile-header] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #start > div:first-child {
    padding-left: 24px !important;
    padding-right: 24px !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
    gap: 48px !important;
  }

  #aktuelles > div:last-child,
  #projekte > div:first-child,
  #ueber-uns > div:first-child,
  #mitmachen > div:first-child,
  #kontakt > div:last-child {
    width: 100% !important;
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Slightly restrain the hero copy so line wrapping lands between V7 and V8. */
  #start > div:first-child > div:first-child {
    min-width: 0 !important;
  }
  #start h1 {
    font-size: clamp(42px, 4.1vw, 58px) !important;
  }
  #start h1 span {
    font-size: clamp(46px, 4.5vw, 64px) !important;
  }
}

/* V11 – legal pages in the visual language of the onepager. */
.fv-legal-page { background:#FFFDF9; padding:clamp(48px,7vw,92px) clamp(18px,4vw,32px); }
.fv-legal-card { max-width:900px; margin:0 auto; background:#fff; border-radius:30px; padding:clamp(28px,5vw,58px); box-shadow:0 14px 38px rgba(37,60,99,.08); color:#253C63; }
.fv-legal-kicker { margin:0 0 8px; font-family:Caveat,cursive; font-size:30px; font-weight:600; color:#4E92D6; }
.fv-legal-card h1 { margin:0 0 38px; font-size:clamp(36px,5vw,54px); line-height:1.08; font-weight:800; letter-spacing:-.025em; }
.fv-legal-card h2 { margin:34px 0 10px; font-size:21px; line-height:1.3; font-weight:800; }
.fv-legal-card p, .fv-legal-card li { font-size:17px; line-height:1.7; color:#4B5F80; }
.fv-legal-card p { margin:0 0 14px; }
.fv-legal-card ul { margin:8px 0 20px; padding-left:24px; }
.fv-legal-card a { color:#3E7CC4; text-decoration:underline; text-underline-offset:3px; }
.fv-legal-card a:hover { color:#F2755F; }
@media (max-width:620px) { .fv-legal-card { border-radius:22px; padding:26px 20px; } .fv-legal-card h1 { margin-bottom:28px; } .fv-legal-card h2 { font-size:19px; } .fv-legal-card p,.fv-legal-card li { font-size:16px; } }