/* =================================================================
   COLORS
   ================================================================= */

/* 
graubeige #efe9e9
lila #9f8efd  
blau #1004ff
schwarz #000000
orange #fe8f76 #fe8f75
orangerot #ff502e
flieder #e0dceb rgba(220, 220, 241, 254, 0.85) #dcdbf1
hellblauflieder #e4e3f1  
*/

/* =================================================================
   FONTS
   ================================================================= */

/* Combined Google Fonts - optimized for performance */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Alfa+Slab+One&family=Poppins:wght@300;400;500;700&family=Montserrat:wght@300;500&family=Paytone+One&display=swap');

/* Kudryashev Font - hosted locally for better performance */
@font-face {
    font-family: "Kudryashev W01 Normal";
    src: url('../fonts/Kudryashev-W01-Normal.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ggf wieder H1-H6 zu Lato ändern */


/* =================================================================
   RESET
   ================================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f9f9f9;
    font: 400 1.1rem/1.8 'Lato', sans-serif;
    color: #333;
    max-width: 100%;
    overflow-x: hidden;
}

/* =================================================================
   ACCESSIBILITY - Skip Navigation Link
   ================================================================= */

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 9999;
    padding: 1rem 1.5rem;
    background: #9f8efd;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
}

.skip-link:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

/* Visually hidden labels for screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* =================================================================
   LAYOUT
   ================================================================= */

.wrapper {
    max-width: 1300px;
    padding: 0 25px;
    margin: 0 auto;
}

.wrapper.header {
    max-width: 1600px;
}
       
.column {
    float: left;
    margin-left: 4%; /* Add left margin for spacing between columns */
}

.column:first-child {
    margin-left: 0 !important; /* Remove margin from first column */
}

/* No gutter columns - remove all margins */
.no-gutter .column,
.row.no-gutter .column {
    margin-left: 0 !important;
}

section {
    padding: 8rem 0;
}

section#hero {
    background: linear-gradient(to bottom, #ffffffcd, #f9f9f9, #ada2fe1f);
}

section#ueber-teaser {
    position: relative;
    box-shadow: 0 3px 40px rgba(47, 39, 57, 0.118); /* 5px down, blur 15px */
    box-shadow:  -10px 40px rgba(48, 42, 59, 0.2), /* oben */
}



section.no-gutter {
    padding:0;
}

section.border {
    border-bottom: 2px solid #cac9ef;
}

section#impressum-datenschutz {
    padding: 3rem 6rem 2rem 2rem;
}



.light {
    background-color: #f9f9f9;
}

.light {
    background: linear-gradient(to bottom, #ffffffcd, #f9f9f9);
}

.light-color {
    background: linear-gradient(to bottom, #ada2fe11, #9e92f979, #9f8efd8a);
}

.light-color-mild {
    background: linear-gradient(to bottom, #cbc5ff11, #9e92f926, #9f8efd3e);
}

/* SEO Intro Section */
.seo-intro {
    padding: 5rem 0 4rem 0;
}

.seo-intro h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #333;
}

.seo-intro p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.light-color-static {
    background-color: #ada2fe11;
}

.logo-showcase {
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(159, 142, 253, 0.3);
    margin-top: 4rem;
    gap: 1.2rem;
    border-radius: 16px;
}

.logo-showcase-item {
    max-height: 82px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}


.column.image-background {
    background-color: #fffdfa75;
    min-height: 800px;
    padding-top: 9rem;
}

.color {
    background: linear-gradient(to bottom, #ada2fe1f, #9e92f9d5, #9f8efd);
}

.color-static {
    background-color: #9f8efd;
    color: #f2f2f2f2;
}

.color-static h2 {
    color: #f2f2f2;
}

.back-hero {
    background: url('../images/back-hero_desktop3_optimized.png') center center no-repeat,
    radial-gradient(circle at center, #9e92f9d5 10%, #9e92f965 35%, #f9f9f9 55%, #f9f9f90f 70%, #f9f9f900 85%);
    background-size: cover;
    min-height: 80vh;
    margin-top: 0px;
}

/* WebP support for modern browsers - 92% smaller! */
@supports (background-image: url('test.webp')) {
    .back-hero {
        background: url('../images/back-hero_desktop3_optimized.webp') center center no-repeat,
        radial-gradient(circle at center, #9e92f9d5 10%, #9e92f965 35%, #f9f9f9 55%, #f9f9f90f 70%, #f9f9f900 85%);
        background-size: cover;
    }
}

.back-projekt {
    background: url('../images/back-henriettasteinhart_optimized.png') center center no-repeat;
    background-size: cover;
    min-height: 70vh;
}

.back-cms {
    background: url('../images/cms.png') center center no-repeat;
    background-size: cover;
    min-height: 70vh;
}

.back-cms2 {
    background: url('../images/back-cms2.png') center center no-repeat;
    background-size: cover;
    min-height: 75vh;
}

.back-cms3 {
    background: url('../images/cms-webflow.png') center center no-repeat;
    background-size: cover;
    min-height: 75vh;
}

.back-cms-comparison {
    background: url('../images/cms-comparison.png') center center no-repeat;
    background-size: cover;
    min-height: 70vh;
}

#hero .no-gutter .column {
    margin: 0;
    padding: 70px;
}

#ueber .no-gutter .back-aboutme {
    padding: 0;
    position: relative;
    min-height: 100%;
}

#ueber .row.no-gutter {
    display: flex;
    align-items: stretch;
}

#ueber .no-gutter .column {
    float: none;
}

.no-gutter .col_1_2 {
    width: 50%;
}

.no-gutter .col_1_3 {
    width: 33.33%;
}

.no-gutter .col_2_3 {
    width: 66.66%;
}

.no-gutter .col_1_4 {
    width: 25%;
}

.no-gutter .col_3_4 {
    width: 75%;
}

/* Clearfix */
.row:before,
.row:after {
    content: " ";
    display: table;
}
    
.row::after {
    clear: both;
}

/* =================================================================
   GRID SYSTEM
   ================================================================= */
 
.col_1 {
    width: 100%;
    text-align: left;
}
     
.col_1_2 {
    width: 47.5%; /* 2 columns: 47.5% + 47.5% + 4% margin = 99%, safe buffer */
}
    
.col_1_3 {
    width: 30%; /* 3 columns: 30% × 3 + 4% × 2 margins = 98%, safe buffer */
    text-align: center;
}
    
.col_2_3 {
    width: 64%; /* 2/3 width: 30% × 2 + 4% margin = 64% */
}
    
.col_1_4 {
    width: 22%; /* 4 columns: 22% × 4 + 4% × 3 margins = 100% */
}
    
.col_3_4 {
    width: 74%; /* 3/4 width: 22% × 3 + 4% × 2 margins = 74% */
}
 





/* =================================================================
   HEADER & NAVIGATION
   ================================================================= */

#logo  {
    max-height: 60px;
    width: auto;
    display: flex;
    position: relative;
    opacity: 100%;
    transition: opacity 0.3s ease, max-height 0.5s ease;
}

.logo {
    max-height: 60px;
    width: auto;
    opacity: 100%;
}



header.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

header {
    position: sticky;
    top: 0;
    display: flex;
    padding: 0.5rem 2rem 0.5rem 2rem;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    height: auto;
    background-color: transparent;
    box-shadow: #9f8efdc9 0px 1.5px 3px -1px;
    transition: background-color 0.3s ease, box-shadow 1.5s ease;
}



header.sticky-header {
    background-color: rgba(255, 255, 255, 1);
}

header.scrolled #logo img {
    max-height: 50px;
}



/* Desktop navigation - visible by default */
#nav-menu {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    backdrop-filter: none;
    transform: none;
    z-index: auto;
    display: block;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
    transition: none;
    visibility: visible;
    margin-top: 0.5rem;
}

#nav-menu ul {
    display: flex;
    justify-content: space-between;
    gap: 19px;
    align-items: center;
    list-style: none;
}


#nav-menu ul li {
    margin-right: 0;
}

/* Hide "Start" link on desktop - only show on mobile */
#nav-menu ul li.mobile-only {
    display: none;
}

#nav-menu ul li a {
    font-size: 1.1rem;
}

#nav-menu ul li a.current {
    color: #fd9075;
}

#nav-menu ul li a:hover {
    color: #fd9075;
}

#nav-menu ul li a.button-nav:hover {
    color: #f9f9f9;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}

header.scrolled #nav-menu ul li a {
    color: #0000009c;
}

header.scrolled #nav-menu ul li a.current {
    color: #fd9075;
}

header.scrolled #nav-menu ul li a.button-nav {
    color: #f9f9f9;
}

header.scrolled #nav-menu ul li a:hover {
    color: #fd9075;
} 
header.scrolled #nav-menu ul li a.button-nav:hover {
    color: #f9f9f9;
    background-position: left;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
} 

header nav ul li a {
    color: #00000051;
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}


nav ul li a:hover {
    color: #fd9075;
}

header.scrolled nav ul li a {
    color: #0000009c;
}


header.transparent {
    background-color: transparent;
}

