/* Hycom Data – statische Fassung.
   Aus den Original-Stylesheets (style, grid, superfish, flexslider, social-buttons)
   zusammengeführt und von jQuery-/TYPO3-Abhängigkeiten befreit.
   Die im Original genannte Schrift "Roboto" wurde dort nie geladen -> Arial wie bisher. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: #444;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: normal;
  background-image: url(images/background.jpg);
  background-color: #f2f2f2;           /* Fallback, falls background.jpg fehlt */
  background-repeat: repeat;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; line-height: 120%; color: #333; }
a, a:visited, a:active, a:hover { color: #636363; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }

/* Struktur */
#container {
  max-width: 960px;
  margin: 20px auto;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 3px 3px rgba(88, 88, 88, .1);
}
header { margin: 0 0 20px; padding: 10px 0; width: 100%; }
#banner { width: 100%; text-align: left; overflow: hidden; }
#logo { float: left; margin: 0 10px; }
#logo img { display: block; }
.social { float: right; margin-right: 20px; }

#main { margin-left: 5%; width: 95%; min-height: 200px; font-size: .875em; line-height: 1.3em; }
#main p { margin: 20px 0; }
#content { margin: 0 0 20px; }
#content_typo3 { width: 95%; line-height: 20px; }
#content_typo3 h1 { margin: 0 0 20px; }
#content h2, #content h3 { margin: 12px 0 6px; }
#content_typo3 h2 { font-size: 1.4em; }
#content_typo3 h3 { font-size: 1.2em; }
#content ul, #content ol { margin: 1em 0; padding-left: 20px; }
#main h1 { font-size: 1.6em; }

/* Shop-Hinweis (ehemals textpic mit Rufzeichen-Bild) */
.notice { display: flex; gap: 30px; align-items: flex-start; }
.notice img { width: auto; max-width: 68px; flex: none; }

