/* =====================================================
   Breenkötter Orthopädie Schuhtechnik – site.css
   Eigenes CSS, ersetzt Bootstrap 2. Responsiv.
   Farben: Text #41637b | Sidebar #B8CBD4 | Content #E1E9E6
   ===================================================== */

/* --- Webfont --- */
@font-face {
  font-family: 'UbuntuRegular';
  src: url('fonts/ubuntu-l-webfont.eot');
  src: url('fonts/ubuntu-l-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/ubuntu-l-webfont.woff') format('woff'),
       url('fonts/ubuntu-l-webfont.ttf') format('truetype'),
       url('fonts/ubuntu-l-webfont.svg#UbuntuRegular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Punkt 2: CSS-Silbentrennung statt Hyphenator.js */
.hyphenate {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, address, code, em, img, q, s, small,
strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0; padding: 0; border: 0;
  font-weight: normal; font-style: normal;
  font-size: 100%; line-height: inherit; font-family: inherit;
}
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:hover, a:active { outline: 0; }
img { display: block; max-width: 100%; height: auto; }

/* --- Fokus-Indikatoren (Punkt 1: sichtbar für Tastaturnutzer) --- */
:focus                { outline: none; }
:focus-visible {
  outline: 3px solid #41637b;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf blauem Hintergrund (Header-Nav + Leistungen-Subnav): weißes Outline */
nav#main-nav ul.nav li a:focus-visible,
.leistungen .sidebar ul.subnav li a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Basis --- */
html { overflow-y: scroll; font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  background-color: #fff;
  font-family: 'UbuntuRegular', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #41637b;
  padding-bottom: 40px;
}
a            { color: #41637b; text-decoration: none; }
a:hover      { color: #2a4a5e; }
/* Punkt 3: Links im Fließtext unterstreichen – nicht nur Farbe als Merkmal */
.mainblock .content a { text-decoration: underline; }
strong       { font-weight: bold; }
em           { font-style: italic; }
h1           { font-size: 19px; font-weight: bold; margin-bottom: 12px; }
h2           { font-size: 19px; font-weight: bold; margin-bottom: 12px; }
h3           { font-size: 15px; font-weight: bold; margin-bottom: 8px;  margin-top: 16px; }
h4           { font-size: 14px; font-weight: bold; margin-bottom: 6px; }
p            { margin-bottom: 10px; line-height: 20px; }

/* --- Layout-Wrapper --- */
.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}

/* --- Header / Topbar --- */
header[role="banner"] {
  background-color: #B8CBD4;
}
.topbar {
  height: 133px;
}
.topbar .fill { height: 100%; }
.topbar .fill .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
}
.brand           { display: block; line-height: 0; padding-bottom: 6px; }
.brand img       { display: block; }

/* --- Hauptnavigation --- */
nav#main-nav ul.nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav#main-nav ul.nav li a {
  display: inline-block;
  font-size: 19px;
  font-weight: bold;
  color: #41637b;
  padding: 80px 18px 0;
  line-height: 22px;
  text-decoration: none;
}
nav#main-nav ul.nav a#nav_start      { min-width: 47px; }
nav#main-nav ul.nav a#nav_leistungen { min-width: 104px; }
nav#main-nav ul.nav a#nav_kontakt    { min-width: 73px; }
nav#main-nav ul.nav a#nav_impressum  { min-width: 104px; }
nav#main-nav ul.nav li.active > a     { color: #1a3347; text-decoration: underline; }
nav#main-nav ul.nav li a:hover       { color: #fff; }

/* --- Kontaktzeile (über dem Inhalt) --- */
.contact         { text-align: right; }
.contact p {
  font-size: 11px;
  line-height: 22px;
  margin: 0;
  color: #1a4a6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact a       { color: inherit; }
br.contact-break { display: none; }

/* --- Hauptbereich: Sidebar + Content --- */
.mainblock {
  display: flex;
  min-height: 480px;
  background: #fff url('../img/bg.gif') no-repeat 20px top;
}

.mainblock .sidebar {
  width: 310px;
  flex-shrink: 0;
  background-color: #B8CBD4;
  min-height: 480px;
  font-size: 0;   /* verhindert whitespace unter Bildern */
  line-height: 0;
}
.mainblock .sidebar img { width: 100%; height: auto; display: block; }

.mainblock .content {
  flex: 1;
  background-color: #E1E9E6;
  padding: 25px 30px 30px 20px;
  text-align: justify;
  min-height: 425px;
  font-size: 13px;
  line-height: 20px;
}
.mainblock .content h2  { margin-bottom: 12px; }
.mainblock .content img { margin-bottom: 5px; }
.mainblock .content p.image { margin-bottom: 0; }

/* Einrückung innerhalb des Content-Bereichs (Ersatz für offset1) */
.mainblock .content > .row > div {
  padding-left: 20px;
}

/* --- Bilder-Raster (Start & Kontakt: zwei Spalten) --- */
.images {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}
.images > div  { flex: 1; min-width: 0; }
.images img    { width: 100%; display: block; margin-bottom: 5px; }

/* Kontakt: Öffnungszeiten-Tabelle */
table.oeffnungszeiten {
  border-collapse: collapse;
  margin-top: 8px;
  font-size: inherit;
}
table.oeffnungszeiten td {
  padding: 2px 12px 2px 0;
  vertical-align: top;
  white-space: nowrap;
}
table.oeffnungszeiten td:last-child {
  padding-right: 0;
  padding-left: 12px;
  white-space: nowrap;
}
p.hinweis { margin-top: 8px; font-size: 0.9em; }

/* --- Hinweisbox (z.B. temporäre Schließzeiten) --- */
.hinweis-box {
  background-color: #f5e6c8;
  border-left: 4px solid #c0882a;
  border-radius: 3px;
  padding: 10px 14px;
  margin-top: 12px;
  font-weight: bold;
  line-height: 1.5;
}

/* --- Leistungen: Sidebar-Navigation --- */
.leistungen .mainblock .sidebar {
  font-size: 14px;
  line-height: 20px;
}
.leistungen .sidebar ul.subnav {
  margin: 77px 0 0 20px;
  padding: 0;
  list-style: none;
}
.leistungen .sidebar ul.subnav li          { margin-bottom: 8px; }
.leistungen .sidebar ul.subnav li a {
  font-weight: bold;
  color: #41637b;
  display: block;
  text-decoration: none;
}
.leistungen .sidebar ul.subnav li a:hover,
.leistungen .sidebar ul.subnav li.active > a {
  color: #fff;
  text-decoration: none;
}
.leistungen .sidebar ul.subnav li a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Leistungen: Inhalts-Sektionen (ein-/ausblenden per JS) --- */
.leistung    { display: none; }
#leistung00  { display: flex; flex-wrap: wrap; align-items: flex-start; }

/* Intro-Text im Leistung-00-Block */
#leistung00 > .span14 {
  flex: 0 0 100%;
  padding-left: 20px;
  margin-bottom: 4px;
}
/* Urkunden-Bild und Beschreibungstext nebeneinander */
.span4.urkunde {
  flex: 0 0 140px;
  padding-left: 20px;
  margin-top: 10px;
}
.span10.urkunde {
  flex: 1;
  margin-top: 10px;
  min-width: 0;
}

/* Alle anderen Leistungs-Sektionen */
.leistung > div {
  padding-left: 20px;
}

/* --- Impressum & Datenschutz --- */
.impressum .content a         { color: #1a3f57; text-decoration: underline; }
.impressum .content a:hover   { color: #0d2233; }
.impressum .content a:visited { color: #2e5973; text-decoration: underline; }
.impressum .content ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 10px;
}
.impressum .content ul li     { color: #41637b; margin-bottom: 4px; }
.impressum .content h2        { margin-top: 24px; }
.impressum .content h3        { color: #41637b; margin-top: 20px; margin-bottom: 6px; }


/* --- Maps-Links (klickbare Adressen) --- */
a.maps-link {
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
}
a.maps-link:hover { color: #fff; }
/* Hover-Farbe für maps-link in der Kontaktzeile oben (hellblauer Hintergrund) */
.contact a.maps-link:hover { color: #000; }
/* Telefonnummern: kein Unterstrich, Hover weiß */
a[href^="tel"] {
  text-decoration: none !important;
}
a[href^="tel"]:hover { color: #fff; }
.mainblock .content a[href^="tel"] { text-decoration: none !important; }
.mainblock .content a.maps-link { text-decoration: none !important; }
.impressum .content a[href^="tel"] { text-decoration: none !important; }
.impressum .content a.maps-link { text-decoration: none !important; }
.contact a[href^="tel"]:hover { color: #000; }

/* --- Hilfklassen --- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* =====================================================
   Responsiv: Smartphones und kleine Tablets (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {

  /* Topbar: Logo und Nav untereinander */
  .topbar { height: auto; }
  .topbar .fill .container {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 10px 15px 0;
    gap: 4px;
  }
  .brand { padding-bottom: 0; }

  nav#main-nav ul.nav { flex-wrap: wrap; }
  nav#main-nav ul.nav li a {
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.4;
  }
  nav#main-nav ul.nav a#nav_start,
  nav#main-nav ul.nav a#nav_leistungen,
  nav#main-nav ul.nav a#nav_kontakt,
  nav#main-nav ul.nav a#nav_impressum { min-width: 0; }

  /* Kontaktzeile */
  .contact { text-align: left; padding: 0 10px; }
  .contact p { white-space: normal; overflow: visible; }
  .contact-sep { display: none; }
  br.contact-break { display: inline; }

  /* Sidebar unter dem Header, dann Content */
  .mainblock { flex-direction: column; }
  .mainblock .sidebar {
    width: 100%;
    min-height: 0;
    font-size: 13px;
    line-height: normal;
  }
  .mainblock .sidebar img {
    max-height: 120px;
    width: 100%;
    object-fit: cover;
  }
  .mainblock .content {
    padding: 15px;
    text-align: left;
  }
  .mainblock .content > .row > div { padding-left: 0; }

  /* Bilder-Raster: untereinander */
  .images { flex-direction: column; gap: 30px; }

  /* Öffnungszeiten-Tabelle bleibt nebeneinander */
  .images .row { flex-wrap: nowrap; }

  /* Leistungen: Subnav angepasst */
  .leistungen .sidebar ul.subnav { margin: 15px 10px; }
  .leistungen .mainblock .sidebar { min-height: 0; }

  /* Urkunde: untereinander auf Mobilgeräten */
  #leistung00 { flex-direction: column; }
  .span4.urkunde, .span10.urkunde { flex: none; padding-left: 0; }

  .container { padding: 0 10px; }
}

/* --- Hamburger-Navigation (≤ 640px) --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #41637b;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-impressum { display: none; }

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  /* Topbar: Logo links, Burger rechts */
  .topbar { height: auto; }
  .topbar .fill .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    height: auto;
    min-height: 60px;
    position: relative;
    z-index: 20;
  }
  .brand img { height: 46px; width: auto; }

  /* Nav als Overlay von oben */
  header { position: relative; }
  .topbar .fill { position: relative; z-index: 20; }
  .brand { position: relative; z-index: 15; }
  .nav-toggle { position: relative; z-index: 15; }

  nav#main-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #b8cbd4;
    z-index: 10;
    transform: translateY(-100%);
    transition: transform 0.35s ease;
    padding-top: 72px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  }
  nav#main-nav.open { transform: translateY(0); }

  nav#main-nav ul.nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
  nav#main-nav ul.nav li {
    width: 100%;
    border-bottom: 0.5px solid rgba(65,99,123,0.2);
  }
  nav#main-nav ul.nav li a {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    color: #41637b;
    min-width: 0;
  }
  nav#main-nav ul.nav li a:hover { background: rgba(65,99,123,0.08); }
  nav#main-nav ul.nav li.active a {
    background: rgba(65,99,123,0.15);
    font-weight: bold;
  }

  /* Impressum aus Hauptliste ausblenden */
  .nav-impressum-item { display: none; }

  /* Kleiner Impressum-Link am unteren Rand */
  .nav-mobile-impressum {
    display: block;
    padding: 10px 16px;
    font-size: 12px;
    color: rgba(65,99,123,0.65);
    text-align: right;
    text-decoration: none;
  }
  .nav-mobile-impressum:hover { color: #41637b; }
}