/* IndexFuture Site CSS - Centralized Colors and Typography */

/* ===== COLOR VARIABLES ===== */
:root {
    /* Primary Colors */
    --primary-blue: #322d64;
    --secondary-blue: #A8C4E8;
    --light-blue: #E8F1FF;
    --accent-orange: #e54a66;
    
    /* Neutral Colors */
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --dark-gray: #343A40;
    --text-dark: #212529;
    
    /* Success/Action Colors */
    --success-green: #28A745;
    --warning-yellow: #FFC107;
    --danger-red: #DC3545;
    
    /* Background Colors */
    --bg-primary: var(--primary-blue);
    --bg-secondary: var(--light-blue);
    --bg-light: var(--light-gray);
    --bg-white: var(--white);
}

/* ===== TYPOGRAPHY ===== */
:root {
    /* Font Families */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Poppins', var(--font-primary);
    
    /* Font Sizes */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-base: 1rem;     /* 16px */
    --fs-lg: 1.125rem;   /* 18px */
    --fs-xl: 1.25rem;    /* 20px */
    --fs-2xl: 1.5rem;    /* 24px */
    --fs-3xl: 1.875rem;  /* 30px */
    --fs-4xl: 2.25rem;   /* 36px */
    --fs-5xl: 3rem;      /* 48px */
    
    /* Font Weights */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    
    /* Line Heights */
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;
}

/* ===== SPACING VARIABLES ===== */
:root {
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    --spacing-4xl: 5rem;     /* 80px */
    --spacing-5xl: 6rem;     /* 96px */
}

/* ===== BASE STYLES ===== */
body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-dark);
    background-color: var(--bg-white);
}

/* ===== HEADING STYLES ===== */
h1, .h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--spacing-lg);
}

h2, .h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    margin-bottom: var(--spacing-md);
}

h3, .h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    margin-bottom: var(--spacing-md);
}

h4, .h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    margin-bottom: var(--spacing-sm);
}

h5, .h5 {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    margin-bottom: var(--spacing-sm);
}

h6, .h6 {
    font-family: var(--font-heading);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    margin-bottom: var(--spacing-sm);
}

/* ===== UTILITY CLASSES ===== */
/* Background Colors */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-light-blue { background-color: var(--light-blue) !important; }
.bg-accent { background-color: var(--accent-orange) !important; }

/* Text Colors */
.text-primary { color: var(--primary-blue) !important; }
.text-secondary { color: var(--secondary-blue) !important; }
.text-white { color: var(--white) !important; }
.text-muted { color: var(--medium-gray) !important; }
.text-accent { color: var(--accent-orange) !important; }

/* ===== COMPONENT STYLES ===== */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1a3a6b 100%);
    color: var(--white);
    min-height: 40vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 80px; /* kleine Einkerbung */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,60 C420,70 1020,50 1440,30 L1440,80 L0,80 Z' fill='%23ffffff'/></svg>") no-repeat center bottom;
    background-size: 100% 100%;
}

.hero-title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--spacing-xl);
}

.hero-subtitle {
    font-size: var(--fs-xl);
    font-weight: var(--fw-normal);
    margin-bottom: var(--spacing-2xl);
    opacity: 0.9;
}

/* Inverted Section */
.inverted-section {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1a3a6b 100%);
    color: var(--white);
    min-height: 40vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}



/* Footer Section */
.footer-section {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1a3a6b 100%);
    color: var(--white);
    min-height: 35vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Der runde Verlaufs-Shape */
.gradient-circle-outside {
    position: relative; /* bleibt im normalen Flow, aber erlaubt Pseudo */
    height: 0;          /* nimmt keinen Platz ein */
}

.gradient-circle-outside::before {
    content: "";
    position: absolute;
    left: 70%;
    top: -50px; /* wie weit er in die Section ragt */
    transform: translateX(-70%);
    width: min(100vmin, 1250px);
    height: min(80vmin, 600px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1a3a6b 100%);
    filter: blur(2px);  /* optional weich */
    z-index: -1;
}

