.nurTextPadding {
    padding-left: 4px;
}

#webFormPreviewContent .formular_einfach,
#webFormPreviewContent .formular_textfeld_dreifach,
#webFormPreviewContent .formular_textfeld_zweifach {
    width: 100% !important;
}

#webFormPreviewContent .formular_doppelt .bezeichnung {
    width: 15% !important;
}

#webFormPreviewContent .formular_doppelt .eingabe {
    width: 85% !important;
    padding-left: 0px !important;
}

#mdMedizininfo-detail input,
#mdMedizininfo-detail textarea {
    cursor: context-menu;
    outline: none;
}

#tabs div.tab {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
body.isMobile #tabs div.tab {
    width: unset;
}
#page_pupil_info #tabs div.tab,
#page_address #tabs div.tab {
    width: 60%;
}

h1.anmeldeTabHeadline,
h1.pupilTabHeadline {
    padding-left: 1rem;
}

body:not(.isMobile) h1.anmeldeTabHeadline {
    display: none;
}

body.isMobile h1.anmeldeTabHeadline,
body.isMobile h1.pupilTabHeadline {
    padding-left: 0;
    color: var(--atlantis-darkgrey);
}

.formular_einfach,
.formular_textfeld_zweifach,
.formular_textfeld_dreifach {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.formular_einfach .bezeichnung,
.formular_textfeld_zweifach .bezeichnung,
.formular_textfeld_dreifach .bezeichnung {
    width: 50%;
    border: 0px;
}

.formular_einfach .multiLineText,
.formular_textfeld_zweifach .multiLineText,
.formular_textfeld_dreifach .multiLineText,
.emptyRow {
    border: 2px solid transparent;
}

.formular_einfach .eingabe,
.formular_textfeld_zweifach .eingabe,
.formular_textfeld_dreifach .eingabe {
    width: 50%;
    position: relative;
}

/* Bilingual (z.B. DSB): drei Spalten — DE-Label / Eingabe / Fremdsprach-Label.
   Per :has() auf Zeilen mit zweitsprachigem Label begrenzt, damit einsprachige
   _MEHR-Felder anderer Schulen (gleiche Klassen, aber keine zweite Spalte)
   unberuehrt bleiben. .bezeichnung wird einsprachig schon in 50% + border:0
   gesetzt, die Multilingual-Klassen wurden dabei nie beruecksichtigt. */
.formular_einfach:has(.bezeichnung_second_language) .bezeichnungMultilingual,
.formular_textfeld_zweifach:has(.bezeichnung_second_language) .bezeichnungMultilingual,
.formular_textfeld_dreifach:has(.bezeichnung_second_language) .bezeichnungMultilingual,
.formular_einfach:has(.bezeichnung_second_language) .bezeichnung_second_language,
.formular_textfeld_zweifach:has(.bezeichnung_second_language) .bezeichnung_second_language,
.formular_textfeld_dreifach:has(.bezeichnung_second_language) .bezeichnung_second_language {
    width: 30%;
    border: 0px;
}

.formular_einfach:has(.bezeichnung_second_language) .multilingual,
.formular_textfeld_zweifach:has(.bezeichnung_second_language) .multilingual,
.formular_textfeld_dreifach:has(.bezeichnung_second_language) .multilingual {
    width: 40%;
}

/* Fremdsprach-Label rechtsbuendig; spiegelt die .inputLike-Metriken des DE-Labels
   (5px/1rem Padding + line-height 2.4rem), damit beide Labels auf einer
   gemeinsamen vertikalen Mittellinie mit dem Eingabefeld sitzen und symmetrisch
   1rem vom jeweiligen Rand entfernt sind. box-sizing wegen fehlendem globalen Reset. */
.formular_einfach:has(.bezeichnung_second_language) .bezeichnung_second_language,
.formular_textfeld_zweifach:has(.bezeichnung_second_language) .bezeichnung_second_language,
.formular_textfeld_dreifach:has(.bezeichnung_second_language) .bezeichnung_second_language {
    text-align: right;
    padding: 5px 1rem;
    line-height: 2.4rem;
    box-sizing: border-box;
}

#tabs div.tab form input,
#tabs div.tab form select,
#tabs div.tab form textarea {
    width: 100%;
}

.multiLineText {
    width: 100%;
}

.anmeld_buttons_with_info {
    text-align: center;
    margin-top: 1.5rem;
}

div.buttonweiter input {
    cursor:pointer;
    height:30px;
    width:105px;
    color:#ffffff;
    font-weight:bold;
    border:none;
    overflow:visible;
    margin:0px;
    padding:0px 4px 2px 4px;
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, sans-serif
}
.weiterstd {background:url('../images/weiter_hell.png') left  no-repeat;}
.weiterhover {background:url('../images/weiter_dunkel.png') left  no-repeat;}

