/**
 * Tierliebe Layout Styles
 * Module: Hero, Sections, Containers, Info Boxes, Footer
 */

/* ============================================
   PRIMARY HERO - PASTEL STYLE
   ============================================ */
.primary-hero {
    position       : relative;
    min-height     : 70vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 140px 30px 80px;
    background     : linear-gradient(135deg, var(--pastel-peach) 0%, var(--pastel-cream) 50%, var(--pastel-lavender) 100%);
    color          : var(--text-dark);
    text-align     : center;
    overflow       : hidden;
}

.primary-hero::before,
.primary-hero::after {
    content       : '🐾';
    position      : absolute;
    font-size     : 12rem;
    opacity       : 0.08;
    pointer-events: none;
    animation     : paw-float-1 20s ease-in-out infinite;
}

.primary-hero::before {
    top            : 20%;
    left           : 10%;
    animation-delay: 0s;
}

.primary-hero::after {
    bottom         : 15%;
    right          : 15%;
    animation-delay: 12s;
}

@keyframes paw-float-1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity  : 0.08;
    }

    25% {
        transform: translate(30px, -40px) rotate(10deg);
        opacity  : 0.12;
    }

    50% {
        transform: translate(-20px, -80px) rotate(-5deg);
        opacity  : 0.10;
    }

    75% {
        transform: translate(40px, -120px) rotate(15deg);
        opacity  : 0.06;
    }
}

.primary-hero-content {
    max-width: 900px;
    position : relative;
    z-index  : 1;
}

.primary-hero .hero-content {
    max-width            : 1200px;
    margin               : 0 auto;
    position             : relative;
    z-index              : 1;
    display              : grid;
    grid-template-columns: 1.5fr 1fr;
    gap                  : 60px;
    align-items          : center;
}

.primary-hero .hero-text {
    text-align: left;
}

