/* Farben
Orange: #E87B0E RGBA: 232, 123, 14, 1               --> zu halbtransparent machen durch alpha Wert: RGBA: 232, 123, 14, 0.5
Hellgrau: #f9f9f9 RGBA: 249, 249, 249, 1
Hellgraubeige: #F6F4F2 RGBA: 246, 244, 242, 1
Dunkelgrau/schwarz: #333 RGBA: 51, 51, 51, 1
schwarz auf orange #222 RGBA: 34, 34, 34, 1
passendes grau: #aaa RGBA: 170, 170, 170, 1
*/

/* Gewählte Schriftarten
Überschriften: DM Serif Display 400
Fließtext & Navi: Akatab 400/600
*/

/*
* CSS-Design
* Website für die Psychotherapie Praxis von Dr. Henrietta Steinhart
* Katja Dickels Design & Code
* 2025
*/

@charset "utf-8";

/* Webfonts-Einbindung - Must come immediately after @charset */
@import url('https://fonts.googleapis.com/css2?family=Akatab:wght@400;600;700&family=DM+Serif+Display&display=swap');

/* Prevent layout shifts and micro-adjustments */
* {
    box-sizing: border-box;
}

/* Prevent subpixel rendering differences that cause layout shifts */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Serif Display', Georgia, serif;
}

/* Simple FOUC prevention without heavy overrides */
body {
    font-family: 'Akatab', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    /* Prevent font size jumping and improve rendering stability */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga", "kern";
    /* Prevent layout shifts during interactions */
    will-change: auto; /* Optimize for changes */
}

/* Define consistent font weights for Akatab */
/* Force bold to use weight 600 (available in your font) */
strong, b, .bold, 
[style*="font-weight:bold"], 
[style*="font-weight: bold"] {
    font-weight: 600 !important; /* Using 600 which is available in Akatab font */
    font-size: inherit !important; /* Prevent size changes */
    line-height: inherit !important; /* Prevent line height changes */
    font-family: inherit !important; /* Inherit parent font */
    vertical-align: baseline !important; /* Prevent vertical misalignment */
    display: inline !important; /* Ensure proper inline display */
}

/* Ensure semi-bold uses weight 600 */
.semi-bold {
    font-weight: 600 !important;
}

/* Navigation font stability */
nav ul li a,
header a {
    font-family: 'Akatab', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.3s ease;
}



 
/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
-mozbox-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* Prevent text overflow on all elements */
*, *::before, *::after {
    box-sizing: border-box;
    word-wrap: break-word;
    max-width: 100%;
    word-break: keep-all; /* Keep compound words together */
}

/* Ensure no element exceeds viewport */
html {
    overflow-x: hidden;
}

/* Improve text rendering */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* German compound word protection */
.no-break,
[lang="de"] {
    word-break: keep-all;
    overflow-wrap: break-word; /* Only break at natural word boundaries */
}

/* Specific protection for hyphenated compound words */
span.compound-word,
.compound-word {
    white-space: nowrap; /* Never break these words */
    display: inline-block;
}
 

/* Typo */

body {
    font: 400 1rem/1.7 'Akatab', sans-serif;
    color: #333;
    max-width: 100% !important;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
    hyphens: auto; /* Enable automatic hyphenation */
    padding-top: 4rem; /* Account for fixed header height */
    }

h1, h2, h3, h4, h5, h6{
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;    
    margin-bottom: 1.5rem;
    color: #333;
    line-height: 1.15;
    word-break: keep-all; /* Keep compound words intact */
    overflow-wrap: break-word; /* Only break at word boundaries */
    hyphens: none; /* Disable automatic hyphenation for headings */
    max-width: 100%;
    }

h1{     
    font-size: 4.2rem; /* Updated from 3.8rem to 1440px laptop default */
    margin: 3rem 0 1.5625rem 0;     
    text-transform: uppercase;
    } 


        
h2{     
font-size: 1.7rem; /* Updated from 1.5rem to 1440px laptop default */
} 

#praxis h2{
    margin-top: 2.5rem
}
        
h3{    
font-size: 1.4rem; /* Updated from 1.3rem to 1440px laptop default */
}

p{
    margin: 0 0 1rem;
    font-size: 1rem; 
    line-height: 1.8; /* Updated from default to 1440px laptop default */
    word-break: keep-all; /* Keep compound words together */
    overflow-wrap: break-word; /* Break only at natural boundaries */
    hyphens: manual; /* Only break at explicit hyphens */
    max-width: 100%;
}

ul li {
    font-size: 1rem !important;
}

a {
    font-size: 1rem; /* Base font size for links */
}

p + h2,
p + h3 {
    margin-top: 2rem; /* Add space above the heading */
}

.wrapper{
    max-width: 1250px; /* Updated from 1000px to 1440px laptop default */
    padding: 0 1.5625rem; /* 25px = 1.5625rem (25÷16) */
    margin: 0 auto;
    }


        
.column {
float: left;
/* background: #ddd; */
margin: 0 0 0px 6%; /* Updated from 5% to 6% for 1440px laptop default */
}
    
.column:first-child{
margin-left: 0;
}

/* Clearfix */

.row:before,
.row:after {
content: " ";
display: table;
}
 
.row::after {
clear: both;
}
 
/* .row{
background: #aaa;
} */




/* Raster */
 
.col_1{
    width: 100%;
    text-align: left;

}.col_1_2{
width: 47.5%;
}
    
.col_1_3{
width: 30%;
text-align: center;

}
    
.col_2_3{
width: 65%;
}
    
.col_1_4{
width: 21.25%;
}
    
.col_3_4{
width: 73.75%;
}



/* sections */
section{
    padding: 8rem 0;
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align items to start instead of center */
    align-items: stretch; /* Ensure full width usage */
    width: 100%;
    min-height: 500px; /* Minimum 500px, grows automatically when content is larger */
    height: auto; /* Flexible height based on content */
    position: relative;
    overflow: visible; /* Prevent content from being cut off */
    }

section#about-teaser {
    padding: 0;
    height: auto;
    min-height: auto;
}

section#praxis {
    padding: 0;
    min-height: auto;
    height: auto;
}







.white {
    background-color: #F6F4F2;
}
    




.grey {
    background-color: #f9f9f9;
}

.orange {
    background: linear-gradient(135deg, rgb(254, 152, 50) 0%, rgb(232, 123, 14) 30%, rgb(200, 90, 8) 80%);
    color: #fff;
}

section.orange h1,
section.orange h2,
section.orange h3{
    color: #F6F4F2;
}


/* buttons */

