/* =======================================================
   GROOVY BABY – GLOBAL TOKENS
   ======================================================= */

:root {
    --gb-bg: #EFECD9;
    --gb-accent-lavender: #C98AD3;
    --gb-accent-orange: #F39A17;
    --gb-accent-soft: #f4f0e4;
    --gb-text-main: #333333;
    --gb-text-muted: #7a7a7a;
    --gb-text-soft: #4a4a4a;
    --gb-radius-lg: 24px;
    --gb-radius-xl: 28px;
    --gb-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.06);
    --gb-shadow-strong: 0 16px 36px rgba(0, 0, 0, 0.15);
}

/* =======================================================
   GLOBAL BACKGROUND / LAYOUT BASE
   ======================================================= */

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--gb-bg);
}

/* App wrapper */
.app-root {
    min-height: 100vh;
    background-color: var(--gb-bg);
}

/* Blazor Root */
#app {
    background-color: var(--gb-bg);
}

/* Layout-Container: transparent, aber ohne !important */
main,
.page,
.content,
.mud-main-content,
.mud-layout,
.mud-container {
    background-color: transparent;
}

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

.site-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}

/* Standardseiten: weißer Sticky Header */
.site-header--solid {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    backdrop-filter: none;
}

/* Home: Overlay über Video */
.site-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
}

    .site-header--overlay.scrolled {
        background-color: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    }

.site-header-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.site-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-link {
    position: relative;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #2a2a2a;
    padding: 4px 0;
}

    .nav-link::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #C98AD3, #F39A17);
        transition: width 0.18s ease-in-out;
    }

    .nav-link:hover::after {
        width: 100%;
    }

.nav-link-active::after {
    width: 100%;
}

@media (max-width: 768px) {
    .site-header-inner {
        padding-inline: 20px;
    }

    .site-nav {
        gap: 16px;
    }

    .nav-link {
        font-size: 0.95rem;
    }
}

/* =======================================================
   AUTH (Login/Register) – Page Styles
   ======================================================= */

.gb-auth {
    min-height: calc(100vh - 90px);
    display: grid;
    place-items: center;
    padding: 40px 16px;
    background: var(--gb-bg);
}

.gb-auth-card {
    width: min(560px, 100%);
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 50px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.05);
    backdrop-filter: blur(8px);
}

.gb-auth-header {
    padding: 34px 34px 22px 34px;
    background: #F7F4EF;
}

.gb-auth-kicker {
    letter-spacing: 0.28em;
    font-weight: 700;
    font-size: 12px;
    color: rgba(20, 20, 20, 0.70);
}

.gb-auth-brand {
    margin-top: 10px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: rgba(20, 20, 20, 0.85);
}

    .gb-auth-brand span {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        margin-left: 10px;
        color: rgba(20, 20, 20, 0.70);
    }

.gb-auth-slogan {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(20, 20, 20, 0.75);
}

/* Slogan-Farben */
.gb-s1 {
    color: #C98AD3;
}

.gb-s2 {
    color: #D86D6D;
}

.gb-s3 {
    color: #F39A17;
}

.gb-auth-body {
    padding: 26px 34px 30px 34px;
}

.gb-auth-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
    color: rgba(20, 20, 20, 0.90);
}

.gb-auth-subtitle {
    font-size: 14px;
    color: rgba(20, 20, 20, 0.65);
    margin-bottom: 18px;
}

.gb-auth-validation {
    color: #B42318;
    font-size: 13px;
    margin: 10px 0 14px 0;
}

.gb-field {
    margin-bottom: 14px;
}

.gb-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(20, 20, 20, 0.65);
    margin-bottom: 8px;
}

.gb-input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(20, 20, 20, 0.12);
    background: rgba(255, 255, 255, 0.90);
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
}

    .gb-input:focus {
        border-color: rgba(201, 138, 211, 0.70);
        box-shadow: 0 0 0 5px rgba(201, 138, 211, 0.20);
    }

.gb-field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #B42318;
}

.gb-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(20, 20, 20, 0.70);
    margin: 10px 0 16px 0;
}

