/* =========================================================
   EXTRUSIA SUPPORT – CORPORATE DESIGN BASIS
   ========================================================= */


/* =========================================================
   SCHRIFT
   ========================================================= */

@font-face {
    font-family: "Inter";
    src: url("https://extrusia.de/wp-content/uploads/fonts/inter/InterVariable.woff2")
         format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}


/* =========================================================
   BASIS
   ========================================================= */

:root {
    --ex-orange: #F3703C;
    --ex-charcoal: #20282E;
    --ex-dark: #343A40;
    --ex-text: #20282E;
    --ex-muted: #667085;
    --ex-light: #F5F6F7;
    --ex-line: #E5E8EA;
    --ex-orange-soft: #FFF0EA;
}

html,
body {
    margin: 0;
    padding: 0;

    background: #F5F6F7;

    color: var(--ex-text);

    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

body,
input,
textarea,
select,
button {
    font-family: "Inter", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   HAUPTCONTAINER
   ========================================================= */

#container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;
}


/* =========================================================
   HEADER
   ========================================================= */

#header {
    position: relative;

    width: 100%;
    max-width: 1280px;
    min-height: 96px;

    margin: 0 auto;
    padding: 18px 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #FFFFFF !important;

    border: 0;
}


/* rechte Login-/Profilnavigation */
#header .pull-right {
    order: 2;

    float: none !important;

    margin: 0;
    padding: 0;

    text-align: right;
}

#header .pull-right p {
    margin: 0;
    color: var(--ex-muted);
    font-size: 13px;
    line-height: 1.6;
}

#header .pull-right a {
    color: var(--ex-text);
    text-decoration: none;
    transition: color .2s ease;
}

#header .pull-right a:hover {
    color: var(--ex-orange);
}


/* =========================================================
   LOGO
   ========================================================= */

#logo {
    order: 1;

    float: none !important;

    display: flex;
    align-items: center;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;
}

#logo .valign-helper {
    display: none;
}

#logo img {
    display: block;

    width: auto;
    max-width: 300px;
    max-height: 72px;

    height: auto;

    border: 0;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#nav {
    width: 100%;

    margin: 0;
    padding: 0 40px;

    display: flex;
    align-items: center;

    min-height: 56px;

    background: var(--ex-charcoal);

    border: 0;
    list-style: none;
}

#nav li {
    margin: 0;
    padding: 0;

    list-style: none;
}

#nav li a {
    display: flex;
    align-items: center;

    min-height: 56px;

    padding: 0 22px;

    color: #FFFFFF;

    background: transparent;

    border: 0;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease;
}

#nav li a:hover {
    color: var(--ex-orange);
    background: rgba(255,255,255,.04);
}

#nav li a.active {
    color: var(--ex-orange);
    background: rgba(255,255,255,.05);
}


/* =========================================================
   CONTENT
   ========================================================= */

#content {
    width: calc(100% - 48px);
    max-width: 1180px;

    min-height: 520px;

    margin: 42px auto 60px;
    padding: 42px 48px;

    background: #FFFFFF;

    border: 1px solid var(--ex-line);
    border-radius: 10px;

    box-shadow: 0 14px 38px rgba(32,40,46,.06);
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

#content h1,
#content h2,
#content h3,
#content h4 {
    color: var(--ex-charcoal);
    font-family: "Inter", Arial, sans-serif;
    font-weight: 700;
}

#content h1 {
    margin: 0 0 24px;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

#content h2 {
    margin: 34px 0 18px;

    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

#content h3 {
    margin: 26px 0 12px;

    font-size: 22px;
    line-height: 1.3;
}

#content p {
    color: var(--ex-muted);
    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   LINKS
   ========================================================= */

#content a {
    color: var(--ex-orange);
    text-decoration: none;
}

#content a:hover {
    text-decoration: underline;
}


/* =========================================================
   FORMULARE
   ========================================================= */

#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="password"],
#content input[type="number"],
#content select,
#content textarea {

    width: 100%;
    max-width: 100%;

    padding: 12px 14px;

    color: var(--ex-text);

    background: #FFFFFF;

    border: 1px solid #D7DCE0;
    border-radius: 5px;

    font-size: 15px;
    line-height: 1.4;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#content input:focus,
#content select:focus,
#content textarea:focus {

    outline: none;

    border-color: var(--ex-orange);

    box-shadow:
        0 0 0 3px rgba(243,112,60,.10);
}


/* =========================================================
   BUTTONS
   ========================================================= */

