/* v0.16.2 2026-03-28 */
body {
    display			: grid;
    gap				: 0.5em;
    font-family		: "futura bold",helvetica,arial,sans-serif;
    color			: #000;
    background		: #fdfdfd;
}

img {
	border			: 1px #000 solid;
}

.r {
    float: right;
}
.n {
    display: none;
}

header, footer {
    grid-column: 1 / -1;
}

@media (min-width: 40em) {
    body {
        grid-template-columns: 1fr 3fr;
        grid-template-rows: auto 1fr 100px;
    }
}
header img {
    float			: left;
    border			: 0;
}
header h2, header p {
    text-align		: center;
    color			: #51504c;
    margin			: 0;
    padding			: 0.5em 0 0 0;
    font-size		: 1em;
    line-height		: 1.3em;
}
nav {
    margin			: 0 0 0.5em 0;
    padding			: 0;
	font-size		: 90%;
	font-weight		: bold;
	text-align		: left;
	background		: #fdfdfd;
}

div#menu {
    width			: 12em;
}
.menu {
    margin			: 0;
    padding			: 0;
    border-top		: 1px #aaa solid;
    border-right	: 4px #666 solid;
    border-bottom	: 4px #ccc solid;
    border-left		: 1px #aaa solid;
}
.quer {
    background		: #e5cf11;
    padding			: 0.3em;
}
.quer span {
  display		: inline;
  width			: 6em;
  margin		: 0 0 0 0.5em;
}
.breadcrumb {
    float			: right;
	margin			: 0;
	padding			: 0.2em;
	font-size		: 80%;
	font-weight		: normal;
	background		: transparent;
	border			: none;
}

.menu-toggle {
  display			: none;
}
.menu li {
  list-style		: none;
  padding			: 0 0 0.1em 0;
  margin			: 0;
}

.menu li a, .quer span a {
  text-decoration	: none;
  color				: #000;
}

.menu li em {
  display			: block;
  padding			: 0;
  margin			: 0;
  font-style		: normal;
}

.menu li em a {
  background		: none;
}

/* block in "left", inline in "quer" */
.menu li a, .menu li a:link, .menu li a:visited {
  color				: #000;
  display			: block;
  padding			: 10px 2px 10px 14px;
}
.menu li a:hover, .menu li a:focus, .menu li a:active {
  color				: #fff;
  background		: #000;
}

.gruen em {
  background		: #0e9240;
}
.blau em {
  background		: #1486b0;
}  
.rot em {
  background		: #c91735;
}

.gruen a {
  background		: url(images/green.gif) no-repeat left transparent;
}
.blau a {
  background		: url(images/blue.gif) no-repeat left transparent;
}
.rot a {
  background		: url(images/red.gif) no-repeat left transparent;
}

.footer span {
    white-space		: nowrap;
}
.shell {
    float			: right;
    width			: 270px;
    height			: 3em;
    background		: #fdfdfd;
    padding			: 0 1em;
    margin			: 0;
    font-family		: "futura bold", sans-serif;
    font-size		: 16px;
}
.shell a img {
    border			: 0;
    float			: left;
}
.shell a, .shell a:link, .shell a:visited {
    text-decoration	: none;
    font-style		: normal;
    color			: #005192;
}

@media(min-width: 42em) {
    #menuToggle input {
        display			:    none;
    }
}

@media(max-width: 42em) {
    nav.main {
        border			: 0;
        margin			: 0;
        padding			: 0;
        width			: 10em;
    }

    #menuToggle {
        display			: block;
        position		: fixed;
        top				: 150px;
        right			: 50px;
        z-index			: 1;
        -webkit-user-select: none;
        user-select		: none;
    }

    #menuToggle a {
        text-decoration	: none;
        color			: #232323;
        transition		: color 0.3s ease;
    }

    #menuToggle a:hover {
        color			: tomato;
    }

    #menuToggle input {
        display			: block;
        width			: 40px;
        height			: 32px;
        position		: absolute;
        top				: -7px;
        right			: -5px;
        cursor			: pointer;
        opacity			: 0; /* hide this */
        z-index			: 2; /* and place it over the hamburger */
        -webkit-touch-callout: none;
    }

    #menuToggle span {
        display			: block;
        width			: 33px;
        height			: 4px;
        margin-bottom	: 5px;
        position		: relative;
        background		: #cdcdcd;
        border-radius	: 3px;
        z-index			: 1;
        transform-origin: 4px 0;
        transition		: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0 0;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0 100%;
    }

    #menuToggle input:checked ~ span {
        opacity			: 1;
        transform		: rotate(45deg) translate(-2px, -1px);
        background		: #232323;
    }

    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity			: 0;
        transform		: rotate(0deg) scale(0.2, 0.2);
    }

    #menuToggle input	:checked ~ span:nth-last-child(2) {
        transform		: rotate(-45deg) translate(0, -1px);
    }

    #menu {
        position		: fixed;
        top				: 4em;
        right			: 0;
        width			: 15em;
        margin			: -120px 0 0 -50px;
        padding			: 2em 4em 1em 1em;
        background		: #ededed;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0 0;
        transform		: translate(100%, 0);
        transition		: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    #menu ul {
        list-style-type	: none;
    }

    #menu li {
        padding			: 10px 0;
        font-size		: 110%;
    }

    #menuToggle input:checked ~ div {
        transform		: none;
    }
}