html,body{height:auto !important;height:100%;min-height:100%;}
body{margin:0;padding-top: 0px;font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif;font-size:14px;line-height:25px;color:#333333;background-color:#ffffff;}
body#loginpage{background-color:#fcfcfc;padding-top:40px;padding-bottom:40px;}

#header { height: 45px; align-items: center; display: flex; justify-content: center; width: 100%; background-color:#fcfcfc; text-transform:lowercase; position: absolute;}
#menu { background: #2c5fc4; color: #fcfcfc; font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif;font-size:25px;font-weight:100; text-transform:lowercase; position: fixed; top: 0; z-index: 1000;}

.dropdown-menu {font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif;font-size:25px;font-weight:100; text-transform:lowercase;}
.dropdown-menu li.dropdown-item:hover, a.dropdown-item:hover { background-color: #2c5fc4; color: #fcfcfc; text-decoration:none;}
a.dropdown-item {font-weight:100; text-decoration:none;}

.menulink{text-shadow:0 0px 0 rgba(0, 0, 0, 0);padding-bottom:10px;margin-left:15px;padding-top:10px;color:#ffffff;font-size:24px;}
.menulink:hover{color:#ffffff;text-decoration:none;background: #555;}



.container-panes { height: calc(95vh - 90px); /* Height of the screen minus the navbar */ display: flex; flex-direction: column; }
.pane { overflow-y: auto; flex-grow: 1; min-height: 300px; position: relative; }
.resizer { height: 5px; background: #333; cursor: row-resize; }
.pane-upper-content { height: calc(100% - 40px); /* 40px is the height of the fixed bottom row in the upper pane */ overflow-y: auto; border: 1px solid #ccc;}
.pane-upper-fixed { height: 40px; background: #f1f1f1; position: absolute; bottom: 0; width: 100%; border-top: 1px solid #ddd; }
#preview {height: 500px; border: 1px solid #ccc;}
.no-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }


.resizer-search-results { display: inline-block; width: 5px; height: 100%; position: absolute; right: 0; top: 0; cursor: col-resize; }

h1,h2,h3,h4 {font-family:"Segoe UI","Segoe WP","Helvetica Neue",sans-serif;font-weight:100;text-transform:lowercase;}
h2 i{font-size:60px;}

.btn {border-radius:0;}
.btn-search {width: 33%;}
.btn-options {width: 34%;}

.searchcontainer{padding-top: 65px; margin-left: 12px; margin-right: 12px;}

input[type=text]{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}

#pagingrow{overflow:hidden;}
.functionbox{border-left:1px solid #ccc;height:30px;overflow:hidden;}

.messageheader{background-color:#f6f6f6;padding:8px;border-bottom:1px solid #ccc;}
.messagecontents{background-color:#fff;padding:8px;}

.resultrow{font-style:italic;cursor:pointer;}
.resultrow.new{font-style:normal;}

a{color:#2e8bcc;text-decoration:none;}
a:hover{color:#20608e;text-decoration:underline;}
a.xxx{color:#aaa;text-decoration:underline;}
a.xxx:hover{color:#aaa;text-decoration:underline;}

#logo-lg{width:300px;margin:0 auto 20px;}
#logincontainer{text-transform:lowercase;}
.compatibility {max-width: 300px;}

.form-signin{max-width:300px;padding:19px 29px 29px;margin:0 auto 20px;background-color:#fff;border:1px solid #e5e5e5;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
#compatibility{max-width:300px;margin:0 auto;color:#444;text-align:justify;}

.ps10 { padding-left: 10px; }
.pe10 { padding-right: 10px; }

i.spam{color:#ffc40d;}
i.attachment{color:#2e8bcc;}
i.note{color:#00aba9;}
i.tag{color:#7b4f9d;}
i.verified{color:#339933;}
.private{color:red;}

.xxx{color:#aaa;}

.myspinner {width: 5rem; height: 5rem;}
.middleofscreen {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.hidden {visibility: hidden;}

table { width: 100%; border-collapse: collapse; }
th { padding: 10px; border: 1px solid #ccc; position: relative; }
th.centered, td.centered { text-align: center; }
th.auto-width, td.auto-width { width: 1%; white-space: nowrap; }

.tsa {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

.branding_logo {max-height:25px;}

/* Highlighted row (selected message) */
.highlighted {
  background-color: #d1ecf1 !important;
}

.highlighted td {
  background-color: #d1ecf1 !important;
}

/* Dark mode styles */
[data-theme="dark"] {
  --bs-body-bg: #1a1a1a;
  --bs-body-color: #e0e0e0;
  --bs-border-color: #404040;
}

[data-theme="dark"] body {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

[data-theme="dark"] body#loginpage {
  background-color: #1a1a1a;
}

[data-theme="dark"] #header {
  background-color: #1a1a1a;
}

[data-theme="dark"] #menu {
  background: #1e3a8a;
  color: #e0e0e0;
}

[data-theme="dark"] .dropdown-menu {
  background-color: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .dropdown-menu li.dropdown-item:hover,
[data-theme="dark"] a.dropdown-item:hover {
  background-color: #1e3a8a;
  color: #e0e0e0;
}

[data-theme="dark"] a.dropdown-item {
  color: #e0e0e0;
}

[data-theme="dark"] .menulink {
  color: #e0e0e0;
}

[data-theme="dark"] .menulink:hover {
  color: #e0e0e0;
  background: #404040;
}

[data-theme="dark"] .pane {
  background-color: #1a1a1a;
}

[data-theme="dark"] .resizer {
  background: #404040;
}

[data-theme="dark"] .pane-upper-content {
  border-color: #404040;
  background-color: #1a1a1a;
}

[data-theme="dark"] .pane-upper-fixed {
  background: #2a2a2a;
  border-top-color: #404040;
}

[data-theme="dark"] #preview {
  border-color: #404040;
  background-color: #1a1a1a;
}

[data-theme="dark"] .functionbox {
  border-left-color: #404040;
}

[data-theme="dark"] .messageheader {
  background-color: #2a2a2a;
  border-bottom-color: #404040;
}

[data-theme="dark"] .messagecontents {
  background-color: #1a1a1a;
}

[data-theme="dark"] .form-signin {
  background-color: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] a {
  color: #5fa3d8;
}

[data-theme="dark"] a:hover {
  color: #4a8fc2;
}

[data-theme="dark"] .btn-primary {
  background-color: #1e3a8a;
  border-color: #1e3a8a;
}

[data-theme="dark"] .btn-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

[data-theme="dark"] .form-control {
  background-color: #2a2a2a;
  border-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] .form-control:focus {
  background-color: #2a2a2a;
  border-color: #5fa3d8;
  color: #e0e0e0;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #2a2a2a;
  border-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background-color: #2a2a2a;
  border-color: #5fa3d8;
  color: #e0e0e0;
}

[data-theme="dark"] .tagtext {
  background-color: #2a2a2a;
  border-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: #404040;
}

[data-theme="dark"] .tsa {
  border-top-color: #404040;
  border-bottom-color: #404040;
}

[data-theme="dark"] .alert {
  background-color: #2a2a2a;
  border-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] .modal-content {
  background-color: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #404040;
}

[data-theme="dark"] .toast {
  background-color: #2a2a2a;
  border-color: #404040;
}

[data-theme="dark"] .toast-header {
  background-color: #333333;
  border-bottom-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] .toast-body {
  color: #e0e0e0;
}

[data-theme="dark"] .text-body-secondary {
  color: #a0a0a0 !important;
}

[data-theme="dark"] .text-bg-light {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .resultrow {
  color: #c0c0c0;
}

[data-theme="dark"] .resultrow.new {
  color: #e0e0e0;
}

[data-theme="dark"] .resultrow td {
  color: #c0c0c0;
}

[data-theme="dark"] .resultrow.new td {
  color: #e0e0e0;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .table-secondary {
  background-color: #2a2a2a !important;
  border-color: #404040;
}

[data-theme="dark"] .table {
  color: #e0e0e0;
  border-color: #404040;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  color: #e0e0e0;
}

[data-theme="dark"] .form-label {
  color: #e0e0e0;
}

[data-theme="dark"] .highlighted {
  background-color: #2c5282 !important;
}

[data-theme="dark"] .highlighted td {
  background-color: #2c5282 !important;
  color: #e0e0e0 !important;
}

/* Dark mode toggle button */
#theme-toggle {
  cursor: pointer;
  padding: 10px;
  margin-left: 10px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
}

/* ===================================================================
   Sponsoo theme for piler
   Appended to the stock piler.css by bin/build-theme.sh, so an image
   update never silently drops it. Colors taken from the Elementor kit
   of sponsoo-management.de; green sampled from the logo file itself.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --sp-green: #549400;
    --sp-green-dark: #416f00;
    --sp-green-soft: #eef5e6;
    --sp-ink: #111013;
    --sp-text: #3B4547;
    --sp-muted: #7c8a8c;
    --sp-line: #e3e7e7;
    --sp-bg: #ffffff;
    --sp-bg-soft: #f6f7f7;
    --sp-radius: 8px;

    --bs-primary: var(--sp-green);
    --bs-primary-rgb: 84, 148, 0;
    --bs-link-color: var(--sp-green);
    --bs-link-hover-color: var(--sp-green-dark);
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Grundlagen: Segoe UI raus, Kleinschreibungs-Manie raus --------- */

body,
.dropdown-menu,
h1, h2, h3, h4,
#menu {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-transform: none;
}

body {
    color: var(--sp-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--sp-ink);
    letter-spacing: -0.01em;
}

h2 i { font-size: 34px; }

a { color: var(--sp-green); }
a:hover { color: var(--sp-green-dark); text-decoration: none; }

/* --- Topbar: aus dem Blau wird eine ruhige helle Leiste ------------- */

#menu {
    background: var(--sp-bg);
    color: var(--sp-ink);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--sp-line);
    box-shadow: 0 1px 3px rgba(17, 16, 19, 0.04);
}

#header { background-color: var(--sp-bg); text-transform: none; }

.menulink {
    color: var(--sp-text);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 10px;
    margin-left: 6px;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menulink:hover {
    color: var(--sp-green-dark);
    background: var(--sp-green-soft);
    text-decoration: none;
}

.dropdown-menu {
    font-size: 14px;
    font-weight: 400;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    box-shadow: 0 8px 24px rgba(17, 16, 19, 0.10);
    padding: 6px;
}

.dropdown-menu li.dropdown-item:hover,
a.dropdown-item:hover {
    background-color: var(--sp-green-soft);
    color: var(--sp-green-dark);
    border-radius: 6px;
}

a.dropdown-item { font-weight: 400; padding: 7px 12px; }

/* Sponsoo-Logo statt piler-Logo */
.branding_logo {
    content: url('/assets/images/sponsoo-logo.png');
    max-height: 26px;
}

#logo-lg {
    width: 200px;
    margin: 0 auto 28px;
}

#logo-lg img {
    content: url('/assets/images/sponsoo-logo.png');
    width: 200px;
    height: auto;
}

/* --- Buttons ------------------------------------------------------- */

.btn {
    border-radius: var(--sp-radius);
    font-weight: 500;
    padding: 7px 16px;
}

.btn-primary,
.btn-search {
    background-color: var(--sp-green);
    border-color: var(--sp-green);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-search:hover,
.btn-search:focus {
    background-color: var(--sp-green-dark);
    border-color: var(--sp-green-dark);
    color: #fff;
}

.btn-outline-secondary,
.btn-options {
    border-color: var(--sp-line);
    color: var(--sp-text);
}

.btn-outline-secondary:hover,
.btn-options:hover {
    background: var(--sp-bg-soft);
    border-color: var(--sp-muted);
    color: var(--sp-ink);
}

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(84, 148, 0, 0.20);
    outline: none;
}

/* --- Eingabefelder ------------------------------------------------- */

input[type=text],
input[type=password],
input[type=email],
select,
textarea,
.form-control,
.form-select {
    border-radius: var(--sp-radius);
    border: 1px solid var(--sp-line);
    padding: 8px 12px;
}

input[type=text]:focus,
input[type=password]:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--sp-green);
    box-shadow: 0 0 0 3px rgba(84, 148, 0, 0.15);
    outline: none;
}

.searchcontainer { padding-top: 68px; }

/* --- Trefferliste: das Arbeitspferd des Portals --------------------- */

table { border-collapse: separate; border-spacing: 0; }

th {
    background: var(--sp-bg-soft);
    border: none;
    border-bottom: 1px solid var(--sp-line);
    padding: 10px 12px;
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

td {
    border-bottom: 1px solid var(--sp-line);
    padding: 9px 12px;
    vertical-align: middle;
}

tbody tr:hover td { background-color: var(--sp-bg-soft); }

/* Ungelesen/gelesen wurde bisher durch Kursivschrift unterschieden -
   schwer lesbar. Stattdessen Schriftstaerke. */
.resultrow { font-style: normal; cursor: pointer; }
.resultrow.new { font-style: normal; font-weight: 600; color: var(--sp-ink); }

.highlighted {
    background-color: var(--sp-green-soft) !important;
    box-shadow: inset 3px 0 0 var(--sp-green);
}

.highlighted td { background-color: var(--sp-green-soft) !important; }

/* --- Mailansicht --------------------------------------------------- */

.messageheader {
    background-color: var(--sp-bg-soft);
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-line);
    border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}

.messagecontents { padding: 14px; }

.pane-upper-content,
#preview {
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
}

.pane-upper-fixed {
    background: var(--sp-bg-soft);
    border-top: 1px solid var(--sp-line);
}

.resizer { background: var(--sp-line); }
.functionbox { border-left: 1px solid var(--sp-line); }
.tsa { border-top: 1px solid var(--sp-line); border-bottom: 1px solid var(--sp-line); }

/* --- Login --------------------------------------------------------- */

body#loginpage {
    background-color: var(--sp-bg-soft);
    padding-top: 8vh;
}

#logincontainer { text-transform: none; }

.form-signin {
    max-width: 360px;
    padding: 32px 32px 28px;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(17, 16, 19, 0.07);
}

.form-signin input { margin-bottom: 10px; }
.form-signin .btn { width: 100%; margin-top: 6px; }

#compatibility, .compatibility { max-width: 360px; color: var(--sp-muted); }

/* --- Statusfarben an die Palette angeglichen ------------------------ */

i.verified { color: var(--sp-green); }
i.attachment { color: var(--sp-muted); }
.xxx, a.xxx { color: var(--sp-muted); }

/* --- Dark Mode (piler bringt dark-mode.js bereits mit) -------------- */

[data-bs-theme="dark"] {
    --sp-bg: #16181a;
    --sp-bg-soft: #1e2124;
    --sp-text: #d7dcdc;
    --sp-ink: #f2f4f4;
    --sp-line: #2c3034;
    --sp-muted: #8b9698;
    --sp-green-soft: #23301a;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] #menu,
[data-bs-theme="dark"] #header { background-color: var(--sp-bg); color: var(--sp-text); }

[data-bs-theme="dark"] body#loginpage { background-color: #101214; }

[data-bs-theme="dark"] .messagecontents,
[data-bs-theme="dark"] .form-signin { background-color: var(--sp-bg-soft); }

[data-bs-theme="dark"] tbody tr:hover td { background-color: var(--sp-bg-soft); }