#content input[type="submit"],
#content input[type="button"],
#content button,
#content .button {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 12px 22px;

    color: #FFFFFF !important;

    background: var(--ex-orange) !important;

    border: 1px solid var(--ex-orange) !important;
    border-radius: 5px !important;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content button:hover,
#content .button:hover {

    background: var(--ex-charcoal) !important;
    border-color: var(--ex-charcoal) !important;

    transform: translateY(-1px);
}


/* =========================================================
   MELDUNGEN
   ========================================================= */

#msg_error,
.error_bar {
    padding: 14px 18px;

    color: #8B1E1E;

    background: #FFF3F3;

    border: 1px solid #F2CCCC;
    border-left: 4px solid #C84444;

    border-radius: 5px;
}

#msg_notice,
.notice_bar {
    padding: 14px 18px;

    color: #295E39;

    background: #F0F8F2;

    border: 1px solid #CFE4D4;
    border-left: 4px solid #4B9A63;

    border-radius: 5px;
}

#msg_warning,
.warning_bar {
    padding: 14px 18px;

    color: #7A5714;

    background: #FFF9E8;

    border: 1px solid #EAD9A5;
    border-left: 4px solid #D6A63A;

    border-radius: 5px;
}


/* =========================================================
   FOOTER – BASIS
   ========================================================= */

#footer {
    width: 100%;

    margin: 0;
    padding: 28px 40px;

    background: var(--ex-charcoal);

    border: 0;

    text-align: center;
}

#footer p {
    margin: 0 0 6px;

    color: #D6DADD;

    font-size: 13px;
}

#footer a {
    color: #B9C0C5;
    font-size: 12px;
    text-decoration: none;
}

#footer a:hover {
    color: var(--ex-orange);
}


/* =========================================================
   CLEAR-FIX / LEGACY
   ========================================================= */

.clear {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #header {
        padding-left: 26px;
        padding-right: 26px;
    }

    #logo img {
        max-width: 250px;
    }

    #nav {
        padding-left: 20px;
        padding-right: 20px;
    }

    #nav li a {
        padding-left: 16px;
        padding-right: 16px;
    }

    #content {
        width: calc(100% - 36px);

        margin-top: 30px;
        margin-bottom: 42px;

        padding: 34px;
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 650px) {

    #header {
        min-height: 0;

        padding: 18px 20px;

        display: block;
    }

    #logo {
        width: 100%;
        justify-content: center;
    }

    #logo img {
        max-width: 260px;
        max-height: 68px;
    }

    #header .pull-right {
        margin-top: 14px;

        text-align: center;
    }

    #header .pull-right p {
        font-size: 12px;
    }


    /* Navigation auf Smartphone untereinander */

    #nav {
        display: block;

        min-height: 0;

        padding: 8px 20px;

        background: var(--ex-charcoal);
    }

    #nav li {
        width: 100%;
    }

    #nav li:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    #nav li a {
        width: 100%;

        min-height: 48px;

        padding: 12px 4px;

        font-size: 15px;
    }


    /* Inhaltskarte */

    #content {
        width: calc(100% - 24px);

        margin: 20px auto 32px;

        padding: 26px 20px;

        border-radius: 7px;
    }

    #content h1 {
        font-size: 34px;
    }

    #content h2 {
        font-size: 27px;
    }

    #content h3 {
        font-size: 20px;
    }


    /* Formulare */

    #content input[type="submit"],
    #content input[type="button"],
    #content button,
    #content .button {
        width: 100%;
    }


    /* Footer */

    #footer {
        padding: 24px 20px;
    }

}
/* =========================================================
   EXTRUSIA SUPPORT – NAVIGATION BEREINIGEN
   ========================================================= */

#nav li,
#nav li a,
#nav li a:hover,
#nav li a.active {
    background-image: none !important;
}

#nav li a {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Header / Logo etwas kräftiger */
#header {
    min-height: 112px;
}

#logo img {
    max-width: 330px;
    max-height: 82px;
}

/* Alte osTicket-Linkfarben im Inhaltsbereich beseitigen */
#content a {
    color: #F3703C;
}

#content a:hover {
    color: #20282E;
}
/* =========================================================
   EXTRUSIA SUPPORT – STARTSEITE
   ========================================================= */

#content:has(.extrusia-support-home) {
    max-width: 1180px;
    padding: 0;
    overflow: hidden;
}

.extrusia-support-home {
    width: 100%;
}


/* HERO */