header.scrolled .button-nav {
    background: linear-gradient(to left, #7b65fad6, #8a76f9c2 50%, #fd9075 70%, #fd9075);
    background-size: 300% 100%;
    background-position: right;
}

header.scrolled .button-nav:hover {
    background: linear-gradient(to left, #7b65fad6, #8a76f9c2 50%, #fd9075 70%, #fd9075);
    background-size: 300% 100%;
    background-position: right;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}


/* =================================================================
   HAMBURGER MENU
   ================================================================= */

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    position: fixed;
    z-index: 1001;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #cac9ef;
    transition: all 0.3s ease;
    border-radius: 2px;
}

header.scrolled .hamburger-line {
    background-color: #000000;
}

/* Hamburger animation when active */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Menu open state - prevent body scrolling and hide horizontal shift */
body.menu-open {
    overflow: hidden;
}

html.menu-open {
    overflow-x: hidden;
}



/* =================================================================
   TYPOGRAPHY
   ================================================================= */


h1, h2, h3, h4, h5, h6 {
    font-weight: 500;    
    margin-bottom: 1.5rem;
    color: #333;
    line-height: 1.15;
}

h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
}

h1, h2 {
    font-family: 'Alfa Slab One', Georgia, serif;
}
h1 {
    font-weight: 700;
    font-size: 2.5rem; /* Default h1 uses h2 styling for subpages */
}

.color-static h1, .color-static h2, .color-static h3, .color-static h4, .color-static p, .color-static p.hero-subtitle {
    color: #f2f2f2f2;
}

/* Homepage hero h1 - large display style */
#hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
}

h2 {
    font-size: 2.5rem; 
}

/* Keep h3 styling for h2 elements that were previously h3 */
h2.h3-style {
    font-size: 1.7rem;
}

h2.big {
    font-family: 'Paytone One', Georgia, serif;
    font-size: 4.4rem;
    text-transform: uppercase;
    line-height: 0.8;
}

h2.medium {
    font-size: 3rem;
    line-height: 0.8;
    font-weight: 400;
}

#impressum-datenschutz h3{
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    margin-top: 1.5rem;
    font-weight: bold;
}

.word-break {
    max-width: 400px;
}

section#referenzen h1 {
    color: #f2f2f2;
}

#referenzen h2.subline {
    max-width: none;
    color: #f2f2f2;
    font-size: 1.4rem;
}



.highlight-color {
    color: #664cfa;
}

#baukasten h2 {
    font-family: Alfa Slab One, Georgia, serif;
}

.project-gallery h3 {
    font-family: 'Paytone One', Georgia, serif;
    text-transform: uppercase;
    font-size: 2.7rem;
    margin-bottom: 1rem;
    text-align: center;
    max-width: 600px;
    line-height: 1;
}

.project-gallery h3.subline {
    font-family: 'Kudryashev W01 Normal', Georgia, 'Times New Roman', Times, serif;
    font-size: 1.6rem;
    text-transform: none;
    margin-top: 0.5rem;
}

.project-gallery a:hover {
    text-decoration: none;
}

h3 {
    font-size: 1.7rem; /* 28px at 16px base */
}

/* Keep h4 styling for h3 elements that were previously h4 */
h3.h4-style {
    font-size: 1.5rem;
}

.soarbeiteich h3 {
    font-size: 1.4rem; 
}

h4 {
    font-size: 1.5rem; /* 24px at 16px base */
}

 #entscheidungshilfe h4 {
       margin-top: 3rem;
    }

h5 {
    font-size: 1.25rem; /* 20px at 16px base */
}

h6 {
    font-size: 1.125rem; /* 18px at 16px base */
}

p {
    font-size: 1rem; /* 16px at 16px base */
    margin: 0 0 15px;
}

p.big {
    font-size: 1.15rem; /* 20px at 16px base */
    margin: 0 0 25px;
    line-height: 1.5;
    max-width: 800px;
}

.light-text {
    color: #f2f2f2f2;
}


.text-block {
    padding: 8rem 4rem 6rem 6rem;
}

.project-item {
    padding: 9rem 6rem 8rem 6rem;
    background-color: #fffdfa75;
}



a {
    color: #fd9075;
    text-decoration: none;
}

ul li {
    font-size: 1rem; /* 16px - match p elements */
    line-height: 1.8; /* Match body line-height */
}

section ul,
section ol {
    list-style-position: outside; /* Changed from 'inside' for proper text alignment */
    margin: 20px 0;
    padding-left: 1.5rem; /* Add padding for bullet/number space */
    font-size: 1rem; /* Match base p font-size */
}

section ul li,
section ol li {
    padding-left: 0.5rem; /* Additional spacing after bullet/number */
    margin-bottom: 0.5rem; /* Space between list items */
}

.line {
    position: relative;
    margin-bottom: 55px;
}

.line:after {
    position: absolute;
    top: 140%;
    content: "";
    height: 3px;
    width: 65px;
    left: 0;
}

h2.line:after {
    background-color: #333;
}



h3.line:after {
    top: 125%;
    background-color: #9f8efd;
}

.light-text {
    color: #f6f5ff;
}
/* =================================================================
   BUTTONS & FORM ELEMENTS - UNIFIED SYSTEM
   ================================================================= */

/* 
   USAGE:
   - Base: class="button" (required on ALL buttons)
   - Style: .button-primary, .button-secondary, .button-basic, .button-nav
   - Size: .button-large, 
   
   Examples:
   <a href="#" class="button button-primary">Main CTA</a>
   <button type="submit" class="button button-primary">Submit</button>
   <button type="button" class="button button-secondary">Cancel</button>
*/

/* BASE BUTTON - Required on all buttons/links used as buttons */
.button {
    display: inline-block;
    padding: 0.75rem 1.6rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.5;
    white-space: nowrap;
    margin-top: 0.7rem;
}

.button:hover {
    text-decoration: none;
}

/* Remove button default styles */
button.button {
    border: none;
    background: none;
    font-family: 'Poppins', sans-serif;
}