.button {
    display: inline-block;
    border-radius: 5px; 
    font-weight: 700 !important; /* Use specific weight instead of bold */ 
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

section .button {
    padding: 0.5rem 1rem; 
}

nav ul li a.button {
    padding: 0.3rem 0.45rem; 
    background-color: #E87B0E; 
    color: #fff; 
}



.width-600 {
    max-width: 600px;
}

.width-800 {
    max-width: 800px;
}

.button:hover {
    background-color: #222 !important; /* Darker shade on hover */
    color: #fff !important; /* Keep white text on hover */
    text-decoration: none;
    box-shadow: none;
}

section.white .button{
    background: linear-gradient(135deg, rgb(254, 152, 50) 0%, rgb(232, 123, 14) 50%, rgb(215, 111, 6) 90%);
    color: #fff;
}

section.white .button:hover{
    background: linear-gradient(135deg, #222 0%, #222 100%) !important;
    color: #fff !important;
}


section.orange .button:not(.orange){
    background-color: #fff;
    color: #222;
}

section.orange .button:not(.orange):hover{
    background-color: #222;
    color: #fff;
}

/* Ensure orange buttons in orange sections maintain their orange styling with white text */
.button.orange {
    background: linear-gradient(135deg, rgb(254, 152, 50) 0%, rgb(232, 123, 14) 50%, rgb(215, 111, 6) 90%) !important;
    color: #fff !important;
}

.button.orange:hover {
    background: linear-gradient(135deg, #222 0%, #222 100%) !important;
    color: #fff !important;
}

.button.orange,
#kontakt .button.orange {
    background: linear-gradient(135deg, rgb(254, 152, 50) 0%, rgb(232, 123, 14) 50%, rgb(215, 111, 6) 90%);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.8rem;
    border-radius: 6px;
    font-weight: bold !important;
    margin-top: 0.5rem;
    text-align: center;
    text-decoration: none !important;
}

.button.orange:hover,
#kontakt .button.orange:hover {
    background: linear-gradient(135deg, #222 0%, #222 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: background 0.3s ease, color 0.3s ease;
}


/* Form-box overrides for orange sections */
section.orange .form-box {
    background-color: #fff !important;
    color: #333 !important;
}

section.orange .form-box h3 {
    color: #E87B0E !important;
}

section.orange .form-box label {
    color: #333 !important;
}

section.orange .form-box a {
    color:#E87B0E !important;
}

section#contact a {
    text-decoration: underline !important;
}


ul {
    margin-bottom: 1.3rem;
}

.box .button {
    display: inline-block;
    align-self: center; /* Center the button horizontally */
    margin-top: auto; /* Push button to bottom of flex container */
    margin-bottom: 1rem; /* Remove bottom margin to ensure proper alignment */
}

/* Bold paragraph: always 0.1rem smaller than normal p */
.bold-p {
    font-size: 0.9rem;
    font-weight: 600;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: manual;
    max-width: 100%;
}



/* hero */


.hero{
    min-height: 70vh; /* Minimum height for visual impact */
    height: auto; /* Flexible height for content */
    max-height: none; /* Remove max-height to prevent cutting */
    overflow: visible; /* Prevent content from being cut off */
    padding: 10rem 0;
    display: block;
}

section#about-me{
    padding-bottom: 0;
    padding-top: 0;
    height: auto;
    min-height: auto;
}

.starter{
    min-height: 90vh; /* Minimum height for visual impact */
    height: auto; /* Flexible height for content */
    max-height: none; /* Remove max-height to prevent cutting */
}


.hero .wrapper {
    position: relative;
    z-index: 1;
}

.hero::before {
    content: "";
    background-image: linear-gradient(to bottom, rgba(246, 244, 242, 0) 0%, rgba(246, 244, 242, 0) 60%, rgba(246, 244, 242, 0.8) 90%, rgba(246, 244, 242, 1) 100%), url('../images/logo_transparent.svg');
    background-repeat: no-repeat;
    background-size: 100% calc(100% + 6rem); 
    background-position: center -3rem; 
    opacity: 0.2; 
    position: absolute;
    top: 0;
    left: 30%;
    width: 70%; 
    height: 90vh;
    max-height: 1024px;
    z-index: 0; 
}
    

hr {
    border: solid 0.5px rgba(232, 123, 14, 0.4); /* Orange color */
    margin: 2rem 0; /* Add some vertical spacing */
    max-width: 950px;
}


/* links */

a{ 
     text-decoration: none; 
     color: #E87B0E;
    }

#kontakt a:not([href^="tel:"]) {
    color: #E87B0E; /* Orange color for non-phone links */
}

#kontakt a:visited:not([href^="tel:"]),
#kontakt a:active:not([href^="tel:"]) {
    color: #E87B0E; /* Keep kontakt links orange when visited/active but not phone numbers */
}

a:hover{
    box-shadow: underline;
}

#contact a {
    text-decoration: none !important;
    color: #fff;
}

/* Phone numbers in contact section should be white like other text */
#contact a[href^="tel:"],
section#contact a[href^="tel:"] {
    color: #fff !important; /* White like other contact text */
}

#contact a[href^="tel:"]:hover,
section#contact a[href^="tel:"]:hover {
    color: #fff !important; /* Keep white on hover */
    text-decoration: underline !important;
}

#contact a:hover {
    text-decoration: underline !important; /* Add underline on hover */
}


/* images */





img {
    max-width: 100%;
    height: auto;
}



img.shadow {
    box-shadow: 0 1px 3px rgba(0.1, 0.1, 0.1, 0.1); /* Subtle shadow effect */
    border-radius: 2px; /* Rounded corners */
    margin: auto auto; /* Center the image */
}

img.category {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    display: block;
    margin-top: 0.2rem;
}



.back-about {
    background: #e87b0e url('../images/dummyprofile2.jpg') center center no-repeat;
    background-size: cover;
    max-height: 800px;
    min-height: 300px;
    padding: 0;
    position: relative;
    }







.back-praxis {
    background: #F6F4F2 url('../images/praxis.jpg') center center no-repeat;
    max-height: 600px;
    min-height: 300px;
    background-size: cover;
    padding: 0;
}



.no-gutter .column  {
    margin: 0;
    padding: 7rem 4rem 8rem 8rem;
}


header .no-gutter .column {
    padding: 0 !important;
    max-width: 1200px;
}

.no-gutter .col_2_3 {
    width: 66.66%;
}

.no-gutter .col_1_2 {
    width: 50%;
}

.no-gutter .col_1_3 {
    width: 33.33%;
}

.no-gutter .col_1_4 {
    width: 25%;
}

.no-gutter .col_3_4 {
    width: 75%;
}

img.contain {
    object-fit: contain;
    object-position: top;
}

.hero h1,
.hero h2,
.hero p{
    text-align: left;
}


/* Starter section styles - ONLY for home page */
section.starter h2{
    text-transform: none;
    font-weight: 300;
    font-size: 2rem;
}

