/* ================================
   Design Variables
================================ */
:root {
    --bg: #f0f4fb;
    --bg-soft: #cccbcb;
    --text: #000000;
    --text-soft: #211f1f;
    --accent: #c53ce1; /* Neon Green */
    --accent-hover: #bb53b0;
}

/* Standard Links (Content) */
.site-main a {
    color: #356a98;
}

.site-main a:visited {
    color: #000000; /* optional: weniger grell für besuchte Links */
}


/* ================================
   Base Reset
================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;

    background-image: url("https://care.kulturspinnerei.org/wp-content/uploads/2026/04/21.-Apr.-2026-11_42_12.png"); /* Pfad anpassen */
    background-size: cover;            /* füllt den gesamten Screen */
    background-position: center;       /* zentriert das Bild */
    background-repeat: no-repeat;      /* kein Kacheln */
    background-attachment: fixed;      /* optional: Parallax-Effekt */
}
/* ================================
   Layout
================================ */
/* site-main als zentraler Rahmen */
.site-main {
    min-height: 100vh;
    background: #f0f4fb; /* leicht transparent */
    max-width: 1000px;                      /* schmaler als vorher */
    margin: 2rem auto;                       /* Abstand oben/unten */
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* innere Sektionen transparent */
.content, .hero, .product-info {
    background: transparent;
    padding: 0;
}

/* ================================
   HERO SECTION
================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    background: radial-gradient(
        circle at top,
        #f0f4fb 0%,
        var(--bg) 70%
    );
}

.hero-inner {
    max-width: 720px;
    text-align: center;
}

/* ================================
   Typography
================================ */
.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.hero-text {
    font-size: 1.25rem;
    color: var(--text-soft);
    margin-bottom: 2.5rem;
}

/* ================================
   CTA Button (WooCommerce)
================================ */
.hero-cta .button,
.hero-cta button {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.hero-cta .button:hover,
.hero-cta button:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,255,136,0.25);
}

/* ================================
   Login Link
================================ */
.hero-login {
    margin-top: 2rem;
}

.login-link {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

.login-link:hover {
    color: var(--accent);
}

/* ================================
   PRODUCT INFO
================================ */
.product-info {
    background: var(--bg-soft);
    padding: 5rem 1.5rem;
}

.product-info-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.product-info h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.product-price {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.product-description {
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 1rem;
}

/* ================================
   WooCommerce Cleanup
================================ */
.woocommerce-message,
.woocommerce-notices-wrapper {
    display: none;
}


.site-footer {
    background: #fffcfc;
    color: #000000;
    padding: 4rem 2rem 2rem;
    font-size: 0.9rem;
    overflow-x: hidden;
    text-align: center; /* Grundzentrierung */
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(3, auto); /* 3 Spalten, Breite automatisch */
    gap: 40px;
    justify-content: center; /* zentriert die Spalten */
    align-items: start;
    max-width: 1200px;
    margin: auto;
}

.footer-column {
    text-align: center; /* Inhalte jeder Spalte zentrieren */
}

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center; /* Logos mittig */
    margin-top: 1rem;
}

.partner-logos img {
    max-width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

.footer-column a {
    color: #000000;
    text-decoration: none;
}

.footer-column a:hover {
    color: #000000;
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #888;
    border-top: 1px solid #222;
    padding-top: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-inner {
        grid-template-columns: 1fr; /* alle untereinander auf Tablets / Mobile */
        gap: 30px;
    }
}/* ================================
   HEADER
================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #f0f4fb;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #000 !important;
    padding: 0.2rem 2rem;
}

/* Header inner */
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Abstand für fixierten Header */
.site-main {
    padding-top: calc(1rem + 80px);
}

/* ================================
LOGO
================================ */
.site-logo-img {
    height: 100px;
    max-height: 100px;
}

body.home:not(.woocommerce) .site-logo-img {
    height: 120px;
}

@media (max-width: 768px) {
    .site-logo-img {
        height: 40px;
    }

    body.home:not(.woocommerce) .site-logo-img {
        height: 70px;
    }
}

/* ================================
NAVIGATION + ICONS WRAPPER
================================ */
.main-navigation {
    display: flex;
    align-items: center;
}

/* Menü */
.main-menu {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* ================================
MENU BUTTONS
================================ */
.main-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Icons (erste 3 Buttons) */
.main-menu a::before {
    content:"";
    width:18px;
    height:18px;
    background-size:contain;
    background-repeat:no-repeat;
}

/* Icons */
.main-menu li:nth-child(1) a::before { background-image:url("/wp-content/uploads/icons/start.png"); }
.main-menu li:nth-child(2) a::before { background-image:url("/wp-content/uploads/icons/spinnrad.png"); }
.main-menu li:nth-child(3) a::before { background-image:url("/wp-content/uploads/icons/stift.png"); }

.main-menu li a {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.85) 40%,
        rgba(255,255,255,0.7) 100%
    );
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.main-menu li a::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.6) 50%,
        transparent 100%
    );

    transform: rotate(25deg);
    transition: all 0.6s ease;
}