/* PRIMARY BUTTON - Gradient purple-to-orange (main CTA) */
.button-primary {
    background: linear-gradient(to left, #6d53ffd6, #7b64ffc2 50%, #fd9075 70%, #fd9075);
    background-size: 300% 100%;
    background-position: right;
    color: #f9f9f9;
    border-top: 1px solid #8a7bfd15;
    border-bottom: 1px solid #8a7bfd11;
    box-shadow: 0px 8px 12px #36306376;
    backdrop-filter: blur(15px);
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.7px;
    transition: letter-spacing 0.3s ease-in-out, background-position 0.5s ease-in-out;
}

.button-primary:hover {
    background-position: left;
    letter-spacing: 0.8px;
    box-shadow: 0px 8px 12px #36306376;
}



/* SECONDARY BUTTON - Outlined/transparent */
.button-secondary {
    background: #ffffff24;
    color: #6b51ff;
    border: 2px solid #d0c8fd;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}

section.color .button-secondary {
    color: #fff;
}

section.color .button-secondary:hover {
    border-color: #fff;
}

.button-secondary:hover {
    border-color: #9f8efd;
    color: #9f8efd;
    background: transparent;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}

/* BASIC BUTTON - Simple beige button */
.button-basic {
    background: #f2f2f212;
    color: #333;
    backdrop-filter: blur(15px);
    transition: all 0.4s ease;
}

.button-basic:hover {
    background: #f2f2f2bd;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}



/* NAV BUTTON - Navigation CTA style */
.button-nav {
    padding: 0.25rem 1rem;
    background: linear-gradient(to left, #8773f798, #8a76f9a4 50%, #fd9075 70%, #fd9075);
    background-size: 300% 100%;
    background-position: right;
    color: #f9f9f9;
    border-top: 1px solid #8a7bfd15;
    border-bottom: 1px solid #8a7bfd11;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
    backdrop-filter: blur(15px);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.7px;
    transition: letter-spacing 0.3s ease-in-out, background-position 0.5s ease-in-out;
    margin-top: 0rem;
}

.button-nav:hover {
    background-position: left;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
    color: #f9f9f9
}

/* SIZE MODIFIERS */
.button-large {
    padding: 1rem 2rem;
    font-size: 1.15rem;
    letter-spacing: 1px;
}

.button-large:hover {
    letter-spacing: 1.4px;
}



/* DISABLED STATE */
.button:disabled,
.button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* =================================================================
   BAUKASTEN-SPECIFIC BUTTONS
   ================================================================= */

/* Baukasten Button Base - Use: class="baukasten-button baukasten-primary" */
.baukasten-button {
    display: inline-block;
    padding: 15px 30px;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.5;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Baukasten Primary Button - Gradient purple-to-orange */
.baukasten-primary {
    background: linear-gradient(to left, #8a7bfdad, #8a7bfdad, #fd9075, #fd9075);
    background-size: 260% 100%;
    background-position: right;
    color: #fff;
    box-shadow: 0 4px 15px rgba(159, 142, 253, 0.3);
    transition: background-position 0.8s ease, transform 0.2s ease;
}

.baukasten-primary:hover {
    background-position: left;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(159, 142, 253, 0.4);
    text-decoration: none;
    color: #fff;
}

/* Baukasten Secondary Button - Outlined */
.baukasten-secondary {
    background: transparent;
    color: #666;
    border: 2px solid #e0e0e0;
}

.baukasten-secondary:hover {
    border-color: #9f8efd;
    color: #9f8efd;
    background: transparent;
    text-decoration: none;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}

/* Baukasten Button in Button Groups */
.button-group .baukasten-button {
    flex: 1;
}

/* Baukasten Checkbox Groups */
.checkbox-category {
    margin-bottom: 2rem;
}

.checkbox-category-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
}

.checkbox-category-title.content-category {
    color: #9f8efd;
    border-color: #9f8efd;
}

.checkbox-category-title.functionality-category {
    color: #fd9075;
    border-color: #fd9075;
}

.checkbox-category-title.premium-category {
    color: #050147;
    border-color: #050147;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.checkbox-item:hover {
    background-color: #f5f3ff;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #333;
}

.checkbox-item input[type="checkbox"]:checked + .checkbox-label {
    font-weight: 600;
    color: #050147;
}






/* =================================================================
   TABLES
   ================================================================= */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem; /* 16px at 16px base */
    text-align: left;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

table th,
table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

table thead th {
    background-color: #9f8efd;
    color: white;
    text-align: left;
}

table tbody td:nth-child(2) {
    font-style: normal;
}

table tbody tr:hover {
    background-color: #cac9ef56;
}

table tbody tr.total {
    font-weight: bold;
    background-color: #cac9efb7;
}



/* =================================================================
   HERO SECTION
   ================================================================= */

.hero-text {
    margin-left: 3rem;
}

#hero h1 {
    margin: 7rem 1rem 2rem 0;
    color: #7d66ff;
    max-width: 600px;
    position: relative;
}

/* Hero h1 inherits from #hero h1 above */

h2.subline {
    font-size: 1.6rem;
    color: #2e2a34;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    max-width: 540px;
    text-align: left;
}

p.hero-subtitle {
    font-size: 1.6rem;
    color: #2e2a34;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

#referenzen p.hero-subtitle {
    color: #f2f2f2;
}


.center {
    text-align: center;
}


.small {
    font-size: 0.8rem;
    line-height: 1.5;
    vertical-align: super;
    font-weight: 400;
}

.bottom {
    display: flex;
    margin-top: auto;
    padding-top: 2rem;
}







/* =================================================================
   SECTIONS - ÜBER MICH
   ================================================================= */

.back-about {
    background: #F6F4F2 url('../images/katjadickelsprofile.jpeg') center center no-repeat;
    background-size: cover;
    min-height: 600px;
    height: auto;
    position: relative;
}

.back-about::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, 
            rgba(246, 244, 242, 0.9) 0%, 
            rgba(246, 244, 242, 0.4) 12%, 
            transparent 20%, 
            transparent 80%, 
            rgba(246, 244, 242, 0.4) 88%, 
            rgba(246, 244, 242, 0.9) 100%),
        linear-gradient(to bottom, 
            rgba(246, 244, 242, 0.7) 0%, 
            transparent 10%, 
            transparent 90%, 
            rgba(246, 244, 242, 0.7) 100%);
    pointer-events: none;
}

.back-aboutme {
    position: relative;
    overflow: hidden;
}

.back-aboutme picture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.about-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.back-henriettasteinhart {
    background: url('../images/projectreference_henriettasteinhart.png') center center no-repeat;
    background-size: cover;
    height: auto;
    position: relative;
}

.back-fraurue {
    background: url('../images/projectreference_fraurue.png') center center no-repeat;
    background-size: cover;
    height: auto;
    position: relative;
}

.back-fraurue2 {
    background: url('../images/visitenkarte-fraurue.png') center center no-repeat;
    background-size: cover;
    height: auto;
    position: relative;
}

.ueber .button {
    margin-left: 0;
}

/* =================================================================
   SECTIONS - PROJEKTE / REFERENZEN
   ================================================================= */

.projekte {
    text-align: center;
}
.projekte .button {
    margin-top: 2rem;
}



/* =================================================================
   FLOATING HINT NOTE - TAX DEDUCTION
   ================================================================= */

.floating-hint-note {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) translateX(120%);
    max-width: 280px;
    width: auto;
    background: linear-gradient(135deg, #313031 0%, #0a090a 100%);
    border: 2px solid #060606ab;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}


.floating-hint-note.show {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

.floating-hint-note.hidden {
    transform: translateY(-50%) translateX(120%);
    opacity: 0;
}

.floating-hint-note .hint-content {
    position: relative;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.floating-hint-note .hint-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #f8f4fd;
}

.floating-hint-note .hint-text strong {
    color: #f0eeff;
    text-shadow:
  0 0 5px #6c53ff,
  0 0 10px #6c53ff;
    font-size: 1.2rem;
    display: block;
}

.floating-hint-note .hint-cta {
    display: block;
    color: #e0e0e0;
    margin-top: 0.8rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.floating-hint-note .hint-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #f0f0f0;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.floating-hint-note .hint-close:hover {
    color: #666;
}

.floating-hint-note .hint-icon {
    font-size: 2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}




/* =================================================================
   SECTIONS - SO ARBEITE ICH
   ================================================================= */

section.soarbeiteich {
    padding: 8rem 0;
}

.soarbeiteich h2 {
    margin-top: 20px;
    text-align: center;
}

.soarbeiteich .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
}

.soarbeiteich .column.col_1_3 {
    position: relative;
    flex: 0 0 calc(33.33% - 20px);
    height: 300px;
    max-width: 300px; /* Limit circle size to max 240px */
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

/* Remove left margin from first element in each row */
.soarbeiteich .column.col_1_3:first-child,
.soarbeiteich .column.col_1_3:nth-child(4) {
    margin-left: 0;
}

.soarbeiteich .column.col_1_3::before,
.soarbeiteich .column.col_1_3::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease, transform 0.6s ease;
    z-index: 0;
}

.soarbeiteich .column.col_1_3::before {
    background-image: url('../images/purplecircle.svg'); 
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transform: scale(1);
}

.soarbeiteich .column.col_1_3::after {
    background-image: url('../images/orangecircle.svg');
    opacity: 0;
    transform: scale(0.8) rotate(-90deg);
}

.soarbeiteich .column.col_1_3 h3 {
    font-weight: 600;
    text-transform: uppercase;
    color: #f2f2f2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease;
    z-index: 2;
    opacity: 1;
}



.soarbeiteich .column.col_1_3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(10px);
    text-align: center;
    line-height: 150%;
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 2;
    color: #f2f2f2;
    padding: 0;
    font-size: 1rem;
}

.soarbeiteich .column.col_1_3:hover h3,
.soarbeiteich .column.col_1_3.active h3 {
    opacity: 0 !important;
}

.soarbeiteich .column.col_1_3:hover::before,
.soarbeiteich .column.col_1_3.active::before {
    transform: rotateY(180deg) scale(0.95) !important;
    opacity: 0 !important;
}

.soarbeiteich .column.col_1_3:hover::after,
.soarbeiteich .column.col_1_3.active::after {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
}

.soarbeiteich .column.col_1_3:hover p,
.soarbeiteich .column.col_1_3.active p {
    opacity: 1 !important;
    transform: translate(-50%, -50%) translateY(0) !important;
}





.soarbeiteich h2 {
    margin-bottom: 3rem;
}

/* =================================================================
   WARUM MIT MIR SECTION
   ================================================================= */



.warum-mit-mir h2 {
    text-align: left;
    margin-bottom: 3rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-box {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(159, 142, 253, 0.2);
}

.service-box h3 {
    color: #9f8efd;
    margin-bottom: 1rem;
}

.service-box p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* =================================================================
   MEINE WERTE SECTION
   ================================================================= */


.meine-werte h2 {
    margin-bottom: 1rem;
}

.meine-werte .subline {
    margin-bottom: 3rem;
    font-size: 1.25rem;
    color: #666;
}

.werte-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.werte-box {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    border: 2px solid rgba(159, 142, 253, 0.3);
    box-shadow: 0 2px 8px rgba(159, 142, 253, 0.15);
    transition: all 0.3s ease;
}

.werte-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(159, 142, 253, 0.25);
}

.werte-box h3 {
    color: #9f8efd;
    margin-bottom: 1rem;
}

.werte-box p {
    line-height: 1.7;
    color: #333;
}

/* =================================================================
   OPTIMIZATION OFFER SECTION
   ================================================================= */



.optimization-offer h2 {
    margin-bottom: 1.5rem;
    color: #9f8efd;
}

.optimization-offer p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.optimization-offer a {
    color: #9f8efd;
    font-weight: 600;
}

.optimization-offer a:hover {
    color: #fd9075;
}

.optimization-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.optimization-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(159, 142, 253, 0.2);
}



/* =================================================================
   CERTIFICATION BADGE
   ================================================================= */
img#certi {
    height:60px;
    width: auto;
}


/* =================================================================
   ACCORDION FAQ
   ================================================================= */

.accordion {
    margin: 30px auto 10px auto;
}

.faq {
    background-color: #f9f9f9;
}

.faq a {
    color: #634eff;
}



.toggle {
    display: none;
}
 
.option {
    position: relative;
    border-bottom: 1px solid #ddd;
}
 
.title,
.content {
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.2s;
    font-family: 'Poppins', sans-serif;
}
 
.title {
    padding: 10px 0 10px 30px;
    display: block;
    color: #634eff;
    font-weight: 700;
}
 
.title:after, .title:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 17px;
    width: 2px;
    height: 0.75em;
    background-color: #8a7bfd;
    transition: all 0.2s;
}
 
.title:after {
    transform: rotate(90deg);
}
 
.content {
    max-height: 0;
    overflow: hidden;
}

.content p {
    margin: 0;
    padding: 0 0 1em;
    font-size: 1rem; /* Match base paragraph font size */
    line-height: 1.5;
}

label {
    cursor: pointer;
    margin: 10px 0 10px;
}
 
.toggle:checked + .title + .content {
    max-height: 500px;
}

.toggle:checked + .title:before {
    transform: rotate(90deg) !important;
}

/* =================================================================
   RESPONSIVE IMAGE LAYOUT SYSTEM
   ================================================================= */

.your-class {
    position: relative;
    margin-top: 4rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 25px;
}

.your-class .slide {
    padding: 15px;
    text-align: center;
    outline: none;
}

