/*
 * me7tool Theme 2026
 * Modernisiert Bootstrap 3 ohne Umbau der Seiten. Farben angelehnt an das Tools-Portal.
 * Festes dunkles Design (Werte des Tools-Portals).
 */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter-Regular.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter-Medium.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter-SemiBold.woff2) format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Inter-Bold.woff2) format("woff2"); }

/* ---------- Farben ---------- */

:root {
  color-scheme: dark;
  --bg-page: #0c0c0f;
  --bg-sidebar: #111114;
  --bg-card: #16161a;
  --bg-card-header: #1c1c21;
  --bg-hover: #22222a;
  --bg-input: #0c0c0f;
  --border-color: #2a2a32;
  --border-light: #35353f;
  --text-heading: #ffffff;
  --text-primary: #e8e8ec;
  --text-secondary: #b4b4bc;
  --text-muted: #6b6b75;
  --accent: #0066cc;
  --accent-hover: #0052a3;
  --accent-text: #3399ff;
  --accent-glow: rgba(0, 102, 204, 0.15);
  --success: #10b981;
  --success-bg: #052e1c;
  --success-border: #064e32;
  --warning: #f59e0b;
  --warning-bg: #2a1f0a;
  --warning-border: #5c3f15;
  --danger: #ef4444;
  --danger-bg: #2a0f0f;
  --danger-border: #5c1f1f;
  --info: #3399ff;
  --info-bg: #001a33;
  --info-border: #003366;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.6);
  --radius: 8px;
  --radius-lg: 12px;
  --sidebar-width: 250px;
}

/* ---------- Grundlagen ---------- */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-heading);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
}

strong, b { color: var(--text-primary); font-weight: 600; }

a { color: var(--accent-text); transition: color .15s ease; }
a:hover, a:focus { color: #66b3ff; text-decoration: none; }

hr { border-top-color: var(--border-color); }
.text-muted, .help-block, small, .small { color: var(--text-muted); }
.help-block { font-size: 12.5px; margin-top: 6px; }
code, pre { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; }
::selection { background: var(--accent-glow); }

/* Alte <font color>-Tags und Inline-Farben lesbar machen */
font[color="black"], font[color='black'] { color: var(--text-primary) !important; }
font[color="green"], font[color='green'] { color: var(--success) !important; }
font[color="red"], font[color='red'] { color: var(--danger) !important; }
font[color="gray"], font[color="#939393"] { color: var(--text-muted) !important; }
[style*="color:black"] { color: var(--text-muted) !important; }
[style*="color:black"]:hover { color: var(--accent-text) !important; }
a[style*="color:gray"] { color: var(--text-muted) !important; }

/* ---------- Layout & Sidebar ---------- */

#page-content-wrapper { padding: 24px 12px; }
@media (min-width: 768px) {
  #wrapper { padding-left: var(--sidebar-width); }
  #sidebar-wrapper { width: var(--sidebar-width); }
  #page-content-wrapper { padding: 28px 20px; }
}
.container-fluid { max-width: 1400px; margin-left: 0; }

#sidebar-wrapper {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  left: var(--sidebar-width);
  margin-left: calc(-1 * var(--sidebar-width));
}

.sidebar-nav { width: var(--sidebar-width); padding: 0 12px 24px; }
.sidebar-nav li { text-indent: 0; line-height: 1.4; }

.sidebar-nav > .sidebar-brand {
  height: auto;
  margin: 0 -12px 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 15px;
  line-height: 1.3;
}
.sidebar-nav > .sidebar-brand a,
.sidebar-nav > .sidebar-brand a:hover {
  padding: 0;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  background: none;
}
.sidebar-nav > .sidebar-brand .glyphicon { color: var(--accent-text); margin-right: 6px; }

.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav li a .glyphicon { width: 16px; font-size: 13px; opacity: .85; top: 0; }
.sidebar-nav li a:hover { color: var(--text-heading); background: var(--bg-hover); }
.sidebar-nav li a.active { color: var(--accent-text); background: var(--accent-glow); }

/* Info-Bloecke in der Sidebar (Benutzer, Credits, Version) */
#sidebar-wrapper div[style*="color:white"] {
  color: var(--text-muted) !important;
  padding: 10px 12px !important;
  font-size: 12.5px;
  line-height: 1.6;
}
#sidebar-wrapper div[style*="color:white"] strong { color: var(--text-heading); }
.sidebar-user {
  margin: 0 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-card-header);
}

