/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    background-color: #CCCCCC;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


/* ===== CUSTOM STYLES ===== */

/* CSS Custom Properties (Variables) */
:root {
    --orange-color: #ff6600;
    --dark-blue: #14213d;
    --light-gray: #cccccc;
    --white: #ffffff;
    --black: #000000;
    --font-family: 'Raleway', sans-serif;
    --border-radius: 4px;
    --transition: all 0.3s ease;
}

/* Base Typography */
body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--black);
    background-color: var(--light-gray);
}

/* Header Styles */
.header {
    background-color: var(--orange-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navigation_container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 10px;
}

.navigation_text {
    font-family: var(--font-family);
    font-weight: 700;
    padding: 20px 0;
    color: var(--black);
    margin: 0;
    font-size: 1.5rem;
}

/* Navigation Styles */
.nav_menu {
    display: block;
}

.nav_menu_ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.nav_menu_ul li {
    position: relative;
}

.nav_menu_ul a {
    font-family: var(--font-family);
    color: var(--black);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 0;
    display: block;
    transition: var(--transition);
}

.nav_menu_ul a:hover,
.nav_menu_ul a:focus {
    color: var(--white);
    outline: none;
}

.nav_menu_ul a[aria-current="page"] {
    color: var(--white);
    font-weight: 700;
}

/* Welcome Section */
.welcome_container {
    display: block;
    padding: 5px 20px 20px;
}

.welcome_title {
    font-family: var(--font-family);
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    margin: 50px auto 0;
    padding: 10px;
    line-height: 1.4;
    color: var(--orange-color);
    font-weight: 700;
}

.welcome_img {
    display: block;
    margin: 20px auto 0;
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: var(--border-radius);
}

/* News/Opening Hours Section */
.news_section {
    padding: 40px 20px;
}

.news_title {
    font-family: var(--font-family);
    text-align: center;
    font-size: 1.75rem;
    color: var(--black);
    margin-bottom: 30px;
    font-weight: 700;
}

.news_container {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-family);
    line-height: 1.5;
}

