@charset "utf-8"; /* https://www.thoughtco.com/using-import-in-css-3464234 */ /* @import url('/css/css-nav/normalize.css') screen; @import url('/css/css-nav/atmosphere.css') screen; @import url('/css/css-nav/layout.css') screen; @import url('/css/table.css') screen; @import url('/css/print_standard.css') print; */ /* ============================================================================= * * Große Schriften verkleinern bei kleinen Bildschirmen (Reinhold) 27.06.2025 * ============================================================================= */ @media only screen and (min-width: 0px) and (max-width: 550px) { html { font-size: 0.8em; } } /* @media only screen and (min-width: 551px) and (max-width: 800px) { html { font-size: 2.32vw; } } */ body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 1em; line-height: 1.30em; color: #4a6491; background-color: #F3F0E0; background-position: center; margin: 0.1em; } #box { margin-top: 0px; } /* Nur im Entwurfsmodus sichtbar zwischen .entwurfsmodus und #box darf kein Leerzeichen stehen. Der Grund liegt an der grundsätzlichen Bedeutung des Leerzeichens in CSS-Selektoren: .entwurfsmodus #box (mit Leerzeichen) heißt: „ein Element mit id="box", das irgendwo innerhalb eines (Vorfahren-)Elements mit class="entwurfsmodus" steht.“ Deine Seite hat aber kein Kind- oder Enkel-Element mit id="box" – genau dieses Element ist ja selbst das . .entwurfsmodus#box (ohne Leerzeichen) heißt: „ein Element, das gleichzeitig class="entwurfsmodus" und id="box" hat.“ Das trifft in deinem Fall auf das natürlich zu. Kurz gesagt: Das Leerzeichen ist der Nachfahre-Combinator. Ohne Leerzeichen werden die beiden Selektoren auf dasselbe Element angewendet. */ .entwurfsmodus#box { margin-left: 20px; margin-right: 20px; } .main { padding: 3px; } footer { font-size: 0.8em } h1, h2, h3, h4, h5, h6 { color: #4A6491; /* middle blue */ /*font-weight: normal;*/ /*font-weight: bold;*/ line-height: 1.2em; /* wichtig, da sonst die Zeilenabstände zu klein werden bei mehrzeiligem hn */ } h1 { /* Variable Schriftgröße - https://www.mediaevent.de/css-fluid-font-size/ */ font-size: calc(18px + (24 - 18) * (100vw - 400px) / (800 - 400)); /* Abstand von oben mind. 4 Pkt., damit die Punkte der Umlaute bei Großbuchstaben dargestellt werden */ margin-top: 0px; margin-bottom: 0.6em; } h2 { font-size: calc(16px + (16 - 10) * (100vw - 400px) / (800 - 400)) } h3 { font-size: calc(14px + (14 - 8) * (100vw - 400px) / (800 - 400)) } h4 { font-size: calc(13px + (12 - 7) * (100vw - 400px) / (800 - 400)) } h5 { font-size: calc(12px + (11 - 6) * (100vw - 400px) / (800 - 400)) } h2 { margin-top: 0.5em; margin-bottom: 0.5em; } h3 { margin-top: 0.4em; margin-bottom: 0.4em; } h4 { margin-top: 0.3em; margin-bottom: 0.3em; } h5 { margin-top: 0.2em; margin-bottom: 0.2em; } h6 { margin-top: 0.1em; margin-bottom: 0.1em; } p { margin-top: 0.5em; margin-bottom: 0.5em; } a, a:visited { color: #004f9b; text-decoration: none; } a:hover { color: #0057aa; text-decoration: none; } .a-nodeko, a.nodeko { background-image: none; text-decoration: none; padding-left: 0px; text-decoration: none; } a.nodeko_s { background-image: none; font-size: xx-small; text-decoration: none; padding-left: 0px; } footer a, footer a:link, footer a:visited { color: lightgrey; background-color: inherit; background-image: none; padding-left: 0px; text-decoration: none; } input.weiter, button.weiter, button.green-button { -moz-border-radius:7px; font-weight: bold; letter-spacing: 0.06em; /* color: #600000; background-color: #ffd700; */ color: white; background-color: #4CAF50; border-radius: 3px; padding: 10px 22px; cursor: pointer; } button.break-button { -moz-border-radius:7px; font-weight: bold; letter-spacing: 0.06em; color: black; background-color: #f0f0f0; border-radius: 3px; border: 2px solid silver; padding: 10px 22px; cursor: pointer; } input.zurück, button.zurück { -moz-border-radius:7px; background-color: #d3d3d3; border-radius: 3px; padding: 10px 22px; min-width: 100px; cursor: pointer; } input, select, submit, button { border: 1px solid #ccc; padding: 3px 3px; border-radius: 3px; color: black; } button { background-color: #d3d3d3; border: none; color: white; padding: 12px 22px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } button.OK { color: white; background-color: #4CAF50; } button.normal { padding: 4px 10px; } #fusszeile { /*background-color: #e30000;*/ position: absolute; bottom: 0; width: 100%; line-height: 28px; vertical-align: middle; text-align: center; } #stiller-link { background-image: none; color: #4B5F6D; text-decoration: none; } .silbentrennung { -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .abgeblendet { color: gray; } .h-abstand { /* Horizontaler Link-Abstand für Links in der Fußzeile */ /*margin-left: 24px;*/ margin-right: 24px; } .nowrap { white-space: nowrap; } .inaktiv { color: #b6b6b6 !important; cursor: default; } .deleted { color: white !important; background-color: #B22222 !important; } .div_center { margin-left: auto; margin-right: auto; text-align: center; } li { /* Um das Abschneiden der vorderen Ziffer(n) > 9 zu vermeiden */ margin-left: 0.5em; } .kursiv { font-style: italic; } .normal { font-style: normal; font-weight: normal; } .seitenkennung { font-size: xx-small; text-align: center; } .fett, .bold { font-weight: bolder; } .left { text-align: left; } .center { text-align: center; } .block-center { margin-left: auto; margin-right: auto; } .blocksatz, .justify { text-align: justify; } .right { text-align: right; } .v_middle { vertical-align: middle; } .bottom { vertical-align: bottom; } /* ----------------------------------------------------- Formularelemente ----------------------------------------------------- The textarea's rows attribute does not match the number of lines in Firefox. Firefox always adds an extra line after the textfield. So here is my solution: FF adds height to the TextArea to reserve place for scroll-bars. I don't need horizontal scroll bar so it helps with fixing the issue: following css rule can be added to textarea. */ textarea.fixed { overflow-x:hidden; } label { vertical-align: center; margin-right: 5px; padding: 5px 4px 3px 7px; /* für FF damit das Feld mittig liegt */ background: #efefef; cursor: pointer; border-radius: 3px; } input[type='text'], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type='text']:focus, textarea:focus { box-shadow: 0 0 5px #51aaff; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } /* ----------------------------------------------------- Linke Spalte ----------------------------------------------------- */ .linke_spalte { color: #F5E4D6; background-color: #105284; text-align: center; vertical-align: top; width: 25%; } .linke_spalte a { color: #F5E4D6; text-decoration: none; } .col-1 { color: #F3F0E0; background-color: #213C64; } .col-2 { color: #F3F0E0; background-color: #28497A; } .dunkelgrau { color: #696969; } .fenster { color: #FFFAF0; background-color: #dd0000; line-height: 180%; } .grau { color: silver; } .monospace, .festbreitenschrift { font-family: "Courier New", monospace; font-size: 1.1em; } .no-bg-color { background-color: transparent; } .nobr { white-space: nowrap; } .top { vertical-align: top; } .width-50 { width: 50%; } .width-100 { width: 100%; } tr .form_data { text-align: left; } /*========================================================================*/ .achtung_1 { font-size: large; font-weight: bold; color: red; /*background-color: red;*/ /*padding: 3px;*/ } .hinweis_dezent { color: #DEB887; } .hinweis { color: #fff6d9 !important; background-color: #8b0000 !important; } .hinweis-gelb { font-weight: bold; color: #FFC400; } .formular_eingabefehler { font-size: smaller; font-variant: normal; font-weight: normal; color: white; border: thin; background-color: red; } .fehler, .fehlermeldung, .error { color: #FFFAF0; font-weight: bold; background-color: #dd0000; padding:4px; } .eingabefehler { background-color: #ffb6c1; } /* Falsches Passwort, Password, Kennwort */ .pwd-false { background-color: #ffb6c1; } .error_form { border: 2px solid #dd0000; } .hinweis-rot { color: #FFFAF0; background-color: #dd0000; padding: 4px; } .rot, .red { color: red; } .gelb, .yellow { color: #FFC400; } .achtung, .warnung, #achtung { color: white; background-color: #dd0000; padding: 4px; } /*========================================================================*/ /* "visibility: hidden" hides the element, but it still takes up space in the layout. "display: none" removes the element completely from the document, it doesn't take up any space. */ @media screen { /* Wichtig damit mit 'nodisplay' ausgezeichneter Text trotzdem gedruckt wird*/ .nodisplay, .no-display, .no_display { display: none; } } .hidden { visibility: hidden; } .smaller { font-size: smaller; } .larger { font-size: larger; } .smallest { font-size: xx-small; } .x-large{ font-size: x-large; } /*======================================================================== Buttons optisch vertauschen damit die Enter Taste korrekt greift. Die zweite (= [Weiter]-Schaltfläche soll bei Betätigung der Enter Taste greifen!) Dazu werden die Buttons nur optisch vertauscht. [Weiter] [Zurück] => [Zurück] [Weiter] => https://www.mediaevent.de/css/display-flex.html */ #button-left { float: left; margin-right: 25px; } #button-right { /*float: right*/; spacing-left: 12px; } /*========================================================================*/