.extrusia-support-hero {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    gap: 70px;
    align-items: center;

    padding: 70px 64px;

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(243,112,60,.12),
            transparent 34%
        ),
        #fff;
}

.extrusia-support-eyebrow {
    margin-bottom: 16px;

    color: #F3703C;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
}

.extrusia-support-hero h1 {
    max-width: 650px;

    margin: 0 0 24px !important;

    color: #20282E;

    font-size: clamp(44px,5vw,68px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.04em !important;
}

.extrusia-support-hero-copy > p {
    max-width: 650px;

    margin: 0;

    color: #667085;

    font-size: 18px !important;
    line-height: 1.65 !important;
}


/* HERO INFO */

.extrusia-support-hero-info {
    padding: 32px;

    background: #20282E;

    border-radius: 8px;

    box-shadow: 0 18px 42px rgba(32,40,46,.14);
}

.extrusia-support-info-label {
    margin-bottom: 12px;

    color: #F3703C;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.extrusia-support-hero-info strong {
    display: block;

    margin-bottom: 18px;

    color: #fff;

    font-size: 24px;
    line-height: 1.35;
}

.extrusia-support-hero-info p {
    margin-bottom: 22px !important;

    color: rgba(255,255,255,.72) !important;

    font-size: 14px !important;
}

.extrusia-support-hero-info a {
    color: #F3703C !important;

    font-weight: 700;

    text-decoration: none !important;
}


/* AKTIONSKARTEN */

.extrusia-support-actions {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;

    padding: 60px 64px;

    background: #F5F6F7;
}

#content .extrusia-support-card {
    display: flex;
    flex-direction: column;

    min-height: 300px;

    padding: 36px;

    background: #fff;

    border: 1px solid #E5E8EA;
    border-radius: 8px;

    text-decoration: none !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

#content .extrusia-support-card:hover {
    transform: translateY(-4px);

    border-color: #F3703C;

    box-shadow: 0 16px 36px rgba(32,40,46,.08);
}

.extrusia-support-card-number {
    margin-bottom: 30px;

    color: #F3703C;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
}

.extrusia-support-card h2 {
    margin: 0 0 14px !important;

    color: #20282E !important;

    font-size: 28px !important;
}

.extrusia-support-card p {
    flex-grow: 1;

    margin: 0 !important;

    color: #667085 !important;
}

.extrusia-support-card-link {
    margin-top: 28px;

    color: #F3703C;

    font-weight: 700;
}


/* KONTAKT */

.extrusia-support-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

    padding: 64px;

    background: #fff;
}

.extrusia-support-contact h2 {
    margin: 0 0 16px !important;
}

.extrusia-support-contact-data {
    display: grid;
    gap: 12px;
}

#content .extrusia-support-contact-data a {
    display: block;

    padding: 20px 22px;

    background: #F5F6F7;

    border: 1px solid #E5E8EA;
    border-radius: 6px;

    text-decoration: none !important;
}

.extrusia-support-contact-data span {
    display: block;

    margin-bottom: 4px;

    color: #667085;

    font-size: 13px;
}

.extrusia-support-contact-data strong {
    color: #20282E;

    font-size: 17px;
}


/* KNOWLEDGEBASE */

.extrusia-support-kb,
.extrusia-support-featured {
    padding: 60px 64px;

    background: #F5F6F7;

    border-top: 1px solid #E5E8EA;
}

.extrusia-support-kb form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;

    max-width: 760px;
}


/* MOBILE */

@media (max-width: 760px) {

    .extrusia-support-hero {
        grid-template-columns: 1fr;
        gap: 34px;

        padding: 42px 24px;
    }

    .extrusia-support-hero h1 {
        font-size: 42px !important;
    }

    .extrusia-support-actions {
        grid-template-columns: 1fr;

        padding: 36px 24px;
    }

    #content .extrusia-support-card {
        min-height: 0;

        padding: 28px 24px;
    }

    .extrusia-support-contact {
        grid-template-columns: 1fr;
        gap: 28px;

        padding: 42px 24px;
    }

    .extrusia-support-kb,
    .extrusia-support-featured {
        padding: 42px 24px;
    }

    .extrusia-support-kb form {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   HEADER / NAVIGATION – FEINSCHLIFF
   ========================================================= */

/* Header-Inhalt auf gleiche Breite wie Supportbereich bringen */
#header {
    max-width: 1180px;
    min-height: 92px;

    padding-left: 26px;
    padding-right: 26px;
}