/* Navigation (Superfish-Optik, nur CSS) */
#topnav { clear: both; width: 100%; }
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { display: flex; flex-wrap: wrap; width: 100%; margin: 1em 0 0; background: #e6e6e6; line-height: 1; }
.sf-menu li { position: relative; background: #e6e6e6; }
.sf-menu a { display: block; padding: .75em 1.5em; border-right: 1px solid #fff; text-decoration: none; color: #636363; }
.sf-menu a:hover, .sf-menu a:focus, .sf-menu li:hover > a, .sf-menu li:focus-within > a, .sf-menu li.active > a { background: #ccc; color: #fff; outline: 0; }
.sf-menu li.has-sub > a { padding-right: 2.25em; }
.sf-menu li.has-sub > a::after {
  content: ""; position: absolute; right: .9em; top: 50%; margin-top: -2px;
  border: 4px solid transparent; border-top-color: currentColor;
}
.sf-menu ul { position: absolute; top: -999em; left: 0; width: 300px; z-index: 99; }
.sf-menu li:hover > ul, .sf-menu li:focus-within > ul { top: 2.5em; }
.sf-menu ul li { width: 300px; background: #fff; opacity: .9; }
.sf-menu ul a { font-size: 14px; border: 0; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

/* Mobil-Bedienelemente (am Desktop unsichtbar) */
.menu-toggle, .sub-toggle { display: none; }

/* Slider (FlexSlider-Optik, ohne jQuery) */
.flexslider { position: relative; width: 94%; margin: 1em auto; background: #fff; border: 4px solid #e6e6e6; border-radius: 5px; }
.flexslider .slides, .flexslider .flex-control-nav { margin: 0; padding: 0; list-style: none; }
.flexslider .slides li { display: none; position: relative; }
.flexslider .slides li.is-active { display: block; }
.flexslider .slides img { display: block; max-width: 100%; width: 100%; }
.flex-caption { position: absolute; left: 0; bottom: 0; width: 96%; margin: 0; padding: 2%; background: rgba(0, 0, 0, .3); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); font-size: 14px; line-height: 18px; }
.flex-control-nav { position: absolute; bottom: -30px; width: 100%; text-align: center; }
.flex-control-nav li { display: inline-block; margin: 0 0 0 5px; }
.flex-control-nav li:first-child { margin: 0; }
.flex-control-nav button { display: block; width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; background: #bbb; cursor: pointer; }
.flex-control-nav button:hover { background: #888; }
.flex-control-nav button.active { background: #555; cursor: default; }

/* Facebook-Button (social-buttons.css, nur der benötigte Teil) */
a.sb { display: inline-block; background: #ddd no-repeat center; border-radius: 3px; }
a.sb.small { width: 32px; height: 32px; background-size: 20px 20px; }
a.sb.facebook { background-image: url(images/facebook.png); }
a.sb:hover { background-color: #ccc; }

/* Footer */
footer {
  clear: both;
  padding: 10px 20px;
  background: #e6e6e6;
  color: #797979;
  font-size: 12px;
  line-height: 20px;
  border-radius: 0 0 10px 10px;
}

/* Responsiv */
@media (max-width: 768px) {
  #container { width: 94%; }
  .sf-menu { font-size: 14px; }
}
@media (max-width: 480px) {
  #container { width: 95%; }
  #logo img { max-width: 100%; }
  .flexslider { width: 92%; }
  .flex-caption { font-size: 12px; }
  .notice { flex-direction: column; gap: 10px; }
}


/* Mobilmenü: einklappbar (nur mit JavaScript, sonst bleibt alles sichtbar) */
@media (max-width: 600px) {
  #topnav { width: 92%; margin: 1em auto 0; }
  .sf-menu { flex-direction: column; margin-top: 0; }
  .sf-menu a { border-right: 0; border-bottom: 1px solid #fff; }
  .sf-menu ul { position: static; width: auto; }
  .sf-menu ul li { width: auto; opacity: 1; }
  .sf-menu ul a { padding-left: 2.5em; font-size: 15px; border-left: 0; border-right: 0; }
  .sf-menu li.has-sub > a::after { display: none; }

  .js .menu-toggle {
    display: flex; align-items: center; gap: .8em;
    width: 100%; padding: .85em 1.2em;
    border: 0; border-radius: 3px; background: #e6e6e6; color: #636363;
    font: inherit; font-size: 1.05em; text-align: left; cursor: pointer;
  }
  .js .menu-toggle:hover, .js .menu-toggle[aria-expanded="true"] { background: #ccc; color: #fff; }
  .menu-toggle:focus-visible, .sub-toggle:focus-visible { outline: 2px solid #636363; outline-offset: -3px; }

  /* Hamburger-Symbol aus einem Element: drei Balken, wird beim Öffnen zum X */
  .bars, .bars::before, .bars::after {
    display: block; width: 20px; height: 2px; background: currentColor;
    transition: transform .25s ease, background-color .25s ease;
  }
  .bars { position: relative; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -6px; }
  .bars::after  { top: 6px; }
  .menu-toggle[aria-expanded="true"] .bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

  .js .sf-menu { display: none; }
  .js .sf-menu.open { display: flex; animation: menu-drop .25s ease; }

  /* Untermenü: Pfeil-Button rechts im Eintrag */
  .js .sub-toggle {
    display: block; position: absolute; top: 0; right: 0;
    width: 3.2em; height: 2.5em; padding: 0;
    border: 0; border-left: 1px solid #fff; background: transparent; cursor: pointer;
  }
  .js .sub-toggle::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    margin: -6px 0 0 -4px; border: solid #636363; border-width: 0 2px 2px 0;
    transform: rotate(45deg); transition: transform .25s ease;
  }
  .js li.open > .sub-toggle::before { transform: rotate(-135deg); margin-top: -1px; }
  .js .sf-menu li.has-sub > a { padding-right: 4em; }

  .js .sf-menu ul { display: none; }
  .js .sf-menu li.open > ul { display: block; animation: menu-drop .25s ease; }
  .js .sf-menu li:hover > ul, .js .sf-menu li:focus-within > ul { top: auto; }

  /* Hover-Grau bleibt auf Touch-Geräten sonst „kleben“ */
  .sf-menu li:hover > a { background: inherit; color: #636363; }
  .sf-menu li.active > a, .sf-menu li > a:active { background: #ccc; color: #fff; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .sf-menu.open, .js .sf-menu li.open > ul { animation: none; }
  .bars, .bars::before, .bars::after, .sub-toggle::before { transition: none; }
}

/* Druck */
@media print {
  body { background: none; }
  #container { border: 0; box-shadow: none; }
  #topnav, .flexslider, .social { display: none; }
  a[href]:after { content: " (" attr(href) ")"; }
}