.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'),
       url('../../files/assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype');
}
/* open-sans-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../../files/assets/fonts/open-sans-v44-latin-500.woff2') format('woff2'),
       url('../../files/assets/fonts/open-sans-v44-latin-500.ttf') format('truetype');
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/assets/fonts/open-sans-v44-latin-600.woff2') format('woff2'),
       url('../../files/assets/fonts/open-sans-v44-latin-600.ttf') format('truetype');
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/assets/fonts/open-sans-v44-latin-700.woff2') format('woff2'),
       url('../../files/assets/fonts/open-sans-v44-latin-700.ttf') format('truetype');
}
/* poppins-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/assets/fonts/poppins-v24-latin-regular.woff2') format('woff2'),
       url('../../files/assets/fonts/poppins-v24-latin-regular.ttf') format('truetype');
}
/* poppins-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../../files/assets/fonts/poppins-v24-latin-500.woff2') format('woff2'),
       url('../../files/assets/fonts/poppins-v24-latin-500.ttf') format('truetype');
}
/* poppins-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/assets/fonts/poppins-v24-latin-600.woff2') format('woff2'),
       url('../../files/assets/fonts/poppins-v24-latin-600.ttf') format('truetype');
}
/* poppins-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/assets/fonts/poppins-v24-latin-700.woff2') format('woff2'),
       url('../../files/assets/fonts/poppins-v24-latin-700.ttf') format('truetype');
}
/* poppins-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../../files/assets/fonts/poppins-v24-latin-800.woff2') format('woff2'),
       url('../../files/assets/fonts/poppins-v24-latin-800.ttf') format('truetype');
}

  :root{
    --pink:#BF348C;
    --pink-dark:#A02977;
    --pink-light:#FCEDF6;
    --pink-soft:#F8EAF2;
    --text:#333333;
    --text-soft:#666666;
    --text-mute:#888888;
    --white:#FFFFFF;
    --gray-bg:#F8F9FA;
    --border:#E5E5E5;
    --shadow-sm:0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:0 8px 24px rgba(0,0,0,0.10);
    --shadow-lg:0 18px 48px rgba(191,52,140,0.18);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;overflow-x:hidden}
  body{
    font-family:'Open Sans',system-ui,sans-serif;
    color:var(--text);
    font-size:17px;
    line-height:1.6;
    background:#fff;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--text);margin:0;line-height:1.2}
  h1{font-size:clamp(36px,4.6vw,56px);font-weight:700;letter-spacing:-0.02em}
  h2{font-size:clamp(30px,3.4vw,42px);font-weight:600;color:var(--pink);letter-spacing:-0.01em}
  h3{font-size:clamp(20px,1.7vw,26px);font-weight:600}
  p{margin:0 0 1em}
  a{color:var(--pink);text-decoration:none}
  .container{max-width:1400px;margin:0 auto;padding:0 32px}
  .invisible{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* ───────── SCROLL ANIMATIONS ───────── */
  .fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease, transform 0.6s ease}
  .fade-in.visible{opacity:1;transform:translateY(0)}
  
  /* Verzögerungen für gestaffelte Animationen */
  .fade-in-delay-1{transition-delay:0.1s}
  .fade-in-delay-2{transition-delay:0.2s}
  .fade-in-delay-3{transition-delay:0.3s}

  /* ───────── Header ───────── */
  .site-header{
    position:fixed;top:0;z-index:50;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid transparent;
    transition:box-shadow .25s,border-color .25s; width: 100%;
    box-shadow:0 2px 14px rgba(0,0,0,.06);border-color:#eee
  }
  .site-header.scrolled{}
  .nav-row{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
  .logo img{height:62px;display:block}

  

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;
    padding:14px 28px;border-radius:10px;cursor:pointer;border:0;
    transition:.2s ease;text-decoration:none;white-space:nowrap;
  }
  .btn-primary{background:var(--pink);color:#fff;box-shadow:0 6px 16px rgba(191,52,140,.28)}
  .btn-primary:hover{background:var(--pink-dark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(191,52,140,.34)}
  .btn-secondary{background:#fff;color:var(--pink);border:2px solid var(--pink)}
  .btn-secondary:hover{background:var(--pink-light)}
  .btn-ghost{background:transparent;color:var(--pink);padding:8px 0}
  .btn-large{padding:18px 36px;font-size:18px}
  .btn-arrow::after{content:"→";font-size:18px;transition:transform .2s}
  .btn-arrow:hover::after{transform:translateX(3px)}
  .header-cta{padding:12px 22px;font-size:14px}
  
  /* ───────── DESKTOP NAVIGATION ───────── */
  #Navigation{display:flex;align-items:center;}
  #Navigation .inside{display:flex;align-items:center;width:100%}
  #Navigation .mod_navigation{display:flex;align-items:center}
  
  /* Level 1 (Hauptmenü) */
  #Navigation .mod_navigation .level_1{
    display:flex;align-items:center;gap:36px;
    list-style:none;padding:0;margin:0;
  }
  
  #Navigation .mod_navigation .level_1 > li{position:relative}
  
  #Navigation .mod_navigation .level_1 > li > a,
  #Navigation .mod_navigation .level_1 > li > strong{
    color:var(--text);
    font-family:'Poppins',sans-serif;
    font-weight:500;
    font-size:15px;
    padding:8px 0;
    display:block;
    transition:color .2s;
  }
  
  #Navigation .mod_navigation .level_1 > li > a:hover{color:var(--pink)}
  #Navigation .mod_navigation .level_1 > li.active > strong{color:var(--pink)}
  
  /* Caret für Submenu (Desktop) */
  #Navigation .mod_navigation .level_1 > li.submenu > a::after{
    content:"";display:inline-block;width:7px;height:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);margin-left:8px;opacity:.6;
  }
  
  /* Level 2 (Dropdown Desktop) */
  #Navigation .mod_navigation .level_2{
    position:absolute;top:100%;left:-16px;min-width:260px;
    background:#fff;border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow-md);padding:10px;
    opacity:0;pointer-events:none;transform:translateY(6px);
    transition:.18s;
    list-style:none;margin:0;
  }
  
  #Navigation .mod_navigation .level_1 > li.submenu:hover .level_2{
    opacity:1;pointer-events:auto;transform:translateY(0);
  }
  
  #Navigation .mod_navigation .level_2 li{margin:0}
  
  #Navigation .mod_navigation .level_2 a{
    display:block;padding:10px 14px;border-radius:8px;
    font-size:14px;color:var(--text);
    transition:all .2s;
  }
  
  #Navigation .mod_navigation .level_2 a:hover{
    background:var(--pink-light);color:var(--pink);
  }

  /* ───────── HAMBURGER BUTTON ───────── */
  .hamburger{
    display:none;background:none;border:0;width:40px;height:40px;
    cursor:pointer;flex-direction:column;justify-content:center;
    gap:5px;align-items:center;z-index:1000;position:relative;
  }
  .hamburger span{
    width:22px;height:2px;background:var(--text);display:block;
    transition:all 0.3s ease;
  }
  
  /* Hamburger Animation zu X */
  .hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(7px)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-7px)}

  /* ───────── MOBILE NAVIGATION OVERLAY ───────── */
  .mobile-nav-overlay{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.5);
    z-index:10;
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .mobile-nav-overlay.active{opacity:1}

  /* ───────── MOBILE NAVIGATION (ab 1024px versteckt) ───────── */