.gb-check-input {
    width: 18px;
    height: 18px;
    accent-color: #F39A17;
}

.gb-links {
    margin-top: 16px;
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.gb-link {
    color: rgba(20, 20, 20, 0.70);
    text-decoration: none;
}

    .gb-link:hover {
        text-decoration: underline;
    }

@media (max-width: 520px) {
    .gb-auth-header {
        padding: 26px 20px 18px 20px;
    }

    .gb-auth-body {
        padding: 22px 20px 26px 20px;
    }

    .gb-auth-brand {
        font-size: 38px;
    }
}

/* Optionaler Hero-Header im Auth-Bereich */
.gb-auth-hero {
    padding: 30px 34px 18px 34px;
    background: #F7F4EF;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.gb-hero-kicker {
    letter-spacing: 0.28em;
    font-weight: 700;
    font-size: 12px;
    color: rgba(20,20,20,0.65);
    text-transform: uppercase;
}

.gb-hero-brand {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.gb-hero-groovy {
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    color: rgba(20,20,20,0.86);
    font-family: Georgia, "Times New Roman", serif;
}

.gb-hero-baby {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.45em;
    color: rgba(20,20,20,0.60);
}

@media (max-width: 520px) {
    .gb-auth-hero {
        padding: 22px 20px 14px 20px;
    }

    .gb-hero-groovy {
        font-size: 44px;
    }
}

/* =======================================================
   LOGIN HEADER – GROOVY BABY
   ======================================================= */

.gb-login-header {
    background: #fffdf3;
    padding: 72px 16px 48px;
    text-align: center;
}

.gb-login-overline {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 600;
    color: #656565;
    font-size: 1.1rem;
    margin-bottom: 18px;
}

.gb-login-logo-wrapper {
    margin-bottom: 16px;
}

.gb-login-logo {
    width: 220px;
    max-width: 80vw;
    height: auto;
    display: inline-block;
}

.gb-login-claim {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 1.1rem;
    margin-top: 8px;
    background: linear-gradient(90deg, #C98AD3, #F39A17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (max-width: 768px) {
    .gb-login-header {
        padding: 56px 16px 36px;
    }

    .gb-login-logo {
        width: 180px;
    }

    .gb-login-claim {
        font-size: 1rem;
    }
}

/* =======================================================
   ÜBER CARO – Page Styles
   ======================================================= */

.about-caro-hero-grid {
    align-items: center;
    gap: 40px;
}

.about-caro-title {
    max-width: 620px;
}

.about-caro-intro {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin-bottom: 14px;
}

.about-caro-photo-wrapper {
    max-width: 360px;
    aspect-ratio: 3 / 4;
    border-radius: var(--gb-radius-xl);
    overflow: hidden;
    background: var(--gb-accent-soft);
    box-shadow: var(--gb-shadow-strong);
}

.about-caro-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-caro-body {
    padding-top: 10px;
}

.about-caro-body-grid {
    align-items: flex-start;
    gap: 40px;
}

.about-caro-subtitle {
    margin-top: 0;
    margin-bottom: 18px;
    font-weight: 700;
    color: var(--gb-text-main);
}

.about-caro-body-text p {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--gb-text-soft);
    margin-bottom: 14px;
}

/* Facts Sidebar */
.about-caro-facts {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--gb-radius-lg);
    padding: 20px 22px 22px;
    box-shadow: var(--gb-shadow-soft);
}

.about-caro-facts-title {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #3b372f;
}

.about-caro-facts-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-caro-fact-pill {
    display: inline-block;
    background: rgba(201, 138, 211, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.9rem;
    color: #3f3741;
}

/* CTA */
.about-caro-cta {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 12px;
}

.about-caro-cta-text {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: #4a4a4a;
}

.about-caro-cta-button {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(90deg, #C98AD3, #F39A17);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

    .about-caro-cta-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        opacity: 0.96;
    }

@media (max-width: 960px) {
    .about-caro-hero-grid,
    .about-caro-body-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .about-caro-photo-wrapper {
        max-width: 280px;
        margin-inline: auto;
    }

    .about-caro-body {
        padding-bottom: 70px;
    }
}

/* =======================================================
   10er-Karte
   ======================================================= */

.gb-tenpass {
    background: var(--gb-bg);
    padding: 56px 16px 64px;
    min-height: calc(100vh - 90px);
    display: grid;
    justify-items: center;
}

.gb-tenpass-header {
    width: min(760px, 100%);
    text-align: center;
    margin-bottom: 18px;
}

.gb-tenpass-overline {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #656565;
    font-weight: 600;
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

.gb-tenpass-title {
    margin: 0 0 10px 0;
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: #2A2A2A;
}

.gb-tenpass-subtitle {
    margin: 0 auto;
    max-width: 56ch;
    color: #4f4a42;
    line-height: 1.6;
    font-size: 1.05rem;
}

.gb-tenpass-card {
    width: min(560px, 100%);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 26px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.10);
    backdrop-filter: blur(8px);
}

.gb-tenpass-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.gb-tenpass-badge {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(201, 138, 211, 0.18);
    color: #2A2A2A;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.gb-tenpass-price {
    text-align: right;
    line-height: 1.1;
}

.gb-tenpass-price-main {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(90deg, #C98AD3, #F39A17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gb-tenpass-price-sub {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #6b6b6b;
}

.gb-tenpass-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px;
    display: grid;
    gap: 8px;
    color: #4f4a42;
}

.gb-tenpass-alert {
    border-radius: 14px;
    padding: 12px 12px;
    font-size: 0.95rem;
    margin: 10px 0 12px;
}

.gb-tenpass-alert--error {
    background: rgba(180, 35, 24, 0.10);
    border: 1px solid rgba(180, 35, 24, 0.18);
    color: #7a1f18;
}

.gb-tenpass-alert--success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.20);
    color: #166534;
}

.gb-tenpass-btn {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: #F39A17;
    color: rgba(20,20,20,0.90);
    box-shadow: 0 14px 26px rgba(243, 154, 23, 0.28);
}

    .gb-tenpass-btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        box-shadow: none;
    }

