/* --- Layout Structure --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

/* --- Global Layout: The Bulletproof Sticky Footer --- */
body, html {
    min-height: 100vh; /* Changed from height: 100vh so the homepage can scroll! */
    margin: 0;
    overflow-x: hidden; 
}

/* Turn the body into a full-height flex column */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Make sure the hero doesn't get crushed by the flex layout */
.hero-wrapper {
    flex-shrink: 0;
}

.main-footer, .sand-bottom {
    flex-shrink: 0;
}

/* =========================================
   SHRUNKEN HERO (Fixed Nav + Overlapping Card)
   ========================================= */

/* 1. The Wrapper fills exactly one screen height */
.hero-wrapper.hero-shrunken {
    height: 100vh;
    min-height: 100vh;
    position: relative;
    display: block; 
    background-color: #ffffff;
}

/* 2. The Sky (Nav) is now FIXED to follow you down the page */
.hero-wrapper.hero-shrunken .air-section {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; 
    background-color: rgba(255, 255, 255, 0.98); 
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    align-items: center;
    padding: 0 50px;
    box-sizing: border-box;
    z-index: 1000; 
}

/* Pull logo out of the flow and pin it left */
.hero-wrapper.hero-shrunken .header-content {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    flex: unset; 
}

.hero-wrapper.hero-shrunken .main-logo {
    max-width: 150px; 
}

.hero-wrapper.hero-shrunken .nav-anchor {
    width: auto;
    padding-bottom: 0; 
}

.hero-wrapper.hero-shrunken .nav-links a::after {
    top: 120px; 
}

/* 3. The Water fills exactly as much space as it needs to stay crisp */
.hero-wrapper.hero-shrunken .water-section {
    position: absolute;
    top: 70px; 
    left: 0;
    width: 100%;
    height: 55vh; 
    min-height: 450px; 
    z-index: 1; 
    display: block;
}

/* Hide plants on subpages */
.hero-wrapper.hero-shrunken .plant-overlay {
    display: none; 
}

/* =========================================
   APP-LIKE SUBPAGE LAYOUT (FROZEN BODY)
   ========================================= */

/* Lock the document from scrolling ONLY on subpages */
body:has(.hero-shrunken) {
    height: 100vh;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
}