@media (max-width:1024px){
  /* Desktop Navigation ausblenden */
  #Navigation{
    position:fixed;
    top:84px;
    right:0;
    width:320px;
    height:calc(100vh - 84px);
    background:#fff;
    z-index:999;
    transform:translateX(100%);
    box-shadow:-4px 0 12px rgba(0,0,0,0.1);
    overflow-y:auto;
    align-items: start;
  }
  
  #Navigation.active{
    transform:translateX(0);
    transition:transform 0.3s ease;
  }
  
  #Navigation .inside{
    display:block;
    padding:2rem 0;
  }
  
  .hamburger{display:flex}
  .mobile-nav-overlay{display:block}
  
  /* Mobile Menu Styling */
  #Navigation .mod_navigation .level_1{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  
  #Navigation .mod_navigation .level_1 > li{
    border-bottom:1px solid var(--border);
  }
  
  #Navigation .mod_navigation .level_1 > li > a,
  #Navigation .mod_navigation .level_1 > li > strong{
    padding:16px 24px;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  /* Pfeil für Submenu (Mobile) - mit ::after */
  #Navigation .mod_navigation .level_1 > li.submenu > a::after{
    content:"";
    width:8px;
    height:8px;
    border-right:2px solid var(--text);
    border-bottom:2px solid var(--text);
    transform:rotate(45deg);
    transition:transform 0.3s ease;
    flex-shrink:0;
  }
  
  /* Pfeil rotiert wenn geöffnet */
  #Navigation .mod_navigation .level_1 > li.submenu.open > a::after{
    transform:rotate(-135deg);
  }
  
  /* Level 2 Mobile (Dropdown) */
  #Navigation .mod_navigation .level_2{
    position:static;
    opacity:1;
    pointer-events:auto;
    transform:none;
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:0;
    background:var(--gray-bg);
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  
  #Navigation .mod_navigation .level_1 > li.submenu.open .level_2{
    max-height:500px;
  }
  
  #Navigation .mod_navigation .level_2 a{
    padding:12px 24px 12px 48px;
    border-radius:0;
    font-size:15px;
  }
  
  .header-cta{display:none}
}


