/* Isla Studio · native Perfex-Oberflächen. Quellen: Website-Theme isla-studio-2026,
 * calm/relaunch/reflow; Onlinebelege zusätzlich Angebot.dc.html/Rechnung.dc.html.
 * Keine Formulare, Statusfarben oder funktionsrelevanten Sichtbarkeiten ersetzen. */
@font-face {
    font-family: "Isla Google Sans";
    src: url("../fonts/GoogleSans-Latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Isla Google Sans";
    src: url("../fonts/GoogleSans-LatinExt.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Isla Google Sans";
    src: url("../fonts/GoogleSans-Italic-Latin.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Isla Google Sans";
    src: url("../fonts/GoogleSans-Italic-LatinExt.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
    --isla-ink: #25283b;
    --isla-body: #41445a;
    --isla-muted: #666772;
    --isla-canvas: #f4f3f1;
    --isla-paper: #fffefd;
    --isla-line: #e5e3df;
    --isla-violet: #7457df;
    --isla-violet-dark: #5638bd;
    --isla-violet-soft: #e8e0fb;
    --isla-radius: 22px;
    --isla-shadow: 0 14px 40px rgba(50,48,69,.06);
    --isla-sans: "Isla Google Sans", "Google Sans", ui-sans-serif, system-ui, sans-serif;
}
/* Einschließlich nativer externer Formulare und TinyMCE-Inhalts-Iframes.
 * Keine universelle Sternregel: Iconfonts und bewusste Code-Schrift erhalten. */
body { font-family: var(--isla-sans); }
body :is(input,textarea,select,button,.tw-font-sans,.tox,.tox .tox-tbtn,.tox .tox-label,.tox .tox-textfield) { font-family: var(--isla-sans); }
body :is(pre,code,kbd,samp,.tw-font-mono) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body:is(.admin,.customers,.login_admin,.authentication) {
    color: var(--isla-body);
    background: var(--isla-canvas);
    font-family: var(--isla-sans);
    -webkit-font-smoothing: antialiased;
}
body:is(.admin,.customers,.login_admin,.authentication) :is(input,textarea,select,button) { font-family: var(--isla-sans); }
body:is(.admin,.customers,.login_admin,.authentication) :is(h1,h2,h3,h4,h5,h6) { color: var(--isla-ink); font-weight: 500; letter-spacing: -.025em; }
body:is(.admin,.customers,.login_admin,.authentication) a:not(.btn):not(.label):not(.badge) { color: var(--isla-violet-dark); }
body:is(.admin,.customers,.login_admin,.authentication) a:not(.btn):hover { color: var(--isla-violet); }
body:is(.admin,.customers,.login_admin,.authentication) :focus-visible { outline: 3px solid var(--isla-violet-dark); outline-style: solid !important; outline-offset: 3px; }
body:is(.admin,.customers,.login_admin,.authentication) ::selection { color: var(--isla-ink); background: var(--isla-violet-soft); }

/* Die native Geometrie und alle Responsive-/Menüzustände bleiben bestehen. */
body.admin #header,
body.customers .navbar-default.header {
    background: rgba(255,254,253,.96);
    border-color: var(--isla-line);
    box-shadow: 0 5px 24px rgba(50,48,69,.04);
}
body.admin #menu,
body.admin #setup-menu { background: var(--isla-paper); border-color: var(--isla-line); }
body.admin #side-menu > li > a,
body.admin #setup-menu li > a { color: var(--isla-body); border-radius: 12px; margin: 3px 8px; }
body.admin #side-menu > li.active > a,
body.admin #side-menu > li > a:hover,
body.admin #setup-menu li.active > a { background: var(--isla-violet-soft); color: var(--isla-violet-dark); }
body.admin #side-menu .nav-second-level { background: transparent; }
body.admin #side-menu .nav-second-level a { color: var(--isla-body); }
body.admin #side-menu .nav-second-level li.active > a { color: var(--isla-violet-dark); font-weight: 500; }
body.admin #wrapper { background: var(--isla-canvas); }
/* Der 260px-Lockup besitzt transparente Außenränder: sichtbare Alpha-Höhe
 * ca55px, passend im nativen57px-Header ohne Änderung der Headergeometrie. */
body.admin #header #logo img { width: min(260px,24vw); height: auto; max-height: none; object-fit: contain; }
/* Auch wenn nativ noch logo-text am Link steht: vollständigen Lockup
 * proportional zeigen und den mobilen Menüschalter daneben erhalten. */
body.customers .navbar-default.header .navbar-brand.logo { height: auto; margin: 0; padding: 10px 15px; }
body.customers .navbar-brand.logo img { width: 300px; max-width: 100%; object-fit: contain; }
body.customers .navbar-default.header .navbar-brand.logo img.isla-support-logo { height: auto; max-height: none; }
/* Die reguläre Oberfläche bleibt hell. Weiße Schrift wird ausschließlich
 * in einem explizit dunklen Markenbereich beziehungsweise Theme verwendet. */
:is(.isla-dark-surface,.dark-mode,[data-theme="dark"]) :is(img.isla-support-logo,#logo img) {
    content: var(--isla-white-lockup-url, url("../images/isla-studio-header-lockup-white.png"));
    aspect-ratio: 81 / 20;
}
body.customers .navbar-default .navbar-nav > li > a { color: var(--isla-body); border-radius: 999px; }
body.customers .navbar-default .navbar-nav > .active > a,
body.customers .navbar-default .navbar-nav > li > a:hover { background: var(--isla-violet-soft); color: var(--isla-violet-dark); }
body.customers .footer { background: transparent; color: var(--isla-muted); border-top: 1px solid var(--isla-line); }
body.customers #wrapper { min-width: 0; width: 100%; }
body.customers .container { min-width: 0; max-width: 100%; }

body:is(.admin,.customers) .panel_s > .panel-body,
body:is(.admin,.customers) .panel_s > .panel-footer,
body:is(.admin,.customers) .modal-content {
    border-color: var(--isla-line);
    border-radius: var(--isla-radius);
    background: var(--isla-paper);
    box-shadow: var(--isla-shadow);
}
body:is(.admin,.customers) .panel_s > .panel-footer { border-top-left-radius: 0; border-top-right-radius: 0; }
body:is(.admin,.customers) :is(.modal-header,.modal-footer) { border-color: var(--isla-line); }
body:is(.admin,.customers) .nav-tabs > li.active > a,
body:is(.admin,.customers) .nav-tabs > li.active > a:hover { border-bottom-color: var(--isla-violet); color: var(--isla-violet-dark); }
body:is(.admin,.customers) .dropdown-menu { border-color: var(--isla-line); border-radius: 14px; box-shadow: var(--isla-shadow); }
body:is(.admin,.customers) .dropdown-menu > li > a:hover { background: var(--isla-violet-soft); }

/* Status und destruktive Aktionen behalten ihre native semantische Farbe. */
body:is(.admin,.customers,.login_admin,.authentication) .btn {
    border-radius: 999px;
    font-weight: 400;
    padding: 9px 18px;
    letter-spacing: .015em;
    transition: background-color .18s, border-color .18s, box-shadow .18s;
}
body:is(.admin,.customers,.login_admin,.authentication) .btn-primary {
    color: #fff;
    background: var(--isla-violet);
    border-color: var(--isla-violet);
    box-shadow: 0 5px 14px rgba(116,87,223,.16);
}
body:is(.admin,.customers,.login_admin,.authentication) .btn-primary:is(:hover,:focus,:active),
body:is(.admin,.customers) .open > .dropdown-toggle.btn-primary { background: var(--isla-violet-dark); border-color: var(--isla-violet-dark); color: #fff; }
body:is(.admin,.customers,.login_admin,.authentication) .btn-default { background: var(--isla-paper); border-color: #dedcd6; color: #33384e; }
body:is(.admin,.customers,.login_admin,.authentication) .btn-default:hover { border-color: var(--isla-violet); color: var(--isla-violet-dark); }
body:is(.admin,.customers) .btn-group > .btn,
body:is(.admin,.customers) .input-group-btn > .btn { border-radius: 8px; }
body:is(.admin,.customers) .btn-icon { padding: 8px 11px; }
body:is(.admin,.customers) .btn-xs { padding: 3px 8px; }
body:is(.admin,.customers) .btn-sm { padding: 6px 12px; }
body:is(.admin,.customers,.login_admin,.authentication) .form-control {
    border-color: #dedcd6;
    border-radius: 12px;
    background: #fffefd;
    color: var(--isla-ink);
    box-shadow: none;
}
body:is(.admin,.customers,.login_admin,.authentication) :is(input.form-control,select.form-control) { min-height: 40px; }
body:is(.admin,.customers,.login_admin,.authentication) .form-control:focus { border-color: var(--isla-violet); box-shadow: 0 0 0 3px rgba(116,87,223,.13); }
body:is(.admin,.customers,.login_admin,.authentication) .form-control[disabled],
body:is(.admin,.customers,.login_admin,.authentication) .form-control[readonly] { background: #efeeec; }
body:is(.admin,.customers) .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body:is(.admin,.customers) .input-group-addon { border-color: #dedcd6; background: var(--isla-canvas); color: var(--isla-muted); }
body:is(.admin,.customers) .table > thead > tr > th { background: #f8f7f5; color: var(--isla-muted); border-bottom: 1px solid var(--isla-line); font-weight: 500; }
body:is(.admin,.customers) .table > tbody > tr > td { border-color: var(--isla-line); }
body:is(.admin,.customers) .table-hover > tbody > tr:hover { background: #f7f4fd; }
body:is(.admin,.customers) .pagination > .active > a,
body:is(.admin,.customers) .pagination > .active > span { background: var(--isla-violet); border-color: var(--isla-violet); color: white; }

/* Login, Passwort und Zwei-Faktor-Eingaben bleiben die nativen Perfex-Formulare. */
body:is(.login_admin,.authentication) {
    min-height: 100vh;
    background: radial-gradient(ellipse at 13% 12%,#ece7f8 0,transparent 39%),radial-gradient(ellipse at 91% 85%,#e6f1ed 0,transparent 36%),var(--isla-canvas);
}
body:is(.login_admin,.authentication) .authentication-form-wrapper { max-width: 500px; padding-top: clamp(32px,7vh,88px); padding-bottom: 40px; }
body:is(.login_admin,.authentication) .company-logo { padding: 24px 16px 34px; }
body:is(.login_admin,.authentication) .company-logo img { width: 350px; max-width: 100%; height: auto; }
body:is(.login_admin,.authentication) .authentication-form-wrapper > div:has(> form) { background: var(--isla-paper); border-color: var(--isla-line); border-radius: 24px; box-shadow: var(--isla-shadow); }
body:is(.login_admin,.authentication) .btn-primary { min-height: 44px; }
body.customers .login-form .panel-body { padding: 30px; }

/* Verifizierte Layoutkorrekturen des bisherigen Custom-CSS erhalten;
 * Castledown/Olive/Beige und dessen !important-Regeln werden nicht übernommen. */
body.customers .btn.btn-info[data-form="#ticket-reply"] { margin-bottom: 20px; }
body.customers .navbar-fixed-bottom { margin-top: 2em; position: relative; }
body.customers img.client-profile-image-small { width: 32px; height: 32px; border-radius: 50%; }
body.customers.register #content .mbot15:first-of-type { margin-top: 40px; }
body.customers ul.submenu.customer-top-submenu { display: block; margin: 2em 0 1em; padding: 0 15px; position: relative; }
body.customers .submenu.customer-top-submenu li { display: inline-block; margin: 0 1em .5em 0; }
body.customers .submenu.customer-top-submenu li a { display: inline-block; padding: .5em 1em; border-radius: 999px; color: var(--isla-violet-dark); background: var(--isla-violet-soft); }

/* Drei Onlinebelege: native Berechtigungen, POSTs, Zahlarten, Signatur,
 * optionale Positionen, Anmerkungen und Anhänge werden nicht dupliziert. */
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) { color: #3a3f55; background: #f3f2f0; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-top-wrapper { padding-top: 18px; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view,.contract-view) :is(.invoice-html-logo,.estimate-html-logo,.proposal-html-logo,.contract-html-logo) img { width: 340px; max-width: 100%; height: auto; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-top-wrapper .top { background: rgba(253,253,252,.97); border: 1px solid #e4e2dd; border-radius: 18px; padding: 16px 20px; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-sticky-header { border-radius: 0; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-sticky-container { max-width: 100%; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) :is(.invoice-html-status,.estimate-html-status) { display: inline-block; padding-block: 4px; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .panel_s > .panel-body { padding: clamp(24px,4vw,48px); background: #fff; border-radius: 20px; }
body.customers:is(.viewinvoice,.viewestimate) .transaction-html-info-col-left { margin-bottom: 26px; }
body.customers:is(.viewinvoice,.viewestimate) :is(.invoice-html-number,.estimate-html-number) { color: #262b41; font-weight: 700; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) address { line-height: 1.65; color: #63626c; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .items thead th { background: white; color: #63626c; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; padding-block: 12px; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .items tbody td { padding-block: 16px; color: #3a3f55; line-height: 1.6; border-color: #eceae5; }
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) :is(.invoice-html-note,.invoice-html-terms-and-conditions,.estimate-html-note,.estimate-html-terms-and-conditions) { background: #f3f2f0; border-radius: 18px; padding: 22px 26px; margin-block: 14px; overflow-wrap: anywhere; }
body.customers.proposal-view .proposal-right .inner { background: #fdfdfc; border: 1px solid #e4e2dd; border-radius: 20px; padding: 24px; }
body.customers.proposal-view .proposal-content { line-height: 1.65; overflow-wrap: anywhere; }
body.customers.proposal-view .proposal-content img { max-width: 100%; height: auto; }
body.customers.proposal-view .proposal-content table { width: 100%; }
body.customers.proposal-view .proposal-content .items tr > td:last-child,
body.customers.proposal-view .proposal-content .items td[align="right"],
body.customers.proposal-view .proposal-content .table.text-right tr > td:last-child {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    min-width: 9ch;
}
/* Native Summen werden separat von der breiten Positionstabelle gerendert.
 * Responsive-Tabellen setzen sonst jede Zelle auf nowrap und schneiden mobil
 * die rechte Betragsspalte ab. Nur die Summenlabels dürfen umbrechen. */
body.customers.proposal-view .proposal-content .table.text-right {
    min-width: 0;
    table-layout: auto;
}
body.customers.proposal-view .proposal-content .table.text-right tr > td:first-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}
body.customers.proposal-view .proposal-content .table.text-right tr > td:last-child {
    width: 1%;
}
body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .table-responsive { -webkit-overflow-scrolling: touch; }
.isla-native-document { min-width: 0; }
.isla-document-badge {
    display: inline-block;
    margin: 24px 0 0;
    padding: 8px 22px;
    border-radius: 999px;
    background: #e3d9f8;
    color: #33304b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.isla-document-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 30px;
    margin: 34px 0 28px;
    padding: 24px 8px 0;
    border-top: 1px solid #eceae5;
    color: #63626c;
    font-size: 12px;
    line-height: 1.65;
}
/* Perfex setzt für generische footer-Tags 50px Höhe und eine eigene Fläche.
 * Der Dokumentfooter wächst auf Mobilgeräten mit seinen drei Spalten. */
body.customers .isla-document-footer { height: auto; min-height: 0; background: transparent; position: static; }
body.customers .isla-document-footer h2 { margin: 0 0 8px; color: #262b41; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.isla-document-footer p { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 991px) {
    body.admin #header #logo img { max-width: 260px; }
    body.customers .navbar-brand.logo img { width: 270px; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-top-wrapper .top { padding: 14px; }
    body.customers.proposal-view .proposal-right .inner { margin-bottom: 24px; }
}
@media (max-width: 767px) {
    /* Nur der native Zahlungsdiagramm-Kopf: Steuerung darf mobil unter
     * den Titel wechseln, statt über den Widgetrand hinauszuragen. */
    body.admin #widget-payments_chart .panel-body > div.tw-flex.tw-justify-between.tw-items-center { flex-wrap: wrap; gap: 8px; }
    body.customers .navbar-brand.logo { max-width: calc(100% - 62px); }
    body.customers .navbar-brand.logo img { width: 270px; }
    body:is(.admin,.customers) .panel_s > .panel-body { border-radius: 16px; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .panel_s > .panel-body { padding: 22px 16px; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-top-wrapper .top :is(.tw-flex,[class*="sm:tw-flex"]) { flex-wrap: wrap; gap: 8px; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-top-wrapper .action-button { margin-bottom: 6px; white-space: normal; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .preview-top-wrapper form { max-width: 100%; }
    /* Native Vertragsaktionen ebenfalls umbrechen, einschließlich Portal-Link.
     * Desktoplayout und sämtliche Formulare/Signatur-IDs bleiben unverändert. */
    body.customers.contract-view .preview-top-wrapper .top .tw-flex.tw-items-end { flex-wrap: wrap; gap: 8px; }
    body.customers.contract-view .preview-top-wrapper .top .tw-flex.tw-items-end > * { margin-left: 0; margin-right: 0; }
    body.customers.contract-view .preview-top-wrapper .top .action-button { max-width: 100%; white-space: normal; }
    body.customers.contract-view .preview-top-wrapper .top form { max-width: 100%; }

    body.customers:is(.viewinvoice,.viewestimate) .transaction-html-info-col-right { text-align: start; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .items { min-width: 580px; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) :is(.invoice-html-note,.invoice-html-terms-and-conditions,.estimate-html-note,.estimate-html-terms-and-conditions) { padding: 18px; }
    body:is(.login_admin,.authentication) .authentication-form-wrapper { padding-inline: 10px; }
    .isla-document-footer { grid-template-columns: 1fr; gap: 20px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    body:is(.admin,.customers,.login_admin,.authentication) .btn { transition: none; }
}
@media print {
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) { background: white; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .panel_s > .panel-body { box-shadow: none; border: 0; border-radius: 0; }
    body.customers:is(.viewinvoice,.viewestimate,.proposal-view) .items { min-width: 0; }
}