/* Turn the hero wrapper into a permanent, fixed background layer */
body:has(.hero-shrunken) .hero-wrapper.hero-shrunken {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

/* Ensure the footer and sand stay visible and docked at the bottom */
body:has(.hero-shrunken) .sand-bottom,
body:has(.hero-shrunken) .main-footer {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* =========================================
   CLEAN OVERLAPPING CONTENT CARD (SCROLLABLE)
   ========================================= */

/* The white card becomes the ONLY scrollable element on the screen */
main.category-content {
    display:flex;
    flex-direction:column;

    position: relative;
    z-index: 20;
    
    /* Layout */
    flex: 1;
    box-sizing: border-box;
    margin: 150px auto -40px auto; 
    width: calc(100% - 100px); 
    max-width: 1300px;
    
    /* Internal Scrolling */
    overflow-y: auto; 
    height: auto; 
    
    /* Visuals */
    background-color: rgba(255, 255, 255, 0.96); 
    border-radius: 18px; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); 
    padding: 30px 30px !important;
    color: #4a5a6a;
    
    /* Custom Premium Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #008eb0 transparent;
}

/* Webkit scrollbar rules for Chrome/Safari/Edge */
main.category-content::-webkit-scrollbar {
    width: 6px;
}
main.category-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 20px 0; 
}
main.category-content::-webkit-scrollbar-thumb {
    background-color: #008eb0; 
    border-radius: 10px;
}

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

.hero-wrapper {
    position: relative;
    height: 100vh; 
    display: flex;
    flex-direction: column; 
    background-color: #ffffff; 
}

/* --- Top Section (Air) --- */
.air-section {
    flex: 0 0 45%; 
    background-color: transparent; 
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.header-content {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    text-align: center;
}

.main-logo {
    max-width: 550px; 
    height: auto;
    display: block;
}

.slogan {
    margin-top: 5px;
    color: #cda45e; 
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    font-family: 'Helvetica Neue', sans-serif;
}

/* Navigation Bar */
.nav-anchor {
    width: 100%;
    padding-bottom: 20px; 
    background: transparent;
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 50px; 
    padding: 0;
    margin: 0;
}

.nav-links a {
    position: relative; 
    display: inline-block; 
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: #4a5a6a;
    font-size: 0.85rem;
    font-weight: 500; 
    letter-spacing: 2px; 
    text-transform: uppercase;
    
    will-change: transform; 
    transform: scale(1.0001); 
    backface-visibility: hidden; 
    -webkit-font-smoothing: antialiased; 
    
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
    transition: color 0.25s ease-in-out, transform 0.25s ease-in, text-shadow 0.25s ease-in-out;
}

/* The Hover Effect */
.nav-links a:hover, 
.nav-links a.active {
    color: #008eb0;
    transform: scale(1.1); 
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.15); 
}

/* Custom Reflection */
.nav-links a::after {
    content: attr(data-text); 
    position: absolute;
    left: 0;
    text-shadow: none;   
    top: 120px; 
    white-space: nowrap;
    width: max-content;
    color: rgba(74, 90, 106, 0.4); 
    transform-origin: top;
    filter: blur(1px); 
    pointer-events: none; 
    z-index: 15; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 80%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    animation: water-sway 3s ease-in-out infinite alternate;
    transition: color 0.3s ease-in-out;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    color: rgba(0, 142, 176, 0.4); 
}

@keyframes water-sway {
    0% { transform: scaleY(-1.5) skewX(-7deg) translateY(0px); }
    100% { transform: scaleY(-1.5) skewX(7deg) translateY(4px); }
}

/* --- Bottom Section (Water) --- */
.water-section {
    flex: 1; 
    position: relative;
    z-index: 5; 
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.water-content-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px 60px;
    border-radius: 2px;
    z-index: 10; 
}

.water-content-box p {
    color: #333;
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 400;
}

.water-effects-area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    pointer-events: none; 
}

/* --- Reference Box (Testimonials) --- */
.hero-references {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 30;
    text-align: right; 
}

