/* Kundenportal – RP-Look, leicht modernisiert */

:root {
  --rp-accent: #039cb0;
  --rp-accent-hover: #028597;
  --rp-accent-soft: #e6f7fa;
  --rp-text: #5c6570;
  --rp-text-dark: #3d4650;
  --rp-menu-head: #4a5560;
  --rp-border: #c5ccd3;
  --rp-row: #f4f6f8;
  --rp-group: #e8ecef;
  --rp-warn: #f59000;
  --rp-err: #e60000;
  --rp-ok: #2eb003;
  --rp-page-width: min(1200px, 96vw);
  --rp-radius: 8px;
  --rp-shadow: 0 8px 24px rgba(30, 50, 70, 0.06);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--rp-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  background:
    linear-gradient(#f0f4f6 0 0) top / 100% 56px no-repeat,
    linear-gradient(180deg, #f7fafb 0%, #ffffff 220px);
  min-height: 100%;
}

a { color: var(--rp-accent); text-decoration: none; }
a:hover { color: var(--rp-accent-hover); text-decoration: underline; }

.page {
  width: var(--rp-page-width);
  min-width: 0;
  margin: 0 auto;
  padding-bottom: 48px;
}

.page_head {
  position: relative;
  min-height: 72px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 4px 8px;
  gap: 16px;
}

.brand { display: flex; flex-direction: column; gap: 2px; }

.brand-name {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--rp-accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.brand-sub {
  font-size: 0.85rem;
  color: var(--rp-text-dark);
  opacity: 0.85;
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.head-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--rp-border);
  color: var(--rp-text-dark) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  box-shadow: var(--rp-shadow);
}

.head-cart:hover { border-color: var(--rp-accent); color: var(--rp-accent) !important; }

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rp-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.lang-flag { width: 24px; height: 16px; border-radius: 2px; }

#tbl_main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.menu {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  overflow: hidden;
  padding-bottom: 4px;
}

.menu ul { list-style: none; margin: 0; padding: 0; }

.menu_cntr_head {
  background: var(--rp-menu-head);
  color: #fff !important;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 12px;
  letter-spacing: 0.02em;
}

.menu_cntr { padding: 4px 0; }
.menu_cntr_foot { display: none; }

.menu_entry {
  height: 34px;
  line-height: 34px;
  padding: 0 0 0 10px;
  font-size: 0.9rem !important;
  color: var(--rp-text);
  overflow: hidden;
  border-radius: 0;
  margin: 0 4px;
  border-radius: 6px;
}

.menu_entry a {
  display: flex;
  align-items: center;
  height: 100%;
  color: inherit !important;
  gap: 8px;
  text-decoration: none !important;
}

.menu_ico {
  width: 22px;
  height: 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  flex-shrink: 0;
}

.menu_entry:hover,
.menu_selected {
  background: var(--rp-accent);
  color: #fff !important;
}

.menu_entry:hover a,
.menu_selected a { color: #fff !important; }

.menu_cntr_auth { padding: 10px 12px; }
.user-chip { margin-bottom: 10px; }
.muted { color: #8a949e; }

.data {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  padding: 16px 18px 22px;
}

.panel-title {
  border: none;
  border-bottom: 2px solid var(--rp-accent-soft);
  font-weight: 700;
  color: var(--rp-text-dark);
  padding: 2px 0 10px;
  margin-bottom: 14px;
  font-size: 1.15rem;
}

.lead {
  margin: 0 0 14px;
  color: var(--rp-text);
  font-size: 0.95rem;
}

.table_plain {
  border-collapse: collapse;
  width: 100%;
}

.table_plain td, .table_plain th { vertical-align: middle; }

.data_group {
  background: var(--rp-group);
  color: var(--rp-text-dark) !important;
  text-align: left;
}

.data_group td {
  padding: 8px 10px;
  border-radius: 6px 6px 0 0;
}

.data_column {
  background: var(--rp-row);
  color: var(--rp-text-dark) !important;
  font-weight: 700;
  font-size: 0.85rem;
}

.data_column th,
.data_column td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--rp-border);
}

.data_entry {
  font-size: 0.9rem;
  color: var(--rp-text);
}

.data_entry td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef1f4;
}

.data_entry:hover,
.data_entry_stripe:hover {
  background: var(--rp-accent) !important;
  color: #fff;
}

.data_entry:hover td,
.data_entry_stripe:hover td,
.data_entry:hover .muted,
.data_entry_stripe:hover .muted,
.data_entry:hover code,
.data_entry_stripe:hover code { color: #fff; }

.data_entry_stripe { background: var(--rp-row); }

.td_leftline, .td_rightline { border-left: none; border-right: none; }
.tr_overline, .tr_underline { border: none; }

.mirl_tabs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  border-bottom: 1px solid var(--rp-border);
  padding-bottom: 0;
}

.mirl_tabs .tab {
  min-width: 70px;
  padding: 8px 14px;
  background: transparent;
  color: var(--rp-text);
  font-size: 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  margin-bottom: -1px;
}

.mirl_tabs .tab.selected {
  background: var(--rp-accent-soft);
  border-bottom-color: var(--rp-accent);
  color: var(--rp-accent);
  font-weight: 700;
}

.tab-panel { display: none; padding-top: 10px; }
.tab-panel.active { display: block; }