/* Rechte Anmeldung kompakter und hochwertiger */
#header .pull-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-left: auto;
}

#header .pull-right p {
    margin: 0 !important;
}

#header .pull-right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 9px 14px;

    color: #20282E;
    background: #F5F6F7;

    border: 1px solid #E5E8EA;
    border-radius: 5px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

#header .pull-right a:hover {
    color: #FFFFFF;
    background: #20282E;
    border-color: #20282E;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

#nav {
    width: 100%;
    min-height: 54px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #20282E;
}


/* innere optische Breite wie Header / Content */
#nav li:first-child {
    margin-left: 0;
}

#nav li a {
    min-height: 54px;

    padding: 0 24px;

    color: rgba(255,255,255,.90);

    font-size: 14px;
    font-weight: 600;

    border-radius: 0;

    background: transparent !important;
}


/* Hover */
#nav li a:hover {
    color: #F3703C !important;
    background: rgba(255,255,255,.035) !important;
}


/* Aktiver Menüpunkt – ruhiger, wie Hauptwebsite */
#nav li a.active {
    color: #F3703C !important;

    background: transparent !important;

    box-shadow:
        inset 0 -3px 0 #F3703C;
}


/* alte Rundung des ersten Menüpunktes entfernen */
#nav li,
#nav li a {
    border-radius: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    #header {
        padding-left: 22px;
        padding-right: 22px;
    }

    #nav li a {
        padding-left: 18px;
        padding-right: 18px;
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 650px) {

    #header {
        padding: 16px 18px;
    }

    #header .pull-right {
        margin-top: 12px;
        justify-content: center;
    }

    #header .pull-right a {
        min-height: 38px;

        padding: 8px 12px;

        font-size: 12px;
    }

    #nav {
        display: block;

        padding: 6px 18px;
    }

    #nav li {
        width: 100%;
    }

    #nav li:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    #nav li a {
        width: 100%;

        min-height: 46px;

        padding: 11px 2px;

        font-size: 14px;
    }

    #nav li a.active {
        box-shadow: none;

        color: #F3703C !important;
    }

}
@media (max-width: 900px) {
    #header {
        width: calc(100% - 44px);
    }
}

@media (max-width: 650px) {
    #header {
        width: 100%;
        padding: 16px 18px;
    }
}

/* =========================================================
   ANMELDEN – DESKTOPPOSITION
   Logo/Header bleiben unverändert
   ========================================================= */

@media (min-width: 651px) {

    #header {
        position: relative;
    }

    #header .pull-right {
        position: absolute;
        top: 50%;
        right: -210px;

        margin: 0 !important;
        padding: 0;

        transform: translateY(-50%);

        display: flex;
        align-items: center;
        justify-content: flex-end;

        float: none !important;
    }

    #header .pull-right p {
        margin: 0 !important;
    }
}

@media (max-width: 650px) {

    #header .pull-right {
        position: static;

        margin-top: 12px !important;

        transform: none;

        justify-content: center;
    }
}
.extrusia-support-hours {
    margin-bottom: 22px;
}

.extrusia-support-hours > div {
    display: grid;
    grid-template-columns: 85px 1fr;
    align-items: baseline;
    gap: 12px;
}

.extrusia-support-hours span {
    color: rgba(255,255,255,.72);
    font-size: 16px;
    font-weight: 600;
}

.extrusia-support-hours strong {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.55;
    white-space: nowrap;
}
/* =========================================================
   TICKETFORMULAR – AKTIONSBUTTONS
   ========================================================= */

#content form .buttons,
#content form .button-group,
#content form div[style*="text-align"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* Primär: Ticket eröffnen */
#content input[type="submit"] {
    min-width: 190px;

    padding: 14px 24px;

    color: #fff !important;
    background: #F3703C !important;

    border: 1px solid #F3703C !important;
    border-radius: 5px !important;

    font-weight: 600 !important;

    box-shadow: none !important;
}


/* Sekundär: Reset */
#content input[type="reset"] {
    min-height: 48px;
    min-width: 140px;

    padding: 12px 20px;

    color: #20282E !important;
    background: #fff !important;

    border: 1px solid #D7DCE0 !important;
    border-radius: 5px !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    cursor: pointer;

    box-shadow: none !important;
}


/* Hover Reset */
#content input[type="reset"]:hover {
    color: #F3703C !important;
    border-color: #F3703C !important;
}


