/* =========================================================
   Urologie Stockach – Custom-Design (Nachbau des alten "Blue Design")
   Akzentfarbe: #22b8f0 · Schrift: Open Sans · heller Header
   ========================================================= */

@font-face {
  font-family: 'Open Sans Local';
  src: url('../fonts/opensans-regular-webfont.woff') format('woff'),
       url('../fonts/opensans-regular-webfont.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans Light Local';
  src: url('../fonts/opensans-light-webfont.woff') format('woff'),
       url('../fonts/opensans-light-webfont.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  --accent: #22b8f0;
  --text: #666666;
}

/* --- Grundlayout / Schrift --- */
body.site {
  font-family: 'Open Sans Local', 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: #ffffff;
  border-top: 4px solid var(--accent);   /* dünne blaue Leiste ganz oben */
}
body.site a { color: var(--accent); }
body.site a:hover { color: #1595c4; }

/* --- Header hell --- */
.container-header {
  background: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
  padding-block: 18px;
}
.container-header .grid-child { color: var(--text); }

/* Logo / Praxisname */
.header .brand-logo,
.header .site-title,
.header .brand-logo .site-title {
  font-family: 'Open Sans Light Local', 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
  color: #5a5a5a !important;
  font-size: 30px !important;
  line-height: 1.1;
  text-decoration: none;
}
.header .site-description {
  color: #9a9a9a;
  font-size: 13px;
  font-style: italic;
  margin-top: 2px;
}

/* --- Menü: Großbuchstaben, grau, blaues Aktiv/Hover --- */
.container-nav .mod-menu { justify-content: flex-end; }
.container-nav .mod-menu .nav-item > a {
  color: #666666 !important;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .3px;
  font-weight: 400;
  background: transparent !important;
}
.container-nav .mod-menu .nav-item > a:hover {
  color: var(--accent) !important;
}
.container-nav .mod-menu .nav-item.active > a,
.container-nav .mod-menu .nav-item.current > a {
  color: #ffffff !important;
  background: var(--accent) !important;
  border-radius: 3px;
}

/* Mobile-Toggler dunkel auf hellem Header */
.navbar-toggler { color: #666; border-color: #ccc; }

/* --- Überschriften mit blauem Akzent --- */
.site main h1, .site main h2, .com-content-article__title, .page-header h1 {
  color: #3f3f3f;
  font-family: 'Open Sans Light Local', 'Segoe UI', sans-serif;
  font-weight: 300;
}
.site main h1, .page-header h1 {
  border-bottom: 2px solid #ececec;
  padding-bottom: .3em;
}

/* --- Sidebar (Sprechzeiten) --- */
.container-sidebar-left .moduletable,
.container-sidebar-right .moduletable { margin-bottom: 1.5rem; }
.container-sidebar-left h3, .container-sidebar-right h3 {
  color: var(--accent);
  font-weight: 400;
  font-size: 20px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .25em;
  margin-bottom: .6em;
}

/* --- Hero-Slider (auf Inhaltsbreite begrenzt wie die übrigen Seiten) --- */
.container-banner {
  max-width: 1320px !important;
  margin-inline: auto !important;
  padding-inline: 8px !important;   /* bündig mit Logo/Menü */
  box-sizing: border-box;
}
.uro-hero {
  position: relative; width: 100%;
  aspect-ratio: 16 / 6; min-height: 260px;
  overflow: hidden;
  background: #e9e9e9 url(/images/sampledata/fruitshop/slider/promotion_1_gruppenbild.jpg) center/cover no-repeat;
}
.uro-hero .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: uroFade 45s linear infinite;
}
@keyframes uroFade {
  0%  { opacity: 0; }
  2%  { opacity: 1; }
  10% { opacity: 1; }
  12% { opacity: 0; }
  100%{ opacity: 0; }
}
/* 10 Slides, je 4,5s Versatz (= 10% von 45s) */
.uro-hero .slide:nth-child(1){ animation-delay: 0s; }
.uro-hero .slide:nth-child(2){ animation-delay: 4.5s; }
.uro-hero .slide:nth-child(3){ animation-delay: 9s; }
.uro-hero .slide:nth-child(4){ animation-delay: 13.5s; }
.uro-hero .slide:nth-child(5){ animation-delay: 18s; }
.uro-hero .slide:nth-child(6){ animation-delay: 22.5s; }
.uro-hero .slide:nth-child(7){ animation-delay: 27s; }
.uro-hero .slide:nth-child(8){ animation-delay: 31.5s; }
.uro-hero .slide:nth-child(9){ animation-delay: 36s; }
.uro-hero .slide:nth-child(10){ animation-delay: 40.5s; }
@media (max-width: 767px){ .uro-hero { aspect-ratio: 16 / 10; } }

/* Nur erstes Bild (Gruppenfoto): Ausschnitt nach oben, damit die Köpfe nicht abgeschnitten werden */
.uro-hero { background-position: center top; }
.uro-hero .slide:first-child { background-position: center top; }

/* --- Footer dunkel mit Adresse --- */
.container-footer {
  background: #2b2b2b !important;
  color: #cccccc;
  margin-top: 2.5rem;
  padding-block: 22px;
}
.container-footer a { color: #ffffff; }
.container-footer p { margin-bottom: .3rem; }

/* Breadcrumbs dezenter */
.container-breadcrumb, .mod-breadcrumbs { background: #f6f6f6; }