section.starter p {
    font-size: 1.1rem;
}

    section.starter p strong,
    section.starter p b,
    section.starter p .bold {
        font-size: 1.05rem !important; /* Make bold in starter a bit bigger */
        font-weight: 600 !important;
    }



#logo {
    max-height: 45px;
    margin-right: 1rem; 
    width: auto;
    display: inline-block;
    vertical-align: middle;
    z-index: 1000;
    position: relative;
    margin-bottom: 0.5rem;
    }

.icon{
    max-height: 1rem;
    width: auto;
    margin-right: 0.8rem;
    margin-top: 0.8rem;
    display: inline-block;
}

#Methoden {
    list-style: none; /* Remove default bullets */
    padding: 0;
}

#Methoden li {
    margin: 1.2rem 0;
    cursor: pointer;
    font-weight: bold;
}










.box {
    background-color: #fff; /* White background for the box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    border-radius: 12px; /* Rounded corners */
    overflow: hidden; /* Ensure content stays inside the box */
    text-align: center; /* Center-align text */
    padding-bottom: 1rem;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
}




ul {
    list-style-position: inside; /* Align bullet points with the text */
}

ul li {
    margin-bottom: 1rem;
    font-size: 1rem !important;
}

section.about ul {
    list-style-position: outside;
    margin-left: 1rem;
}


.box p{
    padding: 0 1rem;
    margin-bottom: 1.3rem;
}

.wrapper .box {
    height: 100%;
    flex-direction: column;
}

.row {
    display: flex;
    align-items: stretch; /* Align items to stretch to the same height */
    justify-content: flex-start; /* Ensure content starts from the left */
    margin: 0 auto; /* Center the row when it hits max-width */
}

/* Full-width rows (like praxis section) - no width constraints for small/medium screens */
.row.no-gutter {
    max-width: 100% !important;
    width: 100vw !important;
}

/* Content rows - constrained width for better readability */
.wrapper .row {
    max-width: 1600px;
}



/* header */



header{
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1002; 
    background: rgba(249, 249, 249, 1) !important; /* Solid white background by default */
    transition: background 0.3s ease; /* Smooth transition when background changes */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.026); /* Softer shadow effect */
    align-items: center !important;
    font-size: 1rem; 
    font-family: 'Akatab', sans-serif;   
    padding: 1rem 1.5rem 0rem 1.5rem; /* Add padding for spacing */
}

/* Transparent header when scrolling - more specific selector */
header.scrolled {
    background-color: rgba(249, 249, 249, 0.6) !important; /* Semi-transparent when scrolling */
}

header .row {
    max-width: min(1400px, calc(100vw - 4rem)); /* Updated from 1000px to 1440px laptop default */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem; /* Ensure content doesn't touch edges */
    box-sizing: border-box;
}

header .column.col_3_4 {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}






/* Navigation */

#hamburger-menu {
    display: none !important; /* Hide the hamburger menu */
}
    

nav ul {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox for proper alignment */
    align-items: center; /* Center items vertically */
}

nav ul li{
    display: inline-block;
    margin-left: 1rem;
}

header a{
    text-decoration: none;
    color: #333;
    margin-top: 1.15rem;
}


#nav-links {
    display: flex;
}


nav li a:hover {
    box-shadow: 0 2px 0 rgba(232, 123, 14, 0.2);
   }


nav ul li a.current {
    font-weight: bold; 
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(232, 123, 14, 0.5);
}

/* Decoration */

#underline {
    height: 0.25rem;
    width: 100%;
}

/* Contact Form */
form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* Reduced spacing */
}

.form-box {
    background-color: #ffffffbb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 1.5rem;
    /* Prevent form container from shifting during interactions */
    transform: translateZ(0);
    backface-visibility: hidden;
    position: relative;
}

.form-box h3 {
    color: #E87B0E;
    margin-bottom: 1.5rem;
    text-align: center;
}

form label {
    font-weight: bold;
    margin-bottom: 0.3rem;
    display: block;
}

form input, form textarea, form select, form button {
    width: 100%;
    padding: 0.7rem;
    font-size: 16px; /* Use px instead of rem to prevent mobile zoom */
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 0.5rem; /* Reduced from 1rem */
    /* Pre-allocate space for focus box-shadow to prevent layout shifts */
    box-shadow: 0 0 0 2px transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Prevent browser auto-scroll on focus */
    scroll-margin: 0;
}

form select {
    background-color: white;
    cursor: pointer;
}

form input:focus, form textarea:focus, form select:focus {
    border-color: #E87B0E;
    outline: none;
    box-shadow: 0 0 0 2px rgba(232, 123, 14, 0.1);
}

/* Terminkapazitäten availability section */
.group-label {
    font-weight: bold;
    margin-bottom: 0.8rem;
    display: block;
}

.group-label .optional-text {
    font-weight: normal;
}

.availability-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.availability-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
    flex: 0 0 auto;
    min-width: fit-content;
    white-space: nowrap;
}

.availability-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.availability-option label {
    margin: 0;
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Privacy policy checkbox styling */
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.checkbox-row {
    display: flex;
    align-items: flex-start; /* Align to top for multiline text */
    gap: 0.3rem; /* Reduce gap to keep items closer */
    margin-bottom: 0;
    flex: 0 0 auto; /* Allow items to wrap naturally */
    flex-direction: row; /* Ensure horizontal layout */
}

.checkbox-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-row label {
    margin: 0;
    font-weight: normal;
    font-size: 0.9rem;
    line-height: 1.3; /* Better spacing for multiline text */
    white-space: normal; /* Allow text wrapping */
    display: block; /* Allow full width for text wrapping */
    flex: 1; /* Take remaining space */
}

form button {
    background: linear-gradient(135deg, rgb(254, 152, 50) 0%, rgb(232, 123, 14) 50%, rgb(215, 111, 6) 90%);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Akatab', sans-serif;
    padding: 0.8rem;
    border-radius: 6px;
    font-weight: 700 !important;
    margin-top: 0.5rem;
    transition: background 0.3s ease, color 0.3s ease;
}

form button:hover {
    background: linear-gradient(135deg, #222 0%, #222 100%) !important;
    color: #fff !important;
}

/* Character counter for text areas */
.character-counter {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.3rem;
    text-align: right;
}

.character-counter.warning {
    color: #E87B0E;
}

.character-counter.error {
    color: #dc3545;
    font-weight: bold;
}

/* footer */
footer {
    background-color: #333; 
    color: #F6F4F2; 
    padding-top: 3rem; /* Add vertical padding for spacing */
    padding-bottom: 1rem;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow above the footer */
}

footer a {
    color: #E87B0E;
    text-decoration: none;
    font-size: 0.95rem !important;
}

/* Footer phone numbers should be white like other footer text */
footer a[href^="tel:"] {
    color: #F6F4F2 !important; /* Same white as footer text */
}

footer a[href^="tel:"]:hover {
    color: #F6F4F2 !important; /* Keep same white on hover - no color change */
    text-decoration: underline;
}

footer a:hover {
    text-decoration: underline;
}

footer .wrapper {
    max-width: min(1400px, calc(100vw - 4rem)); /* Updated from 1000px to match 1440px laptop default */
}

footer .column {
    flex: 1 1 30%; /* Allow columns to shrink and grow, with a base width of 30% */
    max-width: 30%; /* Ensure columns don't exceed 30% width */
    min-width: 150px; /* Set a minimum width to avoid overly small columns */
}


footer ul {
    list-style: none; /* Remove bullet points from all footer lists */
    padding: 0;
    margin: 0;
}

footer ul li {
    margin-bottom: 0.2rem; 
    font-size: 0.95rem;
}

footer p{
    font-size: 0.95rem;
    color: #ccc;
    margin-top: 2rem;    
    text-align: center;
    padding-top: 1rem; /* Add space between line and text */
    position: relative;
}

/* Shorter centered line above copyright */
footer p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /* Shorter line */
    height: 1px;
    background-color: #555;
}

footer ul li{
    font-size: 0.95rem !important;
}

.right li{
    text-align: right;
}

.left li{
    text-align: left;
}

/* ===== ACTION CARDS STYLING ===== */
.action-cards {
    display: flex;
    gap: 1.25rem; /* 20px */
    margin: 2rem 0;
    flex-wrap: wrap;
}

.action-card {
    flex: 1;
    min-width: 17.5rem; /* 280px */
    background: rgba(255, 255, 255, 0.1);
    border: 0.125rem solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1.25rem; /* 20px */
    backdrop-filter: blur(0.625rem); /* 10px */
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

.action-card:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.15); /* 6px 20px */
}