.gb-tenpass-hint {
    margin: 12px 2px 0;
    font-size: 0.9rem;
    color: #6b6b6b;
    line-height: 1.5;
}

/* =======================================================
   FAQ – Page Styles
   ======================================================= */

.faq-title {
    max-width: 680px;
    margin-bottom: 16px;
}

.faq-intro {
    max-width: 720px;
    margin-bottom: 28px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.faq-item {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: var(--gb-shadow-soft);
    padding: 12px 16px;
}

    .faq-item > summary::marker {
        font-size: 0;
        color: transparent;
    }

/* summary (Frage) */
.faq-question {
    list-style: none;
    cursor: pointer;
    position: relative;
    font-weight: 600;
    color: var(--gb-text-main);
    /* Platz für Pfeil */
    padding-right: 34px;
    /* Pfeil-Tuning */
    --faq-arrow-right: 10px;
    --faq-arrow-base: 7px; /* left/right */
    --faq-arrow-height: 9px; /* top */
}

    /* Pfeil rechts (rein CSS, keine Glyphs) */
    .faq-question::after {
        content: "";
        position: absolute;
        right: var(--faq-arrow-right);
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        width: 0;
        height: 0;
        border-left: var(--faq-arrow-base) solid transparent;
        border-right: var(--faq-arrow-base) solid transparent;
        border-top: var(--faq-arrow-height) solid var(--gb-text-muted);
        transition: transform 0.18s ease;
    }

.faq-item[open] .faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    margin: 8px 0 4px 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--gb-text-soft);
}

.faq-cta-row {
    margin-top: 32px;
}

@media (max-width: 768px) {
    .faq-intro {
        margin-bottom: 22px;
    }

    .faq-item {
        padding: 10px 12px;
    }
}

/* =======================================================
   HOME – HERO VIDEO
   ======================================================= */