/* Hover Glow */
.main-menu li:nth-child(-n+3) a:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 8px #fff9,
        0 0 16px #fff4,
        0 0 24px #fff2;
}

/* ================================
DIVIDER
================================ */
.main-menu li:nth-child(4) {
    position: relative;
    margin-left: 20px;
}

.main-menu li:nth-child(4)::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 36px;
    background: #fff;
    box-shadow:
        0 0 6px #fff,
        0 0 12px #fff,
        0 0 18px #fff;
}

/* ================================
HEADER ICONS (NEU)
================================ */
.header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    position: relative;
    padding-left: 20px;
}

/* Divider vor Icons */
.header-icons::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 36px;
    background: #fff;
    box-shadow:
        0 0 6px #fff,
        0 0 12px #fff,
        0 0 18px #fff;
}

/* ================================
ICON BUTTONS
================================ */
/* Icon Bild im Button anpassen */
.nicegui-account-button img {
    width: 80%;       /* passt das Icon auf ca. 60% des Buttons */
    height: 80%;      /* Höhe proportional */
    object-fit: contain; /* sorgt dafür, dass das Icon nicht verzerrt wird */
    display: block;
    margin: auto;     /* zentriert im Kreis */
}
.nicegui-cart-button,
.nicegui-account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    background: #ccc;
    color: #000;
    transition: all 0.3s ease;
}

.nicegui-cart-button:hover,
.nicegui-account-button:hover {
    background: #999;
    transform: scale(1.05);
}

/* Cart Animation */
.cart-not-empty .nicegui-cart-button {
    background: #fff;
    animation: cartBigPulse 1.2s infinite;
}

@keyframes cartBigPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ================================
BURGER BUTTON
================================ */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 32px;
    height: 26px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
}

.menu-toggle span {
    height: 3px;
    width: 100%;
    background: #000000;
    transition: all .3s ease;
}

/* Burger Animation */
.menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2){
    opacity:0;
}
.menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}

/* ================================
MOBILE
================================ */
@media (max-width: 768px){

    .main-navigation {
        display: none;
    }

    .menu-toggle {
        display: flex;
        order: 3;
    }

    .header-icons {
        order: 2;
        margin-left: 0;
        padding-left: 0;
    }

    .header-icons::before {
        display: none;
    }

    .site-logo {
        order: 1;
    }

}

/* ================================
MOBILE MENU PANEL
================================ */
.mobile-menu{
    position:fixed;
    top:0;
    right:-320px;
    width:320px;
    height:100vh;
    background:#ffffff;
    padding:120px 30px;
    transition:right .35s ease;
    z-index:1001;
}

.mobile-menu.active{
    right:0;
}

.mobile-menu-list{
    list-style:none;
    padding:0;
}

.mobile-menu-list li{
    margin-bottom:20px;
}

.mobile-menu-list a{
    color:#000000;
    text-decoration:none;
    font-size:1.4rem;
    font-weight:600;
}

.mobile-menu-list a:hover{
    color:var(--accent);
}

