/* ===== ebox.at ===== */

:root {
    --red:    #990000;
    --red-dk: #770000;
    --light:  #f0f0f0;
    --border: #d8d8d8;
    --text:   #222;
    --muted:  #666;
    --font:   Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    font-size: 12px;
    color: var(--text);
    background: #fff;
    /* kein overflow:hidden, kein height:100% — Layout bestimmt Höhe */
}

a { color: var(--red); font-weight: bold; text-decoration: none; }
a:hover { color: var(--red-dk); text-decoration: underline; }

/* ===== Page grid: schmale Sidebar + breiter weißer Content ===== */
.eb-page {
    display: grid;
    grid-template-columns: 18fr 82fr;
    align-items: stretch;    /* beide Spalten gleich hoch */
    column-gap: 16px;
    padding: 28px 16px 10px 24px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
}

/* ===== SIDEBAR (links) ===== */
.eb-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Grid-Stretch (align-items:stretch) gibt Sidebar dieselbe Höhe wie rechte Spalte */
}

.eb-box {
    background: #fff;
    border: 1px solid var(--red);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
/* Techinfo-Box: Höhe richtet sich nach Inhalt */
.eb-box-techinfo { flex-shrink: 0; }

.eb-box-header {
    background: var(--red);
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    padding: 4px 8px;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.eb-header-time { margin-left: auto; font-weight: normal; font-size: 9px; opacity: .8; }

.eb-box-body { padding: 7px 8px; overflow-y: auto; flex: 1; min-height: 0; }

/* Info sub-blocks */
.eb-info-block { background: var(--light); border: 1px solid var(--border); margin-bottom: 6px; }
.eb-info-header {
    background: #e0e0e0;
    padding: 3px 7px;
    font-size: 10px; font-weight: bold; color: #444;
    display: flex; align-items: center; gap: 4px;
}
.eb-info-body { padding: 6px 7px; font-size: 11px; font-weight: normal; }
.eb-info-body a { color: var(--red); }

/* Anwenderunterstützung – 3 Icons nebeneinander */
.eb-support-icons {
    display: flex;
    gap: 6px;
    justify-content: space-around;
    padding: 4px 0;
}
.eb-sup-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--red);
    text-decoration: none;
    font-weight: normal;
    font-size: 10px;
    padding: 5px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: background .12s, border-color .12s;
    flex: 1;
    text-align: center;
}
.eb-sup-icon:hover { background: #fff; border-color: var(--red); text-decoration: none; color: var(--red); }
.eb-sup-icon .bi { font-size: 1.3rem; display: block; }
.eb-sup-icon span { white-space: nowrap; }

/* Zugangstabelle */
.eb-access-table { font-size: 10px; width: 100%; }
.eb-access-table td { padding: 1px 3px 1px 0; vertical-align: top; border: none; font-weight: normal; }
.eb-access-table td:first-child { width: 44px; font-weight: bold; white-space: nowrap; color: #555; }

/* ===== Status Widget (weiß, kein schwarzer BG) ===== */
.eb-ts-body { padding: 5px 7px !important; }
.eb-ts-status-line { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.eb-ts-dot-sm {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.dot-green { background: #28a745; }
.dot-red   { background: #cc0000; }
.ts-ok  { color: #28a745; font-size: 10px; font-weight: normal; }
.ts-err { color: #cc0000; font-size: 10px; font-weight: normal; }

.eb-ts-svcs { display: flex; gap: 6px; flex-wrap: wrap; }
.eb-ts-svc  { display: flex; align-items: center; gap: 3px; font-size: 9px; color: #888; }
.eb-ts-dot  { width: 5px; height: 5px; border-radius: 50%; background: #28a745; }
.svc-err .eb-ts-dot { background: #cc0000; }
.svc-err { color: #cc0000; }

/* Sub-labels */
.eb-sub-label {
    font-size: 10px; font-weight: bold; color: var(--red);
    text-transform: uppercase; letter-spacing: .3px;
    padding-bottom: 3px; border-bottom: 1px solid #eee;
    margin: 5px 0 5px; display: flex; align-items: center; gap: 4px;
}

/* Incident rows */
.eb-inc-body  { padding: 4px 6px 10px !important; }
.eb-inc-row {
    display: grid;
    grid-template-columns: 56px 12px 1fr;   /* keine Kategorie-Spalte mehr */
    align-items: center;
    gap: 4px; padding: 3px 0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
}
.eb-inc-row:last-child { border-bottom: none; }
.eb-inc-date  { color: var(--muted); font-size: 9px; white-space: nowrap; }

/* Rechteck statt Kreis */
.eb-inc-status {
    width: 12px; height: 5px;
    background: #bbb;
    border-radius: 1px;
    display: inline-block;
    flex-shrink: 0;
}
.eb-inc-status.open-status {
    background: #cc0000;
    animation: blink-inc 1s ease-in-out infinite;
}
@keyframes blink-inc {
    0%, 100% { opacity: 1; }
    50%       { opacity: .15; }
}

/* Titel: 1 Zeile wenn es passt, sonst max. 2 Zeilen (statt Abschneiden) */
.eb-inc-link  {
    color: var(--red); font-weight: normal; font-size: 10px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.eb-inc-link:hover { font-weight: normal; text-decoration: underline; }
/* Hinweise-Zeile: Datum links, roter Titel daneben (umbricht auf max. 2 Zeilen) */
.eb-news-row  { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid #f4f4f4; font-size: 10px; }
.eb-news-date { font-size: 9px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.eb-news-link {
    color: var(--red); font-weight: normal; font-size: 10px; line-height: 1.25; flex: 1 1 auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.eb-news-link:hover { text-decoration: underline; }
.eb-muted-sm  { font-size: 10px; color: var(--muted); font-weight: normal; }

/* ===== RIGHT CONTENT (weißer Hintergrund, flat) ===== */
.eb-content {
    background: #fff;
    /* kein Schatten, kein Rahmen — schwebend auf weißem Hintergrund */
}

.eb-content-header {
    background: #fff;
    padding: 5px 12px 0;
    /* kein border-bottom */
}
.eb-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.eb-logo  { height: 22px; display: block; }
.eb-tagline { font-size: 10px; color: var(--muted); font-weight: normal; }
.eb-balken { display: block; width: 100%; height: 8px; object-fit: fill; }

/* Sprachumschalter (DE · EN) rechts im Content-Header */
.eb-lang { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11px; }
.eb-lang-link { color: var(--muted); text-decoration: none; font-weight: normal; padding: 1px 3px; }
.eb-lang-link:hover { color: var(--red); text-decoration: none; }
.eb-lang-link.is-active { color: var(--red); font-weight: bold; }
.eb-lang-sep { color: #ccc; }

.eb-content-body {
    padding: 32px 16px 14px;   /* mehr Abstand oben → Tiles und Produkte weiter unten */
    background: #fff;
}

.eb-flat-label {
    font-size: 10px; font-weight: bold; color: var(--red);
    text-transform: uppercase; letter-spacing: .3px;
    padding-bottom: 4px; border-bottom: 1px solid rgba(153,0,0,.15);
    margin: 14px 0 8px; display: flex; align-items: center; gap: 5px;
}
.eb-flat-label:first-child { margin-top: 0; }

.eb-section-sep {
    border: none;
    border-top: 1px solid #e4e4e4;
    margin: 14px 0 0;
}

/* ===== Service tiles (4er-Grid, kompakt) ===== */
.eb-svc-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 600px;   /* Tiles nicht zu breit */
    margin-bottom: 6px;
}

.eb-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 8px 8px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-top: 3px solid var(--red);
    color: var(--red);
    text-decoration: none;
    font-weight: normal;
    position: relative;
    transition: box-shadow .15s, background .12s;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.eb-tile:hover {
    background: #fff8f8;
    box-shadow: 0 2px 8px rgba(153,0,0,.15);
    color: var(--red);
    text-decoration: none;
}
.eb-tile-icon { font-size: 1.4rem; margin-bottom: 5px; color: var(--red); line-height: 1; }
.eb-tile-name { font-weight: bold; font-size: 11px; line-height: 1.3; }
.eb-tile-sub  { font-size: 9px; color: var(--muted); margin-top: 2px; font-weight: normal; }

/* WebMail-Tile: div mit innerem Link + v1.6 unten rechts */
.eb-tile-webmail {
    cursor: default;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.eb-tile-main-area {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 10px 8px 16px;
    color: var(--red); text-decoration: none; font-weight: normal;
    width: 100%;
}
.eb-tile-main-area:hover { color: var(--red); text-decoration: none; }
.eb-tile-webmail:hover { background: #fff8f8; box-shadow: 0 2px 8px rgba(153,0,0,.15); }
.eb-tile-v16 {
    position: absolute; bottom: 3px; right: 5px;
    font-size: 9px; color: #bbb; font-weight: normal;
    text-decoration: none; border-bottom: 1px dotted #ccc;
}
.eb-tile-v16:hover { color: var(--red); border-color: var(--red); text-decoration: none; }

/* ===== DNS Promo ===== */
.eb-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 7px; margin-bottom: 4px; }
.eb-dns-promo-tile { background: var(--red); color: #fff; text-align: center; padding: 7px 4px; border-radius: 3px; }
.eb-promo-tld   { font-size: .85rem; font-weight: bold; }
.eb-promo-price { font-size: .95rem; font-weight: 800; color: #ffdd57; margin: 2px 0; }
.eb-promo-label { font-size: 9px; opacity: .8; }
.eb-promo-until { font-size: 9px; opacity: .7; margin-top: 1px; }

/* ===== DNS table ===== */
.eb-dns-table { font-size: 11px; }
.eb-dns-table th { color: var(--red); font-size: 10px; font-weight: bold; border-bottom: 2px solid var(--red) !important; padding: 3px 6px !important; }
.eb-dns-table td { padding: 2px 6px !important; }
.eb-row-promo { background: #fff8f8; }
.eb-badge-promo { background: var(--red); color: #fff; font-size: 9px; padding: 1px 3px; border-radius: 2px; }
.eb-price-promo { font-weight: bold; color: var(--red); }
.eb-price-strike { font-size: .85em; text-decoration: line-through; color: #999; }

/* ===== Product Carousel ===== */
.eb-product-carousel {
    display: grid;
    grid-template-areas: 'stack';
    margin-bottom: 6px;
}

.eb-product-page {
    grid-area: stack;
    align-self: start;     /* Seiten NICHT auf die höchste Seite strecken → Icon-Seiten bleiben kompakt */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(118px, auto);   /* kompakte Icon-Kachel-Höhe */
    column-gap: 12px;
    row-gap: 12px;
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}
/* Bild-Kachel = doppelte Höhe → daneben passen 2 Icon-Kacheln übereinander */
.eb-product-page .eb-product-card.has-image { grid-row: span 2; }
.eb-product-page.active {
    opacity: 1;
    pointer-events: auto;
}

/* Carousel-Dots */
.eb-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 8px 0 2px;
}
.eb-carousel-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: background .2s;
    border: none;
    padding: 0;
}
.eb-carousel-dot.active { background: var(--red); }
.eb-carousel-dot:hover  { background: #aaa; }

/* ===== Products ===== */
.eb-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.eb-product-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;       /* Standard (Icon-Produkte): Banner oben, Text unten */
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: box-shadow .15s, transform .15s;
    cursor: pointer;
    overflow: hidden;
}
/* Nur bei echtem Bild: Bild und Text teilen sich die Karte 1:1 (nebeneinander) */
.eb-product-card.has-image { flex-direction: row; align-items: stretch; }
.eb-product-card:hover {
    box-shadow: 0 4px 14px rgba(153,0,0,.15);
    transform: translateY(-2px);
}

/* Produkt-Modal: Standard (Icon) = Banner oben; nur bei echtem Bild 1:1 nebeneinander */
.eb-prod-modal-split.has-image { display: flex; align-items: flex-start; }
.eb-prod-modal-split.has-image > .eb-prod-modal-visual {
    flex: 1 1 44%; height: auto; min-height: auto; padding: 12px;
    border-bottom: none; border-right: 1px solid #f0d0d0;
}
.eb-prod-modal-split.has-image > .modal-body { flex: 1 1 50%; min-width: 0; }
.eb-prod-modal-visual {
    display: flex; align-items: center; justify-content: center;
    height: 100px;
    background: linear-gradient(135deg, #f7f7f7, #ececec);
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
}
.eb-prod-modal-visual .bi { font-size: 3rem; color: var(--red); }
.eb-prod-modal-visual img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
@media (max-width: 575px) {
    .eb-prod-modal-split.has-image { flex-direction: column; }
    .eb-prod-modal-split.has-image > .eb-prod-modal-visual { border-right: none; border-bottom: 1px solid #f0d0d0; min-height: 110px; }
}
.eb-prod-detail-html { font-size: 12px; line-height: 1.6; }
.eb-prod-detail-html ul { padding-left: 1.2em; margin: 0.4em 0; }
.eb-prod-detail-html li { margin-bottom: 2px; }
.eb-prod-detail-html p  { margin-bottom: 0.5em; }

/* Bild-Bereich (nur Bild-Kacheln) – leicht grau */
.eb-product-visual {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7f7f7 0%, #ececec 100%);
    border-bottom: 1px solid #e2e2e2;
    flex-shrink: 0;
    overflow: hidden;
}
/* Bei echtem Bild: halbe Karte (1:1) statt Banner */
.eb-product-card.has-image .eb-product-visual {
    height: auto; min-height: 100px; flex: 1 1 50%;
    border-bottom: none; border-right: 1px solid #e2e2e2;
}
.eb-product-visual .bi { font-size: 2.2rem; color: var(--red); }
.eb-product-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Icon-Kachel: Balken mit Icon links + Überschrift, leicht grau */
.eb-product-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px;
    background: linear-gradient(135deg, #f7f7f7 0%, #ececec 100%);
    border-bottom: 1px solid #e2e2e2;
}
.eb-product-bar .bi { font-size: 1.5rem; color: var(--red); flex: 0 0 auto; line-height: 1; }
.eb-product-bar .eb-product-name { margin-bottom: 0; }

/* Text-Bereich */
.eb-product-text { padding: 9px 11px; flex: 1; display: flex; flex-direction: column; }
.eb-product-card.has-image .eb-product-text { flex: 1 1 50%; min-width: 0; }
.eb-product-name { font-size: 12px; font-weight: bold; color: var(--red); margin-bottom: 5px; }
.eb-product-desc { font-size: 11px; color: #444; font-weight: normal; line-height: 1.4; flex: 1 1 auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eb-product-price { margin-top: 8px; padding-top: 6px; border-top: 1px solid #eee; }
.eb-price-from { font-size: 9px; color: var(--muted); font-weight: normal; }
.eb-price-amount { font-size: 1.1rem; font-weight: bold; color: var(--red); }
.eb-price-period { font-size: 10px; color: var(--muted); }
.eb-product-features { font-size: 10px; font-weight: normal; margin-top: 4px; }
.eb-product-features .bi { color: var(--red); font-size: 10px; }

/* ===== Support-Formular ===== */
.eb-form-label { font-size: 11px; font-weight: bold; margin-bottom: 3px; color: #333; }
.form-control-sm, .form-select-sm { font-size: 12px; border-color: #ccc; }
.form-control-sm:focus, .form-select-sm:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(153,0,0,.12);
}

/* ===== Modal ===== */
.eb-modal-header { background: var(--red); color: #fff; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; }
.eb-modal-header .modal-title { font-size: 13px; font-weight: bold; }
.eb-modal-header .btn-close { filter: invert(1) brightness(2); }
.modal-body { font-size: 12px; font-weight: normal; }
.modal-body dt { color: var(--muted); font-size: 10px; font-weight: bold; margin-top: 7px; text-transform: uppercase; }
.modal-body dd { margin: 0 0 3px; }

/* ===== Copyright — direkt unter Incident-Box in der Sidebar ===== */
.eb-copyright {
    padding: 6px 2px 0;
    font-size: 10px;
    color: var(--muted);
    font-weight: normal;
}
.eb-copyright a { color: var(--red); font-weight: bold; }
.eb-copyright a:hover { color: var(--red-dk); }
/* ADMIN klein & dezent, oben rechts links neben dem Sprachselektor
   (margin-left:auto schiebt ADMIN + Sprachwahl gemeinsam an den rechten Rand) */
.eb-admin-link {
    margin-left: auto;
    font-size: 11px;
    font-weight: normal;
    color: var(--muted);
    letter-spacing: .5px;
    text-decoration: none;
}
.eb-admin-link:hover { color: var(--red); text-decoration: underline; }
/* ADMIN trägt das margin-left:auto → Sprachselektor daneben darf keins haben,
   sonst teilen sich beide den freien Raum (ADMIN landet sonst mittig) */
.eb-admin-link + .eb-lang { margin-left: 8px; }

/* ===== Admin Login ===== */
.eb-admin-login-body {
    background: #e0e0e0; min-height: 100vh; margin: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; font-family: var(--font);
}
.eb-login-box {
    background: #fff; border: 1px solid var(--red);
    width: 100%; max-width: 380px;
    box-shadow: 0 4px 20px rgba(153,0,0,.15); overflow: hidden;
}
.eb-login-head { background: #fff; padding: 10px 14px 4px; }
.eb-login-head .eb-logo-row { justify-content: center; }
.eb-login-head .eb-logo { height: 26px; }
.eb-login-form { padding: 20px 22px 18px; }
.eb-login-title {
    font-size: 11px; font-weight: bold; color: var(--red);
    text-transform: uppercase; letter-spacing: .3px;
    padding-bottom: 6px; margin-bottom: 14px;
    border-bottom: 1px solid rgba(153,0,0,.15);
}
.btn-eb-primary {
    background: var(--red); border: 1px solid var(--red); color: #fff;
    font-weight: bold;
}
.btn-eb-primary:hover, .btn-eb-primary:focus { background: var(--red-dk); border-color: var(--red-dk); color: #fff; }
.eb-login-back { color: var(--muted); font-size: 11px; font-weight: normal; text-decoration: none; }
.eb-login-back:hover { color: var(--red); text-decoration: underline; }


/* ===== Service-Reihe: links WebMail+WebAdmin, Lücke, rechts die übrigen ===== */
.eb-svc-row {
    display: flex; justify-content: space-between; align-items: stretch;
    gap: 14px; flex-wrap: wrap; margin-bottom: 6px; max-width: none;
}
.eb-svc-group { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
/* feste, gleiche Tile-Breite (kein Grid mehr); Höhe via stretch */
.eb-svc-group .eb-tile { flex: 0 0 132px; width: 132px; }

/* WebAdmin-Box: feste Breite (deterministisch → kein hängender Rand),
   Inhalt vertikal zentriert (kein Leerraum unten), Felder füllen bis Padding rechts. */
.eb-wa-loginbox {
    flex: 0 0 300px; width: 300px;
    display: flex; flex-direction: row; align-items: center; gap: 12px;
    background: #fafafa; border: 1px solid #ddd; border-top: 3px solid var(--red);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    padding: 11px 16px;   /* etwas mehr Rand, wie bei der WebMail-Box */
    text-align: left; cursor: default;
    position: relative;   /* Meldungen schweben darüber, ohne die Boxhöhe zu ändern */
}
/* Login-Meldungen ausserhalb des Box-Flows (DARÜBER, im freien Raum unter dem
   balken.gif) → Boxhöhe bleibt ausgerichtet UND nichts unter der Box wird verdeckt */
.eb-wa-loginbox-msgs {
    position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 4px; z-index: 3;
    display: flex; flex-direction: column; gap: 3px;
}
/* Branding: nur so breit wie der Text, zentriert, oben-bündig; gleiche Tile-Klassen.
   So liegt der linke Text-Abstand = Box-Padding (12px) = rechter Feld-Abstand. */
.eb-wa-brand {
    flex: 0 0 auto; padding: 0; color: var(--red);   /* „EBOX WebAdmin" rot */
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.eb-wa-brand .eb-tile-name,
.eb-wa-brand .eb-tile-sub { white-space: nowrap; }   /* „EBOX WebAdmin" / „Mail Administration" einzeilig */
/* Felder füllen die restliche Boxbreite (enden am rechten Padding) */
.eb-wa-fields {
    flex: 1 1 auto; min-width: 0; padding: 0;
    display: flex; flex-direction: column; gap: 5px;
}
.eb-wa-fields input {
    font-size: 11px; padding: 2px 6px; height: 23px; background: #fff;
    border: 1px solid #ccc; border-radius: 3px; width: 100%;
}
.eb-wa-fields input:focus { outline: none; border-color: var(--red); }
.eb-wa-row { display: flex; gap: 5px; }
.eb-wa-row input { flex: 1; }
.eb-wa-loginbox button {
    border: 1px solid var(--red); background: var(--red); color: #fff;
    border-radius: 3px; width: 28px; height: 23px; flex-shrink: 0;
    cursor: pointer; line-height: 1; font-size: 11px;
}
.eb-wa-loginbox button:hover { background: var(--red-dk); }

/* eingeloggt */
.eb-wa-loginbox-info { font-size: 11px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-wa-go {
    flex: 1; text-align: center; font-size: 11px; font-weight: bold;
    background: var(--red); color: #fff; border-radius: 3px; padding: 3px 6px; text-decoration: none;
}
.eb-wa-go:hover { background: var(--red-dk); color: #fff; }
.eb-wa-out {
    width: 28px; height: 23px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--red); border-radius: 3px; color: var(--red);
}
.eb-wa-out:hover { background: var(--red); color: #fff; }

.eb-wa-msg { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.eb-wa-msg.err  { background: #f8d7da; color: #842029; }
.eb-wa-msg.warn { background: #fff3cd; color: #664d03; }

/* Platzhalter-Tile (gestrichelt, dezent) */
.eb-tile-placeholder { border-style: dashed; opacity: .65; }
.eb-tile-placeholder .eb-tile-icon,
.eb-tile-placeholder .eb-tile-name { color: #999; }

@media (max-width: 767px) {
    .eb-svc-row { justify-content: flex-start; }
    .eb-svc-group { flex: 1 1 100%; }
    .eb-svc-group .eb-tile { flex: 1 1 110px; width: auto; }
    .eb-wa-loginbox { flex: 1 1 100%; width: auto; }
    .eb-wa-fields { flex: 1; }
}

/* ===== WebAdmin: Inhalt im Content-Body (eingeloggt) ===== */
/* volle Breite → rechtsbündig mit Header-Logo und Balken */
.eb-wa-content { width: 100%; }
/* Sub-Header „WebAdmin": schlicht weiß, ohne Rahmen */
.eb-wa-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 2px 0 6px; background: #fff;
}
/* Status-Zeile mit dem leichten roten Verlauf (wie Produkt-Visual) */
.eb-wa-status {
    margin-top: 8px; padding: 7px 12px; font-size: 12px; color: #333;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border: 1px solid #f0d0d0; border-left: 3px solid var(--red); border-radius: 4px;
}
.eb-wa-status .bi { color: var(--red); }
.eb-wa-bar-title { font-size: 21px; font-weight: bold; color: var(--red); letter-spacing: .3px; line-height: 1.1; }
.eb-wa-bar-user { font-size: 12px; color: #333; margin-left: auto; display: flex; align-items: center; gap: 7px; }
.eb-wa-mode {
    font-size: 10px; background: var(--red); color: #fff; border-radius: 3px;
    padding: 1px 6px; text-transform: uppercase; letter-spacing: .3px;
}
.eb-wa-bar-logout { color: var(--red); font-weight: bold; text-decoration: none; white-space: nowrap; }
.eb-wa-bar-logout:hover { color: var(--red-dk); text-decoration: underline; }

.eb-wa-tile {
    border: 1px solid #e0e0e0; border-top: 3px solid var(--red); border-radius: 4px;
    padding: 14px 12px; height: 100%; text-align: center; background: #fff;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; transition: box-shadow .15s;
}
.eb-wa-tile:hover { box-shadow: 0 2px 8px rgba(153,0,0,.15); }
.eb-wa-tile i { font-size: 1.6rem; color: var(--red); }
.eb-wa-tile-name { font-weight: bold; font-size: 13px; }
.eb-wa-tile-sub { font-size: 11px; color: var(--muted); }

/* ===== WebAdmin: Konten-Liste (Postmaster) ===== */
.eb-wa-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; margin-bottom: 8px;
}
.eb-wa-count { font-size: 12px; color: #444; }
.eb-wa-table-wrap { max-height: 460px; overflow-y: auto; border: 1px solid #eee; border-radius: 4px; }
.eb-wa-table { margin-bottom: 0; font-size: 12px; }
.eb-wa-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #f6f6f6; color: var(--red); font-size: 11px;
    text-transform: uppercase; letter-spacing: .3px; border-bottom: 2px solid #e0d0d0;
}
.eb-wa-table td { vertical-align: middle; }
.eb-badge-box   { background: var(--red); color: #fff; font-weight: normal; font-size: 10px; }
.eb-badge-alias { background: #888; color: #fff; font-weight: normal; font-size: 10px; }

.eb-wa-act {
    border: 1px solid #ddd; background: #fff; color: var(--red);
    border-radius: 3px; width: 26px; height: 24px; line-height: 1;
    margin-left: 2px; cursor: pointer;
}
.eb-wa-act:hover:not(:disabled) { background: var(--red); color: #fff; border-color: var(--red); }
.eb-wa-act:disabled { opacity: .4; cursor: not-allowed; }
.eb-wa-act-del { color: #b00; }
.eb-wa-act-del:hover:not(:disabled) { background: #b00; color: #fff; border-color: #b00; }

/* eb-wa-tile auch als <button> (Self-Service) */
button.eb-wa-tile { font: inherit; cursor: pointer; }

/* WebAdmin: Filter + sortierbare Tabellen-Header */
.eb-wa-filter { width: 220px; flex: 0 0 auto; margin-left: 14px; }
.eb-wa-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.eb-wa-sort:hover { color: var(--red-dk); }
.eb-wa-sort::after { content: ' \2195'; opacity: .35; font-size: 9px; }
.eb-wa-sort.sort-asc::after  { content: ' \25B2'; opacity: .9; }
.eb-wa-sort.sort-desc::after { content: ' \25BC'; opacity: .9; }
@media (max-width: 575px) { .eb-wa-filter { width: 100%; margin-left: 0; margin-top: 6px; } }

/* WebAdmin: Catch-all-Statuszeile */
.eb-wa-catchall { font-size: 12px; color: #444; margin: 8px 0 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.eb-wa-catchall i { color: var(--red); }

/* Schalter/Checkboxen (Bootstrap form-switch) in EBOX-Rot statt Blau */
.form-check-input:checked { background-color: var(--red); border-color: var(--red); }
.form-check-input:focus   { border-color: rgba(153,0,0,.45); box-shadow: 0 0 0 .2rem rgba(153,0,0,.25); }

/* WebAdmin: deaktivierte Postfächer ausgrauen (Aktionen bleiben sichtbar) */
.eb-wa-table tr.eb-wa-disabled td:not(:last-child),
.eb-wa-table tr.eb-wa-disabled td:not(:last-child) strong { color: #b3b3b3; font-weight: normal; }
.eb-badge-off { background: #9a9a9a; color: #fff; font-size: 9px; margin-left: 5px; vertical-align: middle; }
.eb-wa-act-off { color: #c08a00; }          /* Toggle „aus" hervorheben */
.eb-wa-act-off:hover { color: #9a6f00; }
.eb-wa-table form.d-inline { margin: 0; }

/* DNS-Tabelle: kleiner Header-Zusatz "€ netto" */
.eb-th-sub { font-size: 9px; font-weight: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ===== Split: EBOX Produkte (links) + EBOX News (rechts) ===== */
.eb-split-row { display: flex; gap: 22px; align-items: stretch; margin-bottom: 6px; }
.eb-split-col { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
/* Produkt-Carousel 1-spaltig (halbe Breite) */
.eb-carousel-1col .eb-product-page { grid-template-columns: 1fr; }

/* EBOX News (RSS) Feed-Liste */
/* füllt die Spalte bis zur Unterkante (flex-basis 0 → linke Spalte bestimmt die Höhe), scrollt bei Überlänge */
.eb-news-feed { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #e2e2e2; background: #fafafa; overflow-y: auto; }
.eb-news-item { display: block; padding: 7px 10px; border-bottom: 1px solid #ececec; text-decoration: none; color: var(--text); font-weight: normal; }
.eb-news-item:last-child { border-bottom: none; }
.eb-news-item:hover { background: #fff; text-decoration: none; }
.eb-news-item-title { color: var(--red); font-size: 11px; font-weight: bold; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eb-news-item-meta { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; }

/* News-Kategorien: optisch abgesetzte Gruppen innerhalb der EBOX-News-Box */
.eb-news-group { border-bottom: 2px solid #e2e2e2; }
.eb-news-group:last-child { border-bottom: none; }
.eb-news-group-head { padding: 6px 10px 4px; background: #f0f0f0; border-top: 1px solid #e2e2e2; }
.eb-news-group:first-child .eb-news-group-head { border-top: none; }
.eb-news-group-title { display: block; font-size: 11px; font-weight: bold; letter-spacing: .5px;
    text-transform: uppercase; color: var(--red); }
.eb-news-group-label { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; }
/* Hinweis in der EBOX-News-Überschrift, dass die Feeds nur Deutsch sind (nur EN-Locale) */
.eb-news-de-note { color: var(--muted); font-weight: normal; text-transform: none; letter-spacing: 0; font-size: 9px; }

/* Domain-Preise: halbe Breite, 2-spaltig (zwei kompakte Tabellen nebeneinander) */
.eb-dns-half { max-width: calc(50% - 11px); }
.eb-dns-2col { display: flex; gap: 14px; align-items: flex-start; }
.eb-dns-2col > .eb-dns-table { flex: 1 1 50%; width: 50%; margin-bottom: 0; }
.eb-dns-2col .eb-dns-table { font-size: 10px; }
.eb-dns-2col .eb-dns-table th, .eb-dns-2col .eb-dns-table td { padding: 3px 5px; }

@media (max-width: 992px) {
    .eb-split-row { flex-direction: column; }
    .eb-split-col { flex: 1 1 auto; width: 100%; }
    .eb-dns-half { max-width: none; }
}

/* .AT-Aktions-Kachel (links neben Zimbra) – voll rot, deutlich abgesetzt */
.eb-tile-atpromo {
    background: var(--red);
    border: 1px solid var(--red-dk);
    border-top: 3px solid var(--red-dk);
    box-shadow: 0 2px 8px rgba(153,0,0,.30);
    margin-right: 18px;   /* abgesetzt von Zimbra */
}
.eb-tile-atpromo .eb-tile-name { color: #fff; font-weight: bold; }
.eb-tile-atpromo .eb-tile-sub,
.eb-tile-atpromo .eb-tile-icon { color: #fff; }
.eb-tile-atpromo { cursor: default; }   /* nur Anzeige, kein Link */
/* Hover-Effekt der normalen Tiles (weiß) für die Aktions-Kachel unterbinden – bleibt rot */
.eb-tile-atpromo:hover {
    background: var(--red);
    box-shadow: 0 2px 8px rgba(153,0,0,.30);
    color: #fff;
}
.eb-tile-atpromo:hover .eb-tile-name,
.eb-tile-atpromo:hover .eb-tile-sub,
.eb-tile-atpromo:hover .eb-tile-icon { color: #fff; }