/* =========================================================
   Bereinigte style.css
   Doppelte Regeln für .content, .hero, .sitewrap, .topline usw. entfernt.
   Grundlage: Referenzlayout orthopaedie-p-wagner-bochum.de
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap");

:root{
  --ref-grey:#9c9c9c;
  --ref-grey-dark:#777;
  --ref-pink:#f4b9c8;
  --ref-page:rgba(255,255,255,.58);
  --ref-text:#000;
  --doctolib:#107aca;
  --ref-blue:#1977cc;
}

*{box-sizing:border-box;}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

html{
  background:#e8e8e8 url("bg.jpg") repeat top center;
}

body{
  font-family:"Oswald",Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  color:var(--ref-text);
  background:transparent;
  overflow-x:hidden;
}

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

.sitewrap{
  width:100%;
  max-width:1740px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   Topline
   ========================================================= */

.topline{
  color:var(--ref-grey);
}

.topline a,
.topline button{
  color:var(--ref-grey);
  text-decoration:none;
}

.topline .topline-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--ref-grey);
  text-decoration:none;
  white-space:nowrap;
}

.topline .topline-link:hover,
.topline .topline-link:focus{
  color:var(--ref-grey-dark);
  text-decoration:none;
}

.topline .topline-button{
  border:0;
  background:transparent;
  padding:0;
  font:inherit;
  text-transform:uppercase;
  cursor:pointer;
}

.topline .topline-separator{
  color:#777;
  opacity:.85;
}

/* =========================================================
   Navigation
   ========================================================= */

.mainnav{
  background:var(--ref-grey);
}

.navlist{
  margin:0;
  padding:0;
  list-style:none;
}

.navlist>li{
  position:relative;
}

.navlist>li>a{
  background:var(--ref-grey);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
}

.navlist>li.active>a,
.navlist>li>a.active,
.navlist>li:hover>a{
  color:#000;
}

.navlist ul{
  position:absolute;
  z-index:50;
  left:0;
  margin:0;
  padding:0;
  list-style:none;
  min-width:255px;
  background:#f8f8f8;
  border:1px solid #cfcfcf;
  box-shadow:0 7px 14px rgba(0,0,0,.22);
  display:none;
}

.navlist li:hover ul,
.navlist li:focus-within ul{
  display:block;
}

.navlist ul a{
  display:block;
  text-decoration:none;
  text-transform:uppercase;
  color:#fff;
  font-size:13px;
  font-weight:400;
  padding:9px 13px;
  border-bottom:1px solid #e2e2e2;
  background:var(--ref-grey);
}

.navlist ul a:hover{
  background:rgba(156,156,156,.7);
  color:#000;
}

/* =========================================================
   Header / Hero
   ========================================================= */

.hero{
  background:#fff url("header.jpg") center top/cover no-repeat;
}

.hero .sitewrap{
  position:relative;
}

.brand-logo{
  position:absolute;
  display:block;
  z-index:120;
}

.brand-logo img{
  content:url("logo.png");
  display:block;
  height:auto;
}

.hero-title{
  display:none;
}

/* =========================================================
   Inhalt allgemein
   ========================================================= */

.page{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  background:var(--ref-page);
  box-shadow:none;
  border-left:1px solid rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.08);
}

.content.content{
  width:100%;
  max-width:none;
  flex:0 0 100%;
  background:transparent;
}

.content h1,
.content .slideheadline{
  color:var(--ref-grey);
  font-family:"Oswald",Arial,Helvetica,sans-serif;
  font-weight:700;
  text-align:center;
}

.content h2,
.content h3{
  color:var(--ref-grey);
  font-family:"Oswald",Arial,Helvetica,sans-serif;
  font-weight:700;
}

.content p,
.content li{
  font-weight:400;
  color:#000;
}

.content a{
  color:var(--ref-grey);
}

.leadimg{
  display:block;
  border:0;
}

/* =========================================================
   Startseite
   ========================================================= */

.home .content::after{
  content:"";
  display:block;
  clear:both;
}

.home .content h3{
  color:var(--ref-grey);
}

/* =========================================================
   Seiten: Leistungen
   ========================================================= */

.leistungen-page{
  width:100%;
  max-width:none;
  flex:0 0 100%;
}