.action-content h3 {
    color: #fff;
    margin-bottom: 0.5rem;
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
}

.action-content p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    line-height: 1.7;
    font-size: 0.95rem; /* 15px */
}

.action-content p strong, 
.action-content p b {
    font-size: 0.9rem;
}

.action-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem; /* 15px */
    display: inline-flex;
    align-items: center;
    transition: background 0.3s ease, transform 0.3s ease;
    padding: 0.625rem 1rem; /* 10px 16px */
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1);
}

.action-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(0.25rem);
    text-decoration: none;
    color: #fff;
}

/* Contact section specific overrides */
section#contact .action-link,
section#contact .action-link:hover,
section#contact .action-link:visited,
section#contact .action-link:focus,
section#contact .action-link:active,
#contact .action-link,
#contact .action-link:hover,
#contact .action-link:visited,
#contact .action-link:focus,
#contact .action-link:active {
    text-decoration: none !important;
    border-bottom: none !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.95rem !important;
    display: inline-flex;
    align-items: center;
    transition: background 0.3s ease, transform 0.3s ease;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

#contact .action-link:hover,
section#contact .action-link:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateX(0.25rem);
    text-decoration: none !important;
    color: #fff !important;
    border: none !important;
    border-bottom: none !important;
}

/* Override contact section link styles for action cards */
section#contact .action-link,
#contact .action-link {
    text-decoration: none !important;
    border-bottom: none !important;
    color: #fff !important;
}

section#contact .action-link:hover,
#contact .action-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    color: #fff !important;
}

/* ===== CONTACT SECTION STYLING ===== */
.info-card {
    background: #f8f9fa;
    border: 0.0625rem solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease;
}

.info-card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

.contact-card {
    border-left: 0.25rem solid #e67e22;
}

.process-card {
    border-left: 0.25rem solid #636a6f;
}

.emergency-card {
    border-left: 0.25rem solid #e74c3c;
    background: #fdf2f2;
}

.contact-option {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 0.0625rem solid #e9ecef;
}

.contact-option:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-option h4 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0.5rem !important;
}

#contact h4 {
    margin-top: 1rem;
}

.phone-number {
    margin: 0.75rem 0;
}

.phone-link {
    font-weight: bold;
    color: #333 !important; /* Changed from orange to black */
    text-decoration: none;
    border: 0.125rem solid #e67e22;
    padding: 0.6rem 0.8rem;
    border-radius: 0.375rem;
    display: inline-block;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.phone-note {
    font-size: 0.875rem;
    color: #666;
    font-style: italic;
    margin-top: 0.5rem;
}

.emergency-number {
    color: #333 !important;
    font-weight: bold;
    text-decoration: none;
    font-size: inherit;
}

.emergency-number:hover {
    color: #555 !important;
    text-decoration: underline;
}

/* Override phone number colors to be black everywhere */
a[href^="tel:"], 
.phone-link, 
.phone-link-inline,
.emergency-number {
    color: #333 !important;
}

a[href^="tel:"]:hover, 
.phone-link:hover, 
.phone-link-inline:hover,
.emergency-number:hover {
    color: #555 !important;
    text-decoration: underline !important;
}

/* ProcessWire rich text editor bold fix */
.service-content strong,
.service-content b,
p strong,
p b,
li strong,
li b {
    font-weight: bold !important;
    font-size: 1rem !important; /* Use rem instead of em for consistency */
    line-height: 1 !important; /* Reset line height */
    font-family: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    vertical-align: baseline !important; /* Prevent any vertical shift */
    transform: none !important; /* Prevent any transformations */
}

/* Extra aggressive bold text fix for ProcessWire content */
strong, b {
    font-size: 1rem !important; /* Use rem instead of px for consistency */
    font-weight: 600 !important; /* Use 600 for moderate bold */
    display: inline !important;
    vertical-align: baseline !important;
}

/* Clean link styling without aggressive overrides */
label a,
.checkbox-row label a {
    font-size: inherit;
    line-height: inherit;
    display: inline;
}

/* Services page link styling */
.service-content a,
.service-content p a {
    font-size: inherit;
    line-height: inherit;
}

/* Navigation link styling */
nav ul li a {
    font-size: 1rem;
    line-height: 1.5;
    display: inline-block;
    transition: color 0.3s ease;
    font-family: 'Akatab', Arial, sans-serif;
    font-weight: 400;
    vertical-align: baseline;
}

/* Basic link inheritance */
a {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    transition: color 0.3s ease;
}

/* Improved text rendering without aggressive overrides */
body, p, li, div, span, a, label {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.process-step h4,
.process-card h4 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0.5rem !important;
}

.process-note {
    margin-top: 1.125rem;
    padding-top: 1.125rem;
    border-top: 0.0625rem solid #e9ecef;
}

/* Inline phone link styling */
.phone-link-inline {
    color: #333 !important;
    text-decoration: none;
    font-weight: inherit;
    transition: color 0.3s ease;
}

.phone-link-inline:hover {
    color: #555 !important;
    text-decoration: underline;
}

/* Force no underline on phone links in orange sections */
section.orange .phone-link-inline,
section.orange .emergency-number,
section#contact .phone-link-inline,
section#contact .emergency-number {
    text-decoration: none !important;
}