main { margin-top: 84px; }

  /* ───────── Footer ───────── */
  footer{background:#333;color:#cfcfcf;padding:72px 0 28px}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
  footer h4{
    font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:#fff;
    text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;
  }
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  footer .footer-bottom  ul{flex-direction:row;}
  footer a,
  footer strong{color:#cfcfcf;font-size:14px;transition:color .2s}
  footer a:hover{color:var(--pink)}
  footer strong{color:#fff;}
  .footer-logo{filter:brightness(0) invert(1);height:40px;margin-bottom:18px}
  .footer-about p{color:#aaa;font-size:14px;line-height:1.7;margin-bottom:18px;max-width:300px}
  .footer-contact li{display:flex;align-items:center;gap:10px;color:#cfcfcf;font-size:14px}
  .footer-contact .ico{color:var(--pink);width:18px;display:inline-flex}
  .footer-bottom{
    border-top:1px solid #444;padding-top:24px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
    font-size:13px;color:#888;
  }
  .footer-bottom a{font-size:13px;color:#aaa}
  footer .footer-about svg { fill: #fff; width: 24px; } 
  /* ───────── icons ───────── */
  .i{width:24px;height:24px;display:inline-block;stroke-width:2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
  .i-lg{width:28px;height:28px}
  .i-sm{width:18px;height:18px}

  /* ───────── responsive ───────── */
  @media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr;gap:48px}
    .hero-visual{height:380px}
    .audience-grid,.testi-grid,.problem-grid{grid-template-columns:repeat(2,1fr)}
    .phase-grid{grid-template-columns:1fr;gap:24px}
    .phase-connector{flex-direction:row;height:auto;padding:8px 0}
    .phase-connector .line{height:2px;width:auto;flex:1;background-image:linear-gradient(to right,var(--pink) 50%,transparent 0);background-size:10px 2px}
    .why-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:repeat(2,1fr);gap:36px}
  }
  @media (max-width:640px){
    section.block{padding:64px 0}
    .container{padding:0 20px}
    h1{font-size:36px}
    h2{font-size:28px}
    .hero{padding:48px 0 64px}
    .audience-grid,.testi-grid,.problem-grid,.sp-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
  }

  
<style>
.footer-book {
  display: flex;
  flex-direction: column;
  gap: 0;
}
 
.book-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}
 
.book-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
 
.book-cover {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(191, 52, 140, 0.1), rgba(216, 90, 170, 0.1));
}
 
.book-cover a {
  display: block;
  width: 100%;
  height: 100%;
}
 
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
 
.book-card:hover .book-cover img {
  transform: scale(1.05);
}
 
.book-content {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.book-content h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}
 
.book-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}
 
.book-desc {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  margin: 4px 0 0;
  padding: 0;
  flex-grow: 1;
}
 
.book-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #BF348C;
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.2s ease;
  display: inline-block;
}
 
.book-link:hover {
  color: #fff;
}
 
/* Responsive für größere Screens */
@media (max-width: 1024px) {
  .book-content {
    padding: 14px 12px;
  }
  
  .book-title {
    font-size: 13px;
  }
  
  .book-desc {
    font-size: 11px;
  }
}
 
@media (max-width: 640px) {
  .footer-book {
    margin-top: 0;
  }
  
  .book-card {
    flex-direction: row;
  }
  
  .book-cover {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 3/4;
  }
  
  .book-content {
    padding: 12px;
    justify-content: flex-start;
  }
  
  .book-content h4 {
    font-size: 11px;
  }
  
  .book-title {
    font-size: 13px;
  }
  
  .book-desc {
    display: none;
  }
  
  .book-link {
    margin-top: 4px;
    font-size: 11px;
  }
}