@charset "UTF-8";

/**
 * Modernes Erscheinungsbild (Override-Stylesheet).
 * Wird als letztes Stylesheet geladen und überschreibt die rein optischen
 * Eigenschaften der älteren Dateien. Layout-Mechanik (Breiten, Positionierung)
 * bleibt unverändert.
 */

:root{
    --c-primary: #0e7490;
    --c-primary-dark: #0b5a71;
    --c-primary-soft: #e0f2f7;
    --c-accent: #e11d48;
    --c-accent-soft: #fff1f3;
    --c-ink: #1e293b;
    --c-ink-soft: #64748b;
    --c-line: #e2e8f0;
    --c-surface: #ffffff;
    --c-bg: #f1f5f9;
    --c-ok: #15803d;
    --radius: 12px;
    --radius-s: 8px;
    --shadow-s: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --shadow-m: 0 4px 6px -1px rgba(15,23,42,.08), 0 10px 24px -6px rgba(15,23,42,.12);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ################ Basis ################ */
html{-webkit-text-size-adjust: 100%;}
body,
body#system0{
    background: linear-gradient(180deg, #e8f1f5 0%, var(--c-bg) 320px) fixed var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
::selection{background: var(--c-primary); color: #fff;}

a{color: var(--c-primary); transition: color .15s ease;}
a:hover{color: var(--c-accent);}

h1,h2,h3,h4,h5{color: var(--c-ink); font-family: var(--font); font-weight: 650; letter-spacing: -.01em; line-height: 1.25;}
body #content h1{font-size: 26px; margin: 4px 0 12px;}
body #content h4{color: var(--c-ink-soft); font-size: 13px; font-weight: 500;}

/* Rundungen vereinheitlichen */
.rc_s{border-radius: var(--radius-s);}
.rc_m{border-radius: var(--radius);}
.rc_b{border-radius: 20px;}
.rc_m_bot{border-radius: 0 0 var(--radius) var(--radius);}
.rc_m_top{border-radius: var(--radius) var(--radius) 0 0;}

/* ################ Header ################ */
body #header,
body #headerWundManager{
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border: 0;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 6px 20px -8px rgba(15,23,42,.18);
}
body #header{border-radius: 0 0 var(--radius) var(--radius); margin-bottom: 12px;}
body #headerWundManager.wunde24ddnsnet{background: rgba(255,241,243,.92);}
body #headerWundManager.wunde24local{background: rgba(236,253,245,.92);}
#headerLogo img{max-height: 44px; width: auto;}
#languages img{border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,23,42,.15);}
#languages .available{opacity: .55; transition: opacity .15s;}

/* ################ Navigation ################ */
body #nav_main{
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-s);
    padding: 12px 20px;
}
body #nav_main a{color: var(--c-ink); font-size: 14px; font-weight: 500;}
body #nav_main a:hover{color: var(--c-primary);}

body #nav_admin{background: var(--c-ink); border-radius: var(--radius-s);}
body #headerWundManager #nav_admin{background: transparent;}
body #headerWundManager #nav_admin ul.firstLevel li{
    background: transparent;
    border: 0;
    border-radius: var(--radius-s);
    color: var(--c-ink);
    font-weight: 600;
    padding: 15px 14px;
    transition: background-color .15s, color .15s;
}
body #headerWundManager #nav_admin ul.firstLevel a li{color: var(--c-ink);}
body #headerWundManager #nav_admin ul.firstLevel li:hover,
body #headerWundManager #nav_admin ul.firstLevel a li:hover{background: var(--c-primary-soft); color: var(--c-primary-dark);}

body #nav_admin ul.secondLevel{
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-m);
    overflow: hidden;
    padding: 4px 0;
}
body #nav_admin ul.secondLevel li{height: auto; padding: 6px 14px; transition: background-color .12s;}
body #nav_admin ul.secondLevel li a{color: var(--c-ink); font-size: 14px;}
body #nav_admin ul.secondLevel li.separator{background: var(--c-line); height: 1px; padding: 0; margin: 4px 0;}
body #nav_admin ul.secondLevel li:hover,
body #headerWundManager #nav_admin ul.secondLevel li:hover,
body #headerWundManager #nav_admin ul.secondLevel li:hover a{
    background: var(--c-primary-soft);
    border-color: transparent;
    color: var(--c-primary-dark);
}
body #nav_admin input{background: #fff; border: 1px solid var(--c-line); border-radius: 6px; padding: 3px 6px;}