/* ================================
OVERLAY
================================ */
.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:1000;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}
/* ================================
WOO PRODUCT PAGE
================================ */

.product-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 120px 20px 60px;
}

/* Produkt Layout */

.single-product .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Titel */

.single-product h1.product_title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Preis */

.single-product .price {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 20px;
}

/* Beschreibung */

.single-product .woocommerce-product-details__short-description {
    color: var(--text-soft);
    line-height: 1.6;
}

/* Add to cart */

.single-product button.single_add_to_cart_button {

    background: var(--accent);
    color: #000;

    border: none;
    padding: 14px 30px;

    font-weight: 600;
    border-radius: 30px;

    cursor: pointer;
}

/* Mobile */

@media (max-width: 900px) {

    .single-product .product {
        grid-template-columns: 1fr;
    }

}


.woocommerce form .form-row{
    margin-bottom:16px;
}
/* ================================
BURGER MENU
================================ */

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    width: 26px;
    height: 3px;
    background: #000000;
    display: block;
}

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

@media (max-width: 768px) {

    .menu-toggle {
        display: flex;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        background: #000;
        width: 100%;
        display: none;
        padding: 20px;
    }

    .main-navigation.active {
        display: block;
    }

    .main-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .main-menu a {
        text-align: center;
    }

}
/* ================================
BURGER BUTTON
================================ */

.menu-toggle {

    display:none;
    flex-direction:column;
    justify-content:center;
    gap:6px;

    width:32px;
    height:26px;

    background:none;
    border:none;
    cursor:pointer;

    z-index:1002;
}

.menu-toggle span{

    display:block;
    height:3px;
    width:100%;
    background:#000000;

    transition:all .3s ease;
}

/* Animation -> X */

.menu-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}


/* ================================
MOBILE MENU PANEL
================================ */

.mobile-menu{

    position:fixed;
    top:0;
    right:-320px;

    width:320px;
    height:100vh;

    background:#000;

    padding:120px 30px;

    transition:right .35s ease;

    z-index:1001;
}

.mobile-menu.active{
    right:0;
}


/* Menü Links */

.mobile-menu-list{
    list-style:none;
    padding:0;
    margin:0;
}

.mobile-menu-list li{
    margin-bottom:20px;
}

.mobile-menu-list a{

    color:#fff;
    text-decoration:none;
    font-size:1.4rem;
    font-weight:600;

    transition:color .2s;
}

.mobile-menu-list a:hover{
    color:var(--accent);
}


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

.menu-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.6);

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;

    z-index:1000;
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
}


/* ================================
RESPONSIVE
================================ */

@media (max-width: 768px){

    .menu-toggle{
        display:flex;
    }

    .main-navigation{
        display:none;
    }

}


/* ================================
SERVICES SECTION
================================ */

.services {
    padding: 80px 20px;
    text-align: center;
}

.services-inner {
    max-width: 1200px;
    margin: auto;
}

.services-title {
    font-size: 36px;
    margin-bottom: 50px;

    text-shadow: 3px 3px #000000;
}

/* SERVICES GRID: 2 Boxen pro Reihe */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    gap: 25px; /* Abstand zwischen Boxen */
    align-items: start; /* sorgt dafür, dass Boxen oben ausgerichtet sind */
    margin-top: 40px; /* optional, Abstand zum Hero */
}

/* Responsive: 1 Spalte auf kleinen Bildschirmen */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* CARDS */

.service-card {

    padding: 30px;

    border-radius: 16px;

    border: 3px solid #fff;

    box-shadow:
        6px 6px 0 rgba(0,0,0,0.2);

    text-align: left;

    transition: all 0.2s ease;
}

/* =================================
TITLE + ICON
================================= */
.service-card h3 {

    margin-top: 0;

    display: flex;
    align-items: center;
    gap: 14px;

    font-family: 'Rock Salt', cursive;
    font-size: 16px;
    letter-spacing: 1px;

}

/* ICON BASIS */

.service-card h3::before {

    content: "";

    width: 46px;
    height: 46px;

    display: inline-block;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    flex-shrink: 0;

}

/* =================================
ICON ZUORDNUNG
================================= */

