/*
 * Responsive-Ergaenzungen fuer office.thomas-steinlechner.com
 * Diese Datei nach styles/skin.css einbinden.
 */

@media screen and (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-width: 0;
        background: #f3f4f5;
        color: #1a1a1a;
    }

    body,
    p,
    div,
    td {
        font-size: 13px;
        line-height: 1.45;
    }

    body,
    body * {
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .OuterHolder {
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
    }

    div#Holder {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Kopfbereich */
    div#Navigation {
        padding: 0 14px;
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
    }

    h1#Main {
        position: relative;
        height: 112px !important;
        min-height: 112px;
        margin: 0 !important;
        padding: 0 !important;
        background-size: auto 72px;
        background-position: 0 4px;
    }

    h1#Main img#Logo {
        width: 76px !important;
        height: 76px !important;
        float: none;
    }

    h1#Main ul#GeoPath {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        height: 32px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 7px 0 0 !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    h1#Main ul#GeoPath li {
        float: none;
        flex: 0 0 auto;
    }

    h1#Main ul#GeoPath li a {
        display: block;
        padding: 2px 2px 8px;
        font-size: 12px;
        font-weight: 600;
    }

    h1#Main div#Name {
        position: absolute;
        top: 24px;
        right: 26px;
        max-width: calc(100% - 125px);
        height: auto !important;
        padding: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    h1#Main div#Name a {
        color: #333;
        font-size: 12px;
    }

    h1#Main div#SwitchInstanceArrow {
        position: absolute;
        top: 24px;
        right: 0;
        padding: 2px 0 8px 8px !important;
    }

    div#SwitchInstance {
        top: 62px !important;
        right: 12px !important;
        left: auto !important;
        max-width: calc(100vw - 24px);
    }

    div#SwitchInstance ul {
        width: min(250px, calc(100vw - 24px));
        margin: 0 !important;
    }

    h1.Sub {
        height: auto !important;
        min-height: 44px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        background: #1b1b1b;
    }

    h1.Sub ul {
        display: flex;
        width: max-content;
        margin: 7px !important;
    }

    h1.Sub a {
        display: block;
        padding: 6px 4px;
    }

    h1.Sub li {
        float: none;
        flex: 0 0 auto;
    }

    /* Inhalt und zweispaltige Bereiche */
    div#Content {
        width: 100%;
        min-height: calc(100vh - 112px);
        padding: 14px;
        overflow-x: hidden;
        background: #f3f4f5;
    }

    div.Content {
        padding: 14px !important;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    div#Content > .Left > .ConxtentDark,
    div#Content > .Left > .ContentDark1 {
        margin-bottom: 14px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    div#Content > .Left > .ConxtentDark > .Padding,
    div#Content > .Left > .ContentDark1 > .Padding {
        padding: 14px;
    }

    div#Content > .Left > .ConxtentDark > .Padding > strong,
    div#Content > .Left > .ContentDark1 > .Padding > strong {
        display: block;
        margin-bottom: 10px;
        font-size: 15px;
    }

    div#Content > .Left,
    div#Content > .Right,
    div.Column,
    div.ColumnLeft,
    div.ColumnRight {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    div.ColumnRight {
        margin-top: 24px !important;
    }

    div.Column > div,
    div.ColumnLeft > div,
    div.ColumnRight > div,
    ul.Phases {
        max-width: 100%;
    }

    ul.Phases {
        width: 100% !important;
    }

    h4 {
        padding: 2px 2px 14px;
        font-size: 15px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    h5,
    div.Title {
        font-size: 14px;
    }

    /* Register und Werkzeugleisten */
    ul.Tabs,
    ul.ContentTabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
        margin: 0 0 12px !important;
        padding: 0 !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    ul.Tabs::-webkit-scrollbar,
    ul.ContentTabs::-webkit-scrollbar {
        display: none;
    }

    ul.Tabs li,
    ul.ContentTabs li {
        float: none !important;
        display: block !important;
        padding: 0 !important;
    }

    ul.Tabs li a,
    ul.ContentTabs li a {
        display: block;
        min-height: 38px;
        padding: 10px 12px;
        background: #e8e9ea;
        border-radius: 6px;
        color: #333;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    ul.Tabs li.Active a,
    ul.ContentTabs li.Active a {
        background: #000;
        color: #fff;
    }

    #ProjectFastChange {
        width: 100%;
        max-width: 100%;
        height: 42px;
        margin: 0 0 14px !important;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #d4d4d4;
        border-radius: 6px;
    }

    div.Tool,
    div.InPageTool,
    div#FormActions {
        overflow: hidden;
    }

    div#FormActions .Right {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Formulare */
    div.Field {
        padding: 7px 0;
    }

    div.FieldTitle,
    div.FieldTitleRequired,
    div.FieldContent,
    div.FieldInput,
    div.FieldInputLarge {
        float: none !important;
        width: 100% !important;
    }

    div.FieldTitle,
    div.FieldTitleRequired {
        padding: 0 0 5px !important;
        color: #666;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    div.FieldTitleRequired {
        color: #111;
    }

    div.FieldInput,
    div.FieldInputLarge,
    div.FieldContent {
        min-height: 28px;
    }

    div.FieldInput input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
    div.FieldInput textarea,
    div.FieldInput select,
    div.FieldInputLarge input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
    div.FieldInputLarge textarea,
    div.FieldInputLarge select,
    textarea.BigTextarea,
    textarea.Field {
        width: 100% !important;
        max-width: 100%;
    }

    div.FieldInput input.FieldCalender {
        width: calc(100% - 30px) !important;
    }

    div.FieldInput input.Button {
        float: none !important;
        margin-top: 6px;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        min-height: 42px;
        padding: 9px 10px;
        background-color: #fff;
        border: 1px solid #d4d4d4;
        border-radius: 6px;
        font-size: 16px;
        line-height: 1.35;
        outline: none;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: #111;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    }

    input[type="checkbox"],
    input[type="radio"],
    input[type="hidden"] {
        min-height: 0;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px;
        padding: 0;
        accent-color: #000;
    }

    input.Button,
    a.Button {
        min-height: 40px;
        padding: 9px 12px;
        background: #111;
        border: 1px solid #111;
        border-radius: 6px;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    input.Spotlight,
    input.FieldISearch,
    div.FieldInput input.FieldISearchText {
        width: 100% !important;
        max-width: 100%;
    }

    div.iSearchResults {
        float: none !important;
        width: 100%;
        margin: 6px 0 0 !important;
    }

    div.FieldInput > div[style*="padding-top"] {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    div.FieldInput [id^="iSearchResults"] {
        float: none !important;
        flex: 1 1 180px;
        min-width: 0;
        margin-left: 6px !important;
    }

    /* Tabellen bleiben voll nutzbar und koennen seitlich gescrollt werden. */
    table.List,
    table.InPageList,
    table.Dashboard {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border: 0;
        border-radius: 6px;
    }

    table.List th,
    table.List td,
    table.InPageList th,
    table.InPageList td {
        min-width: 80px;
        padding: 9px 7px;
    }

    table.List th,
    table.InPageList th {
        background: #ededed;
        color: #555;
        font-size: 10px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    table.List td,
    table.InPageList td {
        padding: 9px 7px;
        border-color: #e6e6e6;
    }

    table.List td:first-child,
    table.List th:first-child {
        min-width: 140px;
    }

    #ClientOverview-Table td,
    #ClientOverview-Table th {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #ClientOverview-Table td {
        padding: 10px 8px;
        line-height: 1.35;
    }

    #ClientOverview-Table a {
        display: block;
    }

    ul.Phases {
        padding: 8px !important;
        background: #e9eaeb;
        border-radius: 6px;
    }

    ul.Phases li {
        padding: 10px !important;
        border-radius: 4px;
    }

    /* Sehr breite Drag-/Summenlisten: bewusst horizontal scrollbar. */
    ul.DragList,
    #SummeTop,
    #SummeBottom {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Kalender */
    div#Calendar {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    div#Calendar .Users,
    div#Calendar .UsersLong,
    div#Calendar .Months {
        float: none;
    }

    div#Calendar input.FieldText {
        width: 100% !important;
    }

    /* Overlays */
    div#Window {
        position: fixed;
        overflow: auto;
    }

    div#WindowContainer {
        width: calc(100% - 20px) !important;
        max-width: 100%;
        margin: 10px;
        border-radius: 8px;
    }
}

@media screen and (max-width: 520px) {
    div#Navigation {
        padding: 0 10px;
    }

    div#Content {
        padding: 10px;
    }

    div.Content {
        padding: 12px !important;
    }

    h1#Main div#Name {
        font-size: 11px;
    }

    ul.Tabs li a,
    ul.ContentTabs li a {
        min-height: 40px;
    }

    div#FormActions .Right input.Button {
        width: 100% !important;
    }

    div.Paging {
        line-height: 28px;
    }
}