/* Dr. Berkel Zahnarztpraxis - Zentrale Styles */

/* ============================================
   RESET & BASE
   ============================================ */
*, *:after, *:before {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    color: #606c76;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 1px;
    text-rendering: optimizeLegibility;
    font-weight: 300;
    margin-bottom: 2rem;
    margin-top: 0;
    line-height: 1.3;
}

h1 {
    color: #4e6065;
    font-size: 3.2rem;
    font-weight: 400;
}

h2 {
    color: #0099cc;
    font-size: 2.6rem;
    font-weight: 400;
}

h3 {
    color: #0099cc;
    font-size: 2.2rem;
    font-weight: 400;
}

h4 {
    color: #0099cc;
    font-size: 2rem;
    font-weight: 400;
}

p {
    padding: 0;
    margin: 0 0 2rem;
    line-height: 1.8;
    color: #4e6065;
    font-size: 1.6rem;
}

strong, b {
    font-weight: 700;
    color: #4e6065;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
    color: #0099cc;
}

a:hover {
    color: #606c76;
}

/* ============================================
   LISTS
   ============================================ */
ul {
    list-style: none;
    margin: 0 0 3rem;
    padding-left: 0;
}

ul li {
    padding-left: 25px;
    position: relative;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    color: #4e6065;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    width: 100%;
    z-index: 30;
    background: linear-gradient(180deg, #fff 0%, #fff 75%, rgba(255, 255, 255, 0));
}

nav {
    background: linear-gradient(180deg, #fff 0%, #fff 75%, rgba(255, 255, 255, 0));
}

nav ul.topblox {
    margin: 0;
    display: flex;
    padding: 0;
}

nav ul.topblox li {
    display: flex;
    position: relative;
    width: 20%;
    padding: 0;
    height: 80px;
    flex-wrap: nowrap;
    flex-direction: column;
    background-color: #0099cc;
    align-items: center;
    justify-content: center;
}

nav ul.topblox li p {
    margin: 0;
    padding: 0;
}

nav ul.topblox li p.icon a {
    display: block;
    padding-top: 50px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    background-position: center 10px;
    background-size: 40px;
    background-repeat: no-repeat;
}

nav ul.topblox li.ort {
    background-color: #91c200;
}

nav ul.topblox li.ort p.icon a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='45'%3E%3Cg fill='none' stroke='%23FFF' stroke-width='3' transform='translate(2 2)'%3E%3Cellipse cx='13.543' cy='13.701' rx='5.729' ry='5.773'/%3E%3Cpath d='M26.863 14.173C26.83 6.5 20.9.283 13.544.283 6.188.282.226 6.5.226 14.172c0 9.929 13.295 25.731 13.295 25.731S26.906 24.1 26.863 14.172z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 25px;
}

nav ul.topblox li.mail {
    background-color: #f9af10;
}

nav ul.topblox li.mail p.icon a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='44'%3E%3Cg fill='none' stroke='%23FFF' stroke-width='3'%3E%3Cpath d='M35.117 27.133a4.255 4.255 0 0 1-2.585.867 4.27 4.27 0 0 1-2.586-.867l-8.913-6.72-1.795-1.353L2.357 6.335C2.357 3.943 4.29 2 6.667 2h51.73c2.375 0 4.31 1.943 4.31 4.333l-27.59 20.8z'/%3E%3Cpath d='M55.065 2H9.58C5.394 2 2 5.413 2 9.619v24.762C2 38.589 5.394 42 9.58 42h45.485c4.186 0 7.58-3.411 7.58-7.619V9.619c0-4.206-3.394-7.619-7.58-7.619z'/%3E%3C/g%3E%3C/svg%3E");
}

nav ul.topblox li.fon {
    background-color: #e6007e;
}

nav ul.topblox li.fon p.icon a {
    background-size: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23FFF'%3E%3Cpath d='M40 36.7V38a2 2 0 0 1-2 2h-4C15.222 40 0 24.778 0 6V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8c0 1.12-.62 2.62-1.4 3.4l-4.28 4.28c3.04 7.2 8.8 12.96 16 16l4.24-4.24c.8-.8 2.3-1.42 3.4-1.42H38a2 2 0 0 1 1.98 2v6.7l.02-.02z'/%3E%3Cpath d='M39.49 19.76h-4.362A15.264 15.264 0 0 0 19.82 4.45V.09a19.616 19.616 0 0 1 19.67 19.67zm-8.707.54h-4.391a6.56 6.56 0 0 0-6.557-6.556V9.352A10.89 10.89 0 0 1 30.783 20.3z'/%3E%3C/g%3E%3C/svg%3E");
}

nav ul.topblox li.cal {
    background-color: #0099cc;
}

nav ul.topblox li.cal p.icon a {
    background-size: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='42'%3E%3Cg fill='none'%3E%3Cpath stroke='%23FFF' stroke-width='3' d='M2 8c0-2.2 1.8-4 4-4h28a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/%3E%3Cpath fill='%23FFF' d='M10 0h4v4h-4zm16 0h4v4h-4zM10 18h4v4h-4zM3 5h34v6H3zm7 21h4v4h-4zm8-8h4v4h-4zm0 8h4v4h-4zm8-8h4v4h-4zm0 8h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
}

nav ul.topblox li.toggle {
    background-color: #0099cc;
}

nav ul.topblox li.toggle label#nav-toggle {
    display: inline-block;
    width: 100%;
    height: 80px;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-position: center 14px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='22'%3E%3Cpath d='M1.5 1h33m-33 10h33m-33 10h33' fill='none' stroke='%23FFF' stroke-linecap='square' stroke-width='2'/%3E%3C/svg%3E");
}

