/* CSS Document */
/* ========================================
   RESPONSIVE DESIGN
   Peters-Partner Mobile & Tablet Styles
   ======================================== */

/* TABLET - 768px und kleiner */
@media (max-width: 768px) {
    
    /* Typography */
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.2em;
    }

    p {
        font-size: 1em;
    }

    /* Navigation */
    nav {
        height: auto;
        flex-wrap: wrap;
        padding: 15px 20px;
    }

    .nav-menu {
        gap: 20px;
        font-size: 0.9em;
        width: 100%;
        justify-content: center;
        order: 3;
        margin-top: 15px;
    }

    .logo {
        max-width: 120px;
        width: 100%;
    }

    /* Main Content */
    main {
        padding: 0 15px;
    }

    /* Sections */
    section {
        margin-bottom: 40px;
    }

    .section-box {
        padding: 20px;
        border-left: 4px solid var(--primary-color);
    }

    /* Buttons */
    .cta-button {
        padding: 12px 25px;
        font-size: 0.95em;
        width: 100%;
        text-align: center;
    }

    /* Slideshow */
    .slide-nav {
        padding: 10px 12px;
        font-size: 1.2em;
    }

    .slide img {
        min-height: 250px;
    }

    .slide-dots {
        padding: 15px;
        gap: 8px;
    }

    /* Footer */
    footer .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-logo {
        max-width: 100px;
    }

    .footer-section {
        padding-bottom: 20px;
    }

    .social-links {
        gap: 10px;
    }

    .social-links a {
        width: 36px;
        height: 36px;
    }

}

/* MOBILE - 480px und kleiner */
@media (max-width: 480px) {
    
    /* Typography */
    h1 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 1.2em;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    h3 {
        font-size: 1.1em;
    }

    p {
        font-size: 0.95em;
        line-height: 1.6;
    }

    /* Navigation */
    nav {
        padding: 10px 15px;
        height: auto;
    }

    .logo {
        max-width: 110px;
    }

    .nav-menu {
        gap: 12px;
        font-size: 0.85em;
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    .nav-menu a {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    /* Main Content */
    main {
        padding: 0 10px;
    }

    /* Sections */
    section {
        margin-bottom: 30px;
    }

    .section-box {
        padding: 15px;
        border-left: 3px solid var(--primary-color);
    }

    .section-intro h2 {
        font-size: 1.1em;
    }

    /* Lists */
    li {
        margin-bottom: 12px;
        padding-left: 0;
        font-size: 0.95em;
    }

    /* Buttons */
    .cta-button {
        padding: 12px 20px;
        font-size: 0.9em;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    /* Hero Image */
    .hero-image {
        margin: 20px 0;
        border-radius: 4px;
    }

    /* Slideshow */
    .slideshow-container {
        margin: 30px 0;
        border-radius: 4px;
    }

    .slide {
        min-height: 200px;
    }

    .slide img {
        min-height: 200px;
        object-fit: cover;
    }

    .slide-caption {
        bottom: 15px;
        left: 15px;
        padding: 10px 18px;
        font-size: 1em;
    }

    .slide-counter {
        top: 10px;
        right: 10px;
        padding: 6px 10px;
        font-size: 0.8em;
    }

    .slide-nav {
        padding: 8px 10px;
        font-size: 1.2em;
    }

    .slide-prev {
        left: 8px;
    }

    .slide-next {
        right: 8px;
    }

    .slide-dots {
        padding: 12px 10px;
        gap: 6px;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    /* Footer */
    footer {
        padding: 30px 15px;
        margin-top: 40px;
    }

    footer .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-logo {
        max-width: 90px;
        margin-bottom: 15px;
    }

    .footer-section h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }

    .footer-contact p {
        font-size: 0.9em;
        margin-bottom: 8px;
        line-height: 1.6;
    }

    .footer-contact a {
        font-size: 0.9em;
    }

    .social-links {
        gap: 8px;
        margin-top: 10px;
    }

    .social-links a {
        width: 32px;
        height: 32px;
    }

    .footer-divider {
        margin: 20px 0;
    }

    .footer-bottom {
        padding-top: 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .footer-bottom p {
        font-size: 0.85em;
        margin-bottom: 8px;
        line-height: 1.5;
    }

    .footer-bottom a {
        margin: 0 8px;
        font-size: 0.85em;
    }

}

/* SMALL MOBILE - 320px und kleiner */
@media (max-width: 320px) {
    
    h1 {
        font-size: 1.4em;
    }

    h2 {
        font-size: 1.1em;
    }

    .nav-menu {
        gap: 8px;
    }

    .section-box {
        padding: 12px;
    }

    .cta-button {
        padding: 10px 15px;
        font-size: 0.85em;
    }

    .slide-caption {
        font-size: 0.9em;
        padding: 8px 14px;
    }

}