.leistungen-accordion{
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap:0;
}

.leistung-item{
  margin:0 0 18px;
}

.leistung-title{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  color:var(--ref-grey);
  font-family:"Oswald",Arial,Helvetica,sans-serif;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  
}

.leistung-title:hover,
.leistung-title:focus{
  color:#777;
  outline:0;
}

.leistung-arrow,
.news-original-arrow{
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:11px solid #777;
  flex:0 0 auto;
  transition:transform .15s ease;
}

.leistung-item.open .leistung-arrow,
.news-original-item.open .news-original-arrow{
  transform:rotate(90deg);
}

.leistung-panel{
  display:none;
  padding:20px 0 0 34px;
}

.leistung-item.open .leistung-panel{
  display:block;
}

.leistung-list{
  margin:0 0 8px;
  padding-left:18px;
  color:#000;
  font-weight:600;
}

.leistung-list.two-cols{
  columns:2;
  column-gap:90px;
}

.leistung-list li{
  break-inside:avoid;
  margin:0 0 18px;
  padding-left:4px;
}

/* =========================================================
   Seiten: Praxis
   ========================================================= */

.praxis-page{
  width:100%;
  max-width:none;
  flex:0 0 100%;
}

.praxis-gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
}

.praxis-photo{
  display:block;
  overflow:hidden;
  text-decoration:none;
  background:transparent;
}

.praxis-photo img{
  display:block;
  width:100%;
  object-fit:cover;
  border:0;
  opacity:.82;
  transition:opacity .18s ease,transform .18s ease;
}

.praxis-photo:hover img,
.praxis-photo:focus img{
  opacity:1;
  transform:scale(1.015);
}

/* =========================================================
   Seiten: Broschüren
   ========================================================= */

.massageliege-page,
.orthokin-page,
.lasertherapie-page{
  width:100%;
  max-width:none;
  flex:0 0 100%;
}

.massageliege-gallery,
.orthokin-gallery,
.lasertherapie-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}

.massageliege-gallery a,
.orthokin-gallery a,
.lasertherapie-gallery a{
  display:block;
  margin:0;
  text-decoration:none;
}

.massageliege-gallery img,
.orthokin-gallery img,
.lasertherapie-gallery img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  border:0;
  box-shadow:none;
}

/* =========================================================
   Seiten: Notdienst
   ========================================================= */

.notdienst-page{
  width:100%;
  max-width:none;
  flex:0 0 100%;
}

.notdienst-page h1,
.notdienst-page .slideheadline{
  color:var(--ref-grey);
  font-weight:700;
  text-align:center;
}

.notdienst-loading,
.notdienst-error{
  text-align:center;
  padding:34px 20px;
  color:#777;
  font-size:16px;
}

.notdienst-error{
  border-top:1px dotted #666;
  border-bottom:1px dotted #666;
}

#ApothekenNotdienstCSSWrapper{
  font-size:12px;
  border-radius:0;
  position:relative;
  margin:2% 0;
  height:auto;
  width:100%;
  box-shadow:0 0 0 0 #383838;
  overflow:hidden;
  color:#333;
  background-color:transparent;
}

#ApothekenNotdienstCSSGoogleMapsContainer{
  position:relative;
  float:left;
  height:425px !important;
  width:100%;
}

#ApothekenNotdienstCSSTabelle{
  position:relative;
  float:left;
  width:100%;
  height:auto;
  overflow:hidden;
}

.ApothekenNotdienstCSSTabellenUeberschrift{
  background-color:transparent;
  overflow:hidden;
  color:#000;
  font-weight:700;
}

.ApothekenNotdienstCSSUeberschriftLinks,
.ApothekenNotdienstCSSUeberschriftMitte{
  position:relative;
  float:left;
  width:31%;
  padding:3px 1%;
}

.ApothekenNotdienstCSSUeberschriftRechts{
  position:relative;
  float:left;
  width:26%;
  padding:3px 3%;
  text-align:right;
}

.ApothekenNotdienstCSSGrade,
.ApothekenNotdienstCSSUngrade{
  background-color:transparent;
  overflow:hidden;
  border-top:1px dotted #666;
}