/* Sicherstellen, dass die Section darüber liegt */
.inverted-section {
    position: relative;
    z-index: 1;
}

/* Section Spacing */
.section-padding {
    padding: var(--spacing-3xl) 0;
}

.section-padding-sm {
    padding: var(--spacing-2xl) 0;
}

/* Cards */
.custom-card {
    background: var(--bg-white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.75rem;
    padding: var(--spacing-xl);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
    font-weight: var(--fw-semibold);
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-primary-custom:hover {
    background-color: #1a3a6b;
    border-color: #1a3a6b;
    color: var(--white);
    transform: translateY(-2px);
}

.btn-accent-custom {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: var(--white);
    font-weight: var(--fw-semibold);
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-accent-custom:hover {
    background-color: #ff7d9c;
    border-color: #ff7d9c;
    color: var(--white);
    transform: translateY(-2px);
}

/* Newsletter Form */
.newsletter-form {
    max-width: 500px;
    margin: 0 0;
    margin-left: auto; /* rechts ausrichten */
    text-align: right; /* Inhalt rechtsbündig (z. B. Button) */
}

   .newsletter-form .form-control {
       border-radius: 0.5rem;
       border: 1px solid #dee2e6;
       padding: 0.75rem 1rem;
       font-size: var(--fs-base);
   }

.newsletter-form .form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(46, 74, 135, 0.25);
}

/* Image Placeholders */
.image-placeholder {
    background-color: var(--light-blue);
    border: 2px dashed var(--secondary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    font-weight: var(--fw-medium);
    min-height: 200px;
    border-radius: 0.5rem;
    text-align: center;
    font-size: var(--fs-sm);
}

/* Partner Logos */
.partner-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.partner-logos:hover {
    opacity: 1;
}

.partner-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Statistics Cards */
.stats-card {
    background: linear-gradient(135deg, #1a3a6b 0%, var(--primary-blue) 100%);
    color: var(--white);
    border-radius: 1rem;
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 8px 25px rgba(46, 74, 135, 0.3);
}

.stats-number {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--spacing-sm);
}

.stats-label {
    font-size: var(--fs-base);
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: var(--fs-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--fs-lg);
    }
    
    .section-padding {
        padding: var(--spacing-2xl) 0;
    }
    
    h1, .h1 {
        font-size: var(--fs-3xl);
    }
    
    h2, .h2 {
        font-size: var(--fs-2xl);
    }
}


/* Handgezeichneter geschwungener Unterstrich-Effekt - Basis */
.highlighted-text {
    position: relative;
    z-index: 1;
    --highlight-color: #ff7d4c; /* Standard-Orange */
}

.highlighted-text::after {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -3px;
    height: 10px;
    background-color: var(--highlight-color);
    background-image:
            radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.4) 1px, transparent 0),
            radial-gradient(circle at 8px 6px, rgba(255, 255, 255, 0.2) 1px, transparent 0),
            linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 20%,
            transparent 40%,
            rgba(255, 255, 255, 0.2) 60%,
            transparent 80%,
            rgba(255, 255, 255, 0.1) 100%
            );
    border-radius: 60% 40% 70% 30%;
    transform: skew(-8deg, 2deg) rotate(-0.5deg);
    z-index: -1;
    opacity: 0.85;
    box-shadow:
            0 2px 4px color-mix(in srgb, var(--highlight-color) 30%, transparent),
            inset 0 -1px 3px rgba(255, 255, 255, 0.4),
            inset 0 1px 2px rgba(0, 0, 0, 0.15);

    /* Geschwungener Effekt mit Clip-Path */
    clip-path: ellipse(100% 80% at 50% 60%);
}

/* Zusätzlicher geschwungener Effekt mit einem Pseudo-Element */
.highlighted-text::before {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -1px;
    height: 6px;
    background-color: color-mix(in srgb, var(--highlight-color) 60%, transparent);
    border-radius: 50% 30% 60% 40%;
    transform: skew(5deg, -1deg) rotate(0.8deg);
    z-index: -1;
    opacity: 0.7;
    clip-path: ellipse(95% 70% at 45% 40%);
}