/* Abbrechen – sekundärer Button */
#content a.button,
#content .cancel {
    min-height: 48px;
    min-width: 140px;

    padding: 12px 20px !important;

    color: #20282E !important;
    background: #fff !important;

    border: 1px solid #D7DCE0 !important;
    border-radius: 5px !important;

    font-weight: 600 !important;

    box-shadow: none !important;
}


/* Hover Abbrechen */
#content a.button:hover,
#content .cancel:hover {
    color: #F3703C !important;
    border-color: #F3703C !important;
    background: #fff !important;
}


/* Smartphone */
@media (max-width: 650px) {

    #content form .buttons,
    #content form .button-group,
    #content form div[style*="text-align"] {
        flex-direction: column;
        align-items: stretch;
    }

    #content input[type="submit"],
    #content input[type="reset"],
    #content a.button,
    #content .cancel {
        width: 100% !important;
        min-width: 0;
    }
}
/* =========================================================
   TICKETFORMULAR – FINALER FORMULAR-/BUTTON-FEINSCHLIFF
   ========================================================= */

#ticketForm.extrusia-ticket-form {
    max-width: 100%;
}

#ticketForm .extrusia-ticket-table {
    width: 100% !important;
    max-width: 100%;
}

#ticketForm .extrusia-form-line {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#ticketForm .extrusia-form-label {
    padding-top: 12px;
    color: var(--ex-text);
    font-weight: 700;
}

#ticketForm .extrusia-form-field {
    min-width: 0;
}

#ticketForm .extrusia-help-topic-field {
    max-width: 420px;
}

#ticketForm .extrusia-captcha-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
}

#ticketForm .extrusia-captcha-meta em {
    color: var(--ex-muted);
    font-style: italic;
}

#ticketForm .extrusia-captcha-field #captcha {
    width: 100% !important;
    max-width: 100% !important;
}

#ticketForm .buttons {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

#ticketForm .extrusia-btn-primary {
    min-width: 190px !important;
    color: #fff !important;
    background: var(--ex-orange) !important;
    border-color: var(--ex-orange) !important;
}

#ticketForm .extrusia-btn-secondary {
    min-width: 150px !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    color: var(--ex-text) !important;
    background: #fff !important;
    border: 1px solid #D7DCE0 !important;
    border-radius: 5px !important;
    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer;
}

#ticketForm .extrusia-btn-secondary:hover {
    color: var(--ex-orange) !important;
    background: #fff !important;
    border-color: var(--ex-orange) !important;
}

@media (max-width: 700px) {
    #ticketForm .extrusia-form-line {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #ticketForm .extrusia-form-label {
        padding-top: 0;
    }

    #ticketForm .extrusia-help-topic-field {
        max-width: none;
    }

    #ticketForm .extrusia-captcha-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    #ticketForm .buttons {
        flex-direction: column;
        align-items: stretch;
    }

    #ticketForm .extrusia-btn-primary,
    #ticketForm .extrusia-btn-secondary {
        width: 100% !important;
        min-width: 0 !important;
    }
}
/* Abbrechen wie Zurücksetzen darstellen */
#ticketForm input[name="cancel"] {
    min-width: 150px !important;
    min-height: 48px !important;
    padding: 12px 20px !important;

    color: #20282E !important;
    background: #FFFFFF !important;

    border: 1px solid #D7DCE0 !important;
    border-radius: 5px !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    box-shadow: none !important;
}

#ticketForm input[name="cancel"]:hover {
    color: #F3703C !important;
    background: #FFFFFF !important;
    border-color: #F3703C !important;
}
/* =========================================================
   EXTRUSIA SUPPORT – MOBILE HEADER
   ========================================================= */

@media (max-width: 700px) {

    /* Header */
    #header {
        height: auto !important;
        min-height: 90px !important;
        padding: 14px 18px !important;
        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
    }

    /* Logo */
    #header #logo {
        position: static !important;
        float: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: calc(100% - 105px) !important;
    }

    #header #logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 230px !important;
        max-height: 64px !important;
    }

    /* Anmelden */
    #header .pull-right,
    #header #login,
    #header .login {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    #header a[href*="login"] {
        white-space: nowrap !important;
    }


    /* Navigation unter dem Header */
    #nav,
    #nav-wrapper {
        position: relative !important;
        clear: both !important;
        width: 100% !important;
        height: auto !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    #nav ul {
        display: flex !important;
        align-items: center !important;
        width: max-content !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    #nav li {
        float: none !important;
        display: block !important;
        margin: 0 !important;
    }

    #nav li a {
        display: block !important;
        padding: 17px 14px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }


    /* Hauptinhalt nicht unter Header/Navigation schieben */
    #container,
    #content {
        clear: both !important;
    }
}