.service-1 h3::before {
    background-image: url("/wp-content/uploads/icons/bausteine-white.png");
}

.service-2 h3::before {
    background-image: url("/wp-content/uploads/icons/kids-white.png");
}

.service-3 h3::before {
    background-image: url("/wp-content/uploads/icons/bestellungen-white.png");
}

.service-4 h3::before {
    background-image: url("/wp-content/uploads/icons/suppe-white.png");
}



/* RESPONSIVE */

@media (max-width: 900px) {

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 500px) {

    .services-grid {
        grid-template-columns: 1fr;
    }

}








/* ================================
   Überschriften näher am Header
================================ */
.site-main h1,
.site-main h2,
.site-main h3,
.content-title {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* Hero Titel optional größer */
.hero-title {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}
/* ================================
WOO LINKS FIX (nur Shop Inhalt)
================================ */

.woocommerce .site-main a:not(.button),
.woocommerce .site-main a:visited:not(.button),
.woocommerce .site-main a:active:not(.button) {
    color: #000000;
    text-decoration: none;
}

.woocommerce .site-main a:not(.button):hover {
    color: var(--accent);
}
/* ================================
REMOVE RELATED PRODUCTS
================================ */

.single-product .related {
    display: none;
}

/* Wochen-Auswahl Buttons */
.wochen-auswahl {
    margin: 20px 0;
}
.wochen-auswahl h4 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

/* Label / Button */
.wochen-label {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    user-select: none;
}

/* Das "Button"-Span */
.wochen-label span {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid #bb7cca; /* auffälliger Rahmen */
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.25s ease;
    background: #f7f0fa;          /* leicht abgehobener Hintergrund */
    color: #bb7cca;               /* Textfarbe passend zum Rahmen */
    min-width: 120px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Ausgewählt */
.wochen-label input:checked + span {
    background: #bb7cca;  /* Rahmenfarbe als Füllung */
    color: #fff;
    border-color: #bb7cca;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Hover-Effekt */
.wochen-label span:hover {
    background: #d9bee0;
    border-color: #bb7cca;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Mobile kleine Buttons */
@media (max-width: 480px) {
    .wochen-label span {
        min-width: 90px;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}
body.single-product .site-main {
    padding-top: 20px; /* sehr eng am Header */
}
@media (max-width: 768px) {
    body.single-product .site-main {
        padding-top: 15px;
    }
}
/* Container */
.nicegui-container {
    padding: 20px;
    background: #fff;
    border: 2px solid #000000;
    border-radius: 12px;
    margin-bottom: 25px;
    color: #000000; /* Schriftfarbe auf schwarz */
}

/* Grid Layout */
.nicegui-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
}

/* Card */
.nicegui-card {
    background:#fafafa;
    border-radius:12px;
    padding:15px;
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

/* Header */
.card-header {
    font-size:16px;
    margin-bottom:10px;
}

/* Body */
.card-body p {
    margin:5px 0;
    font-size:14px;
}

/* Footer */
.card-footer {
    margin-top:10px;
}

/* Status */
.status.aktiv {
    color:green;
    font-weight:bold;
}

.status.inaktiv {
    color:#999;
}

/* Kündigung */
.kuendigung {
    margin-top:8px;
    font-size:13px;
    font-weight:bold;
}

.kuendigung.done {
    color:green;
}

.kuendigung.open {
    color:orange;
}

/* Formular */
.nicegui-form {
    margin-top:30px;
    padding:20px;
    background:#f8f8f8;
    border-radius:10px;
}

.nicegui-form textarea,
.nicegui-form input[type="date"] {
    width:100%;
    padding:8px;
    border-radius:6px;
    border:1px solid #ccc;
}
    /* -----------------------------
       WooCommerce Kundenkonto Menü
       ----------------------------- */
    .woocommerce-MyAccount-navigation ul {
        list-style: none; /* keine Punkte */
        padding: 0;
        margin: 0;
    }

    .woocommerce-MyAccount-navigation li {
        margin-bottom: 10px;
    }

    .woocommerce-MyAccount-navigation a {
        display: flex;             /* Icon + Text */
        align-items: center;
        gap: 10px;                 /* Abstand Icon-Text */
        padding: 12px 18px;
        background: #8e79d6;       /* Pflaumenfarbe */
        color: #000000;
        text-decoration: none;
        border-radius: 12px;       /* abgerundet */
        font-weight: 500;
        transition: all 0.25s ease;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .woocommerce-MyAccount-navigation a:hover {
        background: #a08bd9;
        transform: translateX(3px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }

    .woocommerce-MyAccount-navigation .is-active a {
        background: #b9a7e6;
        font-weight: 600;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
    }

    /* Icon Stil */
    .woocommerce-MyAccount-navigation a img {
        width: 24px;
        height: 24px;
        display: inline-block;
    }
/* -----------------------------
   FIXE TOP-BAR FÜR ALLE SEITEN
   ----------------------------- */

/* Höhe der Top-Bar als Variable */
:root {
    --top-bar-height: 40px; /* passt die Höhe nach Bedarf an */
}

/* Top-Bar */
.top-bar {
    position: fixed;           /* immer oben */
    top: 0;
    left: 0;
    width: 100%;
    height: var(--top-bar-height);
    line-height: var(--top-bar-height); /* vertikal zentriert */
    z-index: 9999;
    background-color: #222;
    color: #fff;
    font-size: 0.85rem;
    padding: 0 20px;           /* seitlicher Abstand */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Links in der Top-Bar */
.top-bar-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

.top-bar-links li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.25s ease;
}

.top-bar-links li a:hover {
    text-decoration: underline;
    color: #bbb;
}

/* -----------------------------
   HEADER ABSTAND FÜR TOP-BAR
   ----------------------------- */
header.site-header {
    margin-top: var(--top-bar-height);
}

/* -----------------------------
   MOBILE ANPASSUNG
   ----------------------------- */
@media (max-width: 768px) {
    :root {
        --top-bar-height: 45px; /* evtl. etwas höher auf Handy */
    }

    .top-bar {
        justify-content: center; /* Links zentriert auf kleineren Bildschirmen */
        font-size: 0.8rem;       /* etwas kleinere Schrift */
        padding: 0 10px;
    }

    header.site-header {
        margin-top: var(--top-bar-height);
    }

    .top-bar-links {
        gap: 10px;
    }
}
/* -----------------------------
   FAQ BUTTON - SPECIAL EFFECT
   ----------------------------- */

.faq-button {
    background: linear-gradient(135deg, #bb7cca, #8e79d6);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(187,124,202, 0.7);
    animation: pulseGlow 2s infinite;
}

/* Pulsierender Glow */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(187,124,202, 0.6);
    }
    70% {
        box-shadow: 0 0 10px 8px rgba(187,124,202, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(187,124,202, 0);
    }
}

/* Hover Effekt */
.faq-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 12px rgba(187,124,202, 0.8);
    background: linear-gradient(135deg, #c88bd8, #a08bd9);
}

/* Optional: kleiner "Glow-Rand" */
.faq-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(187,124,202, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.faq-button:hover::after {
    opacity: 1;
}


/*Warenkorb Button*/
/* Grundzustand */
.nicegui-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #ccc;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 🔥 AKTIV – auffällig */
.cart-not-empty .nicegui-cart-button {
    background: #ffffff;
    color: #fff;
    animation: cartBigPulse 1.2s infinite;
}

/* 💥 KRASSER PULSE */
@keyframes cartBigPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(40,167,69, 0.7);
    }

    30% {
        transform: scale(1.3);
        box-shadow: 0 0 20px rgba(40,167,69, 1);
    }

    60% {
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(40,167,69, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(40,167,69, 0.3);
    }
}
/* Gesamte Box stylen */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    background: linear-gradient(135deg, #7d2277, #112b5e); /* sanfter Farbverlauf */
    border: 2px solid #6366f1; /* lila Rand, z.B. Primary Color */
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-Effekt für interaktive Boxen */
.woocommerce-account .woocommerce-form-login:hover,
.woocommerce-account .woocommerce-form-register:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Buttons schöner gestalten */
.woocommerce-account .woocommerce-button {
    background-color: #6366f1;
    color: white;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    transition: background 0.2s ease;
}

.woocommerce-account .woocommerce-button:hover {
    background-color: #4f46e5;
}

/* Input-Felder moderner gestalten */
.woocommerce-account input.input-text,
.woocommerce-account input#reg_email,
.woocommerce-account input#reg_password {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.woocommerce-account input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 5px rgba(99,102,241,0.5);
    outline: none;
}
/* Container */
.wpcf7 {
    max-width: 600px;
    margin: 0 auto;
    font-family: inherit;
}

/* Eingabefelder */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    padding: 12px 14px;
    margin-top: 6px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: 0.2s ease;
}

/* Fokus-Effekt */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: #c461b3;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,115,170,0.15);
}

/* Button */
.wpcf7-submit {
    background: #590e59;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: 0.2s ease;
}

.wpcf7-submit:hover {
    background: #005f8d;
}

/* Labels */
.wpcf7 label {
    font-weight: 500;
    display: block;
}

/* Erfolgsmeldung */
.wpcf7-response-output {
    border-radius: 8px;
    padding: 12px;
}
/* Partner Logos mit weißem Hintergrund */
.partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 1rem;
}

.partner-logos img {
    background: #fff;           /* weißer Hintergrund */
    padding: 10px;              /* Abstand zum Rahmen */
    border-radius: 8px;         /* optional abgerundet */
    max-height: 60px;           /* einheitliche Größe */
    object-fit: contain;        /* Logos nicht verzerren */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* optional leichter Schatten */
    transition: transform 0.2s ease;
}

.partner-logos img:hover {
    transform: scale(1.05);     /* kleiner Hover-Effekt */
}
/* ================================
CHECKOUT - KOMPLETTE MOBILE FIXES
================================ */

/* Wrapper */
.checkout-wrapper {
    max-width: 1100px;
    margin: auto;
    padding: 0 15px; /* mobile-friendly */
    box-sizing: border-box;
}

/* Grid Layout */
.checkout-grid {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr; /* Desktop */
    gap: 40px;
    align-items: start;
}

/* Kundendaten + Bestellung */
.checkout-customer,
.checkout-order {
    width: 100%;
    box-sizing: border-box;
}

.checkout-order {
    background: #4f0d7a;
    padding: 30px;
    border-radius: 12px;
    color: #fff;
    position: sticky; /* Desktop sticky */
    top: 40px;
}

.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* Scroll nur wenn nötig */
}

/* Überschrift */
.checkout-order h3#order_review_heading {
    margin-top: 0;
    margin-bottom: 15px;
}

/* Formularfelder */
.woocommerce form .form-row {
    width: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* ================================
MOBILE STYLES
================================ */
@media (max-width: 900px) {

    .checkout-grid {
        grid-template-columns: 1fr; /* 1 Spalte */
        gap: 20px;
        justify-items: center; /* alles zentrieren */
    }

    .checkout-customer,
    .checkout-order {
        max-width: 500px; /* schöne mobile Breite */
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    .checkout-order {
        position: relative; /* sticky deaktivieren */
        top: 0;
        padding: 20px;
    }

    /* WooCommerce Formularfelder */
    .woocommerce form .form-row {
        width: 100%;
        margin: 0 0 12px 0;
        padding: 0;
    }

    /* Tabellenbereich Bestellung */
    .woocommerce-checkout-review-order,
    .woocommerce-checkout-review-order-table {
        width: 100%;
        overflow-x: auto;
    }
}

/* Extra Mobile Small Fix für <600px */
@media (max-width: 600px) {
    .checkout-wrapper {
        padding: 10px;
    }

    .checkout-grid {
        gap: 15px;
    }

    .checkout-customer,
    .checkout-order {
        max-width: 100%;
        padding: 0;
    }
}

/* NiceGUI Upload-Feld zentrieren */
.nicegui-upload-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 20px auto 0 auto; /* zentriert */
    padding: 15px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    background: #fafafa;
    box-sizing: border-box;
}

/* Formular Inputs + Selects responsive */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
}
/* Account Button */
.nicegui-account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #ccc;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-left: 8px; /* Abstand zum Cart */
}

/* Hover Effekt (optional, aber empfohlen) */
.nicegui-account-button:hover,
.nicegui-cart-button:hover {
    background: #999;
    transform: scale(1.05);
}
/* H2 Überschrift innerhalb von .nicegui-box */
.nicegui-box {
    color: #000000; /* schwarz */
    
}
/* ================================
HEADER ICONS & ACCOUNT DROPDOWN
================================ */

/* Container für Warenkorb + Account */
.header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative; /* wichtig für das absolute Account-Menü */
    padding-left: 20px;
}