.ApothekenNotdienstCSSVerstecken{
  display:block;
}

.ApothekenNotdienstCSSLinks,
.ApothekenNotdienstCSSMitte,
.ApothekenNotdienstCSSRechts{
  position:relative;
  float:left;
  width:31%;
  padding:4px 1%;
  font-weight:600;
}

.ApothekenNotdienstCSSLinks b{
  font-weight:700;
}

.ApothekenNotdienstCSSRechts{
  text-align:right;
}

/* =========================================================
   Seiten: News
   ========================================================= */

.news-page{
  width:100%;
  max-width:none;
  flex:0 0 100%;
}

.news-original-list{
  margin:0 auto;
}

.news-loading,
.news-error{
  text-align:center;
  padding:34px 20px;
  color:#777;
  font-size:16px;
}

.news-original-item{
  margin:0 0 24px;
}

.news-original-title{
  display:flex;
  align-items:center;
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  color:#000;
  font-family:"Oswald",Arial,Helvetica,sans-serif;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}

.news-original-title:hover,
.news-original-title:focus{
  color:#777;
  outline:0;
}

.news-original-panel{
  display:none;
  color:#000;
}

.news-original-item.open .news-original-panel{
  display:block;
}

.news-original-panel p{
  margin:0 0 16px;
}

.news-original-panel h2,
.news-original-panel h3,
.news-original-panel h4{
  color:var(--ref-grey);
  font-weight:700;
  text-align:left;
}

.news-original-source,
.news-source{
  margin-top:18px;
  color:#777;
}

.news-original-source small,
.news-source small{
  font-size:12px;
}

