:root{
  --bg:#ffffff; /* vorher #f8f9fb → jetzt reines Weiß */
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --acc:#f97316;
  --line:#e5e7eb;
  --link:#0ea5e9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height: 100%;}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  line-height:1.5;
  padding:20px;
    background-color: #cae8ff;
    display: flex;
  flex-direction: column;

}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin-inline:auto;padding:16px}
header.site-header{display:flex;flex-direction:column;gap:12px;align-items:center;padding:24px 16px}
.logo{font-weight:800;letter-spacing:.5px;font-size:28px}
.tagline{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:15px;text-align:center}
.navbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
.navbar .container{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center}
.navbar a{padding:10px 14px;border-radius:12px;font-weight:600;color:var(--ink);}
.navbar a.active, .navbar a:hover{background:var(--ink);color:#fff;text-decoration:none}
.hero{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin:20px 0;border-bottom: 5px lightblue solid;}
.hero img{width:100%;height:auto;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid{grid-template-columns:1.2fr .8fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
h1,h2,h3{line-height:1.2;margin:0 0 12px}
.muted{color:var(--muted)}
footer{margin-top:40px;padding:24px 0;border-top:1px solid var(--line);color:var(--muted)}
.info-menu{position:relative;display:inline-block}
.info-menu button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer}
.info-menu .panel{display:none;position:absolute;top:120%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:10px;min-width:220px}
.info-menu.open .panel{display:block}
.badge{display:inline-block;background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:999px;margin:4px;font-size:14px}
ul.clean{list-style:none;padding:0;margin:0}
.clean li{margin:6px 0}
.contact-list{display:grid;gap:6px}
table.times{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.times th, table.times td{border-bottom:1px solid var(--line);padding:10px;text-align:left}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--ink);color:#fff}

/* horizontales Info-Menü */
.info-menu {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:8px;
}
.info-menu a {
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
}
.info-menu a:hover { color:var(--link); }

/* vertikales Menü */
.side-menu {
  display:flex;  
  flex-direction:column;
  gap:8px;
  padding:20px;
  margin:24px 0;
}

.site-main {
  flex: 1;              /* ← DAS ist der Schlüssel */
}

.site-wrapper{
  max-width: 70%;
  margin: auto;
}

.content {
  margin: auto;
  padding: 20px;
}

.logo-bild {
margin-top: -55px;
  width: auto; 
  height:150px; 
  
}

/* Mobile Ansicht: nur schmale Viewports werden ueberschrieben. */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 0;
    font-size: 16px;
    line-height: 1.55;
  }

  .container {
    width: 100%;
    padding: 12px 16px;
  }

  header.site-header {
    gap: 10px;
    padding: 14px 12px 10px;
  }

  .logo-bild {
    height: 96px;
    max-width: min(280px, 92vw);
    margin-top: -18px;
    object-fit: contain;
  }

  .info-menu {
    width: 100%;
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 4px 2px 8px;
    margin-top: -6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .info-menu::-webkit-scrollbar {
    display: none;
  }

  .info-menu a {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }

  .info-menu a.active {
    background: var(--ink);
    color: #fff;
  }

  .site-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .site-main {
    width: 100%;
  }

  .content {
    width: 100%;
    max-width: 100%;
    padding: 18px 16px;
  }

  h1 {
    font-size: 28px;
    line-height: 1.15;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 19px;
  }

  p,
  li {
    overflow-wrap: anywhere;
  }

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

  .hero {
    width: 100%;
    margin: 20px 0;
    border-bottom: 5px lightblue solid;
  }

  .hero:not(:has(.hero-overlay)) {
    height: auto !important;
    min-height: 0;
  }

  .hero > img {
    width: 100% !important;
    height: auto !important;
    max-width: none;
    object-fit: cover !important;
  }

  .site-wrapper > section.hero {
    height: 190px !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    overflow: hidden;
  }

  .site-wrapper > section.hero > img {
    display: block;
    width: 100% !important;
    height: 190px !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .page-layout {
    display: block;
    width: 100%;
  }

  .side-menu {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 -16px 18px !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
    background: rgba(230,244,255,.96) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
    z-index: 20 !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .side-menu::-webkit-scrollbar {
    display: none;
  }

  .side-menu a {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 13px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .side-menu a:hover {
    transform: none !important;
  }

  .card,
  .hero-card,
  .job-card,
  .cta-card,
  .map-card {
    min-width: 0 !important;
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .gallery figure {
    padding: 8px;
  }

  .gallery img {
    height: 190px !important;
  }

  .prophylaxe-block,
  .pzr-block,
  .parodontologie-block,
  .implantologie-block,
  .endodontie-block,
  .asthetik-block,
  .hygiene-block {
    display: flex;
    flex-direction: column !important;
    gap: 18px !important;
    margin-top: 20px !important;
  }

  .prophylaxe-img,
  .parodontologie-img,
  .implantologie-img,
  .endodontie-img {
    width: 100% !important;
    max-width: 100% !important;
  }

  table.times {
    table-layout: fixed;
  }

  table.times th,
  table.times td {
    width: 50%;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  footer {
    margin-top: 24px;
    padding: 18px 0 92px;
    text-align: center;
  }

  .fixed-widget {
    top: auto !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: auto 1fr 1fr 1.1fr;
    align-items: center;
    gap: 6px;
    padding: 6px !important;
    border-radius: 12px !important;
    opacity: .96 !important;
  }

  .fixed-widget img {
    margin: 0 !important;
    max-width: 62px;
  }

  .button-link,
  .message-link,
  .phone-container {
    margin: 0 !important;
  }

  .button-link,
  .message-link,
  .phone-box-integrated {
    padding: 8px 6px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  .info-panel {
    right: -120% !important;
    bottom: 70px !important;
    top: auto !important;
    width: calc(100% - 24px) !important;
    max-width: none !important;
    border-radius: 12px !important;
  }

  .info-panel.open {
    right: 12px !important;
  }
}

@media (max-width: 520px) {
  .container {
    padding-inline: 12px;
  }

  .content {
    padding: 16px 12px;
  }

  h1 {
    font-size: 24px;
  }

  .logo-bild {
    height: 82px;
  }

  .hero:not(:has(.hero-overlay)) {
    height: auto !important;
  }

  .site-wrapper > section.hero,
  .site-wrapper > section.hero > img {
    height: 170px !important;
  }

  .side-menu {
    width: calc(100% + 24px) !important;
    margin-inline: -12px !important;
    padding-inline: 10px !important;
  }

  .gallery {
    grid-template-columns: 1fr !important;
  }

  .gallery img {
    height: 260px !important;
  }

  table.times,
  table.times tbody,
  table.times tr,
  table.times th,
  table.times td {
    display: block;
    width: 100%;
  }

  table.times th {
    padding-bottom: 2px;
  }

  table.times td {
    padding-top: 0;
    text-align: left;
  }

  .fixed-widget {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .fixed-widget img {
    display: none;
  }
}