/* Divider vor Icons */
.header-icons::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 36px;
    background: #fff;
    box-shadow:
        0 0 6px #fff,
        0 0 12px #fff,
        0 0 18px #fff;
}

/* ================================
ICON BUTTONS
================================ */
.nicegui-cart-button,
.nicegui-account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    background: #ccc;
    color: #000;
    transition: all 0.3s ease;
}

.nicegui-cart-button:hover,
.nicegui-account-button:hover {
    background: #999;
    transform: scale(1.05);
}

/* Icon Bild im Button anpassen */
.nicegui-account-button img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    display: block;
    margin: auto;
}

/* ================================
ACCOUNT DROPDOWN (MOBILE)
================================ */
.account-menu {
    display: none;           /* standardmäßig versteckt */
    position: absolute;
    top: 50px;               /* unter Account-Button */
    right: 0;
    background: #222;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;           /* über Header, aber nicht zu hoch */
    flex-direction: column;
    min-width: 150px;
    overflow: hidden;
}

.account-menu a {
    padding: 12px 16px;
    color: #fff;
    text-decoration: none;
    display: block;
    transition: background 0.2s;
}

.account-menu a:hover {
    background: #444;
}

/* ================================
MOBILE ANPASSUNGEN
================================ */
@media (max-width: 768px) {
    .header-icons {
        flex-direction: row;   /* Buttons horizontal statt untereinander */
        justify-content: flex-end;
        gap: 6px;
    }

    .nicegui-cart-button {
        margin-right: 10px;
        z-index: 1100;         /* über Account-Menü, damit sichtbar */
    }

    .nicegui-account-button {
        z-index: 1100;         /* sicherstellen, dass Button klickbar bleibt */
    }
}
/* ================================
WOOCOMMERCE ACCOUNT NAV AUSBLENDEN (MOBILE)
================================ */
@media (max-width: 768px) {
    
    /* Linke Menüleiste ausblenden */
    .woocommerce-MyAccount-navigation {
        display: none !important;
    }

    /* Inhalt auf volle Breite ziehen */
    .woocommerce-MyAccount-content {
        width: 100% !important;
    }
}
/* ================================
ACCOUNT BUTTON HIGHLIGHT (MOBILE)
================================ */
@media (max-width: 768px) {

    .nicegui-account-button {
        background: #eea647; /* Pflaumen-Lila */
        color: #fff;
        box-shadow:
            0 0 6px rgba(232, 232, 232, 0.6),
            0 0 12px rgba(181, 177, 185, 0.5),
            0 0 18px rgba(222, 219, 225, 0.4);
        transform: scale(1.05);
    }

    .nicegui-account-button:hover {
        background: #b87421;
        transform: scale(1.1);
    }

    /* 🔥 Optional: leichter Puls-Effekt */
    .nicegui-account-button {
        animation: accountPulse 2s infinite;
    }

    @keyframes accountPulse {
        0% {
            box-shadow:
                0 0 6px rgba(255, 234, 0, 0.6),
                0 0 12px rgba(244, 221, 120, 0.5),
                0 0 18px rgba(255, 255, 255, 0.4);
        }
        50% {
            box-shadow:
                0 0 10px rgba(255, 255, 255, 0.8),
                0 0 20px rgba(255, 255, 255, 0.7),
                0 0 30px rgba(255, 255, 255, 0.6);
        }
        100% {
            box-shadow:
                0 0 6px rgba(255, 255, 255, 0.6),
                0 0 12px rgba(255, 255, 255, 0.5),
                0 0 18px rgba(255, 255, 255, 0.4);
        }
    }
}
/* Buttons behalten ihre Farbe */
button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
    color: inherit !important;
}

