/* styrion – statischer Nachbau des Joomla-Templates "68portal" */

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

html, body, div, ul, li, p, td, th { margin: 0; padding: 0; }
img { border: 0; max-width: 100%; height: auto; }

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #000;
  background: #f7a42b url(../img/body.png) 0 0 repeat;
}

a:link, a:visited { color: #000; text-decoration: underline; }
a:hover, a:focus, a:active { color: #063; }

/* Seitenrahmen mit Schatten */
.page {
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 3px;
  font-size: 0.8em;
  line-height: 150%;
  background: url(../img/shadow-left.png) left top repeat-y;
}
.page-inner {
  padding-right: 3px;
  background: #fff url(../img/shadow-right.png) right top repeat-y;
}
.page-bottom {
  height: 3px;
  background: url(../img/shadow-bottom.png) left bottom repeat-x;
}

/* Kopfzeile: Logo + Navigation */
.top-header {
  position: relative;
  height: 95px;
  background: url(../img/top-header.png) left bottom repeat-x;
  border-bottom: 1px solid #fff;
}
.top-header .logo {
  display: block;
  width: 240px;
  text-align: center;
}
.top-nav {
  position: absolute;
  right: 10px;
  bottom: 15px;
  list-style: none;
  display: flex;
}
.top-nav li { font-size: 0.89em; }
.top-nav a:link, .top-nav a:visited {
  display: block;
  margin: 0 0.1em;
  padding: 0.5em 0.7em 0.2em;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  background: #a9d55e url(../img/menu-normal.png) top center no-repeat;
}
.top-nav a:hover { text-decoration: underline; }
.top-nav a[aria-current="page"] {
  background-image: url(../img/menu-active.png);
}

/* Header: Adressblock + Banner */
.header {
  display: flex;
  height: 166px;
  border-bottom: 1px solid #fff;
  font-size: 0.85em;
  line-height: 155%;
}
.topmod {
  flex: 0 0 240px;
  padding: 5px 5px 5px 15px;
  background: #d2def0 url(../img/topmod.png) 0 0 no-repeat;
}
.topmod h4 {
  font-size: 1em;
  font-weight: bold;
  margin: 0.2em 0 0.5em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #ddd;
}
.banner {
  flex: 1 1 auto;
  margin-left: 1px;
  background: url(../img/header-image.png) left 0 repeat-x;
}

/* Inhalt: linke Spalte + Hauptbereich */
.content {
  display: flex;
  padding-bottom: 3px;
  background: url(../img/left-column.png) left top repeat-y;
}
.sidebar { flex: 0 0 240px; }
.side-nav {
  list-style: none;
  margin: 0 0 0 10px;
  padding: 0;
  background: #a9d55e;
  border-top: 2px solid #a9d55e;
}
.side-nav a:link, .side-nav a:visited {
  display: block;
  padding: 0.3em 0.5em;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
}
.side-nav a:hover { text-decoration: underline; }
.side-nav a[aria-current="page"] {
  background: #a9d55e url(../img/menu_left_active.gif) right center no-repeat;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px 2em;
  line-height: 140%;
}
.main h1 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0.2em 0;
  padding-top: 1em;
}
.main hr {
  border: 0;
  border-top: 1px solid #999;
  margin: 0.4em 0 1.5em;
}
.main p { margin: 0 0 1em; }

/* Kontakt */
.hotline {
  text-align: center;
  margin: 2em 0 4em;
}
.hotline strong { display: block; }
.hotline .phone {
  display: block;
  font-size: 18pt;
  font-weight: bold;
  color: #f90;
  text-decoration: none;
  margin-top: 0.5em;
}
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em 2em;
  max-width: 700px;
}
.contact-grid .hours { font-weight: bold; }

/* Kundenbereich */
.links { padding-left: 30px; }
.links a { font-weight: bold; color: #f60; }
.links p { margin-bottom: 2.5em; }
.links small { font-size: 10pt; display: block; }

/* Impressum */
.imprint td { padding: 0.1em 1.5em 0.1em 0; vertical-align: top; }
.imprint { margin: 1em 0 2em; border-collapse: collapse; }
.legal h2 { font-size: 1em; font-weight: bold; margin: 2em 0 0.3em; }
.legal h3 { font-size: 1em; font-style: italic; font-weight: normal; margin: 1em 0 0; }
.legal p { text-align: justify; }

/* Mobil */
@media (max-width: 760px) {
  .top-header { height: auto; padding-bottom: 10px; }
  .top-nav { position: static; justify-content: center; flex-wrap: wrap; padding: 0 16px; }
  .top-header .logo { margin: 0 auto; }
  .header { flex-direction: column; height: auto; }
  .topmod { flex-basis: auto; background-size: cover; padding: 10px 16px; }
  .banner { flex: none; margin: 0; aspect-ratio: 761 / 166; background-size: 100% auto; background-repeat: no-repeat; }
  .content { display: block; background: none; }
  .sidebar { display: none; }
  .main { padding: 0 16px 2em; }
  .links { padding-left: 0; }
}