/* Mobile Navigation */
.visible-xs[style*="padding-left:30px"] {
  margin: 12px 12px 4px;
  padding: 14px 16px !important;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 2;
}
.visible-xs[style*="padding-left:30px"] br:last-child { display: none; }

/* WhatsApp-Button */
.float { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); transition: transform .15s ease; }
.float:hover { transform: translateY(-2px); color: #fff; }

/* ---------- Panels / Karten ---------- */

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-default { border-color: var(--border-color); }
.panel-default > .panel-heading,
.panel-heading {
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-heading);
  padding: 14px 20px;
  border-radius: 0;
}
.panel-title, .panel-title > a { color: var(--text-heading); font-size: 15px; font-weight: 600; }
.panel-title > a:hover { color: var(--accent-text); }
.panel-body { padding: 20px; color: var(--text-secondary); }
.panel-footer { background: var(--bg-card-header); border-top-color: var(--border-color); }
.panel-group .panel { border-radius: var(--radius); }
.panel-group .panel + .panel { margin-top: 8px; }
.panel-group .panel-heading + .panel-collapse > .panel-body { border-top-color: var(--border-color); }
.panel-heading[role="tab"] { padding: 0; }
.panel-heading[role="tab"] .panel-title > a { display: block; padding: 13px 20px; }

/* Panel-Body, das direkt als Alert gestylt ist (z.B. Support-ID, Demo-Hinweis) */
.panel > .panel-body.alert-info,
.panel > .panel-body.alert-warning,
.panel > .panel-body.alert-success,
.panel > .panel-body.alert-danger { border: 0; border-radius: 0; margin: 0; }

.well { background: var(--bg-card-header); border-color: var(--border-color); box-shadow: none; border-radius: var(--radius); }
.jumbotron { background: var(--bg-card); border-radius: var(--radius-lg); }

/* ---------- Alerts ---------- */

.alert { border-radius: var(--radius); border-width: 1px; padding: 12px 16px; }
.panel > .alert { margin: 16px 20px 0; }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--text-primary); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--text-primary); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--text-primary); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--text-primary); }
.alert .alert-link, .alert a { color: var(--accent-text); }

/* ---------- Formulare ---------- */

.form-group { margin-bottom: 18px; }
.form-group > strong:first-child, label { color: var(--text-primary); font-size: 13px; font-weight: 600; }

.form-control,
select, textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"] {
  background-color: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control { height: 38px; padding: 8px 12px; margin-top: 6px; }
textarea.form-control { height: auto; }
.input-group .form-control { margin-top: 0; }
.input-group { margin-top: 6px; }
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: 0;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: var(--bg-hover);
  color: var(--text-muted);
  opacity: 1;
}
.input-group-addon {
  background: var(--bg-card-header);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius);
}
.input-group-addon:first-child { border-right: 0; }

/* Datei-Upload */
input[type="file"] {
  width: 100%;
  max-width: 520px;
  padding: 18px;
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-card-header);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
input[type="file"]:hover { border-color: var(--accent); background: var(--accent-glow); }
input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

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

.btn,
input[type="button"], input[type="submit"], input[type="reset"], button:not(.close):not(.navbar-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:active, input[type="button"]:active, input[type="submit"]:active { transform: translateY(1px); box-shadow: none; }
.btn:focus, .btn:active:focus { outline: 0; box-shadow: 0 0 0 3px var(--accent-glow); }

/* Standard-Button = Akzent (wie Portal), btn-default bleibt neutral */
input[type="button"]:not(.btn), input[type="submit"]:not(.btn),
button[type="submit"]:not(.btn), .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
input[type="button"]:not(.btn):hover, input[type="submit"]:not(.btn):hover,
button[type="submit"]:not(.btn):hover, .btn-primary:hover, .btn-primary:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.btn-default {
  background: var(--bg-card);
  border-color: var(--border-light);
  color: var(--text-primary);
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-heading);
}
/* Absende-Buttons in Formularen hervorheben */
form .btn-default[type="submit"], #btn_submit {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
form .btn-default[type="submit"]:hover, #btn_submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-danger:hover  { filter: brightness(1.08); background: var(--danger); color: #fff; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-info    { background: var(--info);    border-color: var(--info);    color: #fff; }