/* Altes Bootstrap-Accordion News-Fallback */
.news-intro{margin:0 0 14px;color:#666;}
.news-accordion{border-top:1px solid #d6d6d6;}
.news-accordion .accordion-item{border:0;border-bottom:1px solid #d6d6d6;border-radius:0;background:#fff;}
.news-accordion .accordion-button{
  font-family:"Oswald",Arial,Helvetica,sans-serif;
  font-size:19px;
  line-height:1.25;
  font-weight:700;
  color:var(--ref-grey);
  background:#fff;
  border-radius:0;
  padding:12px 0;
  box-shadow:none;
}
.news-accordion .accordion-button:not(.collapsed){color:var(--ref-grey);background:#fff;box-shadow:none;}
.news-accordion .accordion-button:focus{box-shadow:none;border-color:#d6d6d6;}
.news-accordion .accordion-button::after{width:14px;height:14px;background-size:14px;margin-left:auto;}
.news-accordion .accordion-body{padding:0 0 18px;color:#575757;font-size:13px;line-height:1.45;}
.news-accordion .accordion-body h3{font-size:13px;color:#575757;font-weight:700;margin:14px 0 0;}
.news-accordion .accordion-body p{margin:0 0 10px;}

/* =========================================================
   Kontakt / Formular / Karte
   ========================================================= */

.contact-form label{
  display:block;
  color:#555;
  font-size:13px;
  margin:6px 0 2px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:1px solid #cfcfcf;
  background:#fff;
  height:29px;
  padding:4px 6px;
  font-size:13px;
  border-radius:0;
}

.contact-form textarea{
  height:auto;
}

.contact-form .check{
  display:flex;
  align-items:flex-start;
  gap:6px;
  line-height:1.3;
}

.contact-form .check input{
  width:auto;
  height:auto;
  margin-top:2px;
}

.contact-form button,
.mapbox button{
  background:#006a9e;
  color:#fff;
  border:0;
  padding:6px 15px;
  margin-top:8px;
  font-size:13px;
}

.contact-form input:invalid,
.contact-form textarea:invalid{
  box-shadow:none;
}

.form-alert{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:3px;
  font-size:13px;
  line-height:1.35;
}

.form-alert.error{
  color:#842029;
  background:#f8d7da;
  border:1px solid #f5c2c7;
}

.form-alert.success{
  color:#0f5132;
  background:#d1e7dd;
  border:1px solid #badbcc;
}

.captcha-wrapper{
  margin:10px 0 12px;
}

.captcha-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  margin-bottom:8px;
}

.captcha-box,
.captcha-row .captcha-box{
  flex:1;
  min-height:42px;
  margin-bottom:0;
  font-size:18px;
  font-weight:700;
  letter-spacing:.5px;
  background:repeating-linear-gradient(45deg,#eee,#eee 4px,#ddd 4px,#ddd 8px);
  border:1px solid #ccc;
  color:#777;
  display:flex;
  align-items:center;
  justify-content:center;
}

.captcha-refresh{
  width:42px;
  min-height:42px;
  border:1px solid #006a9e;
  background:#006a9e;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

.hours{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:3px 5px;
}

.hours b{
  font-weight:bold;
}

.mapbox{
  background:#e3e3e3;
  border:1px solid #cecece;
  padding:12px;
  color:#666;
}

.contactmap{
  margin:12px 0 22px;
}

.privacy-map{
  width:100%;
  height:350px;
  border:0;
}

.map-placeholder{
  text-align:center;
  padding:15px;
}

.opening-hours-modal{
  display:grid;
  grid-template-columns:115px 1fr;
  gap:8px 14px;
  margin:0;
}

.opening-hours-modal dt{
  font-weight:700;
  color:var(--ref-grey);
}

.opening-hours-modal dd{
  margin:0;
}

/* =========================================================
   Doctolib
   ========================================================= */

.doctolib-btn{
  position:fixed;top:180px;right:0;display:block;text-align:center;opacity: 0.85;background-color:#107ACA;z-index:10000;color:#ffffff;font-size:14px;overflow:hidden;width:100px;border-radius:4px 0 0 4px;text-decoration:none;padding:9px;line-height:1.4;
}

.doctolib-btn:hover,
.doctolib-btn:focus{
  opacity:1;
  color:#fff !important;
}

.doctolib-btn span{
  font-size:14px;
  font-weight:bold;
}

.doctolib-btn img{
  height:15px;
  width:auto;
  margin-top:10px;
  vertical-align:middle;
}

/* =========================================================
   Footer
   ========================================================= */

footer{
  background:var(--ref-grey);
  border-top:0;
  color:#fff;
}

footer a{
  color:#fff;
  text-decoration:none;
}

footer span,
footer a{
  font-weight:700;
}

/* =========================================================
   Desktop
   ========================================================= */

@media (min-width:992px){
  .sitewrap{
    padding-left:0;
    padding-right:0;
  }

  .topline{
    height:42px;
    background:rgba(255,255,255,.72);
    border-bottom:1px solid rgba(210,210,210,.55);
    position:relative;
    z-index:90;
  }

  .topline .sitewrap,
  .topline .topline-items{
    height:42px;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    padding:0 12px 0 0;
    font-size:13px;
    line-height:1;
    font-weight:400;
    text-align:right;
    text-transform:uppercase;
  }

  .topline .topline-link i{
    font-size:13px;
  }

  .mainnav{
    height:55px;
    border-top:1px solid rgba(255,255,255,.35);
    border-bottom:4px solid var(--ref-blue);
    position:relative;
    z-index:95;
    padding:0 130px 14px 30px;
  }

  .mainnav .sitewrap{
    height:50px;
    display:flex;
    justify-content:flex-end;
    align-items:stretch;
    padding:0;
  }

  .navlist{
    height:50px;
    display:flex;
  }

  .navlist>li>a{
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 31px;
    border-right:1px solid rgb(255 255 255 / 80%);
    font-size:15px;
    line-height:1;
    font-weight:400;
  }

  .navlist>li:first-child>a{

  }

  .navlist ul{
    top:50px;
  }

  .hero{
    margin-top:-96px;
    height:890px;
    border-bottom:4px solid var(--ref-blue);
  }

  .hero .sitewrap{
    height:890px;     
  }

  .brand-logo{
    left:70px;
    top:22px;
    width:350px;
  }

  .brand-logo img{
    width:350px;
    max-width:none;
  }

  .page{
    min-height:590px;
  }

  .content.content{
    padding:48px 22px 90px;
    min-height:590px;
  }

  .content h1,
  .content .slideheadline{
    font-size:30px;
    line-height:1.3em;
    margin:0 0 38px;
    font-weight:500;
  }

  .content h2,
  .content h3{
    font-size:18px;
    line-height:1.35;
  }

  .content p,
  .content li{
    font-size:16px;
    line-height:1.55;
  }

  /* Startseite */
  body.home .content.content,
  .home .content.content{
    padding:48px 86px 86px;
  }

  body.home .content h1,
  .home .content h1{
    font-size:30px;
    font-weight:500;
    line-height:1.18;
    margin:0 0 34px;
    padding:0;
    white-space:nowrap;
  }

  body.home .leadimg,
  .home .leadimg{
    float:left;
    width:422px;
    max-width:422px;
    height:auto;
    margin:0 86px 28px 0;
  }

  body.home .content p,
  .home .content p{
    font-size:16px;
    line-height:1.8em;
    font-weight:400;
    margin:0 0 29px;
    letter-spacing:0;
  }

  body.home .content p a,
  .home .content p a{
    color:var(--ref-grey);
    font-weight:400;
    text-decoration:none;
  }

  body.home .content h3,
  .home .content h3{
    font-size:18px;
    line-height:1.35;
    font-weight:700;
    margin:0;
  }

  /* Leistungen */
  .leistungen-page.content.content{
    padding:48px 52px 110px;
    min-height:520px;
  }

  .leistungen-accordion{
    max-width:1820px;
    margin:32px auto 0;
    padding:0 10px;
    column-gap:20px;
  }

  .leistung-title{
    font-size:18px;
  }

  .leistung-list{
    font-size:16px;
    line-height:1.65;
  }

  /* Praxis */
  .praxis-page.content.content{
    padding:48px 40px 76px;
    min-height:640px;
  }

  .praxis-gallery{
    max-width:1460px;
    margin:34px auto 0;
    padding:0 5px 40px;
    gap:36px 40px;
  }

  .praxis-photo{
    grid-column:span 3;
  }

  .praxis-photo:nth-child(5){
    grid-column:3 / span 3;
  }

  .praxis-photo:nth-child(6){
    grid-column:6 / span 3;
  }

  .praxis-photo:nth-child(7){
    grid-column:9 / span 3;
  }

  .praxis-photo img{
    height:225px;
    width:324px;
    background-position: center center;
  }

  /* Broschüren */
  .massageliege-page.content.content,
  .orthokin-page.content.content,
  .lasertherapie-page.content.content{
    padding:48px 40px 86px;
    min-height:720px;
  }

  .massageliege-gallery,
  .orthokin-gallery,
  .lasertherapie-gallery{
    max-width:1360px;
    gap:0 62px;
    margin:42px auto 0;
    padding:0 18px 90px;
  }

  /* Notdienst */
  .notdienst-page.content.content{
    padding:48px 52px 90px;
    min-height:520px;
  }

  .notdienst-page h1,
  .notdienst-page .slideheadline{
    font-size:30px;
    line-height:1.25;
    margin:0 0 40px;
  }

  .notdienst-page .spalte,
  .notdienst-page .readtxt{
    max-width:1320px;
    margin:0 auto;
    padding:0 30px 90px;
  }

  .ApothekenNotdienstCSSTabellenUeberschrift{
    font-size:16px;
  }

  .ApothekenNotdienstCSSLinks,
  .ApothekenNotdienstCSSMitte,
  .ApothekenNotdienstCSSRechts{
    font-size:16px;
    line-height:1.55;
  }

  /* News */
  .news-page.content.content{
    padding:48px 52px 120px;
    min-height:520px;
  }

  .news-page h1{
    font-size:30px;
    line-height:1.25;
    margin:0 0 54px;
  }

  .news-original-list{
    max-width:1320px;
    padding:0 30px 120px;
  }

  .news-original-title{
    font-size:18px;
    line-height:1.35;
    gap:20px;
  }

  .news-original-panel{
    padding:18px 0 8px 31px;
    max-width:1120px;
    font-size:16px;
    line-height:1.55;
    font-weight:600;
  }

  .news-original-panel h2,
  .news-original-panel h3,
  .news-original-panel h4{
    font-size:18px;
    line-height:1.35;
    margin:24px 0 8px;
  }

  /* Footer */
  footer{
    min-height:92px;
    height:92px;
    font-size:12px;
  }

  footer .sitewrap{
    min-height:92px;
    height:92px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    padding:0;
    gap:0;
  }

  footer span:first-child{
    justify-self:start;
    padding-left:24px;
  }

  footer span:first-child::before{
    content:"\F47A";
    font-family:"bootstrap-icons";
    font-size:18px;
    margin-right:10px;
    vertical-align:-2px;
  }

  footer span:nth-child(2){
    justify-self:center;
    text-align:center;
  }

  footer span:nth-child(3){
    justify-self:end;
    text-align:right;
    padding-right:28px;
  }

  footer::after{
    content:"⌃";
    position:fixed;
    right:38px;
    bottom:0;
    width:36px;
    height:36px;
    background:#8d8d8d;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    line-height:1;
    z-index:9999;
  }

  .doctolib-btn{
    top:195px;
  }
}

/* =========================================================
   Desktop kleiner
   ========================================================= */

@media (min-width:992px) and (max-width:1500px){
  .navlist>li>a{
    padding-left:22px;
    padding-right:22px;
  }

  .brand-logo{
    left:70px;
  }

  .content.content{
    padding-left:44px;
    padding-right:44px;
  }

  .home .leadimg{
    margin-right:60px;
  }
}

@media (min-width:992px) and (max-width:1300px){
  body.home .content h1,
  .home .content h1{
    font-size:22px;
  }
}

/* =========================================================
   Tablet / Mobile
   ========================================================= */

.mobile-menu-toggle{
  display:none;
}

@media (max-width:991.98px){
  body{
    display:flex;
    flex-direction:column;
  }

  .hero{order:1;}
  .topline{order:2;}
  .mainnav{order:3;}
  .page{order:4;}
  footer{order:5;}

  .sitewrap{
    max-width:none;
    padding-left:0;
    padding-right:0;
  }

  .hero{
    height:138px;
    background:#f4f4f4 url("bg.jpg") repeat center top;
    border-bottom:0;
  }

  .hero .sitewrap{
    height:138px;
  }

  .brand-logo{
    left:0;
    top:0;
    right:auto;
  }

  .brand-logo img{
    content:url("logo_resp.png");
    width:390px;
    max-width:100vw;
  }

  .topline{
    background:var(--ref-grey);
    border:0;
    color:#fff;
  }

  .topline .sitewrap,
  .topline .topline-items{
    height:46px;
    min-height:46px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:nowrap;
    gap:0;
    text-align:center;
  }

  .topline .topline-link,
  .mobile-menu-toggle{
    flex:1 1 20%;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:transparent;
    border:0;
    text-decoration:none;
    padding:0;
  }

  .topline .topline-link span,
  .topline .topline-separator{
    display:none;
  }

  .topline .topline-link i,
  .mobile-menu-toggle i{
    font-size:25px;
    line-height:1;
    color:#fff;
  }

  .mainnav{
    background:transparent;
    border:0;
    position:relative;
    overflow:visible;
  }

  .mainnav .sitewrap{
    display:block;
    padding:0;
  }

  .navlist{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:0;
    z-index:20;
    overflow:visible;
    white-space:normal;
    background:var(--ref-grey);
    box-shadow:0 8px 16px rgba(0,0,0,.24);
  }

  .mainnav.open .navlist{
    display:block;
  }

  .navlist>li{
    display:block;
    width:100%;
  }

  .navlist>li>a{
    display:block;
    padding:12px 18px;
    font-size:14px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.25);
  }

  .navlist ul{
    position:static;
    display:block;
    min-width:0;
    box-shadow:none;
    border:0;
  }

  .navlist ul a{
    padding-left:34px;
  }

  .mainnav::after{
    content:"";
    display:block;
    width:100%;
    height:174px;
    background:#eee url("header.jpg") center top/cover no-repeat;
  }

  .page{
    width:100%;
    max-width:none;
    min-height:0;
    box-shadow:none;
    background:var(--ref-page);
  }

  .page>.row{
    display:flex;
    flex-direction:column;
  }

  .content.content{
    order:1;
    min-height:0;
    padding:28px 8px 34px;
  }

  .sidebar.sidebar{
    order:2;
    min-height:0;
    border-right:0;
    border-top:1px solid rgba(0,0,0,.08);
    padding:28px 8px 34px;
  }

  .content h1,
  .content .slideheadline{
    font-size:24px;
    line-height:1.2;
    white-space:normal;
  }

  .content h2{
    font-size:20px;
  }

  .content h3{
    font-size:17px;
  }

  .leadimg{
    width:100%;
    height:auto;
  }

  .hours{
    grid-template-columns:105px 1fr;
  }

  .gallery a,
  .gallery.two a{
    display:block;
    margin-right:0;
  }

  .gallery img,
  .gallery.two a img,
  .gallery.pamphlets img{
    width:100%;
    height:auto;
  }

  .leistungen-accordion{
    grid-template-columns:1fr;
    max-width:none;
    margin-top:24px;
    padding:0 8px;
  }

  .leistung-title{
    font-size:19px;
    gap:14px;
  }

  .leistung-list.two-cols{
    columns:1;
  }

  .praxis-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    max-width:none;
    margin-top:24px;
    padding:0 8px 40px;
  }

  .praxis-photo img{
    height:220px;
  }

  .massageliege-gallery,
  .orthokin-gallery,
  .lasertherapie-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 22px;
    max-width:none;
    margin-top:26px;
    padding:0 8px 45px;
  }

  #ApothekenNotdienstCSSGoogleMapsContainer{
    height:350px !important;
  }

  #ApothekenNotdienstCSSTabelle{
    font-size:16px;
    height:auto;
  }

  .ApothekenNotdienstCSSTabellenUeberschrift{
    display:none;
  }

  .ApothekenNotdienstCSSLinks,
  .ApothekenNotdienstCSSMitte,
  .ApothekenNotdienstCSSRechts{
    width:100%;
    text-align:center;
    padding-left:1%;
    padding-right:1%;
  }

  .ApothekenNotdienstCSSLinks{
    padding-top:10px;
  }

  .ApothekenNotdienstCSSRechts{
    padding-bottom:10px;
  }

  .news-original-list{
    padding:0 8px 50px;
  }

  .news-page h1{
    font-size:26px;
    margin-bottom:34px;
  }

  .news-original-title{
    font-size:17px;
    gap:15px;
  }

  .doctolib-btn{
    top:184px;
    right:0;
    bottom:auto;
    width:95px;
    padding:9px 7px;
    border-radius:0;
    font-size:13px;
    z-index:10001;
    opacity:.9;
  }

  footer .sitewrap{
    display:block;
    text-align:center;
    padding:14px 12px;
  }

  footer span{
    display:block;
    margin:4px 0;
  }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width:575.98px){
  body{
    font-size:16px;
  }

  .hero,
  .hero .sitewrap{
    height:138px;
  }

  .brand-logo{
    left:0;
    top:0;
  }

  .brand-logo img{
    width:390px;
    max-width:100vw;
  }

  .mainnav::after{
    height:174px;
  }

  .navlist>li>a{
    font-size:12px;
    padding:10px 12px;
  }

  .content h1,
  .content .slideheadline{
    font-size:22px;
  }

  .opening-hours-modal{
    grid-template-columns:95px 1fr;
  }

  .leistung-title{
    font-size:18px;
  }

  .leistung-list{
    font-size:16px;
  }

  .leistung-panel{
    padding-left:26px;
  }

  .praxis-gallery{
    grid-template-columns:1fr;
    gap:18px;
  }

  .praxis-photo img{
    height:auto;
    object-fit:contain;
    opacity:.9;
  }

  .massageliege-gallery,
  .orthokin-gallery,
  .lasertherapie-gallery{
    grid-template-columns:1fr;
    gap:22px;
  }

  .notdienst-page .spalte,
  .notdienst-page .readtxt{
    padding-left:8px;
    padding-right:8px;
  }

  .notdienst-page h1,
  .notdienst-page .slideheadline{
    font-size:24px;
  }

  .news-page h1{
    font-size:24px;
  }

  .news-original-panel{
    padding-left:27px;
    font-size:15px;
  }

  .doctolib-btn{
    width:96px;
    font-size:13px;
    }
}

@media (max-width:390px){
  .brand-logo img{
    width:390px;
    max-width:100vw;
  }

  .topline .topline-link i{
    font-size:24px;
  }
}


/* =========================================================
   FIX 30.06.2026: Responsive Bilder / Praxis-Galerie
   Verhindert feste Desktop-Bildgrößen auf Tablet und Smartphone.
   ========================================================= */

.praxis-gallery{
  width:100%;
}

.praxis-photo img{
  display:block;
  max-width:100%;
}

@media (min-width:992px){
  .praxis-photo img{
    width:100%;
    height:225px;
    object-fit:cover;
  }
}

@media (max-width:991.98px){
  .praxis-page.content.content{
    padding-left:18px;
    padding-right:18px;
  }

  .praxis-gallery{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
    width:100%;
    max-width:none;
    margin:24px auto 0;
    padding:0 8px 40px;
  }

  .praxis-photo{
    grid-column:auto !important;
    width:100%;
  }

  .praxis-photo img{
    width:100% !important;
    max-width:100% !important;
    height:220px !important;
    object-fit:cover;
  }
}

@media (max-width:575.98px){
  .praxis-page.content.content{
    padding-left:30px;
    padding-right:30px;
  }

  .praxis-gallery{
    grid-template-columns:1fr;
    gap:18px;
    padding:0 10px 40px;
  }

  .praxis-photo,
  .praxis-photo:nth-child(5),
  .praxis-photo:nth-child(6),
  .praxis-photo:nth-child(7){
    grid-column:auto !important;
  }

  .praxis-photo img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain;
    opacity:.9;
  }
}


/* =========================================================
   Responsives Praxislogo: 2logo.png mit Praxistext darunter
   ========================================================= */
.logo-mobile,
.logo-mobile-text{
  display:none;
}
/* Mobile Logo: keine Unterstreichung */
.brand-logo,
.brand-logo:hover,
.brand-logo:focus,
.brand-logo:active,
.brand-logo .logo-mobile-text,
.brand-logo .logo-mobile-text strong{
    text-decoration: none !important;
}

.brand-logo .logo-mobile-text{
    color: #9c9c9c;
}

.brand-logo .logo-mobile-text strong{
    color: #9c9c9c;
}

@media (max-width:991.98px){
  .hero,
  .hero .sitewrap{
    height:182px;
  }

  .brand-logo{
    left:0;
    top:0;
    width:100%;
    height:182px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    background:rgba(255,255,255,.72);
    text-align:center;
    overflow:hidden;
  }

  .brand-logo .logo-desktop{
    display:none;
  }

  .brand-logo .logo-mobile{
    display:block;
    content:none;
    width:min(330px,88vw);
    max-width:88vw;
    height:auto;
    max-height:92px;
    object-fit:contain;
    margin:0 auto 4px;
  }

  .brand-logo .logo-mobile-text{
    display:block;
    color:#9c9c9c;
    font-family:"Oswald",Arial,Helvetica,sans-serif;
    font-size:17px;
    line-height:1.0;
    font-weight:500;
    white-space:normal;
  }

  .brand-logo .logo-mobile-text strong{
    display:block;
    margin-top:4px;
    font-size:19px;
    font-weight:600;
  }

  .doctolib-btn{
    top:228px;
  }
}

@media (max-width:575.98px){
  .hero,
  .hero .sitewrap{
    height:182px;
  }

  .brand-logo .logo-mobile{
    width:min(315px,90vw);
    max-height:88px;
  }

  .brand-logo .logo-mobile-text{
    font-size:20px;
  }

  .brand-logo .logo-mobile-text strong{
    font-size:22px;
  }
}

@media (max-width:390px){
  .brand-logo{
    padding-left:8px;
    padding-right:8px;
  }
  .brand-logo .logo-mobile{
    width:300px;
    max-width:94vw;
  }
}

/* Korrektur: Logo niemals doppelt anzeigen */
@media (min-width:992px){
  .brand-logo .logo-desktop{
    display:block !important;
  }
  .brand-logo .logo-mobile,
  .brand-logo .logo-mobile-text{
    display:none !important;
  }
}

@media (max-width:991.98px){
  .brand-logo .logo-desktop{
    display:none !important;
  }
  .brand-logo .logo-mobile{
    display:block !important;
  }
  .brand-logo .logo-mobile-text{
    display:block !important;
  }
}