body #headerNav{background: var(--c-surface); box-shadow: var(--shadow-m);}
#headerNav .menuLink{color: var(--c-primary); font-weight: 500;}

/* Benutzermenü */
body #userMenu{
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-m);
    overflow: hidden;
}
body #userMenu li{font-weight: 500; padding: 8px 28px;}
body #userMenu li:hover{background: var(--c-accent); color: #fff; text-shadow: none;}
body #loginMenu li:hover{background: var(--c-ink); text-shadow: none;}
body #headerWundManager #userName{color: var(--c-ink-soft);}
#userName .userName{color: var(--c-ink); text-shadow: none;}

/* ################ Inhaltsbereich ################ */
body #content,
body #sb1,
body #sb2{
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-s);
}
body #page #content{background: rgba(255,255,255,.9);}
body #sb1,
body #sb2{padding: 14px;}
body #content{padding: 24px;}
#sb1 li a,
#sb2 li a{border-radius: 6px; display: block; padding: 4px 8px;}
#sb1 li a:hover,
#sb2 li a:hover{background: var(--c-primary-soft);}

body #info{background: var(--c-primary-soft); border-radius: var(--radius-s); color: var(--c-primary-dark);}
.fail{background: var(--c-accent-soft); border: 1px solid #fecdd3; border-radius: var(--radius-s); color: #9f1239; padding: 10px 14px;}

.sectionWrapper{
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-s);
    padding: 20px 22px;
}
.backgroundFrame{background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);}
.entityWrapperHeadline{
    background: var(--c-primary-soft);
    border: 0;
    border-radius: var(--radius-s);
    box-shadow: none;
    color: var(--c-primary-dark);
    font-weight: 600;
    text-shadow: none;
}
.whiteBackground{border: 1px solid var(--c-line); border-radius: var(--radius);}
#content #welcome{color: var(--c-primary); font-size: clamp(36px, 7vw, 72px); font-weight: 700; text-shadow: none;}
.content img{background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-s);}
#gotoTestAccount{background: linear-gradient(135deg, var(--c-primary-soft), #fff); border-radius: var(--radius); box-shadow: var(--shadow-m);}