/* Only show underline on hover */
section.orange .phone-link-inline:hover,
section.orange .emergency-number:hover,
section#contact .phone-link-inline:hover,
section#contact .emergency-number:hover {
    text-decoration: underline !important;
}



/* Impressum and Datenschutz alignment */
#Impressum,
#Datenschutz {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#Impressum .wrapper,
#Datenschutz .wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left !important;
}

#Impressum .row,
#Datenschutz .row {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

#Impressum .column.col_1,
#Datenschutz .column.col_1 {
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5625rem !important; /* 25px = 1.5625rem */
}

#Impressum .column.col_1 *,
#Datenschutz .column.col_1 * {
    text-align: left !important;
}

/* About Page Styles */
.about-intro-box, .about-approach-box {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 2rem 2rem 1rem 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 0rem;
    height: 100%;
}

.about-intro-box h2, .about-approach-box h2 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.about-intro-box p, .about-approach-box p {
    text-align: center;
}

.method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.method-item {
    background-color: #fff; /* White background like index boxes */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Same shadow as index boxes */
    border-radius: 12px; /* Same border radius as index boxes */
    padding: 2rem 1rem 2rem; /* Similar padding to index boxes */
    text-align: center; /* Center-align text like index boxes */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensure content stays inside the box */
}

.method-item:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.method-content h3 {
    color: #E87B0E; /* Keep orange headings as requested */
    margin-bottom: 1rem;
}

.method-content p {
    margin: 0;
    line-height: 1.6;
    padding: 0 0.5rem; /* Add some padding like box p elements */
}

/* ===== MODERN SERVICES SECTION STYLING ===== */





.services-modern h3 {
    color: #333 !important;
    text-align: center;
}

.services-modern p {
    text-align: center;
}

.services-modern ul:not(.service-content ul) {
    text-align: center; /* Center text for consistency */
    max-width: 80%;
    margin: 0 auto; /* Center the list block */
    list-style-position: inside;
}

.services-grid {
    display: flex;
    align-items: stretch; /* Make boxes equal height */
    justify-content: space-between;
    margin-top: 3rem;
}

.services-grid .col_1_2 {
    width: calc(50% - 2rem) !important; /* 50% minus half the gap */
    flex: 0 0 calc(50% - 2rem);
}

.services-grid .col_1_2:first-child {
    margin-right: 2rem; /* Only gap between the boxes */
}

.services-grid .col_1_2:last-child {
    margin-left: 2rem; /* Only gap between the boxes */
}

.service-card {
    position: relative;
    margin: 0; /* Remove default column margins */
    display: flex; /* Make service-card a flex container */
    flex-direction: column; /* Stack content vertically */
}

.service-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, background 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
}

.service-content:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 1);
}

.service-content .button {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.service-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-content h2 {
    color: #E87B0E;
    margin-bottom: 1.5rem;
    position: relative;
}

.service-content h2::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 40px;
    height: 2px; /* Made thinner from 3px to 2px */
    background: linear-gradient(90deg, #E87B0E, rgba(232, 123, 14, 0.3));
    border-radius: 1px; /* Adjusted border-radius to match thinner line */
}

.service-content p {
    margin-bottom: 1.5rem;
    padding: 0 2.5rem;
    line-height: 1.7;
    color: #222;
}

.service-content ul {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1.5rem;
    text-align: center;
    margin: 0 auto 1.5rem auto; /* Center the list block */
    list-style-position: inside; /* Keep bullets aligned */
}

.service-content ul li {
    margin-bottom: 0.8rem;
    color: #222;
    line-height: 1.6;
    text-align: center;
}

/* ===== STYLES MOVED FROM PHP FILE ===== */

/* Form message styles */
.form-message {
    color: white;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}

.form-message.success {
    background: rgba(40, 167, 69, 0.8);
}

.form-message.error {
    background: rgba(220, 53, 69, 0.8);
}

/* Dynamic background image support */
.back-about[data-bg-image] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ===== MEDIA QUERIES (MOBILE-FIRST APPROACH) ===== */
/* 
   BREAKPOINT ORDER (smallest to largest):
   1. max-480px → Small phones
   2. max-768px → Tablets & large smartphones
   3. max-1140px → Tablets & small laptops
   4. min-1141px → Laptop baseline
   5. min-1440px → Medium-large screens
   6. min-1600px → Large desktops
   7. min-1800px → Ultra-wide monitors
   8. min-1920px → Extra-large screens
   9. min-2200px → Ultra-large 4K displays
*/

/* ===== DESKTOP-FIRST MEDIA QUERIES ===== */
/* Base styles are for 1440px laptops, then override downward and upward */

/* ===== TABLETS & SMALL LAPTOPS (max-width: 1140px) ===== */
@media only screen and (max-width: 1140px) {
    .col_1, .col_1_2, .col_1_3, .col_2_3, .col_1_4, .col_3_4 {
        width: 100%; /* Make columns full-width */
    }

    .wrapper {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Show hamburger menu on tablets and hide desktop nav */
    #hamburger-menu {
        display: inline-block !important;
        position: fixed;
        font-size: 2rem; /* Larger for iPad */
        top: 1.5rem; /* Position from top */
        right: 2rem; /* Position from right */
        background: none;
        border: none;
        cursor: pointer;
        color: #000;
        z-index: 1003;
        padding: 0.5rem; /* Add touch target area */
    }

        button.hamburger-menu {
        color: #000 !important;
    }
    
    /* Hide header background and padding for tablets */
    header {
        background: transparent;
        box-shadow: none;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1002;
    }


    #logo {
     display: none; /* Hide logo on mobile screens */
    }


    
    body {
        padding-top: 0 !important;
    }
    
  #nav-links {
    display: none;
    position: fixed;
    top: 4rem; /* below header */
    right: 2.8rem;
    width: 140px;
    height: auto;
    background: #f9f9f9;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem;
    z-index: 1001;
  }

  #nav-links.active {
    display: flex;
  }
  #nav-links li {
    margin: 0.3rem 0;
    font-size: 1.1rem;
  }

    section {
        min-height: auto;
        height: auto;
    }

    h1 {
        margin-top: 0rem;
        font-size: 3.2rem;
    }
    
    /* iPad typography adjustments */
    h2 {
        font-size: 1.5rem; /* Reduced from base 1.7rem */
        line-height: 1.4; /* Slightly tighter line height */
    }
    
    p {
        font-size: 0.95rem; /* Slightly smaller than base 1rem */
        line-height: 1.7; /* Reduced from base 1.8 */
    }

    .bold-p, p strong, p b {
        font-size: 0.9rem !important;
    }
    
    ul li {
        font-size: 0.95rem !important; /* Match p font size */
    }
    
    a {
        font-size: 0.95rem; /* Match p font size */
    }
}