.form_text {
  width: 100%;
  max-width: 320px;
  margin: 4px 0;
  padding: 8px 10px;
  border: 1px solid var(--rp-border);
  border-radius: 6px;
  color: var(--rp-text-dark);
  font-size: 0.95rem;
  background: #fff;
}

.form_button,
.link-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  background: var(--rp-accent);
  border: none;
  border-radius: 6px;
  color: #fff !important;
  font-size: 0.9rem;
  text-decoration: none !important;
}

.form_button:hover,
.link-btn:hover { background: var(--rp-accent-hover); }

.form_button_ghost {
  background: #fff;
  color: var(--rp-accent) !important;
  border: 1px solid var(--rp-accent);
}

.form_button_ghost:hover {
  background: var(--rp-accent-soft);
  color: var(--rp-accent-hover) !important;
}

.form_cancel {
  cursor: pointer;
  min-height: 34px;
  padding: 0 14px;
  background: var(--rp-warn);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.9rem;
}

.form_cancel:hover { background: #e68600; }

.smallfont { font-size: 0.85rem; color: var(--rp-text); }
.normalfont { font-size: 0.95rem; }
.bold { font-weight: 700; }
.right { text-align: right; }
.hand { cursor: pointer; }

.status_ok, .status_warn, .status_notice, .status_err, .flash {
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 0.9rem;
}

.status_ok { background: #e8f9e4; color: var(--rp-ok) !important; }
.status_warn { background: #fff4e5; color: var(--rp-warn) !important; }
.status_notice { background: var(--rp-accent-soft); color: var(--rp-accent) !important; }
.status_err { background: #ffe5e5; color: var(--rp-err) !important; }

.meter {
  height: 8px;
  background: #eef1f4;
  border-radius: 999px;
  overflow: hidden;
  max-width: 280px;
}

.meter > span {
  display: block;
  height: 100%;
  background: var(--rp-accent);
  border-radius: inherit;
}

.meter.warn > span { background: var(--rp-warn); }
.meter.crit > span { background: var(--rp-err); }

.login-wrap {
  max-width: 420px;
  margin: 80px auto;
  padding: 0 16px;
}

.login-box {
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 20px;
  background: #fff;
  box-shadow: var(--rp-shadow);
}

.login-box label {
  display: block;
  font-size: 0.85rem;
  margin-top: 10px;
  color: var(--rp-text-dark);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 999px;
  font-weight: 600;
}

.badge-ok { background: #e8f9e4; color: var(--rp-ok); }
.badge-warn { background: #fff4e5; color: var(--rp-warn); }
.badge-off { background: #eee; color: #999; }

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.news-item {
  padding: 12px 4px;
  border-bottom: 1px solid #eef1f4;
}

.news-item h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--rp-text-dark);
}

.news-meta {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 6px;
}

.mock-banner {
  background: var(--rp-accent-soft);
  color: var(--rp-accent);
  font-size: 0.85rem;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #bfe6ee;
}

code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.86em;
  background: #f0f3f5;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Shop */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--rp-border);
  background: #fff;
  color: var(--rp-text-dark) !important;
  text-decoration: none !important;
  font-size: 0.85rem;
}

.chip:hover,
.chip-active {
  border-color: var(--rp-accent);
  background: var(--rp-accent-soft);
  color: var(--rp-accent) !important;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.product-card {
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  border-color: var(--rp-accent);
  box-shadow: var(--rp-shadow);
}

.product-card-hl {
  border-color: #9ad7e0;
  background: linear-gradient(180deg, #f7fcfd 0%, #fff 40%);
}

.product-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rp-accent);
  font-weight: 700;
}

.product-name {
  margin: 0;
  font-size: 1.05rem;
  color: var(--rp-text-dark);
}

.product-short {
  margin: 0;
  font-size: 0.88rem;
  flex: 1;
}

.product-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-price strong {
  font-size: 1.15rem;
  color: var(--rp-text-dark);
}

.product-price-lg strong { font-size: 1.5rem; }

.feature-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
}

.feature-list-lg { font-size: 0.92rem; }

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.product-meta { font-size: 0.75rem; margin-top: 4px; }

.product-detail {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  gap: 20px;
  margin-top: 8px;
}

.product-buybox {
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 16px;
  background: var(--rp-accent-soft);
  height: fit-content;
}

.breadcrumb {
  font-size: 0.85rem;
  margin: 0 0 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.section-label {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  color: var(--rp-text-dark);
}

.cart-summary {
  margin-top: 18px;
  max-width: 360px;
  margin-left: auto;
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 14px;
  background: #fafbfc;
}

.totals-table td { padding: 4px 0; }
.totals-gross td {
  padding-top: 8px;
  border-top: 1px solid var(--rp-border);
}

.inline-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.qty-input { max-width: 64px !important; margin: 0; }

.text-danger {
  background: none;
  border: none;
  color: var(--rp-err);
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
  text-decoration: underline;
}

.text-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
}

.empty-state {
  padding: 28px 8px;
  text-align: center;
}

.order-card {
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fafbfc;
}

.order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.shop-teaser {
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--rp-radius);
  background: var(--rp-accent-soft);
  border: 1px solid #bfe6ee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  #tbl_main { flex-direction: column; }
  .menu { width: 100%; }
  .product-detail { grid-template-columns: 1fr; }
  .page_head { flex-wrap: wrap; align-items: flex-start; }
}