/* Farbvarianten als Modifikatoren */
.highlighted-text--orange {
    --highlight-color: #ff7d4c;
}

.highlighted-text--purple {
    --highlight-color: #c8a8ff;
}

.highlighted-text--blue {
    --highlight-color: #7fb7f2;
}

.highlighted-text--green {
    --highlight-color: #7dd87f;
}

.highlighted-text--pink {
    --highlight-color: #ff7fb7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .highlighted-text::after {
        height: 8px;
        left: -5px;
        right: -5px;
        border-radius: 50% 35% 65% 25%;
    }

    .highlighted-text::before {
        height: 5px;
        left: -3px;
        right: -3px;
    }
}

/* Basis */
.bilderladen-logo { max-height: 70px; height: auto; }
.photographer-hero { max-height: 500px; height: auto; }

/* ≤ lg (≤992px) */
@media (max-width: 992px) {
    .bilderladen-logo { max-height: 60px; }
    .photographer-hero { max-height: 150px; }
}

/* ≤ md (≤768px) */
@media (max-width: 768px) {
    .bilderladen-logo { max-height: 50px; }
    .photographer-hero { max-height: 60px; }
}

/* ≤ sm (≤576px) */
@media (max-width: 576px) {
    .bilderladen-logo { max-height: 40px; }
    .photographer-hero { max-height: 70px; }
}

/* ... existing code ... */
/* Einfaches, zentriertes Oval ohne Kanten (keine Animation, keine Rotation) */
.loyalty-bg-shape {
    position: absolute;
    left: 50%;
    top: 14%;                      /* bei Bedarf anpassen */
    transform: translateX(-50% )rotate(4deg);
    width: min(90%, 1600px);       /* Breite des Ovals */
    height: 85%;                   /* Höhe des Ovals relativ zur Section */
    background: var(--bg-secondary);
    z-index: -1;                   /* hinter dem Inhalt */
    opacity: 0.5;
    clip-path: ellipse(68% 50% at 50% 50%); /* perfektes Oval, zentriert */
    pointer-events: none;
    overflow: visible !important;
}

/* Fallback ohne clip-path: Oval über Border-Radius */
@supports not (clip-path: ellipse(50% 50% at 50% 50%)) {
    .loyalty-bg-shape {
        clip-path: none;
        border-radius: 9999px;     /* maximale Rundung -> Oval */
    }
}

/* Responsiv zentriert halten */
@media (max-width: 992px) {
    .loyalty-bg-shape { width: 94%; height: 58%; }
}
@media (max-width: 768px) {
    .loyalty-bg-shape { width: 96%; height: 54%; }
}
@media (max-width: 576px) {
    .loyalty-bg-shape {
        width: 100%;
        height: 200px;             /* fixes, ruhiges Oval unten */
        top: auto;
        bottom: 0;
    }
}

/* Modal Title - kein Wrap auf Desktop, Wrap nur auf Mobile */
.modal-title {
    flex-wrap: nowrap !important;
}

