@charset "UTF-8";
html,
body,
header,
main,
footer,
section,
article,
ul,
ol,
li,
div,
figure,
iframe,
img {
  box-sizing: border-box;
  display: block;
  border-style: none;
  color: inherit;
  background-color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
  margin-bottom: 27px;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

a {
  background-color: transparent;
}

img {
  border-style: none;
}

[hidden] {
  display: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  fill: currentColor;
}

html {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: rgb(253, 238, 224);
  color: #333;
}

.rot {
  color: #e00;
}

body {
  margin: 0;
}
body a {
  text-decoration: none;
  color: inherit;
}
body a:hover {
  text-decoration: none;
  color: red;
}

header {
  width: 100%;
}
header div.logo {
  display: block;
  height: 135px;
  width: 100%;
  border: none;
  background-color: rgb(24, 57, 113);
  position: relative;
  z-index: 1;
}
header div.logo div.bild {
  position: absolute;
  left: 0;
  top: 0px;
  width: 66.75px;
  height: 135px;
  padding: 5px;
  margin: 0;
}
header div.logo div.bild img {
  height: 125px;
}
header div.logo div.name {
  position: absolute;
  top: 0%;
  right: 0px;
  left: 60px;
  height: 134px;
  max-width: 100%;
  z-index: 0;
  margin: 0 27px;
}
header div.logo div.name h1 {
  margin: 0;
  padding: 27px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  color: white;
  font-size: 1.4rem;
}

main {
  padding: 13.5px;
  z-index: auto;
  max-width: 1280px;
}
main div.links {
  vertical-align: top;
  display: inline-block;
  width: 270px;
  margin-right: 27px;
}
main div.links div.svg-karte {
  width: 100%;
  position: relative;
}
main div.links div.svg-karte svg {
  background-color: transparent;
  width: 100%;
  height: auto;
}
main div.links div.svg-karte a use {
  fill: #afbee9;
  stroke-width: 3px;
  stroke: white;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
main div.links div.svg-karte a use.bezirk_rot {
  fill: red;
  stroke: white;
}
main div.links div.svg-karte a:hover use, main div.links div.svg-karte a:focus use {
  fill: red;
  stroke: white;
}
main div.links div.svg-karte .info {
  opacity: 0;
  fill: rgb(24, 57, 113);
  stroke: rgb(24, 57, 113);
  pointer-events: none;
}
main div.links div.svg-karte .info text {
  font-family: inherit;
  font-size: 3em;
  stroke-width: 2px;
  fill: black;
}
main div.links div.svg-karte #oranienburg:hover ~ #oranienburgInfo,
main div.links div.svg-karte #oranienburg:focus ~ #oranienburgInfo,
main div.links div.svg-karte #hoppegarten:hover ~ #hoppegartenInfo,
main div.links div.svg-karte #hoppegarten:focus ~ #hoppegartenInfo,
main div.links div.svg-karte #spandau:hover ~ #spandauInfo,
main div.links div.svg-karte #spandau:focus ~ #spandauInfo,
main div.links div.svg-karte #reinickendorf:hover ~ #reinickendorfInfo,
main div.links div.svg-karte #reinickendorf:focus ~ #reinickendorfInfo,
main div.links div.svg-karte #pankow:hover ~ #pankowInfo,
main div.links div.svg-karte #pankow:focus ~ #pankowInfo,
main div.links div.svg-karte #mitte:hover ~ #mitteInfo,
main div.links div.svg-karte #mitte:focus ~ #mitteInfo,
main div.links div.svg-karte #charlottenburg-wilmersdorf:hover ~ #charlottenburg-wilmersdorfInfo,
main div.links div.svg-karte #charlottenburg-wilmersdorf:focus ~ #charlottenburg-wilmersdorfInfo,
main div.links div.svg-karte #steglitz-zehlendorf:hover ~ #steglitz-zehlendorfInfo,
main div.links div.svg-karte #steglitz-zehlendorf:focus ~ #steglitz-zehlendorfInfo,
main div.links div.svg-karte #tempelhof-schoneberg:hover ~ #tempelhof-schonebergInfo,
main div.links div.svg-karte #tempelhof-schoneberg:focus ~ #tempelhof-schonebergInfo,
main div.links div.svg-karte #neukolln:hover ~ #neukollnInfo,
main div.links div.svg-karte #neukolln:focus ~ #neukollnInfo,
main div.links div.svg-karte #lichtenberg:hover ~ #lichtenbergInfo,
main div.links div.svg-karte #lichtenberg:focus ~ #lichtenbergInfo,
main div.links div.svg-karte #marzahn-hellersdorf:hover ~ #marzahn-hellersdorfInfo,
main div.links div.svg-karte #marzahn-hellersdorf:focus ~ #marzahn-hellersdorfInfo,
main div.links div.svg-karte #treptow-kopenick:hover ~ #treptow-kopenickInfo,
main div.links div.svg-karte #treptow-kopenick:focus ~ #treptow-kopenickInfo,
main div.links div.svg-karte #friedrichshain-kreuzberg:hover ~ #friedrichshain-kreuzbergInfo,
main div.links div.svg-karte #friedrichshain-kreuzberg:focus ~ #friedrichshain-kreuzbergInfo {
  opacity: 1;
  transition: all 0.25s linear;
}
main div.rechts {
  vertical-align: top;
  display: inline-block;
  max-width: 848px;
}
main div.rechts h1:first-child,
main div.rechts h2:first-child {
  margin-top: 0;
}
main div.rechts h1 {
  font-size: 1.4em;
}
main div.rechts h2 {
  font-size: 1.1em;
}
main div.rechts table {
  width: 100%;
}
main div.rechts table thead {
  font-weight: bolder;
}
main div.rechts table thead td ~ .strasse,
main div.rechts table thead td ~ .versteckt,
main div.rechts table thead td ~ .plz,
main div.rechts table thead td ~ .bezirk {
  display: none;
}
main div.rechts table tbody td {
  padding-right: 13.5px;
}
main div.rechts table tbody td ~ .strasse,
main div.rechts table tbody td ~ .versteckt,
main div.rechts table tbody td ~ .plz,
main div.rechts table tbody td ~ .bezirk {
  display: none;
}
main ul.bullet {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
main ul.bullet li {
  position: relative;
  padding-left: 0;
}
main ul.bullet li::before {
  content: "•";
  font-weight: bold;
  color: red;
  font-size: 1.6em;
  line-height: 1;
  display: inline-block;
  width: 0.8em;
  margin: 0;
  position: absolute;
  left: -0.6em;
  top: -0.1em;
}
main div.login form {
  background-color: transparent;
}
main div.login form label {
  padding-right: 5px;
}
main div.login form input {
  margin-right: 5px;
}
main div.login form input[type=password],
main div.login form .login form input[type=text] {
  color: inherit;
}
main div.login form input[type=button],
main div.login form input[type=submit] {
  cursor: pointer;
}

@media only screen and (min-width: 360px) {
  header div.logo div.name h1 {
    font-size: 1.5em;
  }
  main {
    padding: 20.25px;
  }
  main div.links div.svg-karte {
    width: 100%;
  }
  main div.rechts h1 {
    font-size: 1.5em;
  }
  main div.rechts h2 {
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 379px) {
  header div.logo div.name h1 {
    font-size: 1.6em;
  }
  main {
    padding: 27px;
  }
  main div.links div.svg-karte {
    width: 100%;
  }
  main div.rechts h1 {
    font-size: 1.6em;
  }
  main div.rechts h2 {
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 487px) {
  main div.rechts table thead td ~ .strasse {
    display: table-cell;
  }
  main div.rechts table tbody td ~ .strasse {
    display: table-cell;
  }
}
@media only screen and (min-width: 622px) {
  header div.logo div.name h1 {
    font-size: 2em;
  }
  main {
    padding: 40.5px;
  }
  main div.links div.svg-karte {
    width: 100%;
  }
  main div.rechts h1 {
    font-size: 2em;
  }
  main div.rechts h2 {
    font-size: 1.4em;
  }
}
@media only screen and (min-width: 757px) {
  header div.logo {
    height: 270px;
  }
  header div.logo div.name {
    left: 120px;
    height: 269px;
  }
  header div.logo div.name h1 {
    font-size: 2.4em;
  }
  header div.logo div.bild {
    width: 126.75px;
    height: 270px;
  }
  header div.logo div.bild img {
    height: 260px;
  }
  main {
    padding: 54px;
  }
  main div.links div.svg-karte {
    width: 100%;
  }
  main div.rechts table thead td ~ .strasse,
  main div.rechts table thead td ~ .plz,
  main div.rechts table thead td ~ .bezirk {
    display: table-cell;
  }
  main div.rechts table tbody td ~ .strasse,
  main div.rechts table tbody td ~ .plz,
  main div.rechts table tbody td ~ .bezirk {
    display: table-cell;
  }
}
footer {
  min-height: 81px;
  padding: 40.5px;
  text-align: center;
  margin: 0;
  display: block;
  background-color: rgb(24, 57, 113);
  color: white;
}
footer a {
  color: white;
  text-decoration: none;
}
footer a:hover {
  text-decoration: none;
}

img,
footer {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

header div.logo {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

nav {
  min-height: 81px;
  background-color: rgb(253, 238, 224);
}
nav input.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
nav input.menu-toggle:focus-visible + label.menu-toggle-label {
  outline: 3px solid red;
  outline-offset: 4px;
}
@media (prefers-color-scheme: dark) {
  nav input.menu-toggle:focus-visible + label.menu-toggle-label {
    outline-color: red;
  }
}
nav input.menu-toggle:checked ~ .menu {
  max-height: 540px;
  padding: 0 0 27px 0;
  opacity: 1;
}
nav input.menu-toggle:checked ~ label.menu-toggle-label span.hamburger {
  background: transparent;
}
nav input.menu-toggle:checked ~ label.menu-toggle-label span.hamburger:before {
  transform: rotate(-45deg);
  top: 0;
  background-color: red;
}
@media (prefers-color-scheme: dark) {
  nav input.menu-toggle:checked ~ label.menu-toggle-label span.hamburger:before {
    background-color: red;
  }
}
nav input.menu-toggle:checked ~ label.menu-toggle-label span.hamburger:after {
  transform: rotate(45deg);
  top: 0;
  background-color: red;
}
@media (prefers-color-scheme: dark) {
  nav input.menu-toggle:checked ~ label.menu-toggle-label span.hamburger:after {
    background-color: red;
  }
}
nav label.menu-toggle-label {
  padding: 37.8px 32.4px 10.8px 0;
  margin: 0;
  border: 0;
  display: block;
  cursor: pointer;
  float: right;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 21.6px;
  width: 35.1px;
}
nav label.menu-toggle-label span.hamburger {
  background-color: black;
}
@media (prefers-color-scheme: dark) {
  nav label.menu-toggle-label span.hamburger {
    background-color: black;
  }
}
nav label.menu-toggle-label span.hamburger {
  display: block;
  height: 5px;
  position: relative;
  width: 35.1px;
  border-radius: 2px;
  transition: background 0.3s ease-in-out;
}
nav label.menu-toggle-label span.hamburger:before, nav label.menu-toggle-label span.hamburger:after {
  background-color: black;
}
@media (prefers-color-scheme: dark) {
  nav label.menu-toggle-label span.hamburger:before, nav label.menu-toggle-label span.hamburger:after {
    background-color: black;
  }
}
nav label.menu-toggle-label span.hamburger:before, nav label.menu-toggle-label span.hamburger:after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}
nav label.menu-toggle-label span.hamburger:before {
  top: 10.8px;
}
nav label.menu-toggle-label span.hamburger:after {
  top: -10.8px;
}
nav ul.menu {
  width: 100%;
  list-style: none;
  overflow: hidden;
  clear: both;
  max-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: all 0.5s ease;
}
nav ul.menu li {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
  padding: 13.5px;
}
nav ul.menu li:hover, nav ul.menu li:focus {
  background-color: lightgrey;
}
@media (prefers-color-scheme: dark) {
  nav ul.menu li:hover, nav ul.menu li:focus {
    background-color: lightgrey;
  }
}
nav ul.menu li:hover, nav ul.menu li:focus {
  border-radius: 5px;
}
nav ul.menu li a {
  display: block;
  background-color: transparent;
}
nav ul.menu li a.hervorhebung, nav ul.menu li a[aria-current=page] {
  color: red;
  background-color: transparent;
}
@media (prefers-color-scheme: dark) {
  nav ul.menu li a.hervorhebung, nav ul.menu li a[aria-current=page] {
    color: red;
  }
}

@media only screen and (min-width: 757px) {
  nav label.menu-toggle-label {
    display: none;
  }
  nav input.menu-toggle:checked ~ .menu {
    padding: 0;
  }
  nav {
    position: relative;
    min-height: 81px;
    width: 100%;
    background-color: rgb(253, 238, 224);
    text-align: center;
  }
  nav ul.menu {
    clear: none;
    float: right;
    max-height: none;
    padding: 0;
    opacity: 1;
  }
  nav ul.menu li {
    display: inline-block;
    padding-top: 20.25px;
    padding-left: 0;
    padding-right: 27px;
    padding-bottom: 13.5px;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.5em;
  }
  nav ul.menu li ~ :first-child {
    padding-left: 50px;
  }
  nav ul.menu li ~ :last-child {
    padding-right: 0;
  }
  nav ul.menu li:hover, nav ul.menu li:focus {
    background: transparent;
  }
  nav ul.menu li:hover a, nav ul.menu li:focus a {
    color: inherit;
  }
  nav ul.menu li a {
    padding-top: 0;
    background-image: none;
  }
  nav ul.menu li a:hover, nav ul.menu li a:focus {
    color: red;
  }
}
@media only screen and (min-width: 757px) and (prefers-color-scheme: dark) {
  nav ul.menu li a:hover, nav ul.menu li a:focus {
    color: red;
  }
}

/*# sourceMappingURL=akms.css.map */