/* --------------------------------------------------------------
   1. Navigation & Basis-Typografie
---------------------------------------------------------------*/

.main-header-menu .menu-link,
.main-header-menu a {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}

.entry-title {
    font-size: 2rem;
}

h2.widget-title {
    text-transform: none;
}

.site-footer .widget-title {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.125rem;
}

ol.buchstaben {
    list-style-type: lower-alpha;
}


/* --------------------------------------------------------------
   2. WooCommerce Tabs (Optik)
---------------------------------------------------------------*/

.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0;
    border-top: 1px solid rgba(0,0,0,.07);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: .5em 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    color: #515151;
    text-transform: uppercase;
}


/* --------------------------------------------------------------
   3. Produktbeschreibung (DARK STYLE)
---------------------------------------------------------------*/

/* Hintergrund des Beschreibungspanels — radialer Verlauf */
.woocommerce div.product .woocommerce-tabs .panel {
    padding: 4em 2em;
	border-radius: 10px;
    background: radial-gradient(
        circle at center,
        #575757 0%,   /* heller in der Mitte */
        #454545 50%,  /* Standard-Dunkel */
        #3E4045 100%  /* ganz dunkel am Rand */
    );
    color: #3399ff;
    font-size: 30px;
    line-height: 1.2;
}

/* Mobile Anpassung */
@media (max-width: 544px) {
    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 2em 1em;
    }
}


/* --------------------------------------------------------------
   3.1 Headline oben ("Bereit für ein sauberes Motorrad?")
---------------------------------------------------------------*/

.woocommerce div.product .woocommerce-tabs .panel h4:first-of-type {
    text-align: center;
    font-size: 50px;
	font-weight: 800;
    margin-bottom: 1em;
    color: #4767DE !important;
    text-shadow:
        0 0 2px #ffffff,
        0 0 5px rgba(255,255,255,1),
        0 0 5px rgba(255,255,255,1);
}

/* Entfernt eventuelle p-Wrapper */
.woocommerce div.product .woocommerce-tabs .panel h4:first-of-type::before,
.woocommerce div.product .woocommerce-tabs .panel h4:first-of-type::after {
    display: none;
}


/* --------------------------------------------------------------
   3.2 Zwei-Spalten-Layout (nur Desktop)
---------------------------------------------------------------*/

@media (min-width: 769px) {

    /* Alles nach der H4 in zwei Spalten */
    .woocommerce div.product .woocommerce-tabs .panel .beschreibung-spalten {
        column-count: 2;
        column-gap: 40px;
		margin-bottom: 60px;
    }
}

/* Text in den Spalten */
.beschreibung-spalten p {
    margin-bottom: 0.6em;
    color: #3399ff;
    text-shadow:
        0 0 0px #ffffff,
        0 0 10px rgba(255,255,255,0.35);
}

/* --------------------------------------------------------------
   3.3 Abschnitt unterhalb der Spalten (einspaltig)
---------------------------------------------------------------*/

.woocommerce div.product .woocommerce-tabs .panel .beschreibung-extra p {
   	font-size: 14px;
    margin: 0.4em ;
    color: #3399ff;
    text-shadow:
        0 0 0px #ffffff,
        0 0 0px rgba(255,255,255,0.35);
}


/* --------------------------------------------------------------
   3.4 Links & Farben im Beschreibungsbereich
---------------------------------------------------------------*/

.single-product .woocommerce-tabs .panel a {
    color: #66ccff !important;
    text-decoration: underline;
}


/* --------------------------------------------------------------
   4. Checkout Styling
---------------------------------------------------------------*/

.woocommerce-page.woocommerce-checkout form #order_review table {
    padding: 1em;
}

#order_review .legal {
    padding: 1em 1em 2em 0;
}

.woocommerce-page.woocommerce-checkout form #order_review_heading {
    border: 2px solid #ebebeb;
    width: 100%;
    text-align: center;
    float: left;
    margin: 2em 0 1em 0;
}

.woocommerce-error {
    border-top-color: #E3000B;
    color: #E3000B;
    border: 3px solid #E3000B;
}

.woocommerce-error::before {
    content: '\e016';
    color: #E3000B;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
    border: 3px solid #E3000B;
}