nav ul.topblox li.toggle label#nav-toggle em {
    display: block;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    margin-top: 50px;
}

/* Verstecke Text-Inhalte auf Mobile */
nav ul.topblox li p.txt {
    display: none;
}

/* Desktop Menu */
div#menu {
    display: block;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    padding: 1em 5vw;
    background: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
    z-index: -1;
    transform: translateY(-100%);
    transition: all 0.4s;
}

div#menu div.menulogo {
    text-align: center;
    margin: 0 0 25px;
}

div#menu div.menulogo a img {
    height: 80px;
    width: auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
}

div#menu ul li {
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    list-style: none;
}

div#menu ul li:before {
    display: none;
}

div#menu ul li a {
    display: block;
    font-size: 14px;
    padding: 7.5px;
    letter-spacing: 2px;
    color: #4e6065;
}

div#menu ul li a:hover,
div#menu ul li a:focus {
    color: #0099cc;
}

div#menu ul li a.active {
    color: #0099cc;
    border-bottom: 3px solid #0099cc;
}

div#menu.open {
    transform: translateY(0);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
article {
    margin: 100px 0 0;
    padding: 0;
}

section {
    padding: 40px 20px;
}

section main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Content Container */
.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   BUTTONS & CTA
   ============================================ */
.cta-button {
    display: inline-block;
    background-color: #0099cc;
    color: #fff;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #0099cc;
    text-decoration: none;
    margin: 20px 0;
}

.cta-button:hover {
    background-color: #fff;
    color: #0099cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 153, 204, 0.3);
}

.cta-button.secondary {
    background-color: transparent;
    color: #0099cc;
    border: 2px solid #0099cc;
}

.cta-button.secondary:hover {
    background-color: #0099cc;
    color: #fff;
}

.cta-container {
    text-align: center;
    margin: 40px 0;
    padding: 30px 20px;
    background-color: #f9fafa;
    border-radius: 12px;
}

/* ============================================
   HIGHLIGHT BOXES
   ============================================ */
.highlight-box {
    background-color: #f5fffd;
    border-left: 4px solid #0099cc;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
}

.highlight-box h3 {
    margin-top: 0;
    color: #0099cc;
}

.info-box {
    background-color: #fff;
    border: 2px solid #ecefef;
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ============================================
   FEATURE GRID
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 40px 0;
}

.feature-item {
    background: #fff;
    border: 2px solid #ecefef;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    box-shadow: 0 4px 16px rgba(0, 153, 204, 0.15);
    border-color: #0099cc;
}

.feature-item h3 {
    color: #0099cc;
    margin-top: 0;
    font-size: 2rem;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    padding: 15px;
    background: #0099cc;
    margin-top: 80px;
}

footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

footer ul li {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
}

footer ul li:before {
    display: none;
}

footer ul li a {
    display: block;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    padding: 7.5px 15px;
    transition: all 0.3s;
}

footer ul li a:hover {
    color: #fff;
    transform: scale(1.1);
}

footer ul li:last-child {
    margin-left: auto;
}

footer ul li:last-child a img {
    width: 30px;
    height: 30px;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media only screen and (min-width: 600px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    section {
        padding: 60px 40px;
    }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */
@media only screen and (min-width: 980px) {
    h1 {
        font-size: 3.6rem;
    }
    
    h2 {
        font-size: 2.8rem;
    }
    
    nav ul.topblox {
        margin: 0;
    }
    
    nav ul.topblox li {
        width: 18%;
        height: 70px;
        padding: 0 0 0 0.5em;
        text-align: center;
        flex-direction: row;
        justify-content: flex-start;
    }
    
    nav ul.topblox li:first-child {
        display: none;
    }
    
    nav ul.topblox li:last-child {
        width: 50%;
    }
    
    nav ul.topblox li p.icon {
        width: 35px;
        height: 45px;
        padding: 0;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 6px;
    }
    
    nav ul.topblox li p.icon a {
        background-size: contain;
        padding: 0;
        width: 35px;
        height: 45px;
    }
    
    nav ul.topblox li p.txt {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: calc(100% - 50px);
        z-index: 1;
        transform: translateY(0);
        background: transparent !important;
        text-align: left;
        padding: 8px 0 0;
        font-size: 12px;
        line-height: 1.3;
    }
    
    nav ul.topblox li p.txt a {
        color: #fff;
    }
    
    nav ul.topblox li p.txt a span {
        display: block;
    }
    
    nav ul.topblox li p.txt a span b {
        white-space: nowrap;
        font-weight: 400;
    }
    
    div#menu {
        display: flex;
        top: 65px;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1em 5vw;
        transition: all 1s;
        transform: translateY(0);
        background: linear-gradient(180deg, #fff 0%, #fff 75%, rgba(255, 255, 255, 0));
        box-shadow: none;
    }
    
    div#menu div.menulogo {
        margin: 0;
        width: 190px;
    }
    
    div#menu div.menulogo a img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    div#menu ul {
        margin: 24px 0 0;
        display: flex;
    }
    
    div#menu ul li {
        margin: 0;
        padding: 0;
    }
    
    div#menu ul li a {
        display: block;
        font-size: 14px;
        padding: 0 15px;
        letter-spacing: 1px;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    section {
        padding: 80px 60px;
    }
    
    article {
        margin: 150px 0 0;
    }
}

@media only screen and (min-width: 1300px) {
    nav ul.topblox li {
        justify-content: center;
    }
    
    nav ul.topblox li p.icon {
        margin-right: 12px;
    }
    
    nav ul.topblox li p.txt {
        font-size: 14px;
        width: auto;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center {
    text-align: center;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.hidden {
    display: none;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    header, footer, nav, .cta-button {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
    
    article {
        margin: 0;
    }
}