.your-class .slide img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.your-class .headline {
    margin-top: 1.3rem;
    font-weight: bold;
    text-decoration: none;
}

.your-class a.headline {
    color: #211a2b;
    text-decoration: none;
}

.your-class a.headline:hover {
    text-decoration: none;
}

.your-class .subline {
    font-weight: normal;
    color: #2e2a34;
    display: block;
    font-size: 1rem;
    font-weight: 500;
}

.your-class .subsubline {
    font-weight: 400;
    color: #6c53ff;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: block;
}

.slick-dots {
    text-align: center;
    margin: 20px 0 0 0;
    list-style: none;
    padding: 0;
    position: relative;
    left: 0;
    width: 100%;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    font-size: 0;
    transition: background-color 0.3s ease;
}

.slick-dots .slick-active button {
    background: #9f8efd;
}

/* =================================================================
   BAUKASTEN FORM
   ================================================================= */

/* Baukasten Hero Section */
.baukasten-hero {
    background: linear-gradient(135deg, #9f8efd 0%, #fd9075 100%);
    padding: 120px 0 80px;
    text-align: center;
    color: #fff;
}

.baukasten-hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.baukasten-hero .subline {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
}

/* Baukasten Form Section */
.baukasten-form {
    padding: 70px 0;
    background: #f9f9f9;
}

/* Messages */
.message {
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 40px;
}

.success-message {
    background: #d4edda;
    border: 2px solid #28a745;
    color: #155724;
}

.error-message {
    background: #f8d7da;
    border: 2px solid #dc3545;
    color: #721c24;
}

.message h2 {
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.message .button {
    margin-top: 20px;
}

/* Progress Bar */
.progress-container {
    margin-bottom: 40px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress {
    height: 100%;
    background: linear-gradient(to right, #9f8efd, #fd9075);
    transition: width 0.4s ease;
    border-radius: 10px;
}

.progress-text {
    text-align: center;
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

/* Form Steps */
.step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #333;
}

.step p {
    margin-bottom: 25px;
    color: #333;
}

.step p.small {
    font-size: 0.9rem;
    color: #333;
}

.step p.small a {
    color: #9f8efd;
    text-decoration: underline;
}

/* Form Elements */
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none;
    border-color: #9f8efd;
    box-shadow: 0 0 0 3px rgba(159, 142, 253, 0.1);
}

.form-select.error,
input.error,
textarea.error {
    border-color: #dc3545;
    background: #fff5f5;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* Button Groups in Forms */
.button-group {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.button-group .button {
    flex: 1;
}

/* Summary Box */
.summary-box {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.summary-box h3 {
    color: #9f8efd;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.summary-list {
    list-style: none;
}

.summary-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.6;
}

.summary-list li:last-child {
    border-bottom: none;
}

.summary-list strong {
    color: #333;
    font-weight: 600;
    margin-right: 10px;
}

/* Mini Offer */
.mini-offer {
    background: linear-gradient(135deg, #9f8efd 0%, #fd9075 100%);
    color: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 30px;
}

.mini-offer h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.mini-offer .price {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.mini-offer .small {
    font-size: 0.9rem;
    opacity: 0.9;
}



/* =================================================================
   FOOTER
   ================================================================= */

footer {
    background: #333;
    color: #fff;
    padding: 5rem 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

footer .wrapper {
    max-width: 1400px;
}

footer a {
    color: #fff;
}

footer p, footer a {
    font-size: 0.9rem;
}

footer h2 {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

footer .col_1 {
    text-align: center;
    font-size: 0.9rem;
    margin: 0;
}

/* Footer Divider */
.footer-divider {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-top: 35px;
    margin-bottom: 35px;
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================
   WEBSITE PACKAGES SECTION
   ================================================================= */

/* Packages Grid Layout - Base Styles */
.packages-grid {
    display: grid;
    gap: 2rem;
    margin: 4rem 0 2rem 0;
    grid-template-columns: repeat(2, 1fr); /* Base: 2 columns (2x2 layout) */
}

/* Package Cards */
.package-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-decoration: none !important;
}

.package-card:active {
    transform: translateY(-3px);
}

.package-card *,
.package-card:hover *,
.package-card:focus *,
.package-card:active * {
    text-decoration: none !important;
}

.package-featured {
    border: 2px solid #007acc;
    position: relative;
}



.package-header {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.package-featured .package-header {
    background: linear-gradient(135deg, #9f8efd 0%, #8a7bfd 100%);
    color: white;
    border-bottom: none;
}



.badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #9f8efd 0%, #8a7bfd 100%);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(159, 142, 253, 0.3);
}

.package-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #333;
}

.package-featured .package-name {
    color: white;
}

.package-price {
    font-size: 1.6rem;
    font-weight: bold;
    color: #050147;
}

.package-featured .package-price {
    color: white;
}

.package-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.package-features {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.package-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.package-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    padding-left: 1.5rem;
}

.package-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.package-feedback {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

/* =================================================================
   PACKAGE CARDS LAYOUT - DUPLICATE (using base .packages-grid above)
   ================================================================= */

.package-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    width: 100%; /* Ensure consistent width */
    max-width: 100%; /* Prevent cards from exceeding grid column width */
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.package-featured {
    border-color: #9f8efd;
    /* Removed transform: scale(1.05) to maintain consistent grid layout */
}

.package-featured::before {
    content: "Beliebt";
    position: absolute;
    top: 15px;
    right: -30px;
    background: #9f8efd;
    color: white;
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 10;
}

.package-premium::before {
    content: "Allrounder";
    position: absolute;
    top: 15px;
    right: -38px;
    background: #333333b8;
    color: white;
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 10;
}



.package-features {
    margin-bottom: 20px;
}

.package-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.package-features li {
    padding: 8px 0;
    position: relative;
    padding-left: 20px;
    color: #555;
    line-height: 1.5;
}

.package-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #9f8efd;
    font-weight: bold;
    font-size: 1.1rem;
}

.package-feedback {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
    border-left: 4px solid #9f8efd;
}

.package-featured .package-feedback {
    background: rgba(159, 142, 253, 0.1);
    border-left-color: #9f8efd;
}

.package-premium .package-feedback {
    background: rgba(253, 144, 117, 0.1);
    border-left-color: #fd9075;
}

/* =================================================================
   SLICK SLIDER STYLES (INTEGRATED)
   ================================================================= */

/* Core Slider Styles */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* Slider Arrows */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick';
    font-size: 33px;
    font-weight: bold;
    line-height: .5;
    opacity: .75;
    color: #9f8efd;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
    z-index: 10;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '←';
}

[dir='rtl'] .slick-prev:before {
    content: '→';
}

.slick-next {
    right: -25px;
    z-index: 10;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '→';
}

[dir='rtl'] .slick-next:before {
    content: '←';
}




/* Baukasten CTA Box - Eye-catching call-to-action */
.baukasten-cta {
    margin-top: 4rem;
    background: linear-gradient(135deg, rgba(251, 250, 255, 0.907) 0%, rgba(240, 238, 254, 0.836) 100%);
    border: 2px solid transparent;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 16px;
    padding: 3rem 2rem;
}

/* Subtle animated gradient border effect */
.baukasten-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg, #9f8efd, #fd9075);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.6;
    z-index: 0;
}

.baukasten-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(159, 142, 253, 0.15);
}

.baukasten-cta:hover::before {
    opacity: 1;
}

.baukasten-cta ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.baukasten-cta h3 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 1rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.baukasten-cta p {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.baukasten-cta .button {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}

.baukasten-cta .button:hover {
    box-shadow: 0 6px 25px rgba(159, 142, 253, 0.4);
}

/* Comparison Table */
.table-responsive {
    overflow-x: auto;
}

.packages-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.packages-table th,
.packages-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}

.packages-table th {
    background-color: #9f8efd;
    color: white;
}

.packages-table tbody tr:hover {
    background-color: #cac9ef56;
}

.packages-table td:first-child,
.packages-table th:first-child {
    text-align: left;
}



/* =================================================================
   OPTIONAL MODULES SECTION
   ================================================================= */

.optional-modules {
    margin: 3em 0;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #e9e5ff 0%, #6d53ff4e 100%);
    border-radius: 10px;
}

.optional-modules h3 {
    text-align: center;
    margin-bottom: 2em;
    color: #333;
    font-size: 1.4rem;
}

.module-category {
    margin-bottom: 2.5em;
}

.module-category:last-child {
    margin-bottom: 0;
}

.category-title {
    font-size: 1.1rem;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid;
    display: block;
    width: 100%;
    font-weight: 600;
}

.content-category {
    color: #9f8efd;
    border-color: #9f8efd;
}

.functionality-category {
    color: #fd9075;
    border-color: #fd9075;
}

.premium-category {
    color: #050147;
    border-color: #050147;
}

.support-category {
    color: #333;
    border-color: #333;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2em;
    margin: 1em 0;
}

.module-item {
    padding: 1.5rem;
    border: none;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid;
}

.content-item {
    border-left-color: #9f8efd;
}

.content-item strong {
    color: #9f8efd;
}

.functionality-item {
    border-left-color: #fd9075;
}

.functionality-item strong {
    color: #fd9075;
}

.premium-item {
    border-left-color: #050147;
}

.premium-item strong {
    color: #050147;
}

.support-item {
    border-left-color: #333;
}

.support-item strong {
    color: #333;
}

.module-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.module-item strong {
    font-size: 1.1rem;
}

.module-item small {
    color: #6c757d;
    display: block;
    margin-top: 0.5em;
    font-style: italic;
}

.calendly-badge-widget,
.calendly-badge-widget *,
.calendly-inline-widget,
.calendly-inline-widget *,
.calendly-overlay,
.calendly-overlay *{
    font-size:16px;
    line-height:1.2em}

.calendly-badge-widget iframe,
.calendly-inline-widget iframe,
.calendly-overlay iframe{
    display:inline;
    height:100%;
    width:100%}
    
.calendly-popup-content{
    position:relative}
    
.calendly-popup-content.calendly-mobile{
    -webkit-overflow-scrolling:touch;overflow-y:auto}
    
.calendly-overlay{
    background-color:#a5a5a5;
    background-color:rgba(31,31,31,.4);
    bottom:0;left:0;
    overflow:hidden;
    position:fixed;
    right:0;
    top:0;
    z-index:9999
}

.calendly-overlay .calendly-close-overlay{
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0
}
    
.calendly-overlay .calendly-popup{
    box-sizing:border-box;
    height:90%;
    left:50%;
    max-height:700px!important;
    max-width:1000px;
    min-width:900px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) translateX(-50%);
    width:80%
}



.calendly-overlay .calendly-popup .calendly-popup-content{
    height:100%
}
.calendly-overlay .calendly-popup-close{
    background:url(/assets/external/close-icon.svg) no-repeat;
    background-size:contain;
    color:#fff;
    cursor:pointer;
    height:19px;
    position:absolute;
    right:25px;
    top:25px;
    width:19px}
    


.calendly-badge-widget{
    bottom:15px;
    position:fixed;
    right:20px;
    z-index:9998
}

.calendly-badge-widget .calendly-badge-content{
    border-radius:25px;
    box-shadow:0 2px 5px rgba(0,0,0,.25);
    color:#fff;
    cursor:pointer;
    display:table-cell;
    font-family:sans-serif;
    font-size:14px;
    font-weight:700;
    height:45px;
    padding:0 30px;
    text-align:center;
    vertical-align:middle;
    width:auto
}

.calendly-badge-widget .calendly-badge-content.calendly-white{
    color:#666a73}
    
.calendly-badge-widget .calendly-badge-content span{
    display:block;
    font-size:12px
}

.calendly-spinner{
    left:0;
    position:absolute;
    right:0;
    text-align:center;
    top:50%;
    transform:translateY(-50%);
    z-index:-1
}

.calendly-spinner>div{
    animation:calendly-bouncedelay 1.4s ease-in-out infinite;
    animation-fill-mode:both;
    background-color:#e1e1e1;
    border-radius:50%;
    display:inline-block;
    height:18px;
    vertical-align:middle;
    width:18px
}

.calendly-spinner .calendly-bounce1{
    animation-delay:-.32s
}

.calendly-spinner .calendly-bounce2{
    animation-delay:-.16s
}

@keyframes calendly-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}

/* =================================================================
   MEDIA QUERIES - RESPONSIVE DESIGN
   Base: Laptop (1024px - 1400px) - No media query needed, this is the base
   ================================================================= */

/* 
   BREAKPOINT STRATEGY (Laptop-First):
   
   📱 SMALLER SCREENS (max-width - going down from laptop):
   - ≤1024px (iPad Pro / Small Laptop) - 3 column packages
   - ≤950px (Tablets / Mobile Navigation) - Hamburger menu, stacked layout  
   - ≤768px (iPad / Tablet Portrait) - 2 column packages, mobile styles
   - ≤600px (Large Mobile) - Single column, mobile typography
   - ≤480px (Small Mobile) - Compact mobile styles
   
   🖥️ LARGER SCREENS (min-width - going up from laptop):
   - >1200px (Large Desktop) - 4 column packages
   - >1400px (Extra Large Desktop) - Enhanced layouts
   - >1600px (4K / Ultra Wide) - Maximum wrapper width
   
   Base styles (1024px-1400px) have no media query and are defined above.
*/


/* =================================================================
   LARGER SCREENS: >1600px (Extra Large Desktop / 4K)
   ================================================================= */

@media only screen and (min-width: 1600px) {
    .wrapper {
        max-width: 1500px;
    }

    .hero-text {
        margin-left: 7rem;
    }

    h1 {
        margin-top: 9rem !important;
    }

    p, ul li, a {
        font-size: 1.2rem;
    }

    .your-class .subline, .your-class .subsubline {
        font-size: 1.2rem;
    }
}


/* =================================================================
   LARGER SCREENS: >1400px (Large Desktop)
   ================================================================= */

@media only screen and (min-width: 1400px) {
    #ueber .text-block{
    padding-right: 0;
}
    /* Additional large desktop optimizations can go here */
}

/* Large screens: 4 columns for all packages in one row */
@media (min-width: 1200px) {
    .packages-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


@media only screen and (max-width: 1200px) {
    #hero h1{
        font-size: 3rem;
        margin: 4rem 1rem 2rem 0;
    }

    .hero-text {
        margin-left: 1.5rem;
    }

    h2.subline {
        font-size: 1.4rem;
    }
}

/* =================================================================
   ipad mini SCREENS: ≤1133px (iPad mini)
   ================================================================= */

@media only screen and (max-width: 1133px) {

    .wrapper {
        max-width: 1000px;
    }

    h2 {
        font-size: 2.2rem;
    }

    h2.big {
        font-size: 4rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    .text-block {
        padding: 6rem 3rem 5rem 4rem;
    }

    .baukasten-cta {
        padding: 2rem;
    }

    a.image-background.back-henriettasteinhart {
        background-size: 100%; /* Scale down background image to 100% */
        background-position: center; /* Keep it centered */
    }

    a.image-background.back-fraurue {
        background-size: 100%; /* Scale down background image to 100% */
        background-position: center; /* Keep it centered */
    }

    .column.image-background {
        padding-top: 5rem;
        min-height: 700px;
    }

    .project-item {
        padding: 5rem 4rem;
    }

 
    #logo {
        max-height: 50px;
        width: auto;
        display: flex;
    }

        header.scrolled #logo img {
    max-height: 40px;
}
   

    /* Ensure row stretches to content height */
    #ueber .row {
        display: flex;
        align-items: stretch;
    }

    #ueber .no-gutter .column {
        float: none;
    }

    .back-aboutme {
        position: relative;
        overflow: hidden;
    }

    .back-aboutme picture {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .about-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover;
    }
}



/* =================================================================
   SMALLER SCREENS: ≤1024px (iPad Pro / Small Laptop)
   ================================================================= */

@media only screen and (max-width: 1024px) {
    /* iPad Pro / Small Laptop: Keep 2 columns for 2x2 layout */
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrapper {
        max-width: 900px;
    }
    
    /* Limit circle sizes */
    .soarbeiteich .column.col_1_3 {
        height: 240px;
        max-width: 240px;
    }

    .hero-text {
        margin-left: 2rem;
    }


}


@media (max-width:975px){
    .calendly-overlay .calendly-popup{
        bottom:0;
        height:auto;
        left:0;
        max-height:none;
        min-width:0;
        position:fixed;
        right:0;
        top:50px;
        transform:none;
        width:100%
    }

        .calendly-overlay .calendly-popup-close{
        right:15px;
        top:15px
    }
}

/* =================================================================
   SMALLER SCREENS: ≤950px (Tablets and Mobile Navigation)
   ================================================================= */

@media only screen and (max-width: 950px) {



    /* Desktop navigation hidden on mobile */
    header nav ul {
        display: none;
    }

    section {
        padding: 80px 0 60px 0; /* Added top padding to prevent header overlap */
    }

    /* Special case for hero section - no top padding needed */
    section#hero {
        padding: 0;
        margin-top: 20px;
    }

    section.ueber {
        padding: 0 ; /* Added top padding for header clearance */
    }


#logo {
    display: flex;
}

    
    .light {
        margin: 0;
    }

    /* Ensure ueber section content has proper spacing */
    .ueber .wrapper {
        padding: 0 30px;
    }

    .soarbeiteich .column.col_1_3 h3 {
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.2;
    }

    .soarbeiteich .column.col_1_3 p {
        padding: 0;
        text-align: center;
        line-height: 1.3;
        font-size: 1rem; 
    }

    .soarbeiteich .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        margin-top: 10px;
    }

    

    .soarbeiteich .column.col_1_3 {
        margin: 0 !important;
        max-width: 300px !important;
        align-content: space-between;
align-items: center;
    }

    p.hero-subtitle {
        font-size: 1.4rem;
    }

}


