/* responsive-additions.css - Complete responsive CSS for Medovo website */

/* === Basis Responsive Framework === */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

/* === Responsive Container System === */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 576px) {
    .container { padding: 0 1.5rem; }
}

@media (min-width: 768px) {
    .container { padding: 0 2rem; }
}

/* === Fluid Typography === */
html {
    font-size: 16px;
}

@media (max-width: 1400px) {
    html { font-size: 15px; }
}

@media (max-width: 1200px) {
    html { font-size: 14px; }
}

@media (max-width: 992px) {
    html { font-size: 14px; }
}

@media (max-width: 768px) {
    html { font-size: 13px; }
}

@media (max-width: 480px) {
    html { font-size: 12px; }
}

/* === Responsive Typography with Clamp === */
h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    word-break: break-word;
    hyphens: auto;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
    word-break: break-word;
}

h3 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: 1.3;
}

p {
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    line-height: 1.6;
}

/* === Navigation Responsive === */
nav {
    padding: 0 1rem;
}

.nav-container {
    padding: 0 0.5rem;
}

@media (max-width: 768px) {
    nav {
        padding: 0 0.5rem;
    }
    
    .nav-links {
        width: 100%;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-links a {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }
}

/* === Hero Section Responsive === */
.hero {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    padding: clamp(6rem, 15vh, 10rem) 0 clamp(3rem, 10vh, 6rem);
}

.hero-content {
    max-width: min(90%, 820px);
    margin: 0 auto;
    text-align: center;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    max-width: min(90%, 640px);
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 6rem 0 4rem;
    }
}

/* === Vision Section Responsive === */
.vision-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

@media (max-width: 480px) {
    .vision-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .vision-icon {
        margin-bottom: 0.5rem;
    }
}

/* === Approach Cards Responsive Grid === */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0;
    }
}

.approach-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 16px;
}

/* === Team Section Responsive === */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 0 1rem;
}

@media (max-width: 1100px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .team-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
}

.team-card-container {
    height: auto;
    min-height: 400px;
}

@media (max-width: 480px) {
    .team-card-container {
        min-height: 380px;
    }
}

/* === Connect Section Responsive === */
.connect-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 992px) {
    .connect-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .connect-content {
        text-align: center;
    }
    
    .connect-options {
        justify-content: center;
    }
}

/* === Contact Form Responsive === */
.contact-form {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 16px;
}

.form-control {
    width: 100%;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(0.875rem, 2vw, 1.125rem);
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* === Footer Responsive === */
footer {
    padding: clamp(3rem, 8vw, 5rem) 0 2rem;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0;
    }
}

/* === Button Responsive === */
.button {
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    font-size: clamp(0.875rem, 2vw, 1.0625rem);
    border-radius: 12px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .button {
        padding: 0.875rem 1.25rem;
    }
}

/* === Responsive Images === */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === Overflow Control === */
section, .container {
    overflow-x: hidden;
}

/* === Decorative Elements Responsive === */
.blob {
    overflow: hidden;
}

@media (max-width: 768px) {
    .blob {
        width: 60%;
        height: 60%;
        filter: blur(60px);
    }
    
    .blob-1 {
        top: -50px;
        right: -30px;
    }
    
    .blob-2 {
        bottom: -50px;
        left: -30px;
    }
    
    .blob-3 {
        width: 40%;
        height: 40%;
    }
    
    .animated-shape {
        width: 300px;
        height: 300px;
    }
}

/* === Text Wrapping === */
h1, h2, h3, h4, h5, h6, p, span, li, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* === Touch Device Optimizations === */
@media (hover: none) {
    .button:hover,
    .approach-card:hover,
    .team-card-container:hover {
        transform: none !important;
    }
    
    .team-card-container {
        cursor: pointer;
    }
}

/* === Small Device Specific === */
@media (max-width: 360px) {
    .container {
        padding: 0 0.75rem;
    }
    
    section {
        padding: 3rem 0;
    }
    
    .hero {
        padding: 5rem 0 3rem;
    }
    
    .approach-card,
    .team-member,
    .contact-form {
        padding: 1.25rem;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

/* === Very Small Devices === */
@media (max-width: 320px) {
    html {
        font-size: 11px;
    }
    
    .container {
        padding: 0 0.5rem;
    }
    
    .button {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* === Landscape Mobile === */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: 3rem 0;
    }
    
    nav {
        position: sticky;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .hero-content {
        padding: 1rem 0;
    }
}

/* === Safe Area für moderne Geräte === */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
}

/* === Cookie Banner Responsive === */
.cookie-banner-content {
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .cookie-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .cookie-button {
        width: 100%;
    }
}

/* === iOS Specific Fixes === */
.ios input,
.ios textarea,
.ios select {
    font-size: 16px; /* Prevents zoom on focus */
}

/* === Chatbot Responsive === */
#chtl-launcher {
    bottom: 20px !important;
    right: 20px !important;
}

@media (max-width: 480px) {
    #chtl-launcher {
        bottom: 10px !important;
        right: 10px !important;
        transform: scale(0.9);
    }
}

/* === Responsive Utilities === */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
    
    .show-mobile {
        display: block;
    }
}

/* === Final Overrides === */
@media (max-width: 768px) {
    .approach-grid,
    .team-grid {
        padding: 0;
    }
    
    .section-header {
        margin-bottom: 2rem;
    }
}

/* === Z-Index Management === */
.z-nav { z-index: 1000; }
.z-modal { z-index: 2000; }
.z-tooltip { z-index: 3000; }

/* Mobile Überschriften verbessern */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 2.2rem !important;
        line-height: 1.25 !important;
    }
    
    h3 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 1.4rem !important;
        line-height: 1.35 !important;
    }
    
    .section-header h2 {
        font-size: 2.2rem !important;
    }
    
    .vision-right h3 {
        font-size: 1.6rem !important;
    }
    
    .hero h1 {
        font-size: 2.6rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .gradient-text {
        font-size: inherit !important;
    }
    
    .facts-section h2, 
    .mediziner-section h2,
    .chatbot-section h2,
    .team h2,
    .connect-section h2 {
        font-size: 2.2rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .approach-card h3 {
        font-size: 1.6rem !important;
    }
    
    .faq-question h3 {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.9rem !important;
        line-height: 1.25 !important;
    }
    
    h3 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }
    
    h4 {
        font-size: 1.2rem !important;
        line-height: 1.35 !important;
    }
    
    .section-header h2 {
        font-size: 1.9rem !important;
    }
    
    .hero h1 {
        font-size: 2.3rem !important;
        margin-bottom: 1.2rem !important;
    }
    
    .facts-section h2, 
    .mediziner-section h2,
    .chatbot-section h2,
    .team h2,
    .connect-section h2 {
        font-size: 1.9rem !important;
        margin-bottom: 1.2rem !important;
    }
    
    .approach-card h3 {
        font-size: 1.4rem !important;
    }
    
    .faq-question h3 {
        font-size: 1.2rem !important;
    }
    
    .hero-badge {
        font-size: 0.9rem !important;
    }
}