/* ===== TABLETS & LARGE SMARTPHONES (max-width: 768px) ===== */
@media only screen and (max-width: 768px) {
    header {
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1002;
    }
    #hamburger-menu {
        position: fixed;
        top: 1.5rem;
        right: 2rem;
        z-index: 1003;
    }

    /* Hide nav-links by default on mobile */
    #nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(249,249,249,0.98);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        padding: 0;
        margin: 0;
    }
    #nav-links.active {
        display: flex;
    }
    #nav-links li {
        margin: 1.5rem 0;
        font-size: 1.3rem;
        text-align: center;
    }


    
    #nav-links .button {
        margin:  1rem 0; /* Reduce space around the button */
        padding: 0.4rem 0.8rem; /* Adjust button padding */
        background-color: #E87B0E; /* Button background color */
        color: #fff; /* Button text color */
        border-radius: 5px; /* Rounded edges for the button */
        text-align: center;
    }
    



    header .column.col_1_4 {
        text-align: left;
    }

    section {
        min-height: auto;
        height: auto;
        padding: 4rem 0;
    }

    section.hero {
        padding-bottom: 2rem !important;
    }

    .box p, .box h2{
        padding: 0 0.625rem; /* 10px = 0.625rem (10÷16) */
    }

    .hero p, .hero h1, .hero h2, .hero h3{
        text-align: center;
    }

    ul#methoden li {
        display: list-item;
        text-align: left !important;
    }

    /* Additional mobile paragraph spacing */
    p {
        padding: 0 0.5rem;
        font-size: 0.95rem; /* Consistent with other elements */
    }
    
    ul li {
        font-size: 0.95rem !important; /* Match p font size */
    }

    p strong, p b, ul li strong, ul li b {
        font-size: 0.85rem; /* Slightly smaller for emphasis */
    }



    a {
        font-size: 0.95rem; /* Match p font size */
    }

    .hero::before {
        background-size: 120% calc(100% + 6rem);
        left: 0; /* Start from the left edge */
        width: 100%; /* Use full width container */
        background-position: -50% calc(100% - 3rem); 
    }

    .wrapper {
        padding: 0 1rem; /* Reduce section padding */
        max-width: 100% !important; /* Override desktop max-width constraint */
    }

    section.hero {
        padding-top: 3rem;
        min-height: 50vh; /* Reduced minimum for mobile */
        height: auto; /* Flexible height for content */
    }

    section.starter {
        padding-top: 3rem;
        min-height: 60vh; /* Reduced minimum for mobile */
        height: auto; /* Flexible height for content */
    }

    section.about {
        padding: 1rem 0; /* Add padding to the section */
        margin-top: 0;
    }

    .about h2 {
        margin-top: 0rem;
    }

    .services h2 {
        margin-top: 2rem;
    }

    section .row {
        display: flex; /* Use Flexbox for layout */
        flex-direction: column; /* Stack columns vertically */
    }

    section .column {
        width: 100%; /* Make each column take up the full width */
        max-width: 100%; /* Ensure columns don't exceed the container width */
        text-align: center; /* Center-align content */
        margin: 0 auto; /* Center the column */
        padding: 1rem; /* Reduced padding for mobile - 16px all around */
    }

    /* Fix no-gutter column padding on mobile */
    .no-gutter .column {
        padding: 1rem !important; /* Consistent with regular columns */
        text-align: center;
    }

    section .row .column {
        width: 100%; /* Make each column take up the full width */
        max-width: 100%; /* Ensure columns don't exceed the container width */
        float: none; /* Remove float for better stacking */
        display: block;
    }

    .column.col_1_2 {
        padding: 1rem; /* Reduced padding for mobile - 16px all around */
    }

    /* Override col_1_2 width specifically on mobile screens */
    section.orange#contact .row .column.col_1_2 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        margin-left: 0 !important;
    }

    section ul li {
        margin: 1rem 0; /* Add margin for spacing */
    }

    #about-link-image {
        display: none;
    }

    section#about-teaser {
        padding-top: 4rem;
    }

    section#about-teaser .button {
        margin-bottom: 4rem;
    }
    
    .leistungen .box h2 {
        margin-top: 2rem !important;
    }

    html {
        text-align: center;
    }

    form {
        padding: 1rem 0.5rem; /* Reduced padding for mobile screens */
    }

    .form-box {
        padding: 1.5rem 1rem 0 1rem; /* Reduced form-box padding for mobile */
        margin: 1rem 0; /* Adjust margin */
        width: 100%;
        box-sizing: border-box; /* Ensure padding is included in width calculation */
    }

    #logo {
        display: none; /* Hide logo on mobile screens */
    }

    .button {
        padding: 0.4rem 0.8rem; /* Adjust button padding */
    }

    .box img {
        width: 100%; /* Make images responsive */
        height: 200px; /* Set a fixed height */
        object-fit: cover; /* Maintain aspect ratio */
        object-position: center; /* Center the image */
        border-radius: 4px;    
    }
    
    .box {
        height: auto; /* Adjust box height to fit content */
        padding: 1rem; /* Add padding inside the box */
        margin-bottom: 1.5rem; /* Add margin between boxes */
    }



    
    #methoden span.toggle {
        text-align: left;
        margin: 0;
        padding: 0;
        font-size: 0.6rem;
    }

    #Methoden .details {
        padding: 1rem;
    }

    footer {
        padding: 0.1rem; /* Reduce footer padding */
        padding-top: 2rem;
    }
    
    footer .row {
        display: flex !important; /* Use flex to control alignment */
        flex-direction: column !important; /* Stack columns vertically */
        justify-content: center !important; /* Center content vertically */
        align-items: center !important; /* Center content horizontally */
    }
    
    footer .column.col_1_3 {
        width: 100% !important; 
        max-width: 100%;
        float: none !important; /* Remove float to ensure stacking */
        display: block !important;
        margin: 1rem 0 0 0 !important; /* Remove left margin, add top margin */
        flex: 1 1 100%; /* Make columns full width */
    }



    footer p, footer ul li {
        text-align: center;
    }

    .left li {
        text-align: center;
    }

    .right li {
        text-align: center;
    }

    .box img {
        object-fit: cover;
    }

    form label {
        text-align: left;
    }

    /* Mobile availability checkboxes adjustments */
    .availability-options {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.8rem;
        justify-content: flex-start;
    }
    
    .availability-option {
        flex: 0 0 auto;
        min-width: fit-content;
        margin-bottom: 0.5rem;
        white-space: nowrap;
    }
    
    .availability-option label {
        white-space: nowrap;
    }

    /* Mobile privacy policy checkbox adjustments */
    .checkbox-container {
        flex-direction: row; /* Keep horizontal layout */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 0.8rem;
        justify-content: flex-start; /* Align to left */
    }
    
    /* Mobile checkbox styling - all pages */
    .checkbox-row,
    form .checkbox-row,
    .form-box .checkbox-row,
    section .checkbox-row {
        align-items: flex-start; /* Align to top for multiline text */
        margin-bottom: 0.5rem;
    }
    
    .checkbox-row label,
    form .checkbox-row label,
    .form-box .checkbox-row label,
    section .checkbox-row label {
        white-space: normal; /* Allow text wrapping on mobile */
        font-size: 0.85rem; /* Slightly smaller on mobile */
    }

    ul {
        list-style-position: inside; /* Align bullet points with the text */
        margin-bottom: 3rem;
    }

    .starter h1 {
        font-size: 2rem; /* Adjust font size for smaller screens */
        margin-top: 4rem;
    }
    
    /* Add side padding to about-teaser section on mobile */
    section#about-teaser .column {
        padding: 2rem 1.5rem; /* Add horizontal padding for mobile */
    }

    .starter h2 {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }

    /* Services modern section mobile adjustments */
    .services-modern {
        padding: 4rem 0;
    }
    
    .services-grid {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .services-grid .col_1_2 {
        width: 100% !important;
        flex: none;
        margin: 0 !important;
    }
    
    .services-grid .col_1_2:first-child {
        margin-right: 0 !important;
    }

    .services-grid .col_1_2:last-child {
        margin-left: 0 !important;
    }
    
    .service-content {
        margin-bottom: 0;
        padding-bottom: 2rem;
    }
    
    .service-content:hover {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    }
    
    .service-content h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .service-content p {
                padding: 0 1.5rem; 
    }

    .service-content .button {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .service-image {
        height: 300px; /* Increased mobile height */
        margin-bottom: 2rem;
    }

    /* Method grid mobile adjustments */
    .method-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem; /* Match index.php boxes spacing */
    }
    
    .about-intro-box, .about-approach-box {
        padding: 1.5rem;
    }
    
    .method-item {
        padding: 1.5rem 1rem 1rem;
        text-align: center;
    }
    
    /* Remove hover effects on mobile */
    .method-item:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Action cards mobile adjustments */
    .action-cards {
        flex-direction: column;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    
    .action-card {
        min-width: unset;
        padding: 1.25rem;
    }
    
    .action-content h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .action-content p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .action-content p b, .action-content p strong {
        font-size: 0.9rem;
    }
    
    .action-link {
        font-size: 0.9rem;
        padding: 0.65rem 1rem;
    }
    
    /* Reduce transform effects on mobile for better performance */
    .action-card:hover {
        transform: none;
    }
    
    .action-link:hover {
        transform: none;
    }

    /* Tablet adjustments for action cards (481px-768px range) */
    .action-cards {
        gap: 1.25rem;
    }
    
    .action-card {
        padding: 1.125rem;
    }
    
    section#contact .column.col_1_2,
    .column.col_1_2 {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }
}

/* ===== SMALL PHONES (max-width: 480px) ===== */
@media only screen and (max-width: 480px) {
    section .row {
        flex-direction: column; /* Stack rows vertically */
        gap: 0rem; /* Add spacing between rows */
    }



.col_1_3.back-about {
    margin-bottom: 2rem;
}

    section {
        padding: 2rem 0;
    }

    section#about-teaser {
        padding-bottom: 0;
        padding-top: 2rem;
    }

    section#about-teaser h2,
    section#about-teaser p {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    section.about {
        padding-top: 2rem;
    }

    section.hero h1,
    section.hero h2,
    section.hero h3,
    section.hero p {
        text-align: center;
    }

    h2 {
        margin-top: 1rem;
        font-size: 1.3rem; /* Slightly smaller for iPhone */
    }
    
    p {
        font-size: 0.9rem; /* Smaller base paragraph size for iPhone */
        line-height: 1.6; /* Tighter line height for mobile */
    }


    
    ul li {
        font-size: 0.9rem !important; /* Match p font size */
    }
    
    p strong, p b, ul li strong, ul li b {
        font-size: 0.9rem; /* Slightly smaller for emphasis */
    }



    a {
        font-size: 0.9rem; /* Match p font size */
    }
    
    h3 {
        font-size: 1.1rem; /* Slightly smaller h3 for iPhone */
    }
    
    /* Starter section specific typography for iPhone */
    section.starter h2,
    section.hero h2 {
        font-size: 1.2rem; /* Smaller starter h2 on iPhone */
    }
    
    section.starter p {
        font-size: 0.9rem !important; /* Consistent starter p size */
    }
    


    /* Ensure bold text in starter doesn't appear smaller */
    section.starter p strong,
    section.starter p b,
    section.starter p .bold {
        font-size: 0.9rem !important; /* Make bold in starter a bit bigger */
    }



    form {
        padding: 1rem 0; /* Add more padding around the form */
    }

    .button {
        padding: 0.4rem 0.6rem; /* Adjust button padding */
    }

    .portrait {
        width: 40%; /* Further reduce width */
        max-width: 200px; /* Set a smaller maximum width */
        height: auto; /* Maintain aspect ratio */
        margin: 0 auto; /* Center the image */
    }

    #logo {
        max-height: 25px;
    }

    /* Mobile responsiveness for action cards (max-width: 480px) */
    .action-cards {
        flex-direction: column;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    
    .action-card {
        min-width: unset;
        padding: 1rem;
    }
    
    .action-content h3 {
        font-size: 1rem;
        text-align: center;
    }
    
    .action-content p {
        font-size: 0.9rem;
        text-align: center;
    }

    .action-content p b,
    .action-content p strong {
        font-size: 0.9rem;
    }
    
    .action-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.875rem;
        justify-content: center;
    }

    /* Contact section mobile adjustments */
    .info-card {
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .phone-link {
        font-size: 0.9rem;
        padding: 0.6rem 0.6rem;
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    .button.orange {
        font-size: 0.9rem;
        width: auto;
        max-width: 100%;
        text-align: center;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    /* EXTRA OVERRIDE for very small screens - ensure col_1_2 behaves */
    section#contact .row .column.col_1_2,
    section#contact .column.col_1_2,
    section.orange#contact .row .column.col_1_2,
    .no-gutter .col_1_2,
    .column.col_1_2 {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .service-content strong,
    .service-content b,
    p strong,
    p b,
    li strong,
    li b {
        font-size: 0.9rem !important; /* Ensure bold text is readable on small screens */
    }
}


/* ===== LARGE DESKTOPS (min-width: 1600px) ===== */
@media only screen and (min-width: 1600px) {
    .wrapper .row {
        max-width: 1800px;
    }
    
    .wrapper {
        max-width: 1250px;
    }
    
    header .row {
        max-width: min(1500px, calc(100vw - 4rem)); /* Never exceed viewport */
    }
    
    footer .wrapper {
        max-width: min(1500px, calc(100vw - 4rem)); /* Match header width */
    }
    
    /* Keep no-gutter rows full-width but limit for image quality */
    .row.no-gutter {
        max-width: 1800px !important;
        margin: 0 auto;
    }
}

/* ===== ULTRA-WIDE MONITORS (min-width: 1800px) ===== */
@media only screen and (min-width: 1800px) {
    .wrapper .row {
        max-width: 1600px;
    }
    
    .wrapper {
        max-width: 1400px; /* Keep content readable */
    }
    
    header .row {
        max-width: 1600px;
    }
    
    footer .wrapper {
        max-width: 1800px;
    }
    
    /* Limit no-gutter rows to prevent image quality issues */
    .row.no-gutter {
        max-width: 2000px !important;
        margin: 0 auto;
    }
}

/* ===== EXTRA-LARGE SCREENS (min-width: 1920px) ===== */
@media only screen and (min-width: 1920px) {
    .wrapper {
        max-width: 1400px;
    }
    
    section {
        padding: 10rem 0;
    }
    
    h1 {
        font-size: 4.2rem; /* Keep consistent max size */
    }
    
    h2 {
        font-size: 1.7rem; /* Keep consistent max size */
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    /* Only increase font size for non-hero paragraphs on large screens */
    section:not(.hero) p {
        font-size: 1.1rem; /* Slight increase from base for large screens */
        line-height: 1.9;
    }
    
    /* Keep hero sections at consistent 1rem */
    section.hero p {
        font-size: 1rem !important;
        line-height: 1.7;
    }
    
    ul li {
        font-size: 1.1rem;
    }
    
    a {
        font-size: 1.1rem;
    }
    
    /* Even more spacing for large screens */
    .column {
        margin: 0 0 0px 7%; /* Further increase to 7% for larger screens */
    }
    
    /* Header alignment for large screens */
    header .row {
        max-width: min(1400px, calc(100vw - 4rem)); /* Never exceed viewport */
    }
    
    footer .wrapper {
        max-width: min(1400px, calc(100vw - 4rem)); /* Match header width */
    }
    
    .service-content h2::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ===== ULTRA-LARGE SCREENS (min-width: 2200px) ===== */
@media only screen and (min-width: 2200px) {
    .wrapper .row {
        max-width: 2200px;
    }
    
    .wrapper {
        max-width: 1500px; /* Still keep text readable */
    }
    
    header .row {
        max-width: 1800px;
    }
    
    footer .wrapper {
        max-width: 1800px;
    }
    
    /* Maximum limit for image sections to maintain quality */
    .row.no-gutter {
        max-width: 2200px !important;
        margin: 0 auto;
    }
    
    /* Larger text for ultra-wide screens - respecting maximums */
    h1 {
        font-size: 4.2rem; /* Maximum size for h1 */
    }
    
    h2 {
        font-size: 1.7rem; /* Maximum size for h2 */
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    p {
        font-size: 1.2rem; /* Slight increase for ultra-wide screens */
        line-height: 1.8;
    }
    
    ul li {
        font-size: 1.2rem;
    }
    
    a {
        font-size: 1.2rem;
    }
}

/* Button alignment in service cards - push buttons to bottom */
.service-content .button.orange {
    margin-top: auto !important;
    align-self: stretch !important; /* Stretch full width */
    margin-bottom: 0 !important;
    text-align: center !important; /* Center text */
    display: flex !important; /* Use flexbox for perfect centering */
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
}

/* Fix button alignment ONLY in service boxes - not home page boxes */
.service-content .button {
    margin-top: auto !important;
    align-self: stretch;
    text-align: center !important; /* Center text */
    display: flex !important; /* Use flexbox for centering */
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
}

/* COMPREHENSIVE phone number color fix - make ALL phone numbers black */
a[href^="tel:"],
.phone-link,
.phone-link-inline,
.emergency-number,
footer a[href^="tel:"],
header a[href^="tel:"],
.footer a[href^="tel:"] {
    color: #333 !important;
    text-decoration: none !important;
}

a[href^="tel:"]:hover,
.phone-link:hover,
.phone-link-inline:hover,
.emergency-number:hover,
footer a[href^="tel:"]:hover,
header a[href^="tel:"]:hover,
.footer a[href^="tel:"]:hover {
    color: #555 !important;
    text-decoration: underline !important;
}

/* FINAL OVERRIDE - Ensure phone numbers are black everywhere EXCEPT footer and contact sections */
a[href^="tel:"]:not(footer a):not(#contact a):not(section#contact a),
a[href^="tel:"]:visited:not(footer a):not(#contact a):not(section#contact a),
a[href^="tel:"]:active:not(footer a):not(#contact a):not(section#contact a),
a[href^="tel:"]:focus:not(footer a):not(#contact a):not(section#contact a) {
    color: #333 !important;
    border-color: #333 !important;
}

a[href^="tel:"]:hover:not(footer a):not(#contact a):not(section#contact a) {
    color: #555 !important;
    border-color: #555 !important;
    text-decoration: underline !important;
}

/* STRONGEST OVERRIDE - Footer and Contact phone numbers must be white */
footer a[href^="tel:"],
footer a[href^="tel:"]:visited,
footer a[href^="tel:"]:active,
footer a[href^="tel:"]:focus,
footer a[href^="tel:"]:hover,
#contact a[href^="tel:"],
#contact a[href^="tel:"]:visited,
#contact a[href^="tel:"]:active,
#contact a[href^="tel:"]:focus,
#contact a[href^="tel:"]:hover,
section#contact a[href^="tel:"],
section#contact a[href^="tel:"]:visited,
section#contact a[href^="tel:"]:active,
section#contact a[href^="tel:"]:focus,
section#contact a[href^="tel:"]:hover {
    color: #F6F4F2 !important;
    border-color: #F6F4F2 !important;
}

/* FINAL OVERRIDE - Fix about.php button hover - keep white text with HIGHEST specificity */
section.white .button:hover,
section.white .button.orange:hover,
section.white a.button:hover,
section.white a.button.orange:hover {
    color: #fff !important; /* Keep white text instead of changing color */
    background: linear-gradient(135deg, #222 0%, #222 100%) !important;
    text-decoration: none !important;
}

/* ===== MINIMAL LAYOUT SHIFT PREVENTION (FORMS ONLY) ===== */
/* Only add layout stability without changing visual appearance */
.form-box {
    contain: layout style;
    isolation: isolate;
}