/* --------------------------------------------------------------
   5. Buttons (3D Orange Stil)
---------------------------------------------------------------*/

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
a.add_to_cart_button,
.wp-block-button__link,
.wp-element-button,
.snoto-variant-manual-link,
input[type="submit"],
button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem 1.25rem !important;
    border: 1px solid #D48C3F !important;
    border-bottom-color: #b9762e !important;
    border-radius: 999px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.22) 42%, rgba(255,255,255,0) 43%),
        linear-gradient(180deg, #F3BB6F 0%, #EAAA5B 62%, #D48C3F 100%) !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -2px 0 rgba(0,0,0,.10) !important;
    transition: background .15s ease, color .15s ease !important;
}


/* ---------------------------------------
   Fahrzeug-Buttons — Flexibles Zeilenlayout
---------------------------------------- */

/* Container: Buttons wie Tags anordnen */
.custom-fahrzeug-field .fahrzeug-radio-options {
    display: flex;
    flex-wrap: wrap;        /* <-- Automatischer Zeilenumbruch */
    gap: 10px 10px;         /* horizontal + vertikal Abstand */
    justify-content: flex-start;
}

/* Jeder Button (Label) */
.custom-fahrzeug-field .fahrzeug-choice {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

/* Radio unsichtbar */
.custom-fahrzeug-field .fahrzeug-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Button-Stil (inaktiv) */
.custom-fahrzeug-field .fahrzeug-label-text {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    background: linear-gradient(90deg, #ff9900 0%, #ffffff 100%);
    color: #000;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;     /* verhindert hässliche Zeilenumbrüche im Button */
    transition: all .2s ease;
}

/* Hover */
.custom-fahrzeug-field .fahrzeug-choice:hover .fahrzeug-label-text {
    filter: brightness(0.95);
}

/* Aktiver Button */
.custom-fahrzeug-field .fahrzeug-choice input[type="radio"]:checked + .fahrzeug-label-text {
    background: linear-gradient(90deg, #0066ff 0%, #ffffff 100%);
    color: #fff;
}


/* ------------------------------------
   8. Glowing Accent Bars (Description)
------------------------------------- */

/* Panel erweitern, damit die Glow-Effekte sichtbar sind */
.single-product .woocommerce-tabs .panel {
    position: relative;
    overflow: visible;
}



/* Basis-Container – bekommt Schatten */
.single-product .woocommerce-tabs .panel {
    position: relative;
    overflow: visible;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* blauer Glow-Schatten */
}

/* -----------------------------------------------------------
   1. VERTIKALER „KITT-BLAU“-SCANNER (links), animiert
------------------------------------------------------------ */

.single-product .woocommerce-tabs .panel::after {
    content: "";
    position: absolute;
    top: 10%;
    left: 5px;
    width: 20px;
    height: 80%;
    border-radius: 10px;

    /* blauer Leuchtstreifen */
    background: linear-gradient(
        to bottom,
        rgba(0,150,255,0) 0%,
        rgba(0,150,255,1) 50%,
        rgba(0,150,255,0) 100%
    );

    /* Glow */
    filter: blur(4px);

    /* Animation */
    animation: kitt-vertical 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes kitt-vertical {
    0%   { top: 5%; height: 10%; opacity: 0.3; }
    50%  { top: 60%; height: 35%; opacity: 1; }
    100% { top: 5%; height: 10%; opacity: 0.3; }
}

/* -----------------------------------------------------------
   2. HORIZONTALER „KITT“-Scanner (oben), animiert
------------------------------------------------------------ */

.single-product .woocommerce-tabs .panel::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 5%;
    width: 90%;
    height: 10px;
    border-radius: 10px;

    /* blauer horizontaler Strahl */
    background: linear-gradient(
        to right,
        rgba(0,150,255,0) 0%,
        rgba(0,150,255,1) 40%,
        rgba(0,150,255,0) 100%
    );

    /* Glow */
    filter: blur(3px);

    /* KITT-Wisch-Animation */
    animation: kitt-horizontal 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes kitt-horizontal {
    0%   { left: 5%; width: 20%; opacity: 0.4; }
    50%  { left: 40%; width: 40%; opacity: 1; }
    100% { left: 70%; width: 20%; opacity: 0.4; }
}


/* -----------------------------------------------------------
   STATIC WHITE NEON LINE (rechts)
   → wird am Element ".beschreibung-spalten" angehängt
------------------------------------------------------------ */

.woocommerce div.product .woocommerce-tabs .panel .beschreibung-spalten {
    position: relative; /* wichtig */
}

.woocommerce div.product .woocommerce-tabs .panel .beschreibung-spalten::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 100px;
    width: 70%;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0) 100%
    );
    filter: blur(1px);
    opacity: 1;
    pointer-events: none;
    z-index: 20;
}