/*---------------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-------------*/ /*-----------------Document-----------------*/ 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: #2B2322; background: #D2B9AC; 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; } header { background: #CEA183; padding: 0.3rem 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-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } header #titelblock { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; font-size: 1.2rem; font-weight: bold; } @media (min-width: 651px) { header #titelblock { font-size: 1.5rem; } } header #logo { height: 4rem; } @media (min-width: 651px) { header #logo { height: 3rem; } } header #logo .wappen { float: right; margin-left: 0.5rem; } main { padding: 0.2rem; } main#nologin #nomitglied { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } main#yeslogin { display: -ms-grid; display: grid; -ms-grid-columns: 100%; grid-template-columns: 100%; -ms-grid-rows: auto 0.5rem auto 0.5rem auto; grid-template-rows: auto auto auto; gap: 0.5rem; padding: 0.2rem; margin: 0.1rem 0; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; justify-items: start; } main#yeslogin > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } main#yeslogin > *:nth-child(2) { -ms-grid-row: 3; -ms-grid-column: 1; } main#yeslogin > *:nth-child(3) { -ms-grid-row: 5; -ms-grid-column: 1; } @media (min-width: 651px) { main#yeslogin { -ms-grid-columns: 8rem auto; grid-template-columns: 8rem auto; -ms-grid-rows: auto auto; grid-template-rows: auto auto; } main#yeslogin > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } main#yeslogin > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } main#yeslogin > *:nth-child(3) { -ms-grid-row: 2; -ms-grid-column: 1; } main#yeslogin > *:nth-child(4) { -ms-grid-row: 2; -ms-grid-column: 2; } } @media (min-width: 1200px) { main#yeslogin { -ms-grid-columns: 8rem auto 12rem; grid-template-columns: 8rem auto 12rem; } } main#theaterlogin { display: -ms-grid; display: grid; -ms-grid-columns: 100%; grid-template-columns: 100%; -ms-grid-rows: auto 0.5rem auto 0.5rem auto; grid-template-rows: auto auto auto; gap: 0.5rem; padding: 0.2rem; margin: 0.1rem 0; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; justify-items: start; } main#theaterlogin > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } main#theaterlogin > *:nth-child(2) { -ms-grid-row: 3; -ms-grid-column: 1; } main#theaterlogin > *:nth-child(3) { -ms-grid-row: 5; -ms-grid-column: 1; } @media (min-width: 651px) { main#theaterlogin { -ms-grid-columns: 15rem auto; grid-template-columns: 15rem auto; -ms-grid-rows: auto auto; grid-template-rows: auto auto; } main#theaterlogin > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } main#theaterlogin > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } main#theaterlogin > *:nth-child(3) { -ms-grid-row: 2; -ms-grid-column: 1; } main#theaterlogin > *:nth-child(4) { -ms-grid-row: 2; -ms-grid-column: 2; } } @media (min-width: 1200px) { main#theaterlogin { -ms-grid-columns: 23rem auto 12rem; grid-template-columns: 23rem auto 12rem; } } main#nocontent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } nav { padding: 0.2rem; margin: 0.5rem 0.2rem; border: solid 2px #C28B66; border-radius: 0.5rem; } nav .linkbox_main { 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; gap: 0.2rem; } @media (min-width: 651px) { nav .linkbox_main { -ms-flex-pack: distribute; justify-content: space-around; } } nav .linkbox_main li { width: 49%; border: solid 0.2rem #754B2F; border-radius: 0.7rem; padding: 0.3rem; } @media (min-width: 651px) { nav .linkbox_main li { width: 23%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } } nav .linkbox_main li a { display: block; height: 100%; text-align: center; } nav .linkbox_main li a small { font-family: Arial Narrow, Arial, Helvetica, sans serif; } nav .linkbox_main li:hover { background: #AF734B; } nav .linkbox_main .aktuell { color: white; } footer { background: #CEA183; } article p { font-size: 1rem; font-family: Tahoma, Geneva, sans-serif; margin-bottom: 0.3rem; } section { padding: 0.2rem; border: solid 2px #C28B66; border-radius: 0.5rem; } /*-----------------Basics-----------------*/ p { padding-bottom: 0.4rem; } h1 { margin: 0; font-family: Arial Black; color: #754B2F; font-size: 1.3rem; display: block; width: 100%; } h2 { margin: 0; font-family: Arial Black; color: #754B2F; font-size: 1.1rem; } h3 { margin: 0; font-family: Arial Black; color: #754B2F; font-size: 1rem; } h4 { margin: 0; font-family: Arial Black; color: #754B2F; font-size: 0.9rem; } small { font-size: 0.8em; color: #584B4B; } strong { font-weight: bold; } em { font-style: italic; } /*-----------------Klassen-----------------*/ .rot { color: #B80000; } .dunkelrot { color: #850000; } .grau { color: #584B4B; } .info_dick { font-family: Tahoma, Geneva, sans-serif; display: inline-block; font-weight: bold; font-size: 0.9rem; } .center { text-align: center; margin: 0 auto; } .verein { background: #C87E7E; } .volks { background: #C8A77E; } .kleines { background: #748EC3; } .strolche { background: #97C97E; } @media (min-width: 651px) { .hide_big { display: none; } } .aktuell { color: white; } .ml1em { margin-left: 1em; } .ml2em { margin-left: 2em; } .mb1em { margin-bottom: 1em; } /*-----------------Formulare-----------------*/ .eingabeform { container-type: inline-size; } .statuszeile { display: block; font-family: "courier new", monospace; background: #2B2322; color: #B5CC9A; border: 2px solid #AF7046; border-radius: 0.4em; padding: 0.2em; width: 95%; margin: 0.3em auto 1em auto; font-size: 1em; } @media (min-width: 651px) { .statuszeile { font-size: 0.9em; width: 95cqi; } } input.textzeile, textarea.textkiste { display: inline-block; background: #CDB1A2; padding: 0.2em; border: solid 2px #754B2F; border-radius: 0.2rem; width: 95%; font-size: 1em; } @media (min-width: 651px) { input.textzeile, textarea.textkiste { width: 65cqi; font-size: 0.8em; } } input.textzeile[type=date], textarea.textkiste[type=date] { width: 9em; } input.textzeile[type=time], input.textzeile[type=number], textarea.textkiste[type=time], textarea.textkiste[type=number] { width: 5em; } input.textzeile:focus, textarea.textkiste:focus { background: #DBC7BD; } input.textzeile::-webkit-input-placeholder, textarea.textkiste::-webkit-input-placeholder { color: #925D3A; font-size: 0.8em; } input.textzeile::-moz-placeholder, textarea.textkiste::-moz-placeholder { color: #925D3A; font-size: 0.8em; } input.textzeile:-ms-input-placeholder, textarea.textkiste:-ms-input-placeholder { color: #925D3A; font-size: 0.8em; } input.textzeile::-ms-input-placeholder, textarea.textkiste::-ms-input-placeholder { color: #925D3A; font-size: 0.8em; } input.textzeile::placeholder, textarea.textkiste::placeholder { color: #925D3A; font-size: 0.8em; } input.textzeile.kurz, textarea.textkiste.kurz { width: 15em; } input.textzeile[readonly], textarea.textkiste[readonly] { color: #754B2F; } .textzeile { height: 1.5rem; } textarea { resize: vertical; } .hide { display: none; } @media (min-width: 651px) { .hide { display: inline-block; width: 7rem; } } .button_standard { padding: 0.2em; border: solid 2px #754B2F; border-radius: 0.5rem; background: #DA986C; font-size: 0.9rem; } .button_standard:hover { background: #AF734B; } .button_standard.confirm { width: 10em; text-align: center; margin-bottom: 0.8em; margin-right: 0.5em; } @media (max-width: 650px) { .button_standard.confirm { font-size: 0.8rem; } } .button_standard.mbweg { margin-bottom: 0em; } .button_standard a { display: block; } .tooltip { height: 1.1rem; aspect-ratio: 1; } .label_lang { display: inline-block; } @media (min-width: 651px) { .label_lang { width: 33cqi; border-bottom: dashed 2px #AF7046; } } .label_kurz { display: inline-block; } @media (min-width: 651px) { .label_kurz { width: 4em; border-bottom: dashed 2px #AF7046; } } .minitext_spacer, .minitext_spacer_kurz { display: inline-block; margin-left: 34cqi; } @media (max-width: 650px) { .minitext_spacer, .minitext_spacer_kurz { display: none; } } .minitext_spacer_kurz { margin-left: 10cqi; } .minitext { font-size: 0.7rem; font-style: italic; margin-bottom: 0.7rem; } .form_titel { background: #CEA183; padding: 0.2rem 0.5rem; border-radius: 0.3rem; margin-bottom: 0.5rem; width: 100%; } fieldset { container-type: inline-size; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 1em; } .spiel_daten { text-align: left; margin-left: 0.3em; margin-top: 1em; } @media (min-width: 651px) { .spiel_daten { margin-left: 3vw; } } .spiel_daten th { font-family: Arial Narrow, Arial, Helvetica, sans serif; text-align: center; padding-bottom: 0.3em; } .spiel_daten th:nth-child(1) { width: 2em; } .spiel_daten th:nth-child(4), .spiel_daten th:nth-child(5) { width: 5em; } .spiel_daten td { padding: 0.3em 0.1em; } .spiel_daten td:nth-child(1) { text-align: center; font-size: 1.2em; } .spiel_daten td:nth-child(3) { text-align: center; } /*-----------------checkbox-----------------*/ .checkbox-wrapper-18 { display: inline-block; margin-bottom: -0.4em; } .checkbox-wrapper-18 .round { position: relative; } .checkbox-wrapper-18 .round label { background-color: #DBC7BD; border: 2px solid #754B2F; border-radius: 50%; cursor: pointer; height: 28px; width: 28px; display: block; margin-left: 1.5em; } .checkbox-wrapper-18 .round label:after { border: 2px solid #D2B9AC; border-top: none; border-right: none; content: ""; height: 6px; left: 8px; opacity: 0; position: absolute; top: 9px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 12px; margin-left: 1.5em; } .checkbox-wrapper-18 .round input[type=checkbox] { visibility: hidden; display: none; opacity: 0; } .checkbox-wrapper-18 .round input[type=checkbox]:checked + label { background-color: #AF7046; border-color: #754B2F; } .checkbox-wrapper-18 .round input[type=checkbox]:checked + label:after { opacity: 1; } /*-----------------Radio-----------------*/ .radio-inputs { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 0.4rem; background: #DA986C; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); padding: 0.1rem; width: 20rem; font-size: 0.9em; margin: 0.5em auto 1em auto; } .radio-inputs .radio { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center; } .radio-inputs .radio input { display: none; } .radio-inputs .radio .name { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 0.2rem; border: none; padding: 0.2rem 0.3rem; color: #2B2322; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .radio-inputs .radio input:checked + .name { background-color: #AF734B; color: white; } /*-----------------Seiten-----------------*/ /*-----------------Anmeldung-----------------*/ #zugangsdaten { width: 90vw; border: solid 2px #C28B66; border-radius: 0.5rem; margin: 3rem auto; line-height: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 0.8rem; } @media (min-width: 651px) { #zugangsdaten { font-size: 1rem; width: 24rem; } } #zugangsdaten #zugang { width: 90vw; container-type: inline-size; } @media (min-width: 651px) { #zugangsdaten #zugang { width: 24rem; } } #zugangsdaten #zugang #sendpass { margin: 0.5rem 3rem; } #zugangsdaten #zugang input { margin-left: 2rem; } @media (min-width: 651px) { #zugangsdaten #zugang input { margin-left: 0; margin-right: 1em; } } /*-----------------Hauptseite-----------------*/ .infoblock_start { -ms-hyphens: auto; hyphens: auto; padding: 0.5rem; } @media (min-width: 651px) { .infoblock_start { padding: 0; display: block; width: auto; margin: 1rem auto; } } #navi, #form, #info { padding: 0.3rem; border: solid 2px #C28B66; border-radius: 0.5rem; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; -ms-grid-column-align: stretch; justify-self: stretch; } /*-----------------Navi-----------------*/ #navi { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } @media (min-width: 651px) { #navi { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } } @media (min-width: 1200px) { #navi { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } } #navi #sidenav { text-align: center; font-size: 0.8rem; 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; } @media (min-width: 651px) { #navi #sidenav { -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; font-size: 1rem; } } #navi #sidenav li { padding: 0.5rem 0.2rem; background: #DA986C; border: solid 2px #754B2F; border-radius: 0.4rem; margin-bottom: 0.5rem; } @media (min-width: 651px) { #navi #sidenav li { padding: 0.2rem; margin-bottom: 0.3rem; } } #navi #sidenav li.leftside { text-align: left; } #navi #sidenav li a { display: block; height: 100%; } #navi #sidenav li:hover { background: #AF734B; } /*-----------------Form-----------------*/ #form { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/3; 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: 651px) { #form { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } } @media (min-width: 1200px) { #form { -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } } @media (min-width: 1200px) { #form { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 0.8rem; gap: 0.5rem; } } #form .links { margin-bottom: 1em; } @media (min-width: 1200px) { #form .links { max-width: 42%; -ms-flex-negative: 2; flex-shrink: 2; } } #form .links .auswahl_liste { margin-top: 0.5em; font-family: Arial Narrow, Arial, Helvetica, sans serif; } #form .links .auswahl_liste li { margin-bottom: 0.4em; padding-left: 0.4em; } #form .links .auswahl_liste li a { display: block; } #form .rechts { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (min-width: 1200px) { #form .rechts { border-left: solid 5px #AF7046; padding-left: 0.3em; } } #form .mitte { width: 100%; } .bildedit_button { display: inline-block; margin-bottom: 1em; width: 100%; } .bildedit_button button.button_standard { margin-top: 0.5em; } .bilderliste { 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: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.3em; } .einzelbild { padding: 0.2em; border: 2px solid #AF7046; border-radius: 0.3em; 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; } .editor_pic { border: 3px solid white; margin-bottom: 0.2em; } .editor_pic:hover { border: 3px solid #AF734B; } /*-----------------Info-----------------*/ #info { font-size: 0.7rem; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3/4; } @media (min-width: 651px) { #info { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3; -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2/3; } } @media (min-width: 1200px) { #info { -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4; -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/2; } }