.news_topic {
    background: var(--dark-blue);
    color: var(--white);
    margin: 20px 0;
    text-align: center;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.news_topic_title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.news_topic_text {
    padding: 0 10px 20px;
}

.news_topic_text p {
    margin: 8px 0;
}

.opening_hours_title{
    font-family: 'Raleway',cursive ;
    text-align: center;
    padding-top: 30px;
    font-size: 20px;
}

.opening_hours{
    padding: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.opening_hours_day{
    font-family: 'Raleway',cursive ;
    display: block;
    width: 100%;
    height: 84px;
    background: var(--orange-color);
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}


.opening_hours_day_content{
    margin-top: 5px;
    box-sizing: border-box;
    border-top: black;
    border-top-style: solid;
    border-top-width: 1px;
}

.opening_hours_day_title{
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Contact Section */
.contact_section {
    padding: 40px 20px;
}

.contact_title {
    font-family: var(--font-family);
    text-align: center;
    font-size: 1.75rem;
    color: var(--black);
    margin-bottom: 30px;
    font-weight: 700;
}

.contact {
    max-width: 800px;
    margin: 0 auto;
}

.contact_infos {
    background: var(--dark-blue);
    color: var(--white);
    text-align: center;
    padding: 30px 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contact_address {
    padding: 15px;
    font-size: 1.25rem;
    font-style: normal;
}

.contact_email {
    padding: 15px;
    font-size: 1.1rem;
}

.contact_telephone {
    padding: 15px;
    font-size: 1.1rem;
}

.contact_telephone a {
    color: var(--orange-color);
    text-decoration: none;
    transition: var(--transition);
}

.contact_telephone a:hover {
    color: var(--orange-color);
}

.email_link {
    color: var(--orange-color);
    text-decoration: none;
    transition: var(--transition);
}

.email_link:hover {
    color: var(--white);
}

.contact_details_text {
    color: var(--white);
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
}

.contact_details_text:hover {
    color: var(--orange-color);
}

/* Page Container Styles */
.anfahrt_container,
.sprechstunde_container,
.rezepte_container {
    max-width: 1200px;
    width: 90%;
    padding: 20px;
    margin: 20px auto;
    font-family: var(--font-family);
    line-height: 1.5;
}

.anfahrt_title,
.sprechstunde_title,
.rezepte_container_title,
.team_title {
    font-size: 2rem;
    padding: 30px 0;
    color: var(--black);
    font-weight: 700;
    border-bottom: 2px solid var(--orange-color);
    margin-bottom: 20px;
}

/* Address Styling */
.anfahrt_adresse {
    background-color: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-style: normal;
}

/* Contact Details */
.contact_details {
    margin: 30px 0;
}

.contact_details h3 {
    color: var(--orange-color);
    margin-bottom: 15px;
}

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

.contact_details li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.contact_details a {
    color: var(--orange-color);
    text-decoration: none;
    transition: var(--transition);
}

.contact_details a:hover {
    color: var(--white);
}

/* Map Container */
.anfahrt_map {
    margin: 30px 0;
}

.anfahrt_map h3 {
    color: var(--orange-color);
    margin-bottom: 15px;
}

/* Emergency Numbers */
.sprechstunde_nummern {
    margin: 30px 0;
}

.sprechstunde_nummern h3 {
    color: var(--orange-color);
    margin-bottom: 20px;
}

.sprechstunde_nummern_list {
    list-style: none;
    padding: 0;
}

.sprechstunde_nummern_list li {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--white);
    border-left: 4px solid var(--orange-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sprechstunde_nummern_list a {
    color: var(--orange-color);
    text-decoration: none;
    font-weight: 700;
}

/* Team Styles */
.team_container {
    max-width: 1200px;
    width: 90%;
    padding: 20px;
    margin: 20px auto;
    font-family: var(--font-family);
}

.team_aerzte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 30px auto;
    width: 90%;
    max-width: 1000px;
}

.team_werner,
.team_georg {
    background-color: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    flex: 1 1 300px; /* Flex-grow, flex-shrink, and flex-basis */
    max-width: 350px;
    min-height: 250px;
}

.team_werner h3,
.team_georg h3 {
    color: var(--orange-color);
    margin-bottom: 15px;
    font-size: 1.25rem;
}

.team_werner ul,
.team_georg ul {
    list-style: none;
    padding: 0;
    flex-grow: 1;
}

.team_werner li,
.team_georg li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.team_description {
    background-color: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

.team_description p {
    margin-bottom: 15px;
}

.team_container{
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  font-family: 'Raleway',cursive ;
  line-height: 150%
}

.team_title{
  text-align: left;
  padding: 30px;
  font-size: 28px;
}

/* Removed fixed dimensions - now handled by base styles and grid layout */

.impressum{
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  font-family: 'Raleway',cursive ;
  line-height: 150%
}

.impressum_title{
  text-align: left;
  padding: 30px;
  font-size: 28px;
}

.datenschutz{
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  font-family: 'Raleway',cursive ;
  line-height: 150%
}

.datenschutz_title{
  text-align: left;
  padding: 30px;
  font-size: 28px;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile-first approach - styles above are mobile styles */

/* Tablet and Desktop Styles */
@media screen and (min-width: 768px) {
    
    /* Navigation improvements */
    .navigation_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
    }

    .navigation_text {
        margin: 0;
        padding: 20px 0;
    }

    .nav_menu_ul {
        gap: 30px;
    }

    .nav_menu_ul a {
        font-size: 1rem;
    }

    /* Content containers */
    .anfahrt_container,
    .sprechstunde_container,
    .rezepte_container {
        width: 80%;
        max-width: 900px;
    }

    /* Contact section */
    .contact_title,
    .news_title {
        font-size: 2.25rem;
    }

    .contact_infos,
    .news_topic {
        max-width: 750px;
        margin: 20px auto;
    }

    /* Team section */
    .team_container {
        width: 80%;
        margin: 0 auto;
    }

    .team_aerzte {
        display: flex;
        justify-content: space-around;
        align-items: flex-start; /* Changed from center to flex-start */
        flex-wrap: wrap; /* Added to allow wrapping on smaller screens */
        max-width: 1000px; /* Increased max-width */
        margin: 0 auto;
        gap: 40px;
    }

    /* Enhanced spacing */
    .sprechstunde_nummern_list {
        margin-left: 30px;
    }
}

/* Large Desktop Styles */
@media screen and (min-width: 1200px) {
    
    .welcome_img {
        width: 50%;
        max-width: 600px;
    }

    .welcome_title {
        max-width: 800px;
        font-size: 2.5rem;
        line-height: 1.3;
    }

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

    /* Enhanced hover effects for navigation */
    .nav_menu_ul a {
        position: relative;
        overflow: hidden;
    }

    .nav_menu_ul a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--white);
        transition: width 0.3s ease;
    }

    .nav_menu_ul a:hover::before,
    .nav_menu_ul a:focus::before {
        width: 100%;
    }
}

/* ===== NEW CONTENT SECTIONS ===== */

/* Practice Introduction Section */
.practice_intro {
    background-color: var(--white);
    padding: 40px 20px;
    margin: 40px 0;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.practice_intro h2 {
    color: var(--orange-color);
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.practice_intro > p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.trust_signals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.trust_item {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--orange-color);
}

.trust_item h3 {
    color: var(--orange-color);
    font-size: 1rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.trust_item p {
    font-size: 0.9rem;
    color: #666;
}

/* Services Overview Section */
.services_overview {
    padding: 40px 20px;
}

.services_overview h2 {
    text-align: center;
    color: var(--black);
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: 700;
}

.services_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.service_card {
    background-color: var(--white);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    border-top: 4px solid var(--orange-color);
}

.service_card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.service_card h3 {
    color: var(--orange-color);
    font-size: 1.25rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.service_card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #666;
}

.services_cta {
    text-align: center;
    margin-top: 40px;
}

.services_cta h3 {
    color: var(--black);
    margin-bottom: 15px;
}

.services_cta p {
    margin-bottom: 25px;
    color: #666;
}

/* Quick Actions Section */
.quick_actions {
    background: var(--dark-blue);
    color: var(--white);
    padding: 40px 20px;
    margin: 40px 0;
}

.quick_actions h2 {
    text-align: center;
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: 700;
}

.action_buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.action_btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    text-decoration: none;
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.action_btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.action_btn h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.action_btn p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.action_btn.emergency {
    background-color: var(--orange-color);
}

.action_btn.whatsapp {
    background-color: #0f885a; 
}

.action_btn.email {
    background-color: #3a4c7a; 
}

.action_btn.location {
    background-color: var(--orange-color); 
}

/* Button Styles */
.btn_primary {
    background-color: var(--orange-color);
    color: var(--white);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    display: inline-block;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn_primary:hover {
    background-color: #e55a00;
    transform: translateY(-1px);
}

.btn_secondary {
    background-color: transparent;
    color: var(--orange-color);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    display: inline-block;
    transition: var(--transition);
    border: 2px solid var(--orange-color);
}

.btn_secondary:hover {
    background-color: var(--orange-color);
    color: var(--white);
}

/* Services Page Styles */
.services_container {
    max-width: 1200px;
    width: 90%;
    padding: 20px;
    margin: 20px auto;
    font-family: var(--font-family);
    line-height: 1.6;
}

.services_main_title {
    font-size: 2.5rem;
    color: var(--black);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}

.services_intro {
    font-size: 1.1rem;
    text-align: center;
    color: #666;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.services_detailed {
    margin: 40px 0;
}

.service_category {
    background-color: var(--white);
    margin: 30px 0;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--orange-color);
}

.service_category h3 {
    color: var(--orange-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.service_category.specialty {
    border-left-color: var(--dark-blue);
}

.service_category.specialty h3 {
    color: var(--dark-blue);
}

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

.service_content li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
}

.service_content li:before {
    content: "✓";
    color: var(--orange-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.doctor_specialties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.doctor_specialty {
    background-color: #f8f9fa;
    padding: 25px;
    border-radius: var(--border-radius);
}

.doctor_specialty h4 {
    color: var(--dark-blue);
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.doctor_specialty h5 {
    color: var(--orange-color);
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.cta_buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* FAQ Section */
.faq_section {
    margin: 40px 0;
}

.faq_section h3 {
    color: var(--orange-color);
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.faq_item {
    background-color: var(--white);
    margin: 20px 0;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--orange-color);
}

.faq_item h4 {
    color: var(--black);
    font-size: 1.1rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.faq_item p {
    color: #666;
    line-height: 1.5;
}

/* Digital Services Section Styles */
.digital_services_section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 20px;
    margin: 40px 0;
}

.digital_services_section h2 {
    text-align: center;
    color: var(--black);
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.digital_services_section .section_intro {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.digital_services_section .services_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.digital_service {
    background-color: var(--white);
    padding: 30px 25px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: var(--transition);
    border-top: 4px solid var(--orange-color);
}

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

.service_icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.digital_service h3 {
    color: var(--orange-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.digital_service p {
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.service_link {
    display: inline-block;
    background-color: var(--orange-color);
    color: var(--white);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
}

.service_link:hover {
    background-color: #e55a00;
    transform: translateY(-1px);
}

/* Enhanced Appointment Info Styles */
.appointment_info {
    background-color: var(--white);
    margin: 30px 0;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.appointment_info h3 {
    color: var(--orange-color);
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.appointment_methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.method {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--orange-color);
}

.method h4 {
    color: var(--black);
    font-size: 1.1rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.method p {
    margin: 8px 0;
    line-height: 1.4;
}

.method a {
    color: var(--orange-color);
    text-decoration: none;
    font-weight: 600;
}

.method a:hover {
    text-decoration: underline;
}

.method em {
    color: #666;
    font-size: 0.9rem;
}

/* Visit Preparation Styles */
.visit_preparation {
    background-color: var(--white);
    margin: 30px 0;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.visit_preparation h3 {
    color: var(--orange-color);
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 700;
}

.preparation_content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.checklist h4,
.visit_tips h4 {
    color: var(--black);
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.checklist_items {
    list-style: none;
    padding: 0;
}

.checklist_items li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #333;
}

.tips_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.tip_item {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius);
    border-left: 3px solid var(--orange-color);
}

.tip_item h5 {
    color: var(--orange-color);
    font-size: 1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.tip_item p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* Enhanced Receipts Page Styles */
.intro_text {
    background-color: var(--white);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
    text-align: center;
    border-left: 4px solid var(--orange-color);
}

.intro_text p {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

.rezept_methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.rezept_method {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    border-top: 4px solid var(--orange-color);
}

.rezept_method.featured {
    border-top-color: #25d366;
    transform: scale(1.02);
}

.rezept_method:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.method_icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 15px;
}

.rezept_method h3 {
    color: var(--orange-color);
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
}

.rezept_method.featured h3 {
    color: #25d366;
}

.method_description {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.method_steps ol {
    padding-left: 20px;
    color: #333;
}

.method_steps li {
    margin: 10px 0;
    line-height: 1.4;
}

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

.method_info li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
}

.method_info li:before {
    content: "•";
    color: var(--orange-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.contact_button {
    display: block;
    text-align: center;
    padding: 12px 20px;
    margin-top: 20px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.contact_button.whatsapp {
    background-color: #25d366;
    color: var(--white);
}

.contact_button.email {
    background-color: #0078d4;
    color: var(--white);
}

.contact_button.phone {
    background-color: var(--orange-color);
    color: var(--white);
}

.contact_button:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.additional_services,
.wichtige_hinweise {
    margin: 50px 0;
}

.additional_services h3,
.wichtige_hinweise h3 {
    color: var(--black);
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 700;
}

.services_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.service_item {
    background-color: var(--white);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--orange-color);
}

.service_item h4 {
    color: var(--orange-color);
    font-size: 1.1rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.hinweise_content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.hinweis {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--orange-color);
}

.hinweis h4 {
    color: var(--black);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.kontakt_hinweis {
    background: var(--orange-color);
    color: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    margin: 40px 0;
}

.kontakt_hinweis h3 {
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.kontakt_hinweis a {
    color: var(--white);
    text-decoration: underline;
    font-weight: 600;
}

.kontakt_hinweis a:hover {
    text-decoration: none;
}

/* ===== FOOTER STYLES ===== */
.footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #dee2e6;
}

.footer_content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 0.9rem;
    color: #6c757d;
}

.footer_content p {
    margin: 0;
}

.footer_link {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer_link:hover {
    color: var(--orange-color);
    text-decoration: underline;
}

/* ===== MOBILE RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    /* Navigation adjustments */
    .navigation_container {
        flex-direction: column;
        text-align: center;
    }
    
    .navigation_text {
        font-size: 1.2rem;
        padding: 15px 0 10px;
    }
    
    .nav_menu_ul {
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .nav_menu_ul a {
        font-size: 0.8rem;
        padding: 8px 0;
    }

    /* Grid adjustments - force single column on mobile */
    .doctor_specialties,
    .services_overview_grid,
    .services_grid,
    .action_buttons,
    .team_aerzte {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .tips_grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Content spacing */
    .welcome_container,
    .anfahrt_container,
    .team_container,
    .services_container,
    .sprechstunde_container,
    .receipts_container {
        padding: 20px 15px;
    }
    
    .quick_actions {
        padding: 30px 15px;
        margin: 20px 0;
    }
    
    .quick_actions h2 {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    /* Button adjustments - keep backgrounds intact */
    .btn_primary,
    .btn_secondary {
        padding: 15px 20px;
        font-size: 1rem;
        text-align: center;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        min-height: 44px;
        box-sizing: border-box;
    }    
  
    .action_btn h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .action_btn p {
        font-size: 0.9rem;
    }

    .cta_buttons {
        flex-direction: column;
        gap: 15px;
    }

    /* Typography adjustments */
    .welcome_title {
        font-size: 1.5rem;
        padding: 15px 0;
    }
    
    .anfahrt_title,
    .team_title,
    .services_main_title,
    .sprechstunde_title,
    .receipts_title {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 20px;
    }
    
    /* Card spacing */
    .service_card,
    .doctor_specialty,
    .tip_item {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    /* Mobile-friendly contact links */
    a[href^="tel:"],
    a[href^="mailto:"] {
        font-weight: 600;
        border-radius: var(--border-radius);
        display: inline-block;
        min-height: 44px;
        line-height: 28px;
        box-sizing: border-box;
    }
    
    /* Map responsive */
    .anfahrt_map iframe {
        height: 300px;
    }
    
    /* Footer responsive */
    .footer_content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .navigation_text {
        font-size: 1.1rem;
    }
    
    .nav_menu_ul {
        gap: 10px;
    }
    
    .nav_menu_ul a {
        font-size: 0.75rem;
    }
    
    .welcome_title {
        font-size: 1.3rem;
    }
    
    .anfahrt_container,
    .team_container,
    .services_container,
    .sprechstunde_container,
    .receipts_container {
        padding: 15px 10px;
    }
}