/* =================================================================
   SMALLER SCREENS: ≤768px (iPad / Tablet Portrait)
   ================================================================= */

@media (max-width: 768px) {
    /* Button text wrapping for mobile */
    .button {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        line-height: 1.4;
        padding: 0.75rem 1rem;
    }

    /* Mobile/Tablet Portrait: Vertical Stack Layout for slides (slider disabled) */
    .your-class .slide {
        display: block !important;
        width: 100% !important;
        margin: 1.5rem auto !important;
        max-width: 450px;
        padding: 15px;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        /* Reset any slider positioning */
        position: static !important;
        transform: none !important;
        left: auto !important;
        opacity: 1 !important;
        float: none !important;
    }

    /* Hide slider controls on mobile/tablet */
    .slick-prev,
    .slick-next,
    .slick-dots {
        display: none !important;
    }

    /* Hamburger Menu for Tablet and Mobile */
    .hamburger-menu {
        display: flex;
        position: static; /* Remove fixed positioning so it participates in flex layout */
    }

    /* Desktop navigation hidden on mobile - hide the nav element, not just the ul */
    header nav {
        display: none; /* This removes the nav from the flex layout entirely */
    }

    /* Mobile navigation overlay styling */
    #logo {
        display: flex;
    }

    header {
        display: flex; /* Maintain flex layout */
        justify-content: space-between; /* Keep logo left, hamburger right */
        align-items: center; /* Vertically center items */
        background-color: none;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0.4rem 2rem;
    }

    header.scrolled {
        background-color: transparent;
        box-shadow: none;
    }

    #nav-menu {
        position: fixed;
        top: 60px;
        right: 30px;
        width: fit-content;
        height: auto;
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        transform: translateY(-20px);
        opacity: 0;
        z-index: 1000;
        display: flex;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border-radius: 9px;
        transition: all 0.3s ease-in-out;
        visibility: hidden;
        pointer-events: none;
    }

    #nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile navigation styling */
    #nav-menu ul {
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 1rem 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
    }

    #nav-menu ul li {
        margin: 0;
        border-bottom: 1px solid rgba(202, 201, 239, 0.2);
        padding: 0;
    }

    #nav-menu ul li:last-child {
        border-bottom: none;
    }

    #nav-menu ul li a {
        font-size: 1rem;
        color: #333;
        display: block;
        padding: 10px 30px;
        transition: all 0.3s ease;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-align: right;
    }



    #nav-menu ul li a:hover {
        color: #fd9075;
        background-color: rgba(253, 144, 117, 0.1);
        transform: none;
    }

    /* Add animation for menu items */
    #nav-menu.active ul li {
        animation: slideInFromTop 0.4s ease-out forwards;
        opacity: 0;
    }

    #nav-menu.active ul li:nth-child(1) { animation-delay: 0.1s; }
    #nav-menu.active ul li:nth-child(2) { animation-delay: 0.15s; }
    #nav-menu.active ul li:nth-child(3) { animation-delay: 0.2s; }
    #nav-menu.active ul li:nth-child(4) { animation-delay: 0.25s; }

    @keyframes slideInFromTop {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Grid System Responsive */
    .col_1_2,
    .col_1_3,
    .col_2_3,
    .col_1_4,
    .col_3_4,
    .no-gutter .col_1_2,
    .no-gutter .col_1_3,
    .no-gutter .col_2_3,
    .no-gutter .col_1_4,
    .no-gutter .col_3_4 {
        width: 100% !important;
        max-width: 100%;
    }

    /* Packages grid responsive */
    .packages-grid {
        margin: 40px auto 30px auto;
        gap: 20px;
        grid-template-columns: repeat(2, 1fr); /* 2 columns for 2x2 layout */
        padding: 0; /* Remove any inherited padding */
    }

    .packages p {
                text-align: center;
    }

    /* Leistungen section - centered with consistent side spacing */
    .leistungen .wrapper {
        max-width: 550px;
        text-align: center;
    }

    .leistungen p {
        padding: auto 25px !important;
    }

    .leistungen ul li {
        text-align: center;
    }


    .leistungen .button {
        margin: 20px auto 40px auto;
    }

    .leistungen .column.col_1_2 {
        margin-left: 0;
        padding-left: 0;
    }

    .leistungen hr.full {
        display: inline-block;
    }




    .package-card {
        margin-bottom: 40px;
        float: none;
    }

    .wrapper {
    max-width: 800px;
    padding: 0 !important;
}






    /* Typography Responsive - Tablet/Small Laptop */
    h1 {
        font-size: 2.7rem; /* 44px - good for tablets */
        line-height: 1.2;
        padding-right: 0rem;
        text-align: left;
    }
    
    h2 {
        font-size: 2rem; /* 28px - reduced from 32px */
        margin-bottom: 1rem;
        text-align: left;
    }

    h2.subline {
        text-align: left;
    }

    h3 {
        font-size: 1.6rem; /* 26px - good hierarchy */
        margin-bottom: 0.8rem;
    }

    .leistungen h3 {
        margin-bottom: 2rem;
    }

    h3.line:after {
        display: none;
    }

    h4 {
        font-size: 1.3rem; /* 22px */
    }

    h5 {
        font-size: 1.1rem; /* 18px */
    }

    h6 {
        font-size: 1rem; /* 16px */
    }

    p, a, ul li {
        font-size: 1rem; /* 16px - optimal reading size */
        line-height: 1.7;
    }



    table th, 
    table td {
        font-size: 1rem; /* Match p, a, ul li */;
    }

 

    section ul,
    section ol {
        font-size: 1rem; /* Match p, a, ul li */
    }

    /* FAQ Label Titles Responsive */
    .title {
        font-size: 1rem; /* Match p, a, ul li for tablet */
    }
    
    /* FAQ Content Responsive */
    .content p {
        font-size: 1rem; /* Match paragraph font size for tablet */
    }

    /* Hero Section for Tablets */
    #hero h1 {
        font-size: 3rem; /* 48px - impactful on tablets */
        margin: 6rem 1rem 1rem 4rem;
        line-height: 1.1;
        max-width: 400px;
    }

    .column.col_1_2.back-hero.right-column {
        display: none;
    }

    .soarbeiteich .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px; /* Consistent gap */
        margin: 0;
        min-height: 240px; /* Row height matches circle height */
    }

    .soarbeiteich .column.col_1_3 {
        flex: 0 0 calc(50% - 10px) !important; /* Exactly 2 columns - simplified calculation */
        height: 240px; /* 240x240 for tablets */
        margin: 0 !important; /* Remove all margins */
    }

    /* Move first and fourth circles left by 10px for gap fix */
    .soarbeiteich .column.col_1_3:first-child,
    .soarbeiteich .column.col_1_3:nth-child(4) {
        transform: translateX(-10px);
    }

    .soarbeiteich .column.col_1_3 h3 {
        font-size: 1.1rem;
        text-align: center;
    }

    .soarbeiteich .column.col_1_3 p {
        font-size: 1rem;
        padding: 0 1px; /* Added padding for better text fit */
        text-align: center;
        line-height: 1.3;
    }

    .soarbeiteich h2 {
        margin-bottom: 3rem;
    }


    /* Footer Responsive - Clean Layout */
    footer {
        padding: 40px 20px 30px 20px;
        text-align: center;
    }

    footer .wrapper {
        max-width: 100%;
        padding: 0;
    }

    footer .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    footer .column {
        width: 100% !important;
        margin: 0;
        text-align: center;
        float: none !important;
    }

    footer h2 {
        font-size: 1.15rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    footer p {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 0.8rem;
        text-align: center;
    }

    footer a {
        font-size: 0.8rem;
        text-align: center;
        display: inline-block;
        margin-bottom: 0.8rem;
        padding: 0.3rem 0;
        min-height: 44px;
        line-height: 1.7;
    }

    footer .col_1 {
        font-size: 0.8rem; /* Same as other footer text */
        margin: 20px 0 0 0;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        text-align: center;
        width: 100% !important;
    }

    /* Ensure ueber section content has proper spacing */
    .ueber .wrapper {
        padding: 0 30px;
    }


    
    .packages-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
    }


    
    .floating-hint-note.show {
        transform: translateY(0);
    }
    
    .floating-hint-note.hidden {
        transform: translateY(120%);
    }
    
    .floating-hint-note .hint-content {
        padding: 1rem;
    }
    
    .floating-hint-note .hint-text {
        font-size: 0.85rem;
    }

    .floating-hint-note {
    left: 5px;
    right: 5px;
    top: auto;
    bottom: 70px;
    max-width: none;
    width: auto;
    transform: translateY(120%);
    margin: auto 4rem;
}



    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-box {
        padding: 1.5rem;
    }
    
    .werte-grid {
        grid-template-columns: 1fr;
    }
    
    .werte-box {
        padding: 1.5rem;
    }

    .baukasten-hero h1 {
        font-size: 2rem;
    }
    
    .baukasten-hero .subline {
        font-size: 1rem;
    }
    
    .step h2 {
        font-size: 1.5rem;
    }
    
    .button-group {
        flex-direction: column;
    }
    
    .button-secondary,
    .cta-button {
        width: 100%;
    }
    
    .mini-offer .price {
        font-size: 2rem;
    }
    
    /* Baukasten CTA responsive */
    .baukasten-cta {
        margin-top: 3rem;
        padding: 2rem 1.5rem;
    }
    
    .baukasten-cta h3 {
        font-size: 1.4rem;
    }
    
    .baukasten-cta p {
        font-size: 1rem;
    }
}