div.buttonzurueck input {cursor:pointer; height:30px; width:105px; color:#ffffff; font-weight:bold; border:none; overflow:visible; display:inline; margin:0px; padding:0px 4px 2px 4px; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif}

#topZurueckButton, #topWeiterButton {
    margin-left: 40%;
    color: var(--atlantis-blue);
    background: none;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1rem;
}
#topZurueckButton {
    position: absolute;
    left: 60px;
    width: fit-content;
}
#topWeiterButton {
    position: absolute;
    right: 60px;
    width: fit-content;
}
div:has(>#topZurueckButton), div:has(>#topWeiterButton) {
   position: relative;
}
#buttonZurueckArrow, #buttonWeiterArrow {
    content: "";
    display: inline-block;
    width: 300px;
    height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
    cursor: pointer;
}
#buttonZurueckArrow {
    left: -95px;
    /* fill = --atlantis-blue (#84b1d8dd) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g transform='translate(24 0) scale(-1 1)'><path fill='%2384b1d8dd' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/></g></svg>");
}
#buttonWeiterArrow {
    right: -95px;
    /* fill = --atlantis-blue (#84b1d8dd) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%2384b1d8dd' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/></svg>");
}
#buttonZurueckArrow:hover {
    /* fill = --atlantis-blue-selected (#84b1d8ff) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><g transform='translate(24 0) scale(-1 1)'><path fill='%2384b1d8ff' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/></g></svg>");
}
#buttonWeiterArrow:hover {
    /* fill = --atlantis-blue-selected (#84b1d8ff) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%2384b1d8ff' d='M9.29 6.71a1 1 0 0 1 1.42 0L16 12l-5.29 5.29a1 1 0 1 1-1.42-1.42L13.17 12L9.29 8.12a1 1 0 0 1 0-1.41z'/></svg>");
}

body#page_anmeldung.isMobile .ui-tabs .ui-tabs-nav li {
    margin-top: 0;
}

body.isMobile #topZurueckButton {
    position: relative;
    left: unset;
    margin-left: unset;
}

body.isMobile #topWeiterButton {
    position: relative;
    right: unset;
    margin-left: unset;
}
body.isMobile #buttonZurueckArrow {
    position: relative;
    width: 2rem;
    height: 2rem;
    bottom: unset;
    left: unset;
    top: unset;
    transform: unset;
    order: -1;
}
body.isMobile #buttonWeiterArrow {
    position: relative;
    width: 2rem;
    height: 2rem;
    right: unset;
    top: unset;
    transform: unset;
}

body.isMobile .tabsHeaderContainer {
    position: sticky;
    top: var(--mobile-header-height, 0px);
    background-color: white;
    z-index: 100;
    border-bottom: var(--atlantis-std-border);
}

.tabsHeaderButtons {
    pointer-events: none; /* container is transparent to clicks */
    position: fixed;
    bottom: 50vh;
    width: calc(100% - 0.4rem);
}
body.isMobile .tabsHeaderButtons {
    bottom: 0;
}
.tabsHeaderButtons > div {
    pointer-events: auto; /* this child still receives clicks */
}

.formular_textfeld_dreifach textarea,
.formular_textfeld_zweifach textarea,
.formular_textfeld_dreifach textarea {
    resize: none;
}

.ui-tabs #pupilTabs.ui-tabs-nav li {
    margin-right: 1rem;
}

.verticalScrollDesign {
    border-bottom: 2px solid grey;
    margin-bottom: 6rem;
    padding-bottom: 6rem;
}

#tabs .dataTables_filter {
    text-align: right;
}

#tabs .dataTables_filter input[type='search'] {
    width: 40%;
}

#tabs .dataTables_scrollBody table {
    width: calc(100% - 1px) !important;
}

#page_pupil_info .ui-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page_webFormMgmt .wffContainer {
    border-radius: 1rem;
}

.wffContainer input::placeholder {
    opacity: 0;
}
body.isMobile .wffContainer input::placeholder {
    opacity: unset;
}
.wffContainer select:invalid,
.wffContainer select:has(option[value=""]:checked) {
    color: transparent;
}
.wffContainer select option {
    color: initial;
}
body.isMobile .wffContainer select:invalid,
body.isMobile .wffContainer select:has(option[value=""]:checked) {
    color: var(--atlantis-lightgrey);
}
body.isMobile .wffContainer select option {
    color: grey;
}
body.isMobile .wffContainer input.error::placeholder,
body.isMobile .wffContainer textarea.error::placeholder {
    color: red;
}
body.isMobile .file-label-mobile {
    align-self: center;
    padding-left: 0.5rem;
}
body.isMobile .wffContainer:has(input[type="file"].error) .file-label-mobile {
    color: red;
}
body.isMobile .wffContainer select.error:invalid,
body.isMobile .wffContainer select.error:has(option[value=""]:checked) {
    color: red;
}

/* ---- Mobile: fixierte Bodenleiste ----------------------------------------
   Layout: [Zurück]  [Impressum] [Datenschutz]  [Weiter]
   .tabsHeaderButtons ist bereits position:fixed; bottom:0 auf Mobile.
   Der Impressum/Datenschutz-Container bekommt ebenfalls fixed+bottom:0,
   überlappt transparent die Mitte der Leiste (pointer-events:none auf
   dem Container, pointer-events:auto auf den Link-Kindknoten).
-------------------------------------------------------------------------- */
body.isMobile .tabsHeaderButtons {
    left: 0;
    width: 100%;
    height: 3rem;
    align-items: center;
    background: white;
    border-top: var(--atlantis-std-border);
    z-index: 100;
}
body.isMobile .buttonzurueck,
body.isMobile .buttonweiter {
    align-items: center;
}

body#page_anmeldung.isMobile .flexEnd.flexCenterCenter {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3rem;
    z-index: 101;
    pointer-events: none;
}

body.isMobile #tabs {
    padding-bottom: 4rem;
}

/* Checkbox + Upload: Label und Control in einer Zeile (falls Platz vorhanden) */
body.isMobile .formular_einfach:has(.toggleButton) {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
body.isMobile .formular_einfach:has(.toggleButton) .bezeichnung {
    width: auto !important;
    flex: 1;
    min-width: 0;
}
body.isMobile .formular_einfach:has(.toggleButton) .eingabe {
    width: auto !important;
    flex-shrink: 0;
    margin-top: 0;
}

body.isMobile#page_pupil_info #tabs div.tab,
body.isMobile#page_address #tabs div.tab {
    width: 100%;
}