/* ################ Formulare ################ */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="tel"], input[type="date"], input[type="search"], input[type="url"],
input:not([type]), textarea, select, .tx{
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-s);
    color: var(--c-ink);
    font-family: inherit;
    font-size: 14px;
    padding: 7px 10px;
    transition: border-color .15s, box-shadow .15s;
}
input[type="checkbox"], input[type="radio"]{accent-color: var(--c-primary);}
input:focus, textarea:focus, select:focus{
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(14,116,144,.2);
    outline: none;
}
select{color: var(--c-ink-soft);}
select.selected{color: var(--c-ink);}
::placeholder{color: #94a3b8;}
label, .label{color: var(--c-ink-soft); font-weight: 500;}
body #content .sectionWrapper input,
body #content .sectionWrapper select{font-weight: 600;}
.select{background: var(--c-ink); border-radius: 6px;}

/* ################ Buttons ################ */
.button, .submitButton, button, input[type="submit"], input[type="button"]{
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-s);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 16px;
    transition: background-color .15s, box-shadow .15s, transform .05s;
}
.button:hover, .submitButton:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover{
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
    box-shadow: var(--shadow-m);
    color: #fff;
}
.button:active, .submitButton:active, button:active{transform: translateY(1px);}
.button:focus-visible, button:focus-visible, a:focus-visible{outline: 3px solid rgba(14,116,144,.35); outline-offset: 2px;}
.delete.button, .button.delete{background: #fff; border-color: #fecdd3; color: var(--c-accent);}
.delete.button:hover, .button.delete:hover{background: var(--c-accent); border-color: var(--c-accent); color: #fff;}
button:disabled, .button.inActive, input[type="submit"]:disabled{opacity: .5; cursor: not-allowed; box-shadow: none;}
/* Bild-/Icon-Buttons nicht überfärben */
.searchButton, #popup_form_close, #menuButton{background-color: transparent; border: 0; box-shadow: none; padding: 0;}
.searchButton:hover{background-color: transparent; box-shadow: none;}
#inventoryBalancingButton{background: #fff; color: var(--c-accent); border-color: #fecdd3;}
#inventoryBalancingButton:hover:not(:disabled){background: var(--c-accent); color: #fff;}

/* ################ Tabellen & Listen ################ */
table{border-collapse: collapse;}
table th{background: var(--c-bg); color: var(--c-ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase;}
table th, table td{border-bottom: 1px solid var(--c-line); padding: 8px 10px;}
table tr:hover td{background: #f8fafc;}
.listLine{border-bottom: 1px solid var(--c-line); transition: background-color .12s;}
.listLine:hover{background: #f8fafc;}
.list .listLine:first-child{color: var(--c-ink-soft); font-weight: 600;}
#pageList #list_head .list_field{color: var(--c-ink-soft);}
#loginList{border: 1px solid var(--c-line); border-radius: var(--radius-s);}

/* ################ Popups & Dialoge ################ */
body #popup,
#confirmBox{
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px -12px rgba(15,23,42,.35);
}
body #popupBackground{background: rgba(15,23,42,.55); border: 0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
#popupAddDoctor{background: var(--c-surface);}
body #toolTip{
    background: var(--c-ink);
    border: 0;
    border-radius: 6px;
    box-shadow: var(--shadow-m);
    color: #fff;
    font-size: 13px;
    height: auto;
    width: auto;
}
.helpContent{background: var(--c-ink); border: 0; border-radius: var(--radius-s); box-shadow: var(--shadow-m);}
.ui-widget.ui-autocomplete{border: 1px solid var(--c-line); border-radius: var(--radius-s); box-shadow: var(--shadow-m); font-family: var(--font);}
#ui-id-1 .ui-state-active{background: var(--c-primary-soft) !important; border: 0 !important; border-radius: 6px; color: var(--c-primary-dark);}
.ui-datepicker{border-radius: var(--radius); box-shadow: var(--shadow-m);}

/* ################ Footer ################ */
body #footer{
    background: transparent;
    color: var(--c-ink-soft);
    margin-top: 28px;
    padding-bottom: 20px;
}
.bottomMenuItem{font-size: 12px;}
.bottomMenuItem.separator{border-left: 1px solid var(--c-line);}
#footer a{color: var(--c-ink-soft);}
#footer a:hover{color: var(--c-primary);}

/* ################ Feinschliff ################ */
html{scroll-behavior: smooth;}
::-webkit-scrollbar{height: 10px; width: 10px;}
::-webkit-scrollbar-thumb{background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box;}
::-webkit-scrollbar-thumb:hover{background: #94a3b8; background-clip: content-box; border: 2px solid transparent;}
@media (prefers-reduced-motion: reduce){*{transition: none !important; scroll-behavior: auto !important;}}

/* ################ Layout ################ */
body #page-wrapper{
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1560px;
    min-width: 0;
    padding: 0 clamp(12px, 2vw, 32px);
    width: 100% !important;
}
body #header{min-width: 0; width: auto;}
body #headerWundManager{box-sizing: border-box;}
body #headerWundManager #headerLogo{margin: 4px auto 0; width: auto;}
body #nav_admin.fixed{max-width: 100%; width: 100%;}

/* Hauptbereich: Flexbox statt Floats */
body #main{align-items: flex-start; display: flex; gap: 20px;}
body #main:before,
body #main:after{display: none;}
body #main > #sb1,
body #main > #content,
body #main > #sb2{float: none !important; left: auto !important; margin: 0 !important; width: auto !important; box-sizing: border-box;}
body #main > #content{flex: 1 1 0; min-width: 0;}
body #main > #sb1,
body #main > #sb2{display: none; flex: 0 0 280px; min-width: 0; position: sticky; top: 76px;}
body.sb1 #main > #sb1,
body.sb2 #main > #sb2{display: block;}
body.page_edit #main > #sb1{flex-basis: 25%;}
body #content{padding: clamp(14px, 2vw, 28px);}

/* Inhalt nicht endlos in die Breite ziehen (Startseite, Texte) */
body #page #content{max-width: 900px; margin: 0 auto !important; float: none !important; width: 100% !important;}

/* Tablets & Handys: alles untereinander */
@media (max-width: 960px){
    body #main{flex-direction: column;}
    body #main > #sb1,
    body #main > #sb2,
    body #main > #content{flex: 1 1 auto; position: static; width: 100% !important;}
    body #headerWundManager #headerLogo{margin-left: 52px; margin-right: 110px; text-align: center;}
    #headerLogo img{max-height: 36px;}
    body #content h1{font-size: 22px;}
    table{display: block; overflow-x: auto;}
}
@media (max-width: 560px){
    body{font-size: 14px;}
    body #content{padding: 14px;}
    .sectionWrapper{padding: 14px;}
    .bottomMenuItem{float: none; display: inline-block;}
}

/* ################ Template-Komponenten ################ */

/* Karten */
.card, .formCard, .categoryCard{
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-s);
    padding: 20px 22px;
}
.narrowCard{margin: 24px auto; max-width: 460px;}
.categoryCard{margin-bottom: 14px; transition: box-shadow .15s, transform .15s;}
.categoryCard:hover{box-shadow: var(--shadow-m); transform: translateY(-1px);}
.categoryCard h2{font-size: 18px; margin: 0 0 6px;}
.categoryCard h2 a{color: var(--c-primary);}
.categoryCard .created, .categoryCard .author{color: var(--c-ink-soft); display: inline; font-size: 12px; margin: 0 10px 0 0;}
.categoryCard #p_content{color: var(--c-ink-soft); margin-top: 6px;}

/* Seiteninhalt (content.tpl) */
.pageArticle{line-height: 1.7; max-width: 78ch;}
.pageArticle h1{font-size: 30px; margin-bottom: 8px;}
.pageArticle #page_content p{margin: 0 0 1em;}
.pageArticle .created, .pageArticle .author{color: var(--c-ink-soft); font-size: 12px; margin: 0;}
.pageArticle .editLink{float: right; text-decoration: none;}
.category_back_link{border-top: 1px solid var(--c-line); margin-top: 24px; padding-top: 12px;}

/* Statusseiten (404, keine Rechte, Wartung …) */
.statusCard{
    align-items: center;
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: 16px;
    box-shadow: var(--shadow-m);
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 6vh auto !important;
    max-width: 520px;
    padding: 36px 28px !important;
    text-align: center;
    width: auto !important;
}
.statusCard .statusIcon{
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 30px;
    font-weight: 700;
    height: 64px;
    justify-content: center;
    width: 64px;
}
.statusCard.statusInfo .statusIcon{background: var(--c-primary-soft); color: var(--c-primary);}
.statusCard.statusError .statusIcon{background: var(--c-accent-soft); color: var(--c-accent);}
.statusCard.statusWarn .statusIcon{background: #fef3c7; color: #b45309;}
.statusCard .fail, .statusCard .highlight{background: none; border: 0; padding: 0; color: var(--c-ink); font-size: 16px;}
.statusCard i{font-style: normal;}

/* Formulare (form.tpl, password.tpl) */
.modernForm, .modernFormTable{display: flex; flex-direction: column; gap: 14px;}
.formLine{display: flex; flex-direction: column; gap: 4px;}
.formLine label{font-size: 13px;}
.formLine input, .formLine select, .formLine textarea{width: 100%; box-sizing: border-box;}
.formActions{margin-top: 4px;}
.formActions input[type="submit"]{width: auto; align-self: flex-start;}
#password_form_wrapper .description{color: var(--c-ink-soft); margin: 0 0 12px;}
#password_form_wrapper #message:empty{display: none;}

/* Listen (list.tpl, listPlain.tpl, searchList.tpl) */
.dataList, .list{background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;}
.listLine, .list_line{align-items: center; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 9px 14px;}
#listHead .listLine, #list_head .list_line{background: var(--c-bg); border-bottom: 1px solid var(--c-line); color: var(--c-ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;}
#listBody .listLine[onclick], #list_body .list_line[onclick]{cursor: pointer;}
#listBody .listLine:hover, #list_body .list_line:hover{background: var(--c-primary-soft);}
.listField, .list_field{flex: 1 1 100px; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.edit_field{display: flex; flex: 0 0 auto; gap: 6px; justify-content: flex-end;}
.list_edit_icon a{align-items: center; border-radius: 6px; display: inline-flex; height: 30px; justify-content: center; width: 30px; transition: background-color .12s;}
.list_edit_icon a:hover{background: var(--c-primary-soft);}
.list_edit_icon img{height: 18px; width: 18px; object-fit: contain; margin: 0; padding: 0; border: 0; background: none;}
.list > h2, h2 + .list{margin-top: 10px;}

/* Paginierung */
.paginationBar{align-items: center; background: var(--c-bg); border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px;}
.paginationBar > div{float: none !important;}
.paginationBar #Next{margin-left: auto;}
.paginationInfo{color: var(--c-ink-soft); font-size: 13px;}
.paginationNumberField{color: var(--c-ink); font-weight: 600;}
.paginationButton{background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 6px; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 500; margin-right: 4px; padding: 4px 12px; user-select: none; transition: background-color .12s, border-color .12s;}
.paginationButton:hover{background: var(--c-primary-soft); border-color: var(--c-primary);}
.paginationMoveTo input{margin-left: 6px; padding: 3px 6px; text-align: center; width: 52px;}

/* Aufklappbare Panels (Seitenleiste sb1) */
.folded{background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-s); margin-bottom: 12px; overflow: hidden;}
.foldHead{background: var(--c-bg); cursor: pointer; font-weight: 600; padding: 9px 12px;}
.foldHead:hover{background: var(--c-primary-soft);}
.folderImage{align-items: center; background: var(--c-surface); border-radius: 50%; color: var(--c-primary); display: inline-flex; font-weight: 700; height: 22px; justify-content: center; width: 22px;}
.foldBody{padding: 10px 12px;}
.orderDetails{margin-top: 6px; width: 100%;}

/* Vertikales Menü (mobil/Benutzeroptionen) */
.verticalMenu .positionName{color: var(--c-ink-soft); font-size: 12px; font-weight: 700; letter-spacing: .06em; margin: 14px 2% 4px; text-transform: uppercase;}
.verticalMenu .menuLink{border-radius: var(--radius-s); color: var(--c-ink); margin: 1px 2%; padding: 8px 12px; transition: background-color .12s;}
.verticalMenu .menuLink:hover{background: var(--c-primary-soft); color: var(--c-primary-dark);}
.verticalMenu a{text-decoration: none;}
#maintenanceSwitchWrapper{background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-s);}
#maintenanceSwitchWrapper.active{background: var(--c-accent-soft); border-color: #fecdd3; color: #9f1239;}
#maintenanceSwitchWrapper input:checked + .maintenanceSlider{background: var(--c-accent);}
#maintenanceSwitchWrapper .maintenanceSlider{background: #cbd5e1;}
#inventoryBalancingResult.ok{color: var(--c-ok);}

/* Benutzer-Anzeige im Header */
body #userName{align-items: center; display: flex; float: none; gap: 8px; padding: 4px 16px 4px 0;}
#userName .userAvatar{align-items: center; background: var(--c-primary); border-radius: 50%; color: #fff; display: inline-flex; font-size: 13px; font-weight: 700; height: 28px; justify-content: center; width: 28px;}
#userName .userWelcome{color: var(--c-ink-soft); display: none;}
#userName .userName, #userName .user_name{color: var(--c-ink); font-size: 14px; font-weight: 600; padding: 0;}

/* Footer (footer.tpl) */
.footerInner{align-items: center; display: flex; flex-wrap: wrap; gap: 6px 0; justify-content: space-between;}
.footerInner .bottomMenuItem{float: none; margin: 0; padding: 0 10px;}
.footerInner #powered_by{padding-left: 0;}
.footerInner .bottomMenuItem.separator{border-left: 1px solid var(--c-line);}
.footerInner #dataProtection{margin-left: auto;}
.footerInner #dataProtection{margin-top: 0;}