@media (max-width: 768px) {
    .modal-title {
        flex-wrap: wrap !important;
    }
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Tablet & Mobile (≤768px) */
@media (max-width: 768px) {
    /* Hero Section */
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .hero-badge {
        display: none !important;
    }
    
    /* Hero zentrieren auf Mobile */
    .hero-section .text-start {
        text-align: center !important;
    }
    
    .hero-section .row {
        text-align: center;
    }
    
    .hero-actions {
        text-align: center;
    }
    
    .hero-cta-microcopy br {
        display: none;
    }
    
    .hero-section .lead {
        text-align: center;
    }
    
    /* Images */
    .photographer-hero {
        margin-top: 2rem;
        max-height: 250px !important;
    }
    
    img[style*="height:500px"] {
        height: auto !important;
        max-height: 300px;
    }
    
    img[style*="max-height:400px"] {
        max-height: 250px !important;
    }
    
    img[style*="max-height:550px"] {
        max-height: 300px !important;
    }
    
    /* Newsletter Form */
    .newsletter-form {
        margin-left: 0;
        text-align: left;
    }
    
    .newsletter-form .col-md-8,
    .newsletter-form .col-md-4 {
        width: 100%;
    }
    
    .newsletter-form .text-end {
        text-align: left !important;
    }
    
    /* Footer */
    .footer-section .col-lg-3,
    .footer-section .col-lg-6 {
        padding-left: 15px !important;
    }
    
    .footer-section .col-md-6.text-md-end {
        text-align: left !important;
        margin-top: 1rem;
    }
    
    /* Sections - alles zentrieren auf Mobile */
    section .col-lg-6 {
        text-align: center;
    }
    
    section .col-lg-6 h2,
    section .col-lg-6 p,
    section .col-lg-6 ul,
    section .col-lg-6 .lead {
        text-align: center;
    }
    
    /* Listen mit Icons linksbündig halten für bessere Lesbarkeit */
    section .col-lg-6 ul.list-unstyled {
        display: inline-block;
        text-align: left;
    }
    
    /* Payment Icons */
    .d-flex.flex-wrap.gap-4 {
        gap: 1.5rem !important;
    }
    
    .d-flex.flex-wrap.gap-4 i {
        font-size: 2.5rem !important;
    }
    
    /* Stats Cards in commented sections */
    .stats-card {
        margin-bottom: 1rem;
    }
}

/* Mobile Only (≤576px) */
@media (max-width: 576px) {
    /* Typography */
    h2 {
        font-size: 1.5rem !important;
    }
    
    .lead {
        font-size: 1rem !important;
    }
    
    /* Hero Section */
    .hero-badge > div {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .hero-badge > div > div:first-child {
        font-size: 0.65rem !important;
    }
    
    .hero-badge > div > div:last-child {
        font-size: 1.2rem !important;
    }
    
    .btn-outline-light {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .hero-cta-microcopy {
        font-size: 0.75rem !important;
    }
    
    /* Images */
    img[style*="height:500px"],
    img[style*="max-height:400px"],
    img[style*="max-height:550px"] {
        max-height: 200px !important;
    }
    
    img[style*="width: 200px"] {
        width: 150px !important;
    }
    
    /* Payment Icons */
    .d-flex.flex-wrap.gap-4 i {
        font-size: 2rem !important;
    }
    
    /* Cards */
    .custom-card {
        padding: 1rem !important;
    }
    
    /* Lists */
    ul.list-unstyled li {
        font-size: 0.9rem;
    }
    
    /* Buttons */
    .btn-primary-custom,
    .btn-accent-custom {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Footer */
    footer h2 {
        font-size: 1.5rem !important;
    }
    
    footer .lead {
        font-size: 0.95rem !important;
    }
    
    footer h6 {
        font-size: 1rem;
        margin-top: 1rem;
    }
}
/* ... existing code ... */

/* Mockup-Stil: kleineres Bild als Papierblatt */
.paper-mockup {
    position: relative;
    width: min(300px, 90%); /* etwas kleiner */
    padding: 18px 14px;     /* Seitenränder des „Papiers“ */
    margin-top: 20px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    box-shadow:
            0 12px 24px rgba(0,0,0,0.18),          /* Hauptschatten */
            0 2px 0 rgba(0,0,0,0.05) inset;        /* leichte Kante innen */
    transform: rotate(-1deg);                  /* leichte Schräglage */
    border: 1px solid rgba(0,0,0,0.06);
}

/* leichte Eselsohr-Ecke */
.paper-mockup::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #f1f1f1 0%, #ffffff 70%);
    box-shadow: -2px 2px 4px rgba(0,0,0,0.08);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: rotate(0.5deg);
}

.paper-mockup img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    filter: saturate(0.98) contrast(1.02);
}

@media (min-width: 992px) {
    .paper-mockup { margin-left: 0; }
}