.btn[disabled], input[disabled], button[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Tabellen ---------- */

.table, table { color: var(--text-secondary); }
.table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td, .table > thead > tr > td { border-color: var(--border-color); padding: 10px 12px; }
.table > thead > tr > th, table th { color: var(--text-heading); font-weight: 600; background: var(--bg-card-header); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--bg-card-header); }
.table-hover > tbody > tr:hover { background: var(--bg-hover); }
table[border="1"] { border-collapse: collapse; border-color: var(--border-color); background: var(--bg-card); }
table[border="1"] td, table[border="1"] th { border: 1px solid var(--border-color); padding: 6px 10px; }

/* ---------- Popover (Hilfe-Texte), Tooltip, Modal, Listen ---------- */

.popover {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  color: var(--text-secondary);
  font-family: inherit;
  max-width: 360px;
}
.popover-title {
  background: var(--bg-card-header);
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--text-heading);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 14px;
}
.popover-content { padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.popover.top > .arrow { border-top-color: var(--border-color); }
.popover.top > .arrow:after { border-top-color: var(--bg-card); }
.popover.bottom > .arrow { border-bottom-color: var(--border-color); }
.popover.bottom > .arrow:after { border-bottom-color: var(--bg-card-header); }
.popover.left > .arrow { border-left-color: var(--border-color); }
.popover.left > .arrow:after { border-left-color: var(--bg-card); }
.popover.right > .arrow { border-right-color: var(--border-color); }
.popover.right > .arrow:after { border-right-color: var(--bg-card); }
[data-toggle="popover"] .glyphicon { color: var(--text-muted); transition: color .15s ease; }
[data-toggle="popover"]:hover .glyphicon, [data-toggle="popover"]:focus .glyphicon { color: var(--accent-text); }

.tooltip-inner { background: var(--text-heading); color: var(--bg-card); border-radius: 6px; font-family: inherit; }

.modal-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.close { color: var(--text-heading); text-shadow: none; }

.list-group-item { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
.dropdown-menu { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-pop); border-radius: var(--radius); }
.dropdown-menu > li > a { color: var(--text-secondary); }
.dropdown-menu > li > a:hover { background: var(--bg-hover); color: var(--text-heading); }
.nav-tabs { border-bottom-color: var(--border-color); }
.nav-tabs > li > a:hover { background: var(--bg-hover); border-color: transparent; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: var(--bg-card); color: var(--text-heading); border-color: var(--border-color) var(--border-color) transparent; }
.label, .badge { border-radius: 999px; font-weight: 600; }
.progress { background: var(--bg-hover); border-radius: 999px; box-shadow: none; }
.progress-bar { background: var(--accent); }

/* ---------- Seiten-Bausteine ---------- */

/* Login / Registrierung */
.auth-wrap { max-width: 440px; margin: 32px auto; }
.auth-wrap .panel-body { padding: 24px; }
.auth-wrap .form-control { width: 100% !important; }
.auth-wrap #btn_submit { width: 100%; padding: 10px 16px; margin-top: 4px; }
.auth-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-muted); text-align: center; }

/* Schluessel/Wert-Raster (ECU-/Projektinformationen) */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; max-width: 560px; }
.kv dt { color: var(--text-muted); font-weight: 500; }
.kv dd { margin: 0; color: var(--text-primary); font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 13px; word-break: break-all; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* Preisliste */
.price-intro { margin: 0 0 20px; color: var(--text-secondary); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.price-card {
  position: relative;
  padding: 20px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card-header);
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.price-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.price-card .price-name { color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.price-card .price-value { margin: 8px 0 4px; color: var(--text-heading); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.price-card .price-note { color: var(--text-muted); font-size: 12.5px; }
.price-card.featured { border-color: var(--accent); background: var(--accent-glow); }
.price-card.featured .price-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.price-fineprint { color: var(--text-muted); font-size: 12.5px; }

/* Hinweisliste (Notes) */
.notes-list { margin: 0; padding-left: 20px; }
.notes-list li { margin-bottom: 12px; padding-left: 4px; }
.notes-list li::marker { color: var(--accent-text); font-weight: 700; }