.hero-references > div {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* --- The Overlay Elements (Plants & Fish) --- */
.plant-overlay {
    position: absolute;
    bottom: 0;
    z-index: 2; 
    max-height: 85vh; 
    width: auto;
    pointer-events: none; 
}

.plant-left { left: -20px; max-height: 100vh; }
.plant-right { right: -20px; bottom: -60px; }

.swimming-fish {
    position: absolute;
    top: 50px; 
    right: 0;
    width: 450px;
    opacity: 0;
    z-index: 6; 
    animation: swimIn 2.5s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes swimIn {
    0% { opacity: 0; transform: translateX(100%) scaleX(-1); }
    100% { opacity: 1; transform: translateX(45%) scaleX(-1); }
}

/* =========================================
   HERO ADDITIONS (InfoBox & CTA Text)
   ========================================= */

.hero-infobox {
    position: absolute;
    top: 60px; 
    left: 240px; 
    z-index: 30;
    text-align: left;
}

.hero-infobox > div {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.hero-infobox > div > div:last-child { margin-top: 15px; }
.hero-infobox > div > div:nth-child(3) { display: none; }

.hero-cta-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 20; 
    text-align: center;
    width: 100%;
    max-width: 800px;
    pointer-events: none; 
}

.hero-cta-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 300; 
    color: #34495e; 
    letter-spacing: 3px; 
    margin-bottom: 15px;
    text-shadow: 0px 0px 30px rgba(255, 255, 255, 1), 0px 0px 10px rgba(255, 255, 255, 0.8);
}

.hero-cta-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem; 
    font-weight: 400; 
    line-height: 1.8;
    color: #4a5a6a; 
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* --- Footer & Sand Bottom --- */
.sand-bottom {
    width: 100%;
    height: 60px; 
    background-color: #ffffff;        /* white behind the transparent PNG */
    background-repeat: repeat-x; 
    background-position: bottom center;
    background-size: auto 100%; 
    position: relative;
    z-index: 10;
}

.main-footer {
    background-color: #111111; 
    color: #a0aab5; 
    padding: 20px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    position: relative;
    z-index: 10;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
}

.main-footer p { margin: 0; padding: 0; }
.footer-links { display: flex; gap: 30px; }
.footer-links a {
    color: #a0aab5;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover { color: #008eb0; }

/* =========================================
   HOMEPAGE PREVIEW MODULES
   ========================================= */

.home-content {
    background-color: #ffffff;
    position: relative;
    z-index: 20; 
}

.preview-module {
    padding: 100px 50px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.preview-module.bg-light { background-color: #f8fbfb; }

.module-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

.module-container.reverse { flex-direction: row-reverse; }
.module-text { flex: 1; }

.module-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 300;
    color: #1a365d;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.module-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem; 
    font-weight: 400;
    line-height: 1.8;
    color: #4a5a6a;
    margin-bottom: 35px;
}

.module-image { flex: 1; }

.image-placeholder {
    width: 100%;
    height: 400px;
    background-color: #e2e8f0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition: transform 0.4s ease;
}

.image-placeholder:hover { transform: translateY(-5px); }

.btn-primary {
    display: inline-block;
    padding: 14px 36px;
    background-color: transparent;
    color: #008eb0; 
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border: 1px solid #008eb0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #008eb0;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 142, 176, 0.3);
}

/* =========================================
   CUSTOM MODULE COMPONENTS (Service & Kontakt)
   ========================================= */

.module-custom-content { flex: 1; }
.service-boxes-stack { display: flex; flex-direction: column; gap: 25px; }

.service-box {
    background-color: #ffffff;
    border-left: 4px solid #008eb0; 
    padding: 30px 40px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
}

.service-box:hover { transform: translateX(-5px); }

.service-box h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: #1a365d;
    margin-top: 0;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.service-box p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem; 
    font-weight: 400;
    line-height: 1.8;
    color: #4a5a6a;
    margin: 0;
}

.service-box ul {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem; 
    font-weight: 400;
    line-height: 1.8;
    margin: 0;
    padding-left: 20px;
    color: #4a5a6a;
}

.service-box ul li { margin-bottom: 8px; }

/* --- Contact Info Formatting --- */
.contact-preview { padding-right: 40px; }
.contact-details {
    background-color: rgba(248, 251, 251, 0.8); 
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.contact-details p, .contact-details a, .contact-details span {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.8;
}

.contact-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a365d;
    margin: 0 0 15px 0;
}

.contact-method { font-size: 1.1rem; margin: 0 0 10px 0; color: #4a5a6a; }
.contact-method span { font-weight: 600; display: inline-block; width: 60px; }
.contact-method a { color: #008eb0; text-decoration: none; transition: color 0.2s ease; }
.contact-method a:hover { color: #1a365d; }
.contact-divider { border: 0; height: 1px; background: rgba(0,0,0,0.1); margin: 20px 0; }
.contact-address { font-size: 1.1rem; line-height: 1.6; color: #4a5a6a; margin: 0 0 15px 0; }
.contact-directions { font-size: 0.95rem; line-height: 1.6; font-style: italic; color: #7a8a9a; margin: 0; }

/* =========================================
   SCROLLING FISH ANIMATIONS
   ========================================= */

.preview-module { position: relative; }
.scroll-fish {
    position: absolute;
    z-index: 5; 
    opacity: 0;
    pointer-events: none; 
    transition: all 2.8s ease-out; 
}

.fish-left { left: -20%; }
.fish-right { right: -20%; }

.fish-angelfish { width: 220px; top: 15%; transform: scaleX(-1); }
.fish-diskus { width: 400px; bottom: 10%; } 
.fish-neons { width: 120px; top: 40%; transform: scaleX(-1); }
.fish-pleco { 
    width: 380px; 
    transform: scaleX(-1); 
    bottom: -60px;
}
.fish-rochen { width: 650px; bottom: -60px; z-index: 1; transform: scaleX(1); } 

.scroll-fish.is-swimming { opacity: 1; }
.scroll-fish.is-swimming.fish-left { left: 2%; }
.scroll-fish.is-swimming.fish-right { right: 2%; }
.scroll-fish.is-swimming.fish-diskus { left: -5%; }
.scroll-fish.is-swimming.fish-rochen { right: -10%; }
.scroll-fish.is-swimming.fish-angelfish { right: -2%; }
.scroll-fish.is-swimming.fish-pleco { left: -5%; }

/* =========================================
   SERVICE GALLERY (Subpage layout)
   ========================================= */

.service-gallery-grid {
    display: grid;
    /* Increased from 240px to 300px so the 3 cards fill the space beautifully */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px; /* Widened the gap slightly for a more premium, airy feel */
    padding-bottom: 10px;
}

.service-gallery-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px 20px; /* Tighter padding saves vertical space */
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(0, 142, 176, 0.1); 
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 142, 176, 0.1);
}

.card-icon {
    font-size: 2rem; /* Slightly smaller, more refined icon */
    margin-bottom: 15px;
    text-align: center;
}

.service-gallery-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem; /* Scaled down for a premium look */
    font-weight: 600;
    color: #1a365d;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.service-gallery-card p, 
.service-gallery-card ul {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem; /* Crisper, smaller text to prevent heavy wrapping */
    line-height: 1.6;
    color: #4a5a6a;
    margin: 0 0 15px 0;
    flex-grow: 1; /* Pushes the highlight boxes to the bottom perfectly */
}

.service-gallery-card ul {
    padding-left: 20px;
}

.service-gallery-card ul li {
    margin-bottom: 6px;
}

.card-highlight {
    background-color: #f0f8fa; 
    color: #008eb0;
    padding: 12px; /* Tighter internal padding */
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-top: auto; 
    border-left: 4px solid #008eb0;
}

/* PRODUCTS */
/* ===============================================================
   PRODUCT PAGES — Fish, Food, etc.
   Append to style.css (or @import). Pure additive — no overrides.
   =============================================================== */

.fish-page,
.food-page,
.aquarium-page,
.technik-page,
.deko-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

/* ===============================================================
   STICKY HEADER WRAPPER (title + tabs + tools)
   The box-shadow extends a white background indefinitely upward so
   any gap above the sticky element (caused by parent padding or a
   shrunken-hero strip) stays covered as the user scrolls.
   `isolation: isolate` creates a stacking context that defeats most
   z-index battles with descendant content.
   =============================================================== */

.fish-page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    padding-top: 2rem;
    margin-bottom: 1.25rem;
    isolation: isolate;
    /* Background extender upward — needs an unclipped ancestor to work */
    box-shadow: 0 -100vh 0 0 white;
    transition: filter 0.2s ease;
}

/* Belt-and-braces: a pseudo-element with its own stacking that paints
   white above the sticky bar. Works even when the parent clips
   box-shadow, because it's positioned relative to the sticky bar itself. */
.fish-page-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 200vh;
    background: white;
    pointer-events: none;
    z-index: -1;
}

/* Soft drop shadow once we've actually scrolled past the natural position */
@supports (animation-timeline: scroll()) {
    .fish-page-header {
        animation: fish-page-header-stuck linear both;
        animation-timeline: scroll();
        animation-range: 0 80px;
    }
    @keyframes fish-page-header-stuck {
        to { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.10)); }
    }
}

.category-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.category-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: #1a365d;
    margin: 0 0 0.4rem;
    line-height: 1.1;
}