.primary-hero .hero-icon {
    position       : relative;
    text-align     : center;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.primary-hero-title,
.hero-title {
    font-family  : 'Fredoka', sans-serif;
    font-size    : 4rem;
    font-weight  : 700;
    margin-bottom: 25px;
    line-height  : 1.2;
    color        : var(--text-dark);
    text-shadow  : 2px 2px 8px rgba(255, 255, 255, 0.8);
    animation    : fadeInUp 0.8s ease-out;
}

.primary-hero-subtitle,
.hero-subtitle {
    font-family  : 'Quicksand', sans-serif;
    font-size    : 1.5rem;
    font-weight  : 600;
    margin-bottom: 20px;
    line-height  : 1.6;
    color        : var(--cute-coral);
    animation    : fadeInUp 1s ease-out;
}

.primary-hero-description,
.hero-description {
    font-size    : 1.1rem;
    margin-bottom: 40px;
    line-height  : 1.8;
    color        : var(--text-medium);
    animation    : fadeInUp 1.2s ease-out;
}

.primary-hero .btn {
    animation: fadeInUp 1.6s ease-out;
    font-size: 1.3rem;
    padding  : 20px 50px;
}

@keyframes fadeInUp {
    0% {
        opacity  : 0;
        transform: translateY(30px);
    }

    100% {
        opacity  : 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   DECISION SECTION - DUAL PANEL
   ============================================ */
.decision-section {
    padding   : 100px 30px;
    background: var(--bg-cream);
    position  : relative;
}

.decision-container {
    max-width: 1200px;
    margin   : 0 auto;
}

.decision-dual-panel {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 40px;
    margin-bottom        : 60px;
}

.decision-card {
    background   : white;
    padding      : 50px 40px;
    border-radius: 40px;
    box-shadow   : var(--shadow-md);
    transition   : all 0.4s ease;
    position     : relative;
    overflow     : hidden;
}

.decision-card::before {
    content      : '';
    position     : absolute;
    top          : 0;
    left         : 0;
    right        : 0;
    height       : 8px;
    border-radius: 40px 40px 0 0;
}

.decision-card-left::before {
    background: linear-gradient(90deg, var(--pastel-mint), var(--cute-mint));
}

.decision-card-right::before {
    background: linear-gradient(90deg, var(--pastel-pink), var(--cute-coral));
}

.decision-card:hover {
    transform : translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.decision-title {
    font-size    : 2rem;
    margin-bottom: 25px;
    color        : var(--text-dark);
    line-height  : 1.3;
}

.decision-text {
    margin-bottom: 35px;
    line-height  : 1.8;
    color        : var(--text-medium);
}

.decision-text p {
    font-size    : 1.1rem;
    margin-bottom: 15px;
}

.decision-card .btn {
    width     : 100%;
    text-align: center;
}

/* Honesty Box */
.honesty-box {
    background   : linear-gradient(135deg, var(--pastel-lavender), var(--pastel-pink));
    padding      : 60px 50px 40px 50px;
    border-radius: 35px;
    text-align   : center;
    box-shadow   : var(--shadow-lg);
    border       : 5px solid white;
    position     : relative;
    margin       : 50px 0;
}

.honesty-box::before {
    content        : attr(data-emoji);
    position       : absolute;
    top            : -40px;
    left           : 50%;
    transform      : translateX(-50%);
    font-size      : 4rem;
    background     : white;
    width          : 90px;
    height         : 90px;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border         : 5px solid var(--pastel-lavender);
    box-shadow     : var(--shadow-md);
}

.honesty-title {
    font-size    : 1.5rem;
    margin-bottom: 15px;
    color        : var(--text-dark);
    margin-top   : 20px;
}

.honesty-text {
    font-size  : 1.15rem;
    line-height: 1.8;
    color      : var(--text-dark);
}

.honesty-text em {
    color: var(--text-medium);
}

/* Responsibility Box (Home Page) */
.responsibility-box {
    background  : var(--pastel-peach);
    border-color: var(--cute-coral);
    text-align  : center;
}

.responsibility-box::before {
    content     : '⚡' !important;
    border-color: var(--cute-coral);
}

.responsibility-box h3 {
    font-size    : 1.5rem;
    margin-bottom: 20px;
    text-align   : center;
}

.responsibility-box p {
    font-size  : 1.15rem;
    line-height: 1.8;
    text-align : center;
    margin     : 0;
}

/* ============================================
   FOOTER LEGAL LINKS
   ============================================ */
.footer-legal {
    margin-top : 25px;
    padding-top: 20px;
    border-top : 1px solid rgba(255, 255, 255, 0.2);
    font-size  : 0.85rem;
}

.footer-legal a {
    color          : inherit;
    opacity        : 0.7;
    text-decoration: none;
    transition     : opacity 0.2s ease;
}

.footer-legal a:hover {
    opacity        : 1;
    text-decoration: underline;
}

.footer-divider {
    margin : 0 10px;
    opacity: 0.5;
}

/* ============================================
   LEGAL PAGES (Impressum, Datenschutz)
   ============================================ */
.legal-page {
    padding-top: 140px;
}

.legal-page .section-header {
    margin-bottom: 40px;
}

.legal-content {
    max-width: 900px;
    margin   : 0 auto;
}

.legal-content .info-box h3 {
    font-size    : 1.4rem;
    margin-bottom: 15px;
    color        : var(--text-dark);
}

.legal-content .info-box a {
    color          : var(--cute-coral);
    text-decoration: none;
    border-bottom  : 1px dotted var(--cute-coral);
    transition     : all 0.2s ease;
}

.legal-content .info-box a:hover {
    color        : var(--text-dark);
    border-bottom: 1px solid var(--text-dark);
}

.legal-content ul {
    list-style: none;
    padding   : 0;
}

.legal-content ul li {
    position    : relative;
    padding-left: 25px;
    margin-bottom: 8px;
}

.legal-content ul li::before {
    content : '•';
    position: absolute;
    left    : 0;
    color   : var(--cute-coral);
}