.home-hero-wrapper {
    position: relative;
    height: 70vh;
    min-height: 100vh;
    overflow: hidden;
    background: #fffdf3;
}

.home-hero-video {
    position: absolute;
    top: 62%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    filter: brightness(0.8);
    pointer-events: none;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(255, 252, 240, 0.80) 0%, rgba(255, 252, 240, 0.92) 40%, rgba(255, 252, 240, 1) 100% );
    z-index: 1;
}

.home-root.home-hero.home-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 40px;
    display: grid;
    justify-items: center;
    row-gap: 18px;
    text-align: center;
}

.home-hero-overline {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #656565;
    font-weight: 600;
    margin: 0 0 20px 0;
    font-size: 1.8rem;
    opacity: 0.95;
}

.hero-logo-wrapper {
    background: transparent;
    padding: 0;
    border: none;
}

.hero-logo-image {
    width: 260px;
    max-width: 80vw;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.home-hero-claim {
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 12px;
    font-size: 1.25rem;
    background: linear-gradient(90deg, #C98AD3, #F39A17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.home-hero-social {
    margin-top: 18px;
}

.home-hero-instagram-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.instagram-icon {
    width: 42px;
    height: 42px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .instagram-icon:hover {
        transform: scale(1.2);
        opacity: 0.9;
    }

@media (max-width: 768px) {
    .home-hero-wrapper {
        height: 90vh;
        min-height: 420px;
    }

    .home-root.home-hero.home-hero-content {
        padding-top: 90px;
        padding-inline: 16px;
    }

    .home-hero-overline {
        font-size: 1.3rem;
        margin-bottom: 14px;
    }

    .hero-logo-image {
        width: 200px;
        margin-bottom: 14px;
    }

    .home-hero-claim {
        font-size: 1.05rem;
    }

    .instagram-icon {
        width: 36px;
        height: 36px;
        margin-top: 14px;
    }
}

/* =======================================================
   HOME – ABOUT / EXPECT / TESTIMONIALS
   ======================================================= */

.about-groovy-grid {
    align-items: center;
    gap: 40px;
}

.about-groovy-media-col {
    display: flex;
    justify-content: center;
}

.about-groovy-media {
    max-width: 520px;
    max-height: 400px;
}

.about-groovy-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.expect-title-main {
    max-width: 520px;
    margin-bottom: 40px;
}

.expect-icon {
    font-size: 1.9rem;
    margin-bottom: 10px;
}

.expect-item-title {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #3b372f;
}

.expect-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4f4a42;
}

.testimonials-title-main {
    max-width: 620px;
    margin-bottom: 40px;
}

.testimonial-quote-icon {
    position: absolute;
    top: -10px;
    left: 14px;
    font-size: 4rem;
    color: rgba(201, 138, 211, 0.15);
    pointer-events: none;
}

.testimonial-card {
    position: relative;
    overflow: hidden;
}

.testimonial-text {
    margin: 0 0 12px 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4f4a42;
    position: relative;
    z-index: 1;
}

.testimonial-name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3b372f;
    position: relative;
    z-index: 1;
}

/* =======================================================
   IMPRESSUM – Page Styles
   ======================================================= */

.gb-page--impressum {
    min-height: 100vh;
    padding: 6rem 1.5rem 4rem;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.gb-section--impressum {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gb-impressum-card {
    width: 100%;
    max-width: 800px;
    background: #ffffff;
    color: #222222;
    border-radius: 16px;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    line-height: 1.7;
    font-size: 0.98rem;
}

/* Impressum: leichte Abweichung der Section-Title Optik nur dort */
.gb-page--impressum .gb-section-title {
    font-size: 2rem;
    margin-bottom: 1.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 0.75rem;
}

.gb-impressum-card h2 {
    font-size: 1.1rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gb-impressum-card p {
    margin: 0.2rem 0 0.9rem;
    font-size: 0.98rem;
}

.gb-impressum-card a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

    .gb-impressum-card a:hover,
    .gb-impressum-card a:focus {
        border-bottom-color: #c47ad4;
        color: #c47ad4;
    }

@media (max-width: 768px) {
    .gb-page--impressum {
        padding: 5rem 1rem 3rem;
    }

    .gb-impressum-card {
        padding: 1.75rem 1.4rem;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .gb-page--impressum .gb-section-title {
        font-size: 1.6rem;
        text-align: left;
    }

    .gb-impressum-card h2 {
        font-size: 1rem;
    }

    .gb-impressum-card p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .gb-page--impressum {
        padding: 4.5rem 0.75rem 2.5rem;
    }

    .gb-impressum-card {
        padding: 1.5rem 1.1rem;
    }
}

/* =======================================================
   SHARED UTILITIES (Sections / Typography / Grid / Cards)
   ======================================================= */

.gb-section {
    padding-top: 70px;
    padding-bottom: 80px;
    background-color: var(--gb-bg);
}

.gb-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 32px;
}

@media (max-width: 960px) {
    .gb-section-inner {
        padding-inline: 20px;
    }
}

.gb-overline {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gb-text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    font-size: 0.78rem;
}

.gb-section-title {
    margin-top: 0;
    margin-bottom: 24px;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.3;
    color: var(--gb-text-main);
}

.gb-section-title-sm {
    margin-top: 0;
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--gb-text-main);
}

.gb-body-text {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--gb-text-soft);
}

.gb-highlight-text {
    display: block;
    margin-top: 8px;
    font-weight: 600;
    color: #3b372f;
}

.gb-text-center {
    text-align: center;
}

/* Grid */
.gb-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
}

.gb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.gb-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1100px) {
    .gb-grid-3,
    .gb-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .gb-grid-2,
    .gb-grid-3,
    .gb-grid-4 {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* Cards */
.gb-card-soft {
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--gb-radius-lg);
    padding: 22px 22px 20px;
    box-shadow: var(--gb-shadow-soft);
    backdrop-filter: blur(4px);
}

.gb-card-strong {
    background: var(--gb-accent-soft);
    border-radius: var(--gb-radius-xl);
    box-shadow: var(--gb-shadow-strong);
    overflow: hidden;
}

.gb-card-hover {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .gb-card-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    }

/* =======================================================
   BUTTONS (Shared)
   ======================================================= */

/* Base */
.gb-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Primary gradient */
.gb-btn-primary {
    background: linear-gradient(90deg, var(--gb-accent-lavender), var(--gb-accent-orange));
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

    .gb-btn-primary:hover {
        transform: translateY(-1px);
        opacity: 0.96;
    }

/* Ghost */
.gb-btn-ghost {
    background: transparent;
    color: var(--gb-text-main);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .gb-btn-ghost:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.6);
    }

/* Button rows */
.gb-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.gb-btn-row-center {
    justify-content: center;
}

/* Auth: wenn du dort .gb-btn nutzt, soll er wie vorher groß/orange/100% sein */
.gb-auth .gb-btn {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 12px 16px;
    font-weight: 900;
    letter-spacing: 0.04em;
    background: #F39A17;
    color: rgba(20, 20, 20, 0.90);
    box-shadow: 0 14px 26px rgba(243, 154, 23, 0.28);
}

    .gb-auth .gb-btn:hover {
        filter: brightness(0.98);
    }

/* =======================================================
   SPACING UTILITIES
   ======================================================= */

.gb-mt-xs {
    margin-top: 8px;
}

.gb-mt-sm {
    margin-top: 12px;
}

.gb-mt-md {
    margin-top: 20px;
}

.gb-mt-lg {
    margin-top: 32px;
}

.gb-mb-xs {
    margin-bottom: 8px;
}

.gb-mb-sm {
    margin-bottom: 12px;
}

.gb-mb-md {
    margin-bottom: 20px;
}

.gb-mb-lg {
    margin-bottom: 32px;
}

.gb-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient( 90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) );
    margin: 24px 0;
}

/* =======================================================
   FOCUS (sauber, ohne "blauen Kasten" bei Maus/Touch)
   ======================================================= */

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid rgba(201, 138, 211, 0.65);
    outline-offset: 3px;
}