.category-header p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    color: #4a5a6a;
    margin: 0;
}

/* ===============================================================
   TAB BAR
   =============================================================== */

.tab-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    border-bottom: 2px solid #e0e8ed;
    flex-wrap: wrap;
}

.tab-bar-tabs { display: flex; gap: 0.25rem; }

.tab-bar-tools {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-bottom: 0.55rem;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.9rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #6a7a8a;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-btn:hover     { color: #008eb0; }

.tab-btn.is-active {
    color: #008eb0;
    border-bottom-color: #008eb0;
}

.tab-count {
    font-size: 0.8rem;
    background: #e8f1f4;
    color: #6a7a8a;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-weight: 600;
    min-width: 1.6em;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.tab-btn.is-active .tab-count {
    background: #008eb0;
    color: white;
}

.tab-blurb {
    color: #6a7a8a;
    font-style: italic;
    margin: 0 0 1.25rem;
}

/* ===============================================================
   SEARCH INPUT (with X clear button)
   =============================================================== */

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.product-search {
    padding: 0.5rem 2rem 0.5rem 0.85rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #1a365d;
    border: 1px solid #e0e8ed;
    border-radius: 6px;
    background: white;
    width: 220px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-search::placeholder { color: #98a8b8; }

.product-search:focus {
    outline: none;
    border-color: #008eb0;
    box-shadow: 0 0 0 3px rgba(0, 142, 176, 0.15);
}

/* Hide browser-native search clear button — we have our own */
.product-search::-webkit-search-cancel-button,
.product-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.search-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: #e0e8ed;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    color: #4a5a6a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.search-clear:hover { background: #008eb0; color: white; }

.search-clear svg { width: 12px; height: 12px; display: block; }

/* ===============================================================
   VIEW TOGGLE (grid / list)
   =============================================================== */

.view-toggle {
    display: flex;
    border: 1px solid #e0e8ed;
    border-radius: 6px;
    overflow: hidden;
}

.view-btn {
    background: white;
    border: none;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    color: #6a7a8a;
    line-height: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.view-btn + .view-btn { border-left: 1px solid #e0e8ed; }

.view-btn:hover { background: #f7fafb; color: #008eb0; }

.view-btn.is-active {
    background: #008eb0;
    color: white;
}

.view-btn svg { width: 16px; height: 16px; display: block; }

/* ===============================================================
   SUBCATEGORY ACCORDION
   =============================================================== */

.subcat-accordion {
    margin-bottom: 0.75rem;
    border: 1px solid #e0e8ed;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.subcat-accordion[open] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.subcat-summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    user-select: none;
    background: #f7fafb;
    transition: background 0.2s ease;
}

.subcat-summary::-webkit-details-marker { display: none; }
.subcat-summary::marker                 { display: none; content: ''; }

.subcat-summary:hover { background: #eef5f8; }

.subcat-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #1a365d;
    flex: 1;
}

.subcat-count {
    font-size: 0.85rem;
    color: #6a7a8a;
    background: #e0e8ed;
    padding: 0.15rem 0.6rem;
    border-radius: 10px;
}

.subcat-chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid #6a7a8a;
    border-bottom: 2px solid #6a7a8a;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-bottom: 4px;
}

.subcat-accordion[open] .subcat-chev {
    transform: rotate(-135deg);
    margin-bottom: -4px;
}

/* ===============================================================
   CARD VIEW (default)
   =============================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.25rem;
    background: #fbfcfd;
}

.product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e8ed;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #cfddef;
}

/* === FEATURED PRODUCTS (Empfohlen) =====================================
   Tinted card + amber border + corner ribbon badge in grid view.
   List view: gradient background + ★ prefix on the product name. */

.product-card.is-featured {
    background: #fffaeb;
    border-color: #e8b54a;
    box-shadow: 0 4px 14px rgba(232, 181, 74, 0.18);
    position: relative;        /* anchor for the ::before badge */
}

.product-card.is-featured::before {
    content: "★ Empfohlen";
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #f5b443 0%, #d99030 100%);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(217, 144, 48, 0.35);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}

.product-card.is-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(232, 181, 74, 0.3);
    border-color: #d99030;
}

/* ----- List view: row-friendly treatment ----- */

body.product-view-list .product-card.is-featured {
    background: linear-gradient(90deg, #fff5d6 0%, #fffefc 65%);
}

body.product-view-list .product-card.is-featured:hover {
    background: linear-gradient(90deg, #ffefbf 0%, #fff8e8 65%);
}

/* Hide the corner ribbon in list view — the row is too short for it */
body.product-view-list .product-card.is-featured::before {
    content: none;
}

/* Inline star prefix on the product name, replaces the corner badge */
body.product-view-list .product-card.is-featured .product-name::before {
    content: "★ ";
    color: #d99030;
    font-weight: 700;
}

.product-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8f1f4;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-card-body {
    padding: 0.75rem 0.9rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.product-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a365d;
    margin: 0;
    line-height: 1.3;
}

.product-sci {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    color: #6a7a8a;
    margin: 0;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.product-size {
    font-size: 0.8rem;
    color: #6a7a8a;
}

.product-size-label { color: #98a8b8; }
.product-size-value { color: #4a5a6a; font-weight: 500; }

.product-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #008eb0;
    white-space: nowrap;
}

.product-extra {
    font-size: 0.7rem;
    color: #b8651f;
    background: #fef5e6;
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    display: inline-block;
    margin: 0;
    align-self: flex-start;
    letter-spacing: 0.02em;
    font-weight: 600;
    text-transform: uppercase;
}

.product-desc {
    font-size: 0.85rem;
    color: #4a5a6a;
    line-height: 1.4;
    margin: 0.3rem 0 0;
}

/* ===============================================================
   LIST VIEW — uses CSS subgrid so all rows align like a table.
   Strategy: .product-grid is the actual grid; cards use subgrid
   so their column widths inherit from the parent. .product-card-body
   and .product-meta and .product-size become display:contents so
   name/sci/extra/size-label/size-value/price participate directly
   in the card's subgrid.
   =============================================================== */

body.product-view-list .product-grid {
    display: grid;
    grid-template-columns:
        [name]        minmax(150px, 1.5fr)
        [sci]         minmax(150px, 2fr)
        [tag]         110px
        [size-label]  auto         /* "Größe (cm):" */
        [size-value]  minmax(50px, max-content)
        [price]       120px;       /* widened for the € sign */
    column-gap: 1rem;
    row-gap: 0;
    padding: 0;
    background: transparent;
}

body.product-view-list .product-card {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    column-gap: 1rem;
    align-items: center;
    padding: 0.55rem 1rem 0.55rem 1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-top: -1px;
    overflow: visible; /* let the € render even if column is snug */
}

body.product-view-list .product-card:first-child {
    border-top: 1px solid #e0e8ed;
}

body.product-view-list .product-card:hover {
    transform: none;
    box-shadow: none;
    background: #f7fafb;
}

/* Hide images in list view for now; we'll add an image column once
   the admin starts attaching them. */
body.product-view-list .product-card-image { display: none; }

/* Flatten wrappers so their children become direct subgrid items. */
body.product-view-list .product-card-body { display: contents; }
body.product-view-list .product-meta      { display: contents; }
body.product-view-list .product-size      { display: contents; }

body.product-view-list .product-name {
    grid-column: name;
    margin: 0;
    font-size: 0.92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.product-view-list .product-sci {
    grid-column: sci;
    margin: 0;
    font-size: 0.8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.product-view-list .product-extra {
    grid-column: tag;
    justify-self: end;
    align-self: center;
    margin: 0;
}

body.product-view-list .product-desc {
    grid-column: name / -1;
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
}

body.product-view-list .product-size-label {
    grid-column: size-label;
    justify-self: end;
    align-self: center;
    color: #98a8b8;
    font-size: 0.78rem;
    white-space: nowrap;
}

body.product-view-list .product-size-value {
    grid-column: size-value;
    justify-self: end;
    align-self: center;
    color: #4a5a6a;
    font-weight: 500;
    font-size: 0.78rem;
    white-space: nowrap;
}

body.product-view-list .product-price {
    grid-column: price;
    justify-self: end;
    font-size: 0.95rem;
    padding-right: 0.5rem; /* breathing room before card's right edge */
    white-space: nowrap;
}

/* ===============================================================
   FILTER / EMPTY STATES
   =============================================================== */

.is-hidden { display: none !important; }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6a7a8a;
    font-style: italic;
}

.empty-search-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #6a7a8a;
    background: #f7fafb;
    border: 1px dashed #cfddef;
    border-radius: 8px;
    margin: 1rem 0;
}

/* ===============================================================
   MOBILE
   =============================================================== */

@media (max-width: 720px) {
    .tab-bar-tools { width: 100%; padding-bottom: 0.75rem; }
    .product-search { flex: 1; width: auto; min-width: 0; }
}

@media (max-width: 640px) {
    .fish-page,
    .food-page { padding: 0 0.75rem 1rem; }

    .fish-page-header { padding-top: 1.25rem; }

    .category-header     { margin-bottom: 0.75rem; }
    .category-header h1  { font-size: 1.75rem; }
    .category-header p   { font-size: 0.95rem; }

    .tab-bar { gap: 0.5rem; }
    .tab-bar-tabs {
        flex: 1;
        order: 1;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab-bar-tools {
        order: 2;
        width: 100%;
        padding-bottom: 0.65rem;
    }
    .tab-btn {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .product-name  { font-size: 0.88rem; }
    .product-sci   { font-size: 0.72rem; }
    .product-price { font-size: 0.95rem; }

    .subcat-summary { padding: 0.85rem 1rem; }
    .subcat-name    { font-size: 1.05rem; }

    /* Mobile list view: collapse to two rows per item — name+sci on top,
       tag/size/price below. Drop subgrid in favour of a simpler row layout. */
    body.product-view-list .product-grid {
        display: block;
        padding: 0;
    }
    body.product-view-list .product-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        column-gap: 0;
        row-gap: 0.2rem;
        padding: 0.7rem 0.9rem;
    }
    body.product-view-list .product-card-body { display: flex; flex-direction: column; gap: 0.2rem; }
    body.product-view-list .product-meta      { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.2rem; }
    body.product-view-list .product-size      { display: inline-flex; gap: 0.3rem; }
    body.product-view-list .product-name,
    body.product-view-list .product-sci,
    body.product-view-list .product-extra,
    body.product-view-list .product-desc,
    body.product-view-list .product-size-label,
    body.product-view-list .product-size-value,
    body.product-view-list .product-price {
        grid-column: auto;
        justify-self: stretch;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding-right: 0;
    }
    body.product-view-list .product-price { font-size: 0.95rem; }
}

/* ===============================================================
   AQUARIUM / TERRARIUM PAGE
   Shares sticky header, tab bar, and accordion patterns with the
   product pages. Adds:
     - pitch box for the custom-build marketing message
     - subgrid-based size table inside each accordion
     - call-to-action box at the end of each tab panel
   =============================================================== */

.aquarium-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

/* ─── Pitch box ─── */

.custom-build-pitch {
    background: linear-gradient(135deg, #e8f1f4 0%, #f7fafb 100%);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    margin: 1.5rem 0 2rem;
    border: 1px solid #cfddef;
}

.pitch-lead {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.02rem;
    color: #1a365d;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.pitch-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.pitch-highlights li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
    color: #4a5a6a;
    line-height: 1.5;
}

.pitch-highlights li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #008eb0;
    font-weight: 600;
}

.pitch-callout {
    background: white;
    border-left: 4px solid #008eb0;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    color: #1a365d;
    font-weight: 500;
    border-radius: 0 6px 6px 0;
}

.pitch-note {
    font-size: 0.88rem;
    color: #6a7a8a;
    font-style: italic;
    margin: 0;
}

/* ─── Section heading + subcat description ─── */

.section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #1a365d;
    font-size: 1.3rem;
    margin: 1.5rem 0 1rem;
}

.subcat-desc {
    font-size: 0.85rem;
    color: #6a7a8a;
    font-style: italic;
    font-weight: 400;
    margin-left: 0.5rem;
}

/* ─── Size table (subgrid, aligned across all rows) ─── */

.size-list {
    display: grid;
    grid-template-columns:
        [dim]    minmax(180px, 1.4fr)
        [glass]  minmax(110px, 1fr)
        [volume] minmax(100px, 0.8fr)
        [price]  minmax(120px, 0.8fr);
    column-gap: 1.25rem;
    padding: 0;
    background: white;
}

.size-list--no-volume {
    grid-template-columns:
        [dim]    minmax(180px, 1.8fr)
        [glass]  minmax(110px, 1fr)
        [price]  minmax(120px, 0.8fr);
}

.size-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid #e0e8ed;
    transition: background 0.15s ease;
}

.size-row:last-child { border-bottom: none; }

.size-row:hover { background: #fbfcfd; }

.size-row--header {
    background: #f7fafb;
    color: #6a7a8a;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-bottom: 2px solid #e0e8ed;
}

.size-row--header:hover { background: #f7fafb; }

.size-dim {
    grid-column: dim;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #1a365d;
    font-size: 0.95rem;
}

.size-glass {
    grid-column: glass;
    color: #4a5a6a;
    font-size: 0.88rem;
}

.size-volume {
    grid-column: volume;
    color: #4a5a6a;
    font-size: 0.88rem;
}

.size-price {
    grid-column: price;
    color: #008eb0;
    font-weight: 500;
    font-size: 0.88rem;
    justify-self: end;
    padding-right: 0.5rem;
}

.size-row--header .size-price { color: #6a7a8a; }

.muted { color: #c5d3dd; }

/* ─── CTA box at the end of each tab panel ─── */

.section-cta {
    text-align: center;
    margin: 2.5rem 0 1rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f7fafb 0%, #e8f1f4 100%);
    border-radius: 12px;
}

.section-cta p {
    color: #1a365d;
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.section-cta .cta-button {
    display: inline-block;
    background: #008eb0;
    color: white;
    padding: 0.85rem 1.75rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.15s ease;
}

.section-cta .cta-button:hover {
    background: #006a83;
    transform: translateY(-1px);
}

/* ─── Mobile ─── */

@media (max-width: 640px) {
    .aquarium-page { padding: 0 0.75rem 1rem; }

    .custom-build-pitch {
        padding: 1.25rem;
        margin: 1rem 0 1.5rem;
    }
    .pitch-lead { font-size: 0.95rem; }

    .section-heading { font-size: 1.15rem; }

    /* Size list collapses to label-prefixed stack on mobile */
    .size-list,
    .size-list--no-volume {
        display: block;
        padding: 0;
    }

    .size-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0.85rem 1rem;
        gap: 0.2rem;
    }

    .size-row--header { display: none; }

    .size-dim, .size-glass, .size-volume, .size-price {
        grid-column: auto;
        justify-self: stretch;
        padding-right: 0;
    }

    .size-dim {
        font-size: 1rem;
        font-weight: 600;
    }
    .size-glass::before  { content: "Glasstärke: "; color: #98a8b8; }
    .size-volume::before { content: "Volumen: ";    color: #98a8b8; }
    .size-price          { font-size: 1rem; margin-top: 0.2rem; }
    .size-price::before  { content: "Preis: ";      color: #98a8b8; font-weight: 400; }

    .section-cta {
        padding: 1.5rem 1rem;
        margin: 1.5rem 0 0.5rem;
    }
}

/* ===============================================================
   TECHNIK PAGE — additions on top of the shared product styles
   =============================================================== */

/* Empty subcategory message (when admin hasn't populated items yet) */
.empty-subcat {
    padding: 2rem 1.5rem;
    color: #6a7a8a;
    background: #fbfcfd;
    text-align: center;
    font-style: italic;
    margin: 0;
    border-top: 1px solid #e0e8ed;
}

/* Mobile additions for technik + food pages */
@media (max-width: 640px) {
    .fish-page,
    .food-page,
    .aquarium-page,
    .technik-page,
    .deko-page {
        padding: 0 0.75rem 1rem;
    }

    .empty-subcat {
        padding: 1.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===============================================================
   PROJECTS PAGE — Gallery + Lightbox
   No titles, no captions; pure visual portfolio.
   =============================================================== */

.projects-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.projects-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.gallery-item {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.gallery-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 142, 176, 0.4);
}

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

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

/* ── Lightbox ────────────────────────────────────────────────── */

body.lightbox-open { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 30, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    animation: lightbox-fade-in 0.2s ease;
}

/* Honour the HTML `hidden` attribute. The base rule above sets display:flex
   unconditionally, which beats the user-agent stylesheet's [hidden]{display:none}
   on equal specificity. Restore the expected behaviour explicitly. */
.lightbox[hidden] { display: none; }

@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.10);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.20);
}

.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.lightbox-close {
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}

.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); }

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.04em;
}

@media (max-width: 640px) {
    .projects-page {
        padding: 1rem 0.75rem;
    }
    .projects-gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }

    .lightbox          { padding: 1rem; }
    .lightbox-close    { top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; }
    .lightbox-prev,
    .lightbox-next     { width: 44px; height: 44px; }
    .lightbox-prev     { left: 0.5rem; }
    .lightbox-next     { right: 0.5rem; }
    .lightbox-counter  { bottom: 0.75rem; font-size: 0.78rem; padding: 0.3rem 0.75rem; }
}