/* Sehr kleine Smartphones */
@media (max-width: 420px) {

    #header {
        min-height: 82px !important;
        padding: 12px 14px !important;
    }

    #header #logo img {
        max-width: 210px !important;
        max-height: 58px !important;
    }

    #nav li a {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 13px !important;
    }
}
/* =========================================================
   TICKETSTATUS – EXTRUSIA DESIGN
   ========================================================= */

.extrusia-ticket-status {
    width: 100%;
}

.extrusia-ticket-status-head {
    margin-bottom: 34px;
}

.extrusia-ticket-status-head h1 {
    margin: 0 0 16px !important;
}

.extrusia-ticket-status-head > p {
    max-width: 760px;
    margin: 0 !important;
}

.extrusia-ticket-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.extrusia-ticket-status-card {
    padding: 34px;
    background: #fff;
    border: 1px solid var(--ex-line);
    border-radius: 8px;
}

.extrusia-ticket-status-number {
    margin-bottom: 24px;
    color: var(--ex-orange);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
}

.extrusia-ticket-status-card h2 {
    margin: 0 0 22px !important;
    font-size: 26px !important;
}

.extrusia-ticket-status-form {
    display: grid;
    gap: 18px;
}

.extrusia-ticket-status-field {
    display: grid;
    gap: 7px;
}

.extrusia-ticket-status-field label {
    color: var(--ex-text);
    font-weight: 600;
}

.extrusia-ticket-status-submit {
    margin-top: 4px;
}

.extrusia-ticket-status-submit input[type="submit"] {
    width: auto !important;
    min-width: 210px;
}

.extrusia-ticket-status-error {
    padding: 12px 14px;
    color: #8B1E1E;
    background: #FFF3F3;
    border: 1px solid #F2CCCC;
    border-left: 4px solid #C84444;
    border-radius: 5px;
}

.extrusia-ticket-status-account {
    background: var(--ex-charcoal);
    border-color: var(--ex-charcoal);
}

.extrusia-ticket-status-account .extrusia-ticket-status-number {
    color: var(--ex-orange);
}

.extrusia-ticket-status-account h2 {
    color: #fff !important;
}

.extrusia-ticket-status-account p {
    color: rgba(255,255,255,.72) !important;
}

#content .extrusia-account-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    margin-top: 4px;
    color: #fff !important;
    background: var(--ex-orange);
    border: 1px solid var(--ex-orange);
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none !important;
}

#content .extrusia-account-login:hover {
    color: #fff !important;
    background: #fff;
    color: var(--ex-charcoal) !important;
    border-color: #fff;
}

.extrusia-account-register {
    margin-top: 20px !important;
    font-size: 14px !important;
}

.extrusia-account-register a {
    color: var(--ex-orange) !important;
}

.extrusia-ticket-status-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    margin-top: 24px;
    padding: 28px 32px;
    background: #F5F6F7;
    border: 1px solid var(--ex-line);
    border-radius: 8px;
}

.extrusia-ticket-status-note .extrusia-ticket-status-number {
    margin: 2px 0 0;
}

.extrusia-ticket-status-note h2 {
    margin: 0 0 10px !important;
    font-size: 22px !important;
}

.extrusia-ticket-status-note p {
    margin: 0 0 10px !important;
}

#content .extrusia-ticket-status-note a {
    font-weight: 700;
    text-decoration: none !important;
}

@media (max-width: 760px) {
    .extrusia-ticket-status-grid {
        grid-template-columns: 1fr;
    }

    .extrusia-ticket-status-card {
        padding: 26px 22px;
    }

    .extrusia-ticket-status-submit input[type="submit"] {
        width: 100% !important;
        min-width: 0;
    }

    .extrusia-ticket-status-note {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
}
/* =========================================================
   EXTRUSIA SUPPORT – FOOTER
   ========================================================= */

.extrusia-support-footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--ex-charcoal);
    border: 0;
    text-align: left;
}

.extrusia-support-footer-inner {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 54px 0 42px;

    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    gap: 56px;
}