/* Upload AGB Wrapper */
.nicegui-upload-wrapper{
    margin-top:30px;
    padding:20px;
    border:2px dashed #ccc;
    color: #000 !important;
    border-radius:10px;
    background:#fafafa;
}
/* Links im Upload-Bereich schwarz machen */
.nicegui-upload-wrapper a {
    color: #000 !important;
    text-decoration: underline; /* optional, für bessere Lesbarkeit */
}

.nicegui-upload-wrapper a:hover {
    color: #333; /* optional: dunklerer Hover */
}
/* WooCommerce Warenkorb-Buttons auf Shop-Seite */
.woocommerce ul.products li.product .button {
    background-color: #8e4585; /* pflaume-lila */
    color: #ffffff; /* weiße Schrift */
    border: none;
}

/* Hover-Effekt */
.woocommerce ul.products li.product .button:hover {
    background-color: #732d6c; /* dunkleres Lila beim Hover */
    color: #ffffff;
}
/* WooCommerce Mein Konto - Buttons (z.B. "Anzeigen") */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .woocommerce-button {
    background-color: #8e4585; /* pflaume-lila */
    color: #ffffff; /* weiße Schrift */
    border: none;
}

/* Hover */
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content .woocommerce-button:hover {
    background-color: #732d6c;
    color: #ffffff;
}
/* MODULE SELECT - COMPACT DARK */
.module-select {
    padding: 40px 15px;
    background: #a4b0d6;
    text-align: center;
}

