@charset "UTF-8"; /*---------------Reset neuer art -------------*/ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } ol, ul, menu, summary { list-style: none; } img { max-inline-size: 100%; max-block-size: 100%; } table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /*-----------------Reset Ende-------------*/ /*-----------Überschreibungen----------*/ h1 { margin: 0; font-family: Arial Black; font-weight: bolder; } h2 { margin: 0; font-family: Arial Black; font-weight: bolder; font-size: 1.5rem; } @media (min-width: 901px) { h2 { font-size: 1.4rem; } } @media (min-width: 1150px) { h2 { font-size: 1.5rem; } } h3 { margin: 0; font-family: Arial Black; font-weight: bolder; } h4 { margin: 0; font-family: Arial Black; font-weight: bolder; } small { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-size: 70%; } em { font-style: italic; } strong { font-weight: bold; } ul { -webkit-margin-before: 0; margin-block-start: 0; -webkit-margin-after: 0; margin-block-end: 0; -webkit-padding-start: 0; padding-inline-start: 0; } a { text-decoration: none; } /* ----------- Basics*/ html { min-height: 100%; font-size: clamp(16px, 1rem + (1vw - 6px) * 0.6061, 24px); scroll-behavior: smooth; } @media screen and (prefers-reduced-motion) { html { scroll-behavior: auto; } } body { -ms-hyphens: auto; hyphens: auto; font-family: Tahoma, Geneva, sans-serif; color: var(--text-color); margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; min-height: 100svh; font-size: 1rem; } @media (min-width: 901px) { body { background-image: url(../pics/bg-html.webp); background-repeat: repeat-y; background-position: left top; background-attachment: fixed; background-size: 100vw auto; } } @media (min-width: 901px) and (prefers-color-scheme: dark) { body { background-image: url(../pics/bg-html-dark.webp); } } main { background-color: var(--bg-color); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media (min-width: 901px) { main { width: 90%; margin: auto; } } @media (min-width: 1150px) { main { width: 85%; margin: auto; } } #topbutton { display: none; position: fixed; bottom: 100px; right: 30px; z-index: 97; border: none; outline: none; background-color: var(--button-color); color: var(--text-color); cursor: pointer; padding: 0.3em; border-radius: 10px; font-size: 100%; font-weight: bold; } @media (max-width: 900px) { #topbutton { opacity: 50%; } } /* ----------- Klassen*/ .achtung { display: block; width: 100%; text-align: center; color: red; font-size: 1.2rem; } @media (max-width: 450px) { .achtung { font-size: 0.8rem; } } @media (451px <= width <= 900px) { .achtung { font-size: 1rem; } } .center { display: block; text-align: center; } .red { color: red; } .hinweis { display: block; font-size: 0.8em; color: var(--color-xlow); } @media (min-width: 1150px) { .hinweis { font-size: 0.7em; font-style: italic; } } .mb1em { margin-bottom: 1em; } .mt1em { margin-top: 1em; } .ml1em { margin-left: 1em; } .clear { clear: both; } .smaller { font-size: 80%; font-weight: lighter; } .smaller h2 { font-size: 100%; } .admin { font-size: 80%; font-weight: bold; } .ankerspan { scroll-margin-top: 3rem; } @media (max-width: 900px) { .ankerspan { scroll-margin-top: 1rem; } } .volks { background: var(--volks-color); } .kleines { background: var(--kleines-color); } .strolche { background: var(--strolche-color); } .round2 { border-radius: 0.2em; } @media (min-width: 901px) { .hide_big { display: none; } } /* ----------- Header*/ header { display: -ms-grid; display: grid; -ms-grid-columns: [burger] 65px [logo] auto; grid-template-columns: [burger] 65px [logo] auto; height: 80px; } @media (min-width: 901px) { header { -ms-grid-columns: [burger] 0px [logo] auto; grid-template-columns: [burger] 0px [logo] auto; height: auto; } } header #burgerspace { -ms-grid-column: burger; grid-column-start: burger; margin: 0; background: var(--menubase-color); } header #titelblock { -ms-grid-column: logo; grid-column-start: logo; -ms-hyphens: none; hyphens: none; background-color: var(--color-med); background-image: url("../pics/header-small.webp"); background-size: cover; background-position-x: center; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (prefers-color-scheme: dark) { header #titelblock { background-image: url("../pics/header-small-dark.webp"); } } @media (min-width: 901px) { header #titelblock { height: 120px; background-image: url("../pics/header.webp"); } } @media (min-width: 901px) and (prefers-color-scheme: dark) { header #titelblock { background-image: url("../pics/header-dark.webp"); } } header .logolink { min-width: 15vw; margin-right: 1em; } @media (min-width: 901px) { header .logolink { min-width: 10vw; } } header #logo { height: 55px; } @media (min-width: 901px) { header #logo { height: 100px; width: auto; } } #textzeile { color: white; font-family: Palatino Linotype, Book Antiqua, Palatino, serif; display: block; line-height: 0.9; text-align: center; } @media (max-width: 450px) { #textzeile { font-size: 5vw; } } @media (451px <= width <= 900px) { #textzeile { font-size: 4vw; } } @media (min-width: 901px) { #textzeile { font-size: 5vw; padding: 0.2em 2em; line-height: 1; } } @media (min-width: 1150px) { #textzeile { font-size: 2.5rem; padding: 0.2em 2em; } } /* ----------- Navigation*/ @media (max-width: 900px) { #sidebarMenu { height: auto; position: absolute; left: 0px; width: 230px; margin-top: 5em; z-index: 99; -webkit-transform: translateX(-310px); transform: translateX(-310px); -webkit-transition: -webkit-transform 250ms ease-in-out; transition: -webkit-transform 250ms ease-in-out; transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out; background: var(--menubase-color); } #sidebarMenu2 { display: none; } .sidebarMenuInner { margin: 0; padding: 0; border-top: 3px solid rgba(255, 255, 255, 0.3); } .sidebarMenuInner li { cursor: pointer; border-bottom: 3px solid rgba(255, 255, 255, 0.3); border-right: 3px solid rgba(255, 255, 255, 0.3); } .sidebarMenuInner li .aktuell { background: var(--menuaktuell-color); } .sidebarMenuInner li a { display: block; color: var(--link-color); font-family: Arial, Helvetica, sans-serif; font-weight: bold; -ms-hyphens: none; hyphens: none; padding: 0.6em 0.5em 0.6em 1em; font-size: 1.4rem; cursor: pointer; text-decoration: none; } .sidebarMenuInner li a:active { background: var(--menuhover-color); } input[type=checkbox]:checked ~ #sidebarMenu { -webkit-transform: translateX(0); transform: translateX(0); } input[type=checkbox] { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .sidebarIconToggle { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 98; height: 100%; width: 100%; top: 30px; left: 15px; height: 35px; width: 30px; } .spinner { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 4px; width: 100%; background-color: var(--texthell-color); } .horizontal { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; float: left; margin-top: 5px; } .diagonal.part-1 { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } .diagonal.part-2 { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; float: left; margin-top: 5px; } input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(135deg); transform: rotate(135deg); margin-top: 8px; } input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-top: -12px; } } /* --------------- ende burgernav, Anfang topnav */ @media (min-width: 901px) { #openSidebarMenu { visibility: hidden; } label.sidebarIconToggle { visibility: hidden; } #sidebarMenu { display: none; } #sidebarMenu2 { font-family: Arial, Helvetica, sans-serif; font-stretch: condensed; font-size: 120%; padding: 0.3em 0 0 0.4em; background-color: var(--bg-trans-color); position: sticky; top: 0; z-index: 99; } #sidebarMenu2 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } #sidebarMenu2 li { text-align: center; margin: 0 0.4em 0.4em 0; min-width: 6rem; } #sidebarMenu2 .aktuell { background: var(--menuaktuell-color); -webkit-box-shadow: 1px 1px 2px rgb(26, 26, 26); box-shadow: 1px 1px 2px rgb(26, 26, 26); } #sidebarMenu2 a { -ms-hyphens: none; hyphens: none; padding: 0.3em; border-radius: 0.3em; background: var(--menubase-color); color: var(--link-color); font-size: 80%; display: block; -webkit-box-shadow: 3px 3px 3px rgb(26, 26, 26); box-shadow: 3px 3px 3px rgb(26, 26, 26); -webkit-transition: background 0.3s; transition: background 0.3s; } } @media (min-width: 901px) and (min-width: 1150px) { #sidebarMenu2 a { padding: 0.1rem; } } @media (min-width: 901px) { #sidebarMenu2 a:hover, #sidebarMenu2 a:active { background: var(--menuhover-color); -webkit-box-shadow: 1px 1px 2px rgb(26, 26, 26); box-shadow: 1px 1px 2px rgb(26, 26, 26); } } /* -------------ende Topnav ------------*/ /* ------------- Cookiefenster ------------*/ #cookie { position: fixed; bottom: 3em; left: 10%; right: 10%; width: 80%; color: black; z-index: 99; padding: 0.5em 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #FAD85A; border-radius: 5px; -webkit-box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.5); } #cookie p { margin-bottom: 0.5em; } button.confirm { background: #E4B407; padding: 0.4em; border: none; color: black; text-align: center; font-weight: bold; border-radius: 2px; cursor: pointer; -webkit-box-shadow: 3px 3px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 2px 1px rgba(0, 0, 0, 0.5); } button.confirm:hover, button.confirm:active { -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5); } /* ----------- article*/ article { margin: 0.5rem; } @media (min-width: 901px) { article { margin: 0.5rem 1rem; } } article p { -ms-hyphens: auto; hyphens: auto; margin-top: 0.3rem; font-size: 1rem; } @media (min-width: 901px) { article p { margin-top: 0.5rem; } } article p::first-letter { font-size: 1.2rem; } @media (min-width: 901px) { article p::first-letter { font-size: 1.4rem; } } .headertext { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 1rem; font-size: 1.2rem; gap: 1rem; } @media (min-width: 901px) { .headertext { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 1rem; } } .headertext section { text-align: left; width: auto; } .headertext section:first-of-type { -ms-hyphens: none; hyphens: none; padding: 0.5rem; -ms-flex-negative: 0; flex-shrink: 0; background: var(--color-xhigh); } @media (max-width: 900px) { .headertext section:first-of-type { min-width: 100%; } } @media (min-width: 901px) { .headertext section:first-of-type { width: clamp(12em, 30%, 15em); } } .headertext section:first-of-type h2::first-letter { font-size: 120%; color: var(--color-xlow); } @media (min-width: 901px) { .headertext section:first-of-type h2::first-letter { font-size: 150%; } } @media (min-width: 901px) { .headertext section:first-of-type .stickyheader { position: sticky; top: 100px; } } @media (min-width: 901px) and (min-width: 1600px) { .headertext section:first-of-type .stickyheader { top: 50px; } } .trenner, .trennerklein { display: block; width: 100%; margin: 0.5em auto; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(15%, var(--color-high)), color-stop(85%, var(--color-high)), to(rgba(0, 0, 0, 0))); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-high) 15%, var(--color-high) 85%, rgba(0, 0, 0, 0) 100%); height: 0.5em; } .trennerklein { height: 0.3em; width: 80%; } /* ----------- Footer*/ footer { margin-top: auto; background-color: var(--color-high); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.3rem 1rem; } @media (min-width: 901px) { footer { width: 90%; margin: auto; } } @media (min-width: 1150px) { footer { width: 85%; margin: auto; } } footer .secfooter { /*align-self: flex-end;*/ } footer .secfooter .adressefooter { font-size: 60%; text-align: right; width: 16rem; } footer .secfooter #footernav { max-width: content; } footer .secfooter #footernav li { display: inline-block; margin-right: 0.5rem; margin-top: 0.3rem; } footer .secfooter #footernav li a { color: var(--color-xlow); } footer .secfooter #footernav li a:hover, footer .secfooter #footernav li a:active, footer .secfooter #footernav li a.aktuell { color: var(--color-xhigh); } footer .secfooter .logospace .smlogo { width: 30px; margin: 6px; } footer .foottext { font-family: Arial, Helvetica, sans-serif; font-size: 80%; text-align: right; color: var(--color-xlow); margin-right: 0em; } @media (max-width: 900px) { footer .hide_small { display: none; } } /* ----------- Textlinks */ .textlink { color: var(--color-low); text-decoration: underline; -webkit-transition: color 0.3s; transition: color 0.3s; } .textlink:hover { color: var(--color-high); } /* --------------- Linkbutton */ .linkbutton { font-weight: bold; padding: 0.5em; color: var(--color-xlow); -webkit-transition: color 0.3s; transition: color 0.3s; background: var(--color-high); border-radius: 0.2em; } @media (min-width: 901px) { .linkbutton { padding: 0.3em; border-radius: 0.4em; } } .linkbutton:hover { color: var(--color-xhigh); } /* ----------- Tabellen */ table { width: 95%; margin: 0 auto; border-collapse: separate; border-spacing: 0.2em; } @media (min-width: 901px) { table { width: 80%; } } @media (min-width: 1150px) { table { width: 48%; margin: 0 auto; } } table tr { background: var(--color-xhigh); } table tr:nth-child(even) { background: var(--color-high); } table td { min-width: content; padding: 0.3em; font-size: 80%; } @media (min-width: 1150px) { table td { padding: 0.4em; font-size: 85%; } } /* ----------- Formulare */ form { border: solid 2px var(--color-low); padding: 0.4em; border-radius: 0.5em; } @media (min-width: 1150px) { form { padding: 0.7em 0.4em; } } form label { display: inline-block; font-size: 80%; } @media (max-width: 900px) { form label { display: none; } } @media (min-width: 901px) { form label { width: 25%; } } @media (min-width: 1150px) { form label { width: 18%; } } form input:not([type=submit]):not([type=file]), form textarea { display: inline-block; background: var(--input-color); border-bottom: solid 0.2em var(--color-high); border-top-left-radius: 0.4em; border-top-right-radius: 0.4em; padding: 0.2em; margin: 0 auto; width: 90%; } @media (min-width: 901px) { form input:not([type=submit]):not([type=file]), form textarea { margin: 0 0.5em 0 0; width: 70%; } } @media (min-width: 1150px) { form input:not([type=submit]):not([type=file]), form textarea { width: 28%; } } form input:not([type=submit]):not([type=file]):focus, form textarea:focus { background: var(--focus-color); border-bottom: solid 0.2em var(--color-med); } form input:not([type=submit]):not([type=file])::-webkit-input-placeholder, form textarea::-webkit-input-placeholder { color: var(--color-low); font-size: 0.8em; } form input:not([type=submit]):not([type=file])::-moz-placeholder, form textarea::-moz-placeholder { color: var(--color-low); font-size: 0.8em; } form input:not([type=submit]):not([type=file]):-ms-input-placeholder, form textarea:-ms-input-placeholder { color: var(--color-low); font-size: 0.8em; } form input:not([type=submit]):not([type=file])::-ms-input-placeholder, form textarea::-ms-input-placeholder { color: var(--color-low); font-size: 0.8em; } form input:not([type=submit]):not([type=file])::placeholder, form textarea::placeholder { color: var(--color-low); font-size: 0.8em; } @media (min-width: 901px) { form input:not([type=submit]):not([type=file])::-webkit-input-placeholder, form textarea::-webkit-input-placeholder { opacity: 0; } form input:not([type=submit]):not([type=file])::-moz-placeholder, form textarea::-moz-placeholder { opacity: 0; } form input:not([type=submit]):not([type=file]):-ms-input-placeholder, form textarea:-ms-input-placeholder { opacity: 0; } form input:not([type=submit]):not([type=file])::-ms-input-placeholder, form textarea::-ms-input-placeholder { opacity: 0; } form input:not([type=submit]):not([type=file])::placeholder, form textarea::placeholder { opacity: 0; } } form #sicher { width: 4em; } form input[type=submit] { font-weight: bold; padding: 0.5em; color: var(--color-xlow); -webkit-transition: color 0.3s; transition: color 0.3s; background: var(--color-high); border-radius: 0.2em; } @media (min-width: 901px) { form input[type=submit] { padding: 0.3em; border-radius: 0.4em; } } form input[type=submit]:hover { color: var(--color-xhigh); } form textarea { resize: vertical; } /* ----------- Startseite */ .startseite { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 1rem; font-size: 1.2rem; gap: 0.5rem; } @media (min-width: 901px) { .startseite { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1rem; } } #topnews { margin-bottom: 1rem; } #topline { width: 100%; background: var(--color-xhigh); padding: 0.5em; border-radius: 0.5em; } #topline a { display: contents; } #aktuelledaten { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5em; } @media (min-width: 901px) { #aktuelledaten { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } #aktuelledaten .ankuend { width: 100%; font-family: Arial Narrow, Arial, Helvetica, sans serif; font-size: 1.2rem; text-align: center; } @media (min-width: 901px) { #aktuelledaten .ankuend { text-align: left; width: -webkit-max-content; width: -moz-max-content; width: max-content; font-size: 1.3 rem; } } @media (min-width: 1150px) { #aktuelledaten .ankuend { font-size: 1.4rem; } } #aktuelledaten .ankuend p { margin: 0; } #aktuelledaten h4 { margin-top: 0.5em; text-align: center; } @media (min-width: 1150px) { #aktuelledaten h4 { margin-top: 1em; margin-bottom: 0.5em; } } .info::after { content: "antippen"; } @media (min-width: 1150px) { .info::after { content: "anklicken"; } } h3.akt_titel { display: block; text-align: center; font-size: 1.7rem; padding: 0.2em; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; width: 100%; min-width: content; text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: light) { h3.akt_titel { text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2); color: var(--texthell-color); } } @media (min-width: 901px) { h3.akt_titel { width: auto; } } @media (min-width: 1150px) { h3.akt_titel { text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3); } } #titel-plakat { max-width: 80%; margin: 0 auto; } @media (min-width: 901px) { #titel-plakat { max-width: 35%; -ms-flex-negative: 1; flex-shrink: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 1600px) { #titel-plakat { max-width: 40%; } } .plakat-container { aspect-ratio: auto; } .plakat-container a { display: contents; margin: 0; padding: 0; } @media (min-width: 901px) { .stickyplakat { position: sticky; top: 100px; } } @media (min-width: 901px) and (min-width: 1600px) { .stickyplakat { top: 70px; } } .hometexte { width: 95%; margin: 0 auto; } @media (min-width: 901px) { .hometexte { max-width: 58%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .newsheader, .vereinnewsheader { -ms-hyphens: none; hyphens: none; padding: 0 0.5rem 0.3rem 0; font-size: 1.5rem; width: 100%; } .newsheader::first-letter, .vereinnewsheader::first-letter { font-size: 1.7rem; color: var(--color-xlow); } @media (min-width: 901px) { .newsheader::first-letter, .vereinnewsheader::first-letter { font-size: 2rem; } } .newsbox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 90%; margin-bottom: 1em; } .newsbox:last-of-type { margin-bottom: 0; } .newsbox p { width: 100%; } .newsbox a { display: contents; } .newsbox .newsline { width: 100%; display: block; margin: 0.2rem 0 0 0; } .newsbox .daten_akt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; gap: 0.3em; width: 100%; } @media (min-width: 901px) { .newsbox .daten_akt { font-size: 120%; } } .newsbox .datum_akt, .newsbox .warn { background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(15%, var(--color-high)), color-stop(85%, var(--color-high)), to(rgba(0, 0, 0, 0))); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-high) 15%, var(--color-high) 85%, rgba(0, 0, 0, 0) 100%); padding: 0.2em; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; } @media (min-width: 901px) { .newsbox .datum_akt, .newsbox .warn { width: auto; } } .newsbox .warn { color: white; background: var(--color-med); } .newsbox .next_titel { font-size: 120%; font-family: Georgia, Cambria, Baskerville, serif; color: white; text-align: center; padding: 0.4em; min-width: 90%; margin: 1em auto; } .next_spieldaten { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .einzel_datum { padding: 0.1em; margin-right: 1em; width: content; } /* ----------- Der Verein */ .vereinnewsheader { margin: 0.5rem 0.5rem 0.8rem 0.5rem; font-size: 1.3rem; } @media (min-width: 901px) { .vereinnewsheader { font-size: 1.5rem; margin: 0.8rem 1rem; } } .vereinnewsheader::after { content: " (zum Öffnen antippen)"; font-size: 0.7rem; font-style: italic; } @media (min-width: 1150px) { .vereinnewsheader::after { content: " (zum Öffnen anklicken)"; } } #news, #berichte, #kontakt, #verein { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.8rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 0.5rem; } @media (min-width: 901px) { #news, #berichte, #kontakt, #verein { margin-bottom: 2rem; } } #news > span:not(.hinweis), #berichte > span:not(.hinweis), #kontakt > span:not(.hinweis), #verein > span:not(.hinweis) { margin-top: -0.8rem; } .neues, .neues_termin, .einzelbericht { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0 auto; margin-bottom: 0.7em; margin-top: 0.2rem; font-size: 100%; background: var(--color-xhigh); -webkit-transition: background 0.3s; transition: background 0.3s; padding: 0.3rem 0.5rem; border-radius: 0.5em; } @media (min-width: 901px) { .neues, .neues_termin, .einzelbericht { font-size: 90%; padding: 0.5rem; } } @media (min-width: 1150px) { .neues, .neues_termin, .einzelbericht { font-size: 80%; } } .neues:hover, .neues_termin:hover, .einzelbericht:hover { background: var(--color-high); } .neues .newssummary, .neues_termin .newssummary, .neues .berichtesummary, .neues_termin .berichtesummary, .einzelbericht .newssummary, .einzelbericht .berichtesummary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media (min-width: 901px) { .neues .newssummary, .neues_termin .newssummary, .neues .berichtesummary, .neues_termin .berichtesummary, .einzelbericht .newssummary, .einzelbericht .berichtesummary { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .neues .newsdatum, .neues_termin .newsdatum, .neues .berichtedatum, .neues_termin .berichtedatum, .einzelbericht .newsdatum, .einzelbericht .berichtedatum { padding: 0.2em 0.4em; color: var(--text-color); text-align: center; display: block; background-color: var(--color-high); border-radius: 0.3em; font-weight: bold; } @media (max-width: 450px) { .neues .newsdatum, .neues_termin .newsdatum, .neues .berichtedatum, .neues_termin .berichtedatum, .einzelbericht .newsdatum, .einzelbericht .berichtedatum { font-size: 0.8rem; } } .neues .newstitel, .neues_termin .newstitel, .neues .berichtetitel, .neues_termin .berichtetitel, .einzelbericht .newstitel, .einzelbericht .berichtetitel { text-align: center; font-size: 1.1em; color: var(--color-xlow); margin-left: 0.5rem; } @media (max-width: 450px) { .neues .newstitel, .neues_termin .newstitel, .neues .berichtetitel, .neues_termin .berichtetitel, .einzelbericht .newstitel, .einzelbericht .berichtetitel { font-size: 0.9em; } } @media (min-width: 901px) { .neues .newstitel, .neues_termin .newstitel, .neues .berichtetitel, .neues_termin .berichtetitel, .einzelbericht .newstitel, .einzelbericht .berichtetitel { margin-left: 2rem; text-align: left; } } @media (min-width: 1150px) { .neues .newstitel, .neues_termin .newstitel, .neues .berichtetitel, .neues_termin .berichtetitel, .einzelbericht .newstitel, .einzelbericht .berichtetitel { font-weight: bold; } } .neues .newsinhalt, .neues_termin .newsinhalt, .neues .berichteinhalt, .neues_termin .berichteinhalt, .einzelbericht .newsinhalt, .einzelbericht .berichteinhalt { padding: 0.3em; background: var(--bg-color); } @media (min-width: 1150px) { .neues .newsinhalt, .neues_termin .newsinhalt, .neues .berichteinhalt, .neues_termin .berichteinhalt, .einzelbericht .newsinhalt, .einzelbericht .berichteinhalt { padding: 0.6em; } } .neues .newsuntertitel, .neues_termin .newsuntertitel, .neues .berichteuntertitel, .neues_termin .berichteuntertitel, .einzelbericht .newsuntertitel, .einzelbericht .berichteuntertitel { display: block; text-align: left; color: var(--color-xlow); font-weight: bold; margin-left: 0.2rem; margin-bottom: 0.3rem; } @media (min-width: 901px) { .neues .newsuntertitel, .neues_termin .newsuntertitel, .neues .berichteuntertitel, .neues_termin .berichteuntertitel, .einzelbericht .newsuntertitel, .einzelbericht .berichteuntertitel { margin-left: 2rem; } } .neues .newstext, .neues_termin .newstext, .einzelbericht .newstext { font-size: 0.9em; } .neues_termin { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 901px) { .neues_termin { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1em; } } .neues_termin:hover { background: var(--color-xhigh); } .termintitel { display: block; text-align: center; padding: 0.2em 0.4em; background: var(--color-high); border-radius: 0.3em; } @media (min-width: 901px) { .termintitel { text-align: left; } } .terminline { display: block; text-align: center; } @media (min-width: 901px) { .terminline { text-align: left; } } /* ----------- Berichte */ .einzelbericht { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } .einzelbericht h4 { color: var(--color-med); margin-top: 0.5em; } .einzelbericht h5 { font-weight: bold; margin-left: 0.5em; } .einzelbericht h5::first-letter { color: var(--color-xlow); font-size: 120%; } .einzelbericht ul { margin-left: 1em; } .galeriehinweis { margin: 0.3em 0 0.5em 0.5em; } .aktion::after { content: "antippen"; } @media (min-width: 1150px) { .aktion::after { content: "anklicken"; } } .bildcontainer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--bg-color); padding: 0.3em; } @media (min-width: 1150px) { .bildcontainer { padding: 0.7em; } } .bildcontainer img { -webkit-box-sizing: content-box; box-sizing: content-box; border: 0.4em solid var(--color-xhigh); -webkit-transition: border 0.3s; transition: border 0.3s; margin: 0.2em; } .bildcontainer img:hover, .bildcontainer img:active { border: 0.4em solid var(--color-med); } .bildcontainer .hoch { width: 60px; } @media (min-width: 901px) { .bildcontainer .hoch { width: 80px; } } @media (min-width: 1150px) { .bildcontainer .hoch { width: 100px; } } .bildcontainer .quer { width: 90px; } @media (min-width: 901px) { .bildcontainer .quer { width: 120px; } } @media (min-width: 1150px) { .bildcontainer .quer { width: 150px; } } /* ----------- Theater */ .played_header { background: var(--color-high); color: var(--color-xlow) !important; border-top-right-radius: 0.2em; border-bottom-right-radius: 0.2em; } .played_akt { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: solid 0.5em var(--color-high); border-bottom: solid 0.5em var(--color-high); border-bottom-left-radius: 1em; border-top-left-radius: 0.5em; } @media (min-width: 901px) { .played_akt { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .played_vvk { -ms-hyphens: none; hyphens: none; font-size: 0.9rem; } @media (min-width: 1150px) { .played_vvk { margin-left: 3%; min-width: 45%; font-size: 0.8rem; } } .played_titel { width: 100%; } .played_data { margin-top: 0.3em; text-align: center; width: 100%; font-size: 0.9rem; } .played_fotos { width: 100%; margin-bottom: 0.5em; color: var(--color-med); } .plakat_container_played { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 1150px) { .plakat_container_played { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0.5em; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .played_akt_plakat { width: 70%; margin: 0 auto; } @media (min-width: 1150px) { .played_akt_plakat { min-width: 40%; margin-left: 0.5rem; } } .played_akt_plakat .plakat_aktuell { margin: 1%; float: left; } .played_akt_plakat .halb { width: 48%; } .played_akt_plakat .eindrittel { width: 40%; } .played_akt_plakat .zweidrittel { width: 56%; margin-top: 8%; } .played_akt_plakat span { display: block; text-align: center; } .zeitung_container { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.6em; margin-top: 0.5em; padding-left: 0.3em; } @media (min-width: 901px) { .zeitung_container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; } } .played_personal { width: 100%; } .played_content, .played_bilder, .played_medien, .played_personal { margin-top: 1rem; padding-bottom: 0.5em; } .played_content h4, .played_bilder h4, .played_medien h4, .played_personal h4 { font-size: 1.2rem; background: -webkit-gradient(linear, left top, right top, from(var(--color-high)), color-stop(50%, var(--color-high)), to(var(--bg-color))); background: linear-gradient(to right, var(--color-high) 0%, var(--color-high) 50%, var(--bg-color) 100%); padding: 0.1rem 0.1rem 0.1rem 0.3rem; } .played_content h4::first-letter, .played_bilder h4::first-letter, .played_medien h4::first-letter, .played_personal h4::first-letter { color: var(--color-xlow); } .played_content p, .played_bilder p, .played_medien p, .played_personal p { margin-top: 0.2rem; padding-left: 0.3em; } a.piecelink, .einzelbericht { scroll-margin-top: 10px; } @media (min-width: 901px) { a.piecelink, .einzelbericht { scroll-margin-top: 80px; } } a.zeitungslink { display: block; width: content; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0.3em 0.6em; font-family: Georgia, Cambria, Baskerville, serif; background: var(--color-xhigh); -webkit-transition: background 0.3s; transition: background 0.3s; } @media (min-width: 1150px) { a.zeitungslink { max-width: 80%; } } @media (min-width: 1600px) { a.zeitungslink { max-width: 60%; } } a.zeitungslink:hover { background: var(--color-high); } .davor::before { content: "Antippen"; } @media (min-width: 901px) { .davor::before { content: "Anklicken"; } } .played_past .played_piece { margin-top: 0.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .played_past .played_piece .dead_titel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; background: var(--color-xhigh); color: var(--dead-color); font-style: italic; padding: 0.3em 0.3em 0.3em 0.3em; margin-bottom: 0.5em; font-size: 1.2rem; border-radius: 0.1em; } @media (min-width: 901px) { .played_past .played_piece .dead_titel { margin-bottom: 0.6em; } } .played_past .played_piece .dead_titel span:nth-of-type(1) { width: 2.5em; text-align: right; } @media (min-width: 1150px) { .played_past .played_piece .dead_titel span:nth-of-type(1) { width: 3.5em; } } .played_past .played_piece .dead_titel span:nth-of-type(2) { width: 1.5em; text-align: center; } @media (min-width: 1150px) { .played_past .played_piece .dead_titel span:nth-of-type(2) { width: 3em; } } .played_past .played_piece .dead_titel span:nth-of-type(3) { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; text-align: left; } .played_past .played_piece .akt_titel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; background: var(--color-xhigh); -webkit-transition: background 0.3s; transition: background 0.3s; padding: 0.3em 0.3em 0.3em 0.3em; margin-bottom: 0.5em; font-size: 1.2rem; border-radius: 0.6em; } @media (min-width: 901px) { .played_past .played_piece .akt_titel { margin-bottom: 0.6em; } } .played_past .played_piece .akt_titel:hover { background: var(--color-high); } .played_past .played_piece .akt_titel span:nth-of-type(1) { width: 2.5em; text-align: right; } @media (min-width: 1150px) { .played_past .played_piece .akt_titel span:nth-of-type(1) { width: 3.5em; } } .played_past .played_piece .akt_titel span:nth-of-type(2) { width: 1.5em; text-align: center; } @media (min-width: 1150px) { .played_past .played_piece .akt_titel span:nth-of-type(2) { width: 3em; } } .played_past .played_piece .akt_titel span:nth-of-type(3) { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; text-align: left; } .played_past .played_piece .offen { background: var(--color-high); border-top-left-radius: 0; border-bottom-left-radius: 0; margin-bottom: 0; } .played_past .rahmen { border-left: solid 0.5em var(--color-high); border-bottom: solid 0.5em var(--color-high); border-bottom-left-radius: 1em; border-top-left-radius: 0.5em; } .played_past .played_team { width: 95%; margin: 0 auto; font-size: 1rem; padding: 0.3em; border: solid 5px var(--color-xhigh); } @media (min-width: 1150px) { .played_past .played_team { border: none; border-right: solid 1em var(--color-xhigh); border-bottom: solid 0.5em var(--color-xhigh); border-bottom-right-radius: 0.7em; max-width: 60%; -ms-flex-negative: 2; flex-shrink: 2; font-size: 0.8rem; } } .played_past .played_team .personal_titel { display: block; width: 100%; margin-bottom: 0.3em; } .played_past .played_team .schauspieler { -ms-hyphens: none; hyphens: none; font-size: 80%; margin-bottom: 2em; } @media (min-width: 1150px) { .played_past .played_team .schauspieler { font-size: 85%; } } .played_past .played_team .personal_table { border-collapse: collapse; width: 100%; } .played_past .played_team .personal_table tr { background: var(--bg-color); } .played_past .played_team .personal_table td:nth-child(odd) { min-width: 6em; } /* ----------- Chronik */ #jahrlinks, #kontaktlinks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: start; align-content: flex-start; gap: 0.2em; margin-top: 0.3em; } @media (min-width: 901px) { #jahrlinks, #kontaktlinks { gap: 0.5em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 0.5em; } } .chronikspringer, .kontaktspringer, .berichtspringer { font-size: 90%; text-align: center; color: var(--color-xlow); -webkit-transition: color 0.3s; transition: color 0.3s; background-color: var(--color-high); padding: 0.3em; border-radius: 0.2em; min-width: content; max-width: 45%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (min-width: 901px) { .chronikspringer, .kontaktspringer, .berichtspringer { width: 45%; font-size: 100%; font-weight: bold; border-radius: 0.4em; } } @media (min-width: 1150px) { .chronikspringer, .kontaktspringer, .berichtspringer { font-size: 120%; } } .chronikspringer:hover, .kontaktspringer:hover, .berichtspringer:hover { color: var(--color-xhigh); } .nurgross { display: none; } @media (min-width: 1150px) { .nurgross { display: initial; } } #chroniktext .jahrblock { margin-top: 1em; } @media (min-width: 901px) { #chroniktext .jahrblock { margin-top: 2em; } } #chroniktext .jahrblock p { text-wrap: pretty; font-size: 90%; } @media (min-width: 901px) { #chroniktext .jahrblock p { font-size: 110%; } } #chroniktext .jahrblock .jahr { display: block; width: 50%; padding: 0.3em 0 0.3em 1em; font-weight: bold; color: var(--bg-color); border-top-left-radius: 0.4em; border-bottom-left-radius: 0.4em; background: -webkit-gradient(linear, left top, right top, from(var(--color-high)), color-stop(60%, var(--color-high)), to(var(--bg-color))); background: linear-gradient(to right, var(--color-high) 0%, var(--color-high) 60%, var(--bg-color) 100%); } #chroniktext .jahrblock .chroniktitel { display: block; background: var(--color-xhigh); margin-top: 0.5em; padding: 0.2em; } @media (min-width: 1150px) { #chroniktext .jahrblock .chroniktitel { padding: 0.4em; margin-top: 1em; } } #chroniktext .jahrblock .chroniktitel .titel { font-style: italic; } #chroniktext .jahrblock .chroniktitel .beschreibung { font-size: 80%; margin-left: 1em; } #chroniktext .jahrblock .zwischentitel { display: inline-block; font-size: 110%; margin-top: 0.5em; text-decoration-line: underline; text-decoration-color: var(--color-xhigh); text-decoration-thickness: 15%; } @media (min-width: 901px) { #chroniktext .jahrblock .zwischentitel { font-size: 140%; margin-top: 1em; } } #chroniktext .mitwirkende, #chroniktext figcaption { -ms-hyphens: none; hyphens: none; display: block; font-style: italic; font-size: 0.9rem; margin-bottom: 1.5em; } #chroniktext figure { width: 90%; margin: 0.5em auto; } #chroniktext figure img { width: 100%; } #chroniktext figure .rahmen { border: 0.3em solid var(--texthell-color); } @media (prefers-color-scheme: dark) { #chroniktext figure .dunkel { -webkit-filter: brightness(80%); filter: brightness(80%); } } #chroniktext .kleinbild { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 150px; height: auto; float: right; padding: 0.5em; } @media (prefers-color-scheme: dark) { #chroniktext .kleinbild { background-color: var(--texthell-color); border-radius: 10px; margin: 0.5em; } } @media (min-width: 1150px) { #chroniktext .kleinbild { width: 250px; height: 250px; } } #chroniktext .chrotable { margin-top: 0.5em; } @media (min-width: 901px) { #chroniktext .chrotable { margin-top: 1em; } } /* ----------- Kontakt */ @media (min-width: 901px) { #kontaktlinks { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .kontaktspringer { min-width: content; max-width: 49%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (min-width: 901px) { .kontaktspringer { min-width: 100%; font-size: 100%; border-radius: 0.4em; } } @media (min-width: 1150px) { .kontaktspringer { font-size: 110%; } } .kontakttitel { display: block; width: 85%; padding: 0.3em 0 0.3em 1em; font-weight: bold; margin-top: 1em; color: var(--bg-color); border-top-left-radius: 0.4em; border-bottom-left-radius: 0.4em; background: -webkit-gradient(linear, left top, right top, from(var(--color-med)), color-stop(60%, var(--color-med)), to(var(--bg-color))); background: linear-gradient(to right, var(--color-med) 0%, var(--color-med) 60%, var(--bg-color) 100%); } @media (min-width: 901px) { .kontakttitel { width: 70%; } } #kontakt .erfolg { display: inline-block; padding: 0.3em; text-align: center; width: 100%; background: var(--color-xhigh); font-size: 110%; color: var(--color-low); } #kontakt #kontaktform { width: 95%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; row-gap: 0.3em; } @media (min-width: 901px) { #kontakt #kontaktform { width: 100%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-column-gap: 0.2em; -moz-column-gap: 0.2em; column-gap: 0.2em; row-gap: 1em; } } @media (min-width: 1150px) { #kontakt #kontaktform #nachricht { min-width: 70%; max-width: 77%; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } } #kontakt #kontaktform .sicherheit { width: 90%; margin: 0 auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (min-width: 901px) { #kontakt #kontaktform .sicherheit { margin-left: 1em; width: -webkit-max-content; width: -moz-max-content; width: max-content; } } #kontakt #kontaktform .sicherheit .hinweis { margin-bottom: 0.6em; } #kontakt #kontaktform .sicherheit label[for=sicher] { margin: 0 1em; width: 5em; } #kontakt #kontaktform .buttonsammlung { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0.5em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #kontakt #koordinaten { width: 95%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 1150px) { #kontakt #koordinaten { width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } #kontakt #adresse { -ms-hyphens: none; hyphens: none; font-size: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 1150px) { #kontakt #adresse { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-size: 0.8rem; min-width: content; margin-right: 0.8em; } } #kontakt #adresse .block:nth-child(2) { text-align: right; } @media (min-width: 1150px) { #kontakt #adresse .block:nth-child(2) { text-align: left; } } #kontakt #karte { width: 90%; margin: 1em auto; } @media (min-width: 1150px) { #kontakt #karte { margin: 0 auto; width: 100%; } } #kontakt #openstreet { width: 100%; aspect-ratio: 4/3; border: 2px solid var(--text-color); } @media (min-width: 1150px) { #kontakt #openstreet { aspect-ratio: 2/1; } } #kontakt .vorstandbild { width: 95%; margin: 0.3em auto; } #kontakt .vorstandbild img { width: 100%; } #kontakt #vorstand { width: 95%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (min-width: 1150px) { #kontakt #vorstand { width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } #kontakt .vorstandzeile { font-size: 100%; } #kontakt .vorstandtabelle { -ms-hyphens: manual; hyphens: manual; } #kontakt .vorstandklein { font-size: 90%; } #kontakt .vorstandklein td:first-child { padding-left: 1em; } #kontakt td:nth-child(even) { font-weight: bold; width: 11.5em; } #kontakt .vorstandklein td { border-bottom: solid 0.4em var(--bg-color); } #kontakt table:nth-child(1) tr:nth-child(2) td { border-bottom: solid 0.4em var(--bg-color); } #kontakt #downloads { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 0.5em; } #kontakt #downloads .dllink { display: contents; } #kontakt #downloads .dlbox { -ms-hyphens: none; hyphens: none; width: 8rem; font-size: 1rem; text-align: center; border: 2px solid var(--text-color); border-radius: 0.5em; } #kontakt #downloads .dlboxtitel { display: block; color: var(--texthell-color); -webkit-transition: color 0.3s; transition: color 0.3s; font-family: Arial Black; text-align: center; text-transform: uppercase; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } #kontakt #downloads .dlinhalt { display: block; padding: 0.3em; } #kontakt #downloads .pdf { background: var(--pdf-color); } #kontakt #downloads .word { background: var(--word-color); } #kontakt #downloads .dllink:hover .dlboxtitel { color: var(--color-med); } #kontakt #downloads .dllink:hover .dlbox { border: 2px solid var(--color-med); } /* ----------- Kartenverkauf */ /* ----------- Links */ #linkseite { width: 100%; } #linkseite #linkbuttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.3em; } #linkseite #linkbuttons li { width: 95%; background: var(--color-xhigh); -webkit-transition: background 0.3s; transition: background 0.3s; padding: 0.3em; border-radius: 0.3em; } @media (min-width: 901px) { #linkseite #linkbuttons li { padding: 0.6em; border-radius: 0.6em; } } #linkseite #linkbuttons li:hover { background: var(--color-high); } #linkseite #linkbuttons li a { text-wrap: balance; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #linkseite #linkbuttons li a img { width: 60px; margin-right: 0.5em; } @media (min-width: 901px) { #linkseite #linkbuttons li a img { margin-right: 1em; } } /* ----------- Vorschriften */ #impressum, #datenschutz { -ms-hyphens: auto; hyphens: auto; } #impressum h1, #datenschutz h1 { font-size: 120%; } #impressum h2, #datenschutz h2 { margin-top: 2em; color: var(--color-xlow); } #impressum h3, #datenschutz h3 { margin-top: 0.5em; font-size: 110%; } #impressum h3::first-letter, #datenschutz h3::first-letter { font-size: larger; color: var(--color-xlow); } @media (min-width: 1150px) { #impressum h3, #datenschutz h3 { margin-top: 1em; } } #impressum h4, #datenschutz h4 { margin-left: 0.5em; margin-top: 0.5em; } @media (min-width: 1150px) { #impressum h4, #datenschutz h4 { margin-top: 0.8em; } } #impressum p, #datenschutz p { margin-left: 0.5em; } @media (min-width: 901px) { #impressum p, #datenschutz p { margin-left: 1em; } } @media (min-width: 1150px) { #impressum p, #datenschutz p { margin-left: 1.5em; } } #impressum ul, #datenschutz ul { list-style: disc; } #impressum li, #datenschutz li { margin-left: 2.5em; } #artikellinks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: start; align-content: flex-start; gap: 0.2em; margin-top: 0.3em; } @media (min-width: 901px) { #artikellinks { gap: 0.5em; margin-top: 0.5em; } } .artikelspringer { font-size: 90%; font-weight: bold; text-align: center; color: var(--color-xlow); -webkit-transition: color 0.3s; transition: color 0.3s; background-color: var(--color-high); padding: 0.3em; border-radius: 0.2em; } @media (min-width: 901px) { .artikelspringer { font-size: 100%; border-radius: 0.4em; } } @media (min-width: 1150px) { .artikelspringer { font-size: 120%; } } .artikelspringer:hover { color: var(--color-xhigh); } /* ----------- Sitemap */ #linksite { width: 100%; } #linksite #linkbuttons { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5em; } #linksite #linkbuttons li { -webkit-transition: background 0.3s; transition: background 0.3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*border-radius: .5em; margin-bottom: .5em;*/ } @media (max-width: 450px) { #linksite #linkbuttons li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media (451px <= width <= 900px) { #linksite #linkbuttons li { /*margin-bottom: .1em; border-radius: .3em;*/ } } #linksite #linkbuttons li a { background: var(--color-xhigh); -webkit-transition: background 0.3s; transition: background 0.3s; display: block; padding: 0.5em; border-radius: 0.3em; font-weight: bold; -ms-flex-negative: 0; flex-shrink: 0; width: 10em; margin-right: 1em; } @media (max-width: 450px) { #linksite #linkbuttons li a { width: 100%; margin-bottom: 0.2em; } } #linksite #linkbuttons li a:hover { background: var(--color-high); }