.extrusia-support-footer-brand img {
    display: block;
    width: auto;
    max-width: 260px;
    max-height: 70px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.extrusia-support-footer-brand p {
    max-width: 420px;
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 14px;
    line-height: 1.7;
}

.extrusia-support-footer h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.extrusia-support-footer-contact,
.extrusia-support-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.extrusia-support-footer-contact a,
.extrusia-support-footer-links a {
    margin-bottom: 9px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    text-decoration: none;
}

.extrusia-support-footer-contact a:hover,
.extrusia-support-footer-links a:hover {
    color: var(--ex-orange);
}

.extrusia-support-footer-contact span {
    margin-top: 8px;
    color: rgba(255,255,255,.64);
    font-size: 14px;
    line-height: 1.65;
}

.extrusia-support-footer-bottom {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-top: 1px solid rgba(255,255,255,.10);
}

.extrusia-support-footer-bottom span,
.extrusia-support-footer-bottom a {
    color: rgba(255,255,255,.55);
    font-size: 12px;
    text-decoration: none;
}

.extrusia-support-footer-bottom a:hover {
    color: var(--ex-orange);
}

@media (max-width: 800px) {
    .extrusia-support-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
        padding-top: 42px;
    }

    .extrusia-support-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .extrusia-support-footer-inner {
        width: calc(100% - 32px);
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 34px 0 28px;
    }

    .extrusia-support-footer-brand {
        grid-column: auto;
    }

    .extrusia-support-footer-brand img {
        max-width: 220px;
    }

    .extrusia-support-footer-bottom {
        width: calc(100% - 32px);
        padding: 18px 0 22px;

        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   FOOTER – FEINSCHLIFF LOGO / AUSRICHTUNG
   ========================================================= */

/* Originalfarben des SVG-Logos beibehalten */
.extrusia-support-footer-brand img {
    filter: none !important;
    max-width: 285px;
    max-height: 76px;
    margin: 0 0 22px 0;
}

/* Footer-Inhalt sauber auf gemeinsame Achsen setzen */
.extrusia-support-footer-inner {
    grid-template-columns: 1.35fr .75fr .65fr;
    gap: 72px;
    align-items: start;
}

/* Brand-Block linksbündig */
.extrusia-support-footer-brand {
    text-align: left;
}

.extrusia-support-footer-brand p {
    max-width: 430px;
    margin: 0;
    text-align: left;
}

/* Kontakt und Rechtliches oben bündig und links ausrichten */
.extrusia-support-footer-contact,
.extrusia-support-footer-links {
    align-items: flex-start;
    text-align: left;
    padding-top: 4px;
}

.extrusia-support-footer-contact h3,
.extrusia-support-footer-links h3 {
    margin-bottom: 18px;
}

.extrusia-support-footer-contact a,
.extrusia-support-footer-links a {
    display: inline-block;
    margin-bottom: 10px;
}

.extrusia-support-footer-contact span {
    margin-top: 10px;
    text-align: left;
}

/* Bottom-Zeile auf dieselbe Inhaltsbreite abstimmen */
.extrusia-support-footer-bottom {
    align-items: center;
}

/* Tablet */
@media (max-width: 800px) {
    .extrusia-support-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 36px 48px;
    }

    .extrusia-support-footer-brand {
        grid-column: 1 / -1;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .extrusia-support-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .extrusia-support-footer-brand {
        grid-column: auto;
    }

    .extrusia-support-footer-brand img {
        max-width: 250px;
    }
}


/* =========================================================
   FOOTER – KOMPAKTER UND ZENTRIERTER
   ========================================================= */

.extrusia-support-footer {
    padding-top: 54px !important;
    padding-bottom: 22px !important;
}

.extrusia-support-footer-inner {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
    grid-template-columns: 1.2fr .72fr .58fr !important;
    gap: 64px !important;
}

.extrusia-support-footer-brand img {
    max-width: 260px !important;
    margin-bottom: 14px !important;
}

.extrusia-support-footer-brand p {
    max-width: 390px !important;
    line-height: 1.55 !important;
}

.extrusia-support-footer-contact h3,
.extrusia-support-footer-links h3 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

.extrusia-support-footer-contact a,
.extrusia-support-footer-links a {
    margin-bottom: 7px !important;
}

.extrusia-support-footer-contact span {
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

.extrusia-support-footer-bottom {
    max-width: 1180px !important;
    margin: 38px auto 0 !important;
    padding: 20px 28px 0 !important;
}

@media (max-width: 800px) {
    .extrusia-support-footer {
        padding-top: 42px !important;
    }

    .extrusia-support-footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px 42px !important;
    }

    .extrusia-support-footer-brand {
        grid-column: 1 / -1;
    }

    .extrusia-support-footer-bottom {
        margin-top: 30px !important;
    }
}

@media (max-width: 600px) {
    .extrusia-support-footer {
        padding-top: 36px !important;
        padding-bottom: 20px !important;
    }

    .extrusia-support-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        padding: 0 24px !important;
    }

    .extrusia-support-footer-brand {
        grid-column: auto;
    }

    .extrusia-support-footer-bottom {
        margin-top: 28px !important;
        padding: 18px 24px 0 !important;
    }
}
@media (max-width: 600px) {

    .extrusia-support-footer {
        padding-top: 30px !important;
        padding-bottom: 16px !important;
    }

    .extrusia-support-footer-inner {
        gap: 22px !important;
        padding: 0 28px !important;
    }

    .extrusia-support-footer-brand img {
        max-width: 230px !important;
        margin-bottom: 10px !important;
    }

    .extrusia-support-footer-brand p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .extrusia-support-footer-contact,
    .extrusia-support-footer-links {
        padding-top: 0 !important;
    }

    .extrusia-support-footer-contact h3,
    .extrusia-support-footer-links h3 {
        margin: 0 0 10px !important;
    }

    .extrusia-support-footer-contact a,
    .extrusia-support-footer-links a {
        margin-bottom: 5px !important;
    }

    .extrusia-support-footer-contact span {
        margin-top: 4px !important;
    }

    .extrusia-support-footer-bottom {
        margin-top: 22px !important;
        padding: 18px 28px 0 !important;
        gap: 10px !important;
    }
}


/* =========================================================
   SEITENLAYOUT – FOOTER IMMER AM VIEWPORT-ENDE
   Verhindert freien Bereich unter dem Footer auf kurzen Seiten
   ========================================================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header, Navigation und Inhalt bleiben gemeinsam im osTicket-Container */
#container {
    flex: 1 0 auto;
}