.module-select-inner {
    max-width: 600px;
    margin: 0 auto;
}

.module-select h2 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Tabs (kleiner & cleaner) */
.module-tabs {
    display: inline-flex;
    background: #ffffff;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 20px;
}

.module-tabs .tab {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    color: #aaa;
    transition: 0.2s;
}

.module-tabs .tab.active {
    background: #8b3c94; /* Pflaumen-Lila */
    color: #ffffff;
}

/* Content kompakt */
.module-content {
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
}

/* Text */
.module-time {
    font-size: 14px;
    color: #322e2e;
    margin-bottom: 5px;
}

.module-price {
    font-size: 22px;
    font-weight: 600;
    color: #8b3c94;
    margin-bottom: 12px;
}

/* Button kleiner */
.module-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #8b3c94;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
}

.module-btn:hover {
    background: #5a189a;
}
/* SPLIT LAYOUT */
.hero-split {
    padding: 40px 20px;
    background: #f0f4fb;
}

.hero-split-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: start;
}

/* LEFT SIDE */
.hero-left {
    position: sticky;
    top: 40px;
}

/* RIGHT SIDE */
.hero-right {
    width: 100%;
}

/* SERVICES ANPASSEN (damit sie reinpassen) */
.services {
    padding: 0;
    background: transparent;
}

.services-title {
    color: #ffffff;              /* besser lesbar auf rotem Hintergrund */
    font-size: 24px;
    margin-bottom: 25px;

    background-color: rgb(91, 33, 80);       /* roter Hintergrund */
    border-radius: 12px;        /* abgerundete Ecken */
    padding: 10px 15px;         /* Abstand im Kasten */
    
    box-shadow: none;           /* entfernt Schlagschatten */
    display: inline-block;      /* sorgt dafür, dass die Box nur so breit wie der Text ist */
}

/* GRID etwas kompakter */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.service-card {
    background: #a4b0d6;
    padding: 18px;
    border-radius: 12px;
    color: #ffffff;
}

.service-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #fff;
}

.service-card p {
    font-size: 13px;
}

/* MOBILE */
@media (max-width: 900px) {
    .hero-split-inner {
        grid-template-columns: 1fr;
    }

    .hero-left {
        position: static;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }
}