/* =================================================================
   SMALLER SCREENS: ≤600px (Large Mobile)
   ================================================================= */

@media only screen and (max-width: 600px) {
    /* Hide comparison table on mobile */
    section.comparison-table {
        display: none;
    }

    /* Reduce project-item padding for mobile */
    .project-item {
        padding: 2rem 60px !important;
    }

    /* Load smaller hero image on mobile for faster loading */
    .back-hero {
        background: url('../images/back-hero_desktop3_mobile.png') center center no-repeat,
        radial-gradient(circle at center, #9e92f9d5 10%, #9e92f965 35%, #f9f9f9 55%, #f9f9f90f 70%, #f9f9f900 85%);
        background-size: cover;
    }

    /* WebP support for mobile - even smaller! */
    @supports (background-image: url('test.webp')) {
        .back-hero {
            background: url('../images/back-hero_desktop3_mobile.webp') center center no-repeat,
            radial-gradient(circle at center, #9e92f9d5 10%, #9e92f965 35%, #f9f9f9 55%, #f9f9f90f 70%, #f9f9f900 85%);
            background-size: cover;
        }
    }

    /* Load smaller background image for referenzen page on mobile */
    .back-henriettasteinhart {
        background: url('../images/projectreference_henriettasteinhart_mobile.png') center center no-repeat;
        background-size: cover;
    }

    /* Also use mobile version for back-projekt class */
    .back-projekt {
        background: url('../images/back-henriettasteinhart_mobile.png') center center no-repeat;
        background-size: cover;
    }

    .back-fraurue {
        background: url('../images/projectreference_fraurue_mobile.png') center center no-repeat;
        background-size: cover;
    }

    .back-fraurue2 {
        background: url('../images/visitenkarte-fraurue_mobile.png') center center no-repeat;
        background-size: cover;
    }

    /* Hamburger Menu Responsive - Fixed Position */
    .hamburger-menu {
        position: fixed;
        width: 28px;
        height: 19px;
        top: 2rem;
        right: 2rem;
        z-index: 1001;
    }

    #logo {
        max-height: 45px;
        width: auto;
        display: flex;
        position: relative;
        top: 1.2rem;
        left: 1rem;
    }


    /* Disable header positioning and effects on mobile */
    header {
        position: static; /* Disable sticky positioning */
        box-shadow: none !important; /* Remove shadow */
        padding: 0; /* Remove padding since hamburger is fixed */
        height: 0;
    }

    /* Disable all header scroll effects */
    header.scrolled {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    header.sticky-header {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Show "Start" link only in mobile menu */
    #nav-menu ul li.mobile-only {
        display: block;
    }

    /* Layout Responsive */

    /* All columns full width on mobile */
    .column,
    .col_1_2,
    .col_1_3,
    .col_2_3 {
        width: 100% !important;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Image background columns need min-height to be visible on mobile */
    .column.image-background,
    a.column.image-background {
        min-height: 400px;
        padding: 4rem 1.5rem 0 1.5rem;
        display: block;
    }

    .back-henriettasteinhart,
    .back-fraurue {
        background-size: cover;
        background-position: center;
    }

    /* Reorder columns on mobile - image backgrounds come first */
    .row {
        display: flex;
        flex-direction: column;
    }

    /* Exception: Keep soarbeiteich row as flexbox row layout */
    .soarbeiteich .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .row .column.image-background,
    .row a.column.image-background {
        order: -1; /* Images appear before other content */
    }

    .row .column.project-details {
        order: 0; /* Text content comes after images */
    }

    /* Overlap Hint text block on background image */
    .column.hint {
        position: relative;
        z-index: 10;
        order: 1; /* Place after background image */
        margin-top: -146px; /* Overlap onto the background below */
        padding: 2rem;
        background: rgba(255, 255, 255, 0.6); /* Semi-transparent white background */
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    .column.back-cms3 {
        order: 0; /* Background image comes first */
        min-height: 500px; /* Ensure enough height for overlap */
    }

    .wrapper {
        max-width: 70vw; /* Constrain content width on mobile */
        margin: 0 auto; /* Center the content */
    }

    section {
        padding: 40px 0 40px 0; /* Added top padding to prevent header overlap */
    }

    /* Special case for hero section */
    section#hero {
        padding: 0;
        margin-top: 0rem;
    }



    a.button.button-nav {
        margin: 0rem auto;
        border-radius: 4px;
    }

    section.ueber {
        padding-top: 0;
        margin-top: 0;
    }

    /* Button Responsive - Full width on mobile */
    .button {
        font-size: 1rem;
        padding: 1rem 2.5rem;
        margin: 1.5rem 0;
        display: block;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .logo {
    max-height: 50px;
    width: auto;
    }

    .siegel {
        height: 50px;
        width: auto;
    }

    .modules-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    }

    .optional-modules {
    padding: 1.5rem 1rem;
    }

    .module-item {
        padding: 1rem;
    }

    .baukasten-cta {
        padding: 1rem 1.5rem;
    }

    .baukasten-cta h3 {
        padding-top: 1rem;
    }

    /* Typography Responsive - Tablet/Small Desktop */
    h1 {
        font-size: 2.5rem; /* 40px - good for tablets */
        line-height: 1.3;
        text-align: center;
    }
    
    h2 {
        font-size: 2rem; 
        margin-bottom: 1rem;
    }

    h2.medium {
        font-size: 2.7rem;
    }


    h3 {
        font-size: 1.5rem; 
        margin-bottom: 0.4rem;
    }

    .project-gallery h3 {
        font-size: 1.8rem; 
    }

    .project-gallery h3.subline {
        font-size: 1.3rem; 
    }

    h4 {
        font-size: 1.25rem; /* 20px */
    }

    h2.big {
        font-size: 3rem; /* 48px */
    }

    .project-gallery h4 {
        font-weight: bold;
        margin-top: 3rem;
    }

    h5 {
        font-size: 1.125rem; /* 18px */
    }

    h6 {
        font-size: 1rem; /* 16px */
    }

    p, ul li {
        font-size: 1rem; /* 16px - optimal reading size */
        margin-bottom: 0.5rem;
    }

    a {
        margin-bottom: 0;
    }

    .centered {
    text-align: center !important;
}

    /* Proper German hyphenation for mobile */
    p, h5, h6 {
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    p.subline, p.hero-subtitle {
        hyphens: none;
    }


    p.hero-subtitle {
        font-size: 1.2rem;
    }

    .text-block {
        padding: 4rem 2.5rem;
    }

    section ul,
    section ol {
        font-size: 1rem; /* Match p, a, ul li */
    }

    /* FAQ Label Titles Responsive */
    .title {
        font-size: 1rem; /* Match p, a, ul li for mobile */
    }
    
    /* FAQ Content Responsive */
    .content p {
        font-size: 0.9rem; /* Match paragraph font size for mobile */
    }

    .column.col_1_2.back-projekt.right-column {
        display: none;
    }

    .soarbeiteich .column.col_1_3 {
        flex: 0 0 100%; /* Full width on mobile */
        width: 100% !important;
        height: 190px; /* Maintain good bubble size on mobile */
        margin: 0 auto 20px auto; /* Center and add bottom spacing */
        max-width: 190px; /* Prevent bubbles from getting too wide */
        display: flex; /* Ensure proper centering */
        justify-content: center; /* Center the bubble horizontally */
        align-items: center; /* Center the bubble vertically */
    }

    .soarbeiteich .column.col_1_3 h3 {
        font-size: 1.2rem;
        text-align: center;
    }

    .soarbeiteich .column.col_1_3 p {
        padding: 0; 
        text-align: center;
        font-size: 1rem;
        line-height: 1.3;
    }

    

    /* Mobile hover states */
    .soarbeiteich .column.col_1_3:hover h3,
    .soarbeiteich .column.col_1_3.active h3 {
        opacity: 0;
    }

    .soarbeiteich .column.col_1_3:hover::before,
    .soarbeiteich .column.col_1_3.active::before {
        transform: rotateY(180deg) scale(0.95);
        opacity: 0;
    }

    .soarbeiteich .column.col_1_3:hover::after,
    .soarbeiteich .column.col_1_3.active::after {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    .soarbeiteich .column.col_1_3:hover p,
    .soarbeiteich .column.col_1_3.active p {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    /* Responsive Image Layout - Mobile Enhancement */
    .your-class .slide {
        margin: 1rem auto;
        max-width: 350px;
        padding: 10px;
    }

    .your-class {
        padding: 0;
    }

    section.projekte h2 {
        text-align: center;
    }

    /* Footer Responsive */
    footer {
        padding: 30px 15px 20px 15px;
        text-align: center;
    }

    footer .wrapper {
        max-width: 100%;
        padding: 0;
    }

    footer .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    footer .column {
        width: 100% !important;
        margin: 0;
        text-align: center;
        float: none !important;
    }

    footer h2 {
        font-size: 1rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    footer p, footer a {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 0.6rem;
        text-align: center;
    }



    footer .col_1 {
        margin: 20px 0 0 0;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        width: 100% !important;
    }

    /* Table responsive for mobile */
    table {
        font-size: 0.85rem; /* Match mobile paragraph font size */
        overflow-x: auto;
        display: block;
        white-space: nowrap;
        width: 100%;
        max-width: 100%;
    }



    /* Specific optimization for package tables */
    .packages table {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

        table th,
    table td {
        padding: 6px 8px;
        min-width: 100px;
        word-wrap: break-word;
        white-space: normal;
        font-size: 0.85rem; /* Match mobile paragraph font size */
    }
    .packages table th,
    .packages table td {
        padding: 4px 6px;
        font-size: 0.7rem; /* 11px equivalent */
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .packages table th:first-child,
    .packages table td:first-child {
        width: 15%;
        min-width: 50px;
    }

    .packages table th:nth-child(2),
    .packages table td:nth-child(2) {
        width: 20%;
        min-width: 60px;
    }

    .packages table th:nth-child(3),
    .packages table td:nth-child(3) {
        width: 40%;
    }

    .packages table th:nth-child(4),
    .packages table td:nth-child(4) {
        width: 25%;
    }

    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100%;
        word-wrap: break-word;
    }


    body {
        max-width: 100%;
        overflow-x: hidden;
    }



    /* Packages grid mobile */
    .packages-grid {
        margin: 30px auto 20px auto;
        gap: 15px;
        grid-template-columns: 1fr; /* Single column on mobile */
        padding: 0;
    }

    .package-card {
        max-width: 100%;
        width: 100%; /* Ensure full width in single column layout */
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Leistungen section - consistent side spacing on mobile */
    .leistungen .wrapper {
        max-width: 100%;
    }

    section {
        padding-top: 80px; 
        padding-bottom: 50px;
    }

    section.soarbeiteich {
        padding-top: 80px;
        padding-bottom: 50px;
}

    h3.line {
        margin-bottom: 2rem;
    }


    #hero h1 {
        font-size: 2.8rem; /* 30px - smaller but still impactful */
        margin: 5rem 0 1.5rem 0; /* Increased top margin for header clearance */
        line-height: 1.1;
        max-width: none;
    }

    h2.subline {
        max-width: none;
        line-height: 1.2;
        margin-bottom: 2rem;
    }

    #referenzen h2.subline {
        font-size: 1.3rem;
    }

    #ueber h2, #ueber h2.subline {
        text-align: left;
    }

    .hero-text {
        margin: 0;
    }


}

/* =================================================================
   SMALLER SCREENS: ≤480px (Small Mobile)
   ================================================================= */

@media only screen and (max-width: 440px) {
    /* Hamburger Menu for Small Mobile */
    .hamburger-menu {
        width: 26px;
        height: 18px;
    }


    .hamburger-line {
        height: 1.8px;
    }

    #nav-menu ul {
        gap: 10px;
        padding: 20px 8px;
        min-width: fit-content;
    }

    #nav-menu ul li a {
        font-size: 1.2rem;
        padding: 10px 12px;
    }

    /* Layout Responsive */
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .wrapper {
        max-width: 80vw !important;
    }

    section {
        padding: 6rem 0; /* Added top padding to prevent header overlap */
    }

    section#impressum-datenschutz {
        padding: 4rem; /* Added top padding to prevent header overlap */
    }

    section#impressum-datenschutz h2 {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }    

    section#impressum-datenschutz h3 {
        margin-top: 1rem;
        font-weight: bold;
    }

    section#impressum-datenschutz p,
    section#impressum-datenschutz h2,
    section#impressum-datenschutz h3 {
        text-align: left;
    }

    .column.col_1_2.width-800 {
        width: 100%;
        padding: 3rem 0;
    }

    .accordion {
    margin: 0 auto 0 auto;
}

    .back-about {
        min-height: 300px;
    }

    .back-hero {
        min-height: 50vh;
        background-blend-mode: hue;
    }

    .back-cms {
        min-height: 50vh;
        background-blend-mode: hue;
    }

    .baukasten-cta .button{
        font-size: 1rem;
    }

    .baukasten-cta {
        padding-bottom: 0;
    }



    h2.line:after {
        display: none;
    }

    h2.big {
    font-size: 2.7rem; /* 48px */
    }

    .hint h3{
        text-align: center;
    }

    .module-item {
    padding: 1rem;
    }

    .module-item strong {
        font-size: 1rem;
    }

    .calendly-badge-widget {
        position: fixed !important; /* Keep - needed to override base Calendly styles */
        bottom: 15px !important; /* Keep - needed to override base Calendly styles */
        left: 0 !important; /* Keep - needed to override base Calendly styles */
        right: 0 !important; /* Keep - needed to override base Calendly styles */
        margin: 0 auto;
        transform: none;
        width: 300px;
        max-width: calc(100% - 40px);
    }

    .calendly-badge-widget .calendly-badge-content {
        height: auto;
        margin: 0;
        width: 100%;
        padding: 1rem !important; /* Keep - Calendly has inline styles */
        box-sizing: border-box;
        text-align: center;
        display: flex;
        flex-direction: column; /* Stack content vertically */
        justify-content: center;
        align-items: center;
    }

    .calendly-badge-content {
        padding: 1rem !important; /* Keep - Calendly has inline styles */
    }



    /* Special sections */
    section#hero {
        padding: 0;
        margin-top: 0;
    }


    /* Typography Responsive - Very Small Mobile */


    .packages h2, .packages h3 {
        text-align: center;
    }



    h2 {
        margin-bottom: 2rem;
        margin-top: 1rem;
        text-align: left;
        font-size: 1.7rem; /* 22px - slightly smaller for small mobile */
    }

    h2.subline {
        text-align: left;
        font-size: 1.15rem;
        max-width: none;
        line-height: 1.2;
        margin-bottom: 2rem;
    }


    h3 {
        font-size: 1.4rem; /* 18px - readable but compact */
        margin-bottom: 0.5rem;
    }


    h5 {
        font-size: 1.2rem; /* 14.4px */
    }

    h6 {
        font-size: 1rem; /* 13.6px */
    }

    p, a, ul li {
        font-size: 1rem; /* 14px - minimum readable size */
        line-height: 1.4;
    }

    /* Proper German hyphenation for mobile */
    p, h5, h6 {
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    h4.category-title {
        hyphens: none;
        display: block;
    }


    #ueber .text-block {
        padding: 6rem 2.5rem;
    }
    p.subsubline {
        margin-bottom: 0;
    }

    .packages p.small.bottom {
        text-align: left;
        align-self: flex-start;
    }

  

    section ul,
    section ol {
        font-size: 1rem; /* Match p, a, ul li */
    }

    /* FAQ Label Titles Responsive */
    .title {
        font-size: 1rem; /* Match p, a, ul li for small mobile */
    }
    
    /* FAQ Content Responsive */
    .content {
        max-height: 0; /* Collapsed state */
    }

    .toggle:checked + .title + .content {
        max-height: none; /* Allow full height when expanded on small screens */
    }

    .content p {
        font-size: 0.9rem; /* Match paragraph font size for small mobile */
        word-wrap: break-word;
        word-break: normal;
        margin-left: 2rem;
    }

    .content ul li {
        font-size:  0.9rem;
        margin-left: 2rem;
        margin-bottom: 1rem;
    }

    .content ul {
        list-style: none;
    }

    .faq a {
        font-size: 0.9rem;
    }

    #hero h1 {
        font-size: 2.6rem; /* 30px - smaller but still impactful */
        margin: 5rem 0 1.5rem 0; /* Increased top margin for header clearance */
        line-height: 1.05;
        max-width: none;
        text-align: center;
    }

    h1 {
        font-size: 1.9rem; /* 40px - good for tablets */
        line-height: 1.2;
        text-align: left;
    }

    h4 {
        margin-top: 0;
    }

    .project-gallery h4 {
        margin-top: 0;
    }

    #hero .no-gutter .column {
        padding: 3rem;
    }



    .hero-text {
        margin: 0;
    }

    #hero a.button {
        margin: 1rem auto;
        font-size: 1rem;
        padding: 1rem 2rem;
    }

    .ueber .button {
    margin-left: auto;
}

    /* "So arbeite ich" Section - Small Mobile */
    .soarbeiteich .row {
        gap: 20px;
        margin-top: 0px;
        min-height: 380px; /* Row height matches circle height */
    }

    .soarbeiteich .column.col_1_3 {
        flex: 0 0 100% !important; /* Full width on small mobile */
        width: 100% !important;
        height: 300px; /* 190x190 for small mobile */
        margin: 0 auto 15px auto;
        max-width: 380px; /* Smaller max-width for small screens */
        display: flex; /* Ensure proper centering */
        justify-content: center; /* Center the bubble horizontally */
        align-items: center; /* Center the bubble vertically */
    }

    .soarbeiteich .column.col_1_3:first-child, .soarbeiteich .column.col_1_3:nth-child(4) {
        transform: none; /* Remove left shift on small mobile */
    }




    /* Button Responsive */
    .button {
        padding: 1rem 2rem;
        display: block;
        margin: 2rem auto;
    }

    .button-large {
        letter-spacing: normal;
    }

    /* Footer Responsive for Small Mobile */
    footer {
        padding: 25px 10px 15px 10px;
        text-align: center;
    }

    footer .wrapper {
        max-width: 100%;
        padding: 0;
    }

    footer .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    footer .column {
        width: 100% !important;
        margin: 0;
        text-align: center;
        float: none !important;
    }

    footer h2 {
        font-size: 1rem;
        margin-bottom: 0.7rem;
        text-align: center;
    }

    footer p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.4rem;
        text-align: center;
    }

    footer a {
        font-size: 0.9rem;
        text-align: center;
    }

    footer .col_1 {
        font-size: 0.9rem; /* Same as other footer text */
        margin: 10px 0 0 0;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        text-align: center;
        width: 100% !important;
    }

    /* Table responsive for very small screens */
    table {
        font-size: 0.65rem;
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    table th,
    table td {
        padding: 3px 4px;
        font-size: 0.65rem;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .packages table th:first-child,
    .packages table td:first-child {
        width: 20%;
        min-width: 60px;
    }

    .packages table th:nth-child(2),
    .packages table td:nth-child(2) {
        width: 18%;
        min-width: 50px;
    }

    .packages table th:nth-child(3),
    .packages table td:nth-child(3) {
        width: 45%;
    }

    .packages table th:nth-child(4),
    .packages table td:nth-child(4) {
        width: 25%;
    }

    /* Responsive Image Layout - Extra Small Mobile Enhancement */
    .your-class .slide {
        margin: 1rem auto;
        max-width: 280px;
        padding: 6px 0;
    }

    .your-class .slide .headline {
        font-size: 1rem;
        margin-top: 0.3rem;
    }

    .your-class .slide .subline {
        font-size: 0.95rem;
    }

    /* Ensure ueber section content has proper spacing */
    .ueber .wrapper {
        padding: 0 auto;
    }

    /* Packages grid small mobile */
    .packages-grid {
        margin: 20px 0 15px 0;
        gap: 20px;
        padding: 0;
        width: 100%;
    }

    .package-card {
        width: 100%;
        margin-bottom: 20px;
    }
}