/* Footer bildet immer den tatsächlichen Seitenabschluss */
#footer.extrusia-support-footer {
    flex: 0 0 auto;
    margin-top: 0 !important;
}

/* Mobile Browser mit dynamischer Adressleiste */
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}


/* =========================================================
   LAYOUT-FIX – KEIN HELLER BEREICH UNTER DEM FOOTER
   ========================================================= */

/*
 * Den vorherigen Flex-Sticky-Footer neutralisieren. osTicket hat nach dem
 * Footer noch Overlay-/Loading-Elemente; ein Flex-Body kann dadurch auf
 * kurzen Seiten unerwünschten Restplatz erzeugen.
 */
html,
body {
    min-height: 0 !important;
}

body {
    display: block !important;
    background: var(--ex-charcoal) !important;
}

#container {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
    background: #F5F6F7 !important;
    padding-bottom: 0 !important;
}

/* Kurze Unterseiten nicht künstlich auf 520px Mindesthöhe halten */
#content {
    min-height: 0 !important;
}

/* osTicket-Hilfselemente dürfen keinen Layoutplatz belegen */
#overlay,
#loading {
    position: fixed !important;
}

/* Footer und eventueller Restbereich haben dieselbe Hintergrundfarbe */
#footer.extrusia-support-footer {
    margin-bottom: 0 !important;
    background: var(--ex-charcoal) !important;
}


/* =========================================================
   LAYOUT – FOOTER AUF KURZEN SEITEN AM VIEWPORT-ENDE
   ========================================================= */

/*
 * footer.inc.php schließt #content und #container vor #footer.
 * Damit sind #container und #footer direkte Geschwister im <body>.
 * Genau dafür eignet sich ein vertikales Flex-Layout auf dem body.
 */
html {
    min-height: 100%;
    background: #F5F6F7;
}

body {
    min-height: 100vh !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #F5F6F7 !important;
}

/* Nimmt auf kurzen Seiten den freien Platz ein.
   Der zusätzliche Platz liegt dadurch VOR dem Footer, nie darunter. */
#container {
    flex: 1 0 auto !important;
    width: 100%;
}

/* Footer bleibt am unteren Viewport-Rand bzw. folgt langen Seiten normal. */
#footer.extrusia-support-footer {
    flex: 0 0 auto !important;
    width: 100%;
    margin-bottom: 0 !important;
}

/* osTicket-Hilfselemente nach dem Footer dürfen keinen Layoutplatz erzeugen. */
#overlay,
#loading {
    position: fixed !important;
}

/* Moderne Mobile-Browser mit dynamischer Adressleiste */
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh !important;
    }
}