/* ============================================================================ ThurData CI 2030 — Kundenbereich: Bruecke auf das Croster-Markup ---------------------------------------------------------------------------- VERSION 20260928e <- bei JEDER Aenderung hochzaehlen (Datum + Buchstabe) Derselbe Wert steht in --tda-clientarea-version (:root, unten) und im Cache-Stempel ?v={$ciVer} aus thurdata/ci-version.tpl. Diese Datei hat KEINE Quelle in homepage/ci-2030/ — sie ist selbst die Quelle und wird nur hier gepflegt (anders als base und app). V1, 17.09.2026 (ROKA). Geladen NACH ci-2030-base.css und ci-2030-app.css, nur auf WHMCS-Systemseiten (Clientarea, Support, Wissensdatenbank, Warenkorb) — nicht auf Pagebuilder-/Homepage-Seiten (siehe ai-pre-header.tpl). Was diese Datei tut: Sie legt das Kundenbereich-CI (Skill ci-app) auf das Croster-Markup, das WHMCS und Croster selbst erzeugen und das wir NICHT umbauen (Sidebar-Includes, DataTables, Bootstrap-Grid, Markdown-Editor, Alerts, Labels). Die Seiten-Templates selbst sind auf .tda-* umgebaut — fuer alles, was aus Includes und JS kommt, uebersetzt diese Datei. Regel: KEINE neuen Farben, KEINE neuen Masse — nur Zuordnung auf die Tokens und Klassen aus base/app. Wo eine Regel !important braucht, steht dabei, welche Croster-Regel sie ausstechen muss. ============================================================================ */ /* Ausgelieferte Fassung im Browser messbar: getComputedStyle(document.documentElement).getPropertyValue('--tda-clientarea-version') */ :root{ --tda-clientarea-version: "20260928e"; } /* Crosters Hilfsklasse .w-hidden (0,1,0) verliert gegen unser spaeteres .btn{display:inline-flex} — WHMCS-JS blendet damit Knoepfe im Domainchecker ein und aus. Spezifitaet hochsetzen, nicht !important: jQuery show()/toggle() arbeitet mit Inline-Styles. */ .tda-body .btn.w-hidden,.tda-body .tda-panel.w-hidden,.tda-body .alert.w-hidden{display:none} /* .alert{display:flex} unten wuerde sonst leere Fehlerkaesten im Warenkorb zeigen */ /* KEIN !important: jQuery show() setzt inline display */ /* ---------------------------------------------------------- 1. Flaeche */ body.tda-body{background:var(--td-light)} .tda-body #main-body{background:var(--td-light);padding-top:28px;padding-bottom:56px} .tda-body #main-body>.container{max-width:var(--tda-content-max)} .tda-body .main-container{background:transparent;box-shadow:none;padding:0} /* Croster gibt der Inhaltsspalte Rahmen und Schatten — die App hat Panels */ .tda-body .primary-content{background:transparent;box-shadow:none;border:0;padding:0 15px} .tda-body .primary-content>.TM-card,.tda-body .primary-content>.section>.TM-card{border:0;box-shadow:none;background:transparent;padding:0} /* --------------------------------------------------- 2. Seitenleiste (WHMCS) */ /* Markup kommt aus includes/sidebar.tpl: .panel.panel-sidebar > .panel-heading + .list-group */ .tda-body .sidebar .panel-sidebar{background:transparent;border:0;box-shadow:none;margin:0 0 22px;border-radius:0} .tda-body .sidebar .panel-sidebar>.panel-heading{ background:transparent;border:0;padding:0 12px 6px; } .tda-body .sidebar .panel-sidebar>.panel-heading .panel-title{ font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--td-subtle);margin:0;line-height:1.4; } .tda-body .sidebar .panel-minimise{display:none} .tda-body .sidebar .panel-sidebar .panel-title i{display:none} /* Gruppen-Icons weg */ .tda-body .sidebar .list-group{border:0;margin:0} .tda-body .sidebar .panel-sidebar .list-group-item{ display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px; border:0;background:transparent;border-radius:6px;box-shadow:none; color:var(--td-text);font-size:14.5px;font-weight:400;line-height:1.35;margin:0; transition:background-color var(--td-transition),color var(--td-transition); /* statt Croster «all .1s» */ } .tda-body .sidebar .panel-sidebar .list-group-item+.list-group-item{margin-top:2px} .tda-body .sidebar .list-group-item i{width:18px;text-align:center;color:var(--td-subtle);font-size:14px} /* Lucide-Icons (SVG inline, ci-konventionen §4): «Hilfe & Support» aus thurdata/support-nav.tpl, alle anderen Seitenleisten aus der Zuordnung $tdIco in includes/sidebar.tpl (seit 20260928e). */ .tda-body .sidebar .list-group-item .sc-ico{flex:none;width:18px;height:18px;color:var(--td-subtle);transition:color var(--td-transition)} /* ---- Seitenleisten-Stil, Entscheid ANEB 28.09.2026: zuerst «Hilfe & Support», seit 20260928e ALLE WHMCS-Seitenleisten (Kundenbereich, Aktuelles «Nach Monat»). Aktiv = volle Primary-Flaeche mit weisser Schrift; inaktiv ruhig ohne Karte; Hover nur Farbe, ohne Bewegung (ci-konventionen §4b); Fokus als Ring. Selektoren mit .panel-sidebar (0,4,0+), damit Crosters «.panel-sidebar .list-group a.list-group-item» (0,3,1) und seine Hover-Regeln (0,4,1) nicht durchschlagen. */ /* Croster schiebt Seitenleisten-Punkte bei :hover/:focus um 8 px nach rechts («.panel-sidebar .list-group a.list-group-item:hover{margin-left:8px}») - ohne «transition:all» ein Ruck. */ .tda-body .sidebar .panel-sidebar .list-group a.list-group-item:hover, .tda-body .sidebar .panel-sidebar .list-group a.list-group-item:focus{margin-left:0} @media (hover:hover){ .tda-body .sidebar .panel-sidebar a.list-group-item:hover{background:var(--td-blue);color:var(--td-text)} .tda-body .sidebar .panel-sidebar a.list-group-item:hover .sc-ico{color:var(--td-primary)} } @media (hover:none){ .tda-body .sidebar .panel-sidebar a.list-group-item:not(.active):hover{background:transparent;color:var(--td-text)} .tda-body .sidebar .panel-sidebar a.list-group-item:not(.active):hover .sc-ico{color:var(--td-subtle)} } .tda-body .sidebar .panel-sidebar .list-group-item.active, .tda-body .sidebar .panel-sidebar .list-group-item.active:hover{background:var(--td-primary);color:#fff;font-weight:700;box-shadow:none} .tda-body .sidebar .panel-sidebar .list-group-item.active .sc-ico{color:#fff} /* Tastatur-Fokus deutlicher als Hover (ci-konventionen §4b). Als box-shadow, weil Croster «a:focus{outline:0 none !important}» setzt; weisse Luecke, damit der Ring auch um Blau sichtbar ist. */ .tda-body .sidebar .panel-sidebar .list-group-item:focus-visible, .tda-body .sidebar .panel-sidebar .list-group-item.active:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--td-primary)} /* ---- Nur «Hilfe & Support» (.sc-panel, thurdata/support-nav.tpl): Lage und Mobile-Leiste ---- */ @media (min-width:992px){ /* auf allen Hilfeseiten an derselben Stelle: zuerst in der Spalte (Aktuelles setzt «Nach Monat» davor, Reihenfolge nur optisch) und klebend unter dem Header (Base --td-doc-offset, wie .td-doc-toc) */ .tda-body .col-lg-3:has(> .sidebar-secondary > .sc-panel){display:flex;flex-direction:column} .tda-body .col-lg-3 > .sidebar-secondary:has(> .sc-panel){order:-1;position:sticky;top:var(--td-doc-offset)} } /* Mobile/Tablet (unter 992 px): statt des Panels nach dem Inhalt die Leiste oben (.sc-leiste). */ @media (max-width:991.98px){ .tda-body .sidebar .sc-panel{display:none} .tda-body .sidebar-secondary:not(:has(> .panel-sidebar:not(.sc-panel))){display:none} } /* Leiste: klebt unter dem Header (Base --td-header-h: 60/56 px), weiss mit Linie, 52 px, seitlich scrollbar ohne sichtbaren Balken; der weiche Rand rechts und der angeschnittene naechste Punkt zeigen, dass es weitergeht. Kein Umschalten, keine Animation. */ .tda-body .sc-leiste{ position:sticky;top:var(--td-header-h);z-index:40; margin:-28px 0 18px;padding:0;background:#fff;border-bottom:1px solid var(--td-line); } .tda-body .sc-leiste-spur{ position:relative;display:flex;align-items:center;gap:4px;height:52px;padding:0 15px; overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%); } .tda-body .sc-leiste-spur::-webkit-scrollbar{display:none} .tda-body .sc-leiste-tab{ flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:6px; font-size:14.5px;font-weight:500;line-height:1;color:var(--td-text);text-decoration:none;white-space:nowrap; transition:background-color var(--td-transition),color var(--td-transition); } @media (hover:hover){ .tda-body .sc-leiste-tab:hover{background:var(--td-blue);color:var(--td-text);text-decoration:none} } .tda-body .sc-leiste-tab.is-active,.tda-body .sc-leiste-tab.is-active:hover{background:var(--td-primary);color:#fff;font-weight:700} /* Tastatur-Fokus wie im Panel (box-shadow, Croster killt outline) */ .tda-body .sc-leiste-tab:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--td-primary)} @media (prefers-reduced-motion:reduce){ .tda-body .sidebar .panel-sidebar .list-group-item,.tda-body .sidebar .sc-ico,.tda-body .sc-leiste-tab{transition:none} } /* Die Icon-Farben oben kamen nie an: Croster faerbt mit «.panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform)» (#ccc, 0,5,1) und schlaegt damit 0,3,1. Gemessen 27.09.2026 in der Wissensdatenbank. Derselbe Selektor mit Praefix: */ .tda-body .sidebar .panel-sidebar .list-group-item i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform){color:var(--td-subtle)} .tda-body .sidebar .panel-sidebar .list-group-item:hover i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform){color:var(--td-primary)} .tda-body .sidebar .panel-sidebar .list-group-item.active i:not(.fa-circle):not(.fa-dot-circle):not(.no-transform){color:#fff} .tda-body .sidebar .list-group-item .badge{ margin-left:auto;background:var(--td-light);color:var(--td-muted);font-size:11px;font-weight:700; min-width:18px;height:18px;padding:0 6px;border-radius:var(--td-radius-pill); display:inline-flex;align-items:center;justify-content:center; } /* Croster setzt Kontakten per «:before» ein Font-Awesome-Zeichen (#ccc) vor - Icon kommt jetzt als Lucide aus includes/sidebar.tpl (Links), der Hinweis «Keine Kontaktdaten» bleibt ohne. */ .tda-body .sidebar .panel-sidebar.panel-client-contacts .list-group-item::before{content:none} /* Kundendaten-Block («Ihre Information») und Kontakte: als Kennwerte, nicht als Panel */ .tda-body .sidebar .panel-body{padding:4px 12px 8px;font-size:14px;color:var(--td-body);line-height:1.5} .tda-body .sidebar .panel-body .btn{margin-top:10px} .tda-body .sidebar .panel-footer{background:transparent;border:0;padding:4px 12px} /* Mobile Auswahl-Select der Sidebar (Croster) */ .tda-body .sidebar select.form-control{margin:0 12px 12px;width:calc(100% - 24px)} /* -------------------------------------------------------- 3. Seitenkopf */ /* Markup aus includes/pageheader.tpl — bleibt Croster, wird hier zur .tda-page-head */ .tda-body .header-lined{ display:flex;flex-direction:column-reverse;gap:0;margin:0 0 22px;padding:0;border:0;background:transparent; } .tda-body .header-lined h1{ font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.015em;color:var(--td-text);margin:0; font-family:inherit; } .tda-body .header-lined>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .tda-body .header-lined .breadcrumb{ background:transparent;padding:0;margin:0 0 10px;font-size:13px;color:var(--td-subtle); display:flex;flex-wrap:wrap;gap:6px; } .tda-body .header-lined .breadcrumb-item+.breadcrumb-item::before{content:"/";padding:0 6px 0 0;color:var(--td-line-strong)} .tda-body .header-lined .breadcrumb a{color:var(--td-muted);text-decoration:none} .tda-body .header-lined .breadcrumb a:hover{color:var(--td-primary)} .tda-body .header-lined .breadcrumb-item.active{color:var(--td-subtle)} .tda-body .header-lined>div:last-child>span{display:block;font-size:14px;color:var(--td-muted);margin-top:6px} /* Tabellensuche im Seitenkopf: Feld wie Base §13, 36 px, mit Lupe */ .tda-body .header-lined .search-group{position:relative;min-width:260px} .tda-body .header-lined .search-group input{min-height:36px;font-size:14px;padding-left:36px;width:100%} .tda-body .header-lined .search-group::before{ content:"";position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%); background:url("data:image/svg+xml;utf8,") no-repeat center/16px; pointer-events:none; } /* ---------------------------------------------------- 4. Hinweise (WHMCS) */ /* .alert kommt aus includes/alert.tpl, flashmessage.tpl und WHMCS-Kern */ .tda-body .alert{ display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin:0 0 18px; border-radius:var(--td-radius-lg);border:1.5px solid var(--tda-panel-line);background:#fff; border-left:4px solid var(--td-primary);font-size:14px;color:var(--td-body); } .tda-body .alert p{margin:0} .tda-body .alert-success{border-left-color:var(--tda-ok)} .tda-body .alert-danger,.tda-body .alert-error{border-left-color:var(--tda-error);background:rgba(179,38,30,.04)} .tda-body .alert-warning{border-left-color:var(--tda-error)} .tda-body .alert-info{border-left-color:var(--td-primary)} .tda-body .alert .close{margin-left:auto;opacity:.6;font-size:16px;line-height:1;background:transparent;border:0;color:var(--td-muted)} /* Dev-Lizenz-Hinweis von WHMCS (nur devel) */ .tda-body .alert-dev-license,.tda-body div[class*="dev-license"]{border-left-color:var(--tda-chart-4)} /* ----------------------------------------------------- 5. Status-Etiketten */ /* WHMCS/Croster: — wird zur .tda-status */ .tda-body .label.status{ display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px; border-radius:var(--td-radius-pill);border:1px solid var(--td-line-strong); background:#fff;font-size:12.5px;font-weight:700;color:var(--td-body);white-space:nowrap; line-height:1;text-transform:none;letter-spacing:0; } .tda-body .label.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tda-off);flex:none} .tda-body .label.status-active::before,.tda-body .label.status-paid::before,.tda-body .label.status-answered::before, .tda-body .label.status-closed::before,.tda-body .label.status-completed::before{background:var(--tda-ok)} .tda-body .label.status-closed::before{background:var(--tda-off)} .tda-body .label.status-pending::before,.tda-body .label.status-open::before,.tda-body .label.status-customer-reply::before, .tda-body .label.status-in-progress::before,.tda-body .label.status-on-hold::before{background:var(--tda-pending)} .tda-body .label.status-unpaid::before,.tda-body .label.status-overdue::before,.tda-body .label.status-suspended::before, .tda-body .label.status-terminated::before,.tda-body .label.status-fraud::before,.tda-body .label.status-collections::before{background:var(--tda-error)} .tda-body .label.status-unpaid,.tda-body .label.status-overdue,.tda-body .label.status-suspended{color:var(--tda-error);border-color:rgba(179,38,30,.35)} .tda-body .label.status-cancelled::before,.tda-body .label.status-expired::before,.tda-body .label.status-refunded::before{background:var(--tda-off)} /* Farbige Ticket-Status aus dem Admin (style="border-color:…;color:…") behalten ihre Farbe im Punkt */ .tda-body .label.status-custom::before{background:currentColor} /* -------------------------------------------------------- 6. DataTables */ /* Die Tabellen behalten class="datatable table" (WHMCS-JS haengt daran). Aussehen = .tda-table. */ .tda-body table.datatable,.tda-body .table{ width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:0;margin:0; } .tda-body table.datatable thead th,.tda-body .table thead th{ background:#fff;color:var(--td-subtle);font-size:12px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;border:0;border-bottom:1px solid var(--td-line-strong); padding:10px 16px;white-space:nowrap;vertical-align:middle; } .tda-body table.datatable thead th.sorting_asc,.tda-body table.datatable thead th.sorting_desc{color:var(--td-primary)} .tda-body table.datatable tbody td,.tda-body .table tbody td{ padding:11px 16px;border:0;border-bottom:1px solid var(--td-line);vertical-align:middle;color:var(--td-body); } .tda-body table.datatable tbody tr:last-child td{border-bottom:0} .tda-body table.datatable tbody tr{cursor:pointer} @media (hover:hover){.tda-body table.datatable tbody tr:hover td,.tda-body .table-hover tbody tr:hover td{background:var(--td-light)}} .tda-body table.datatable tbody td a{color:var(--td-primary);text-decoration:none;font-weight:500} .tda-body table.datatable tbody td strong a{color:var(--td-text)} .tda-body .action-buttons a{ display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center; border-radius:var(--td-radius-sm);color:var(--td-muted); } .tda-body .action-buttons a:hover{background:var(--td-light);color:var(--td-primary)} .tda-body .action-buttons a .text-danger{color:var(--tda-error) !important} /* Bootstrap setzt .text-danger mit !important */ /* Rahmen der Tabelle: das Panel liefert ihn — der Croster-Container nicht */ .tda-body .table-container{background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);overflow:hidden;padding:0} .tda-body .table-container .table-header{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px var(--tda-panel-pad);border-bottom:1px solid var(--td-line); } .tda-body .table-container .table-header label{font-size:13px;color:var(--td-muted);font-weight:400;margin:0} /* Filter-Dropdown («Alle anzeigen») sieht aus wie ein Select */ .tda-body .view-filter-btns .dropdown-toggle{ min-height:36px;padding:0 34px 0 12px;font-size:14px;font-weight:400;color:var(--td-text); background:#fff;border:1px solid var(--td-line-strong);border-radius:var(--td-radius-sm); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 10px center;background-size:18px; } .tda-body .view-filter-btns .dropdown-toggle::after{display:none} .tda-body .view-filter-btns .dropdown-menu{border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);padding:6px;box-shadow:var(--td-shadow-interaction)} .tda-body .view-filter-btns .dropdown-item{padding:8px 12px;border-radius:var(--td-radius-sm);font-size:14px;color:var(--td-body)} .tda-body .view-filter-btns .dropdown-item:hover{background:var(--td-light);color:var(--td-text)} .tda-body .view-filter-btns li.active .dropdown-item{background:rgba(27,95,143,.08);color:var(--td-primary);font-weight:700} /* DataTables-Fusszeile: Anzahl links, Seiten rechts (= .tda-pager) */ .tda-body .dataTables_wrapper .listtable{padding:0} .tda-body .dataTables_filter{display:none} /* die Suche steht im Seitenkopf (#table-search) */ .tda-body .dataTables_info,.tda-body .dataTables_length,.tda-body .dataTables_paginate{ padding:10px var(--tda-panel-pad);font-size:13px;color:var(--td-muted);border-top:1px solid var(--td-line); } .tda-body .dataTables_wrapper::after{content:"";display:table;clear:both} .tda-body .dataTables_length{float:right;border-top:0;padding-top:0} .tda-body .dataTables_length select{min-height:30px;padding:0 30px 0 10px;font-size:13px;width:auto;background-position:right 8px center;display:inline-block} .tda-body .dataTables_paginate{float:right;border-top:0;padding-top:0} .tda-body .dataTables_paginate .pagination{margin:0;gap:4px;display:flex} .tda-body .dataTables_paginate .page-link{ width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center; border:0;border-radius:var(--td-radius-sm);color:var(--td-muted);background:transparent;font-size:13px; } .tda-body .dataTables_paginate .page-link:hover{background:var(--td-light);color:var(--td-primary)} .tda-body .dataTables_paginate .page-item.active .page-link{background:rgba(27,95,143,.1);color:var(--td-primary);font-weight:700} .tda-body .dataTables_paginate .page-item.disabled .page-link{opacity:.4} .tda-body #tableLoading{padding:24px;color:var(--td-muted);font-size:14px} /* Responsive-Helfer von Croster: ausgeklappte Zeile */ .tda-body table.datatable .row-detail td{background:var(--td-light)} .tda-body table.datatable .expand-icon,.tda-body table.datatable td.expand::before{color:var(--td-primary)} /* -------------------------------------------------------- 7. Formulare */ /* Bootstrap-Klassen bleiben (WHMCS-JS: Validierung, Passwortstaerke) — Aussehen kommt aus Base §13 ueber die Elemente */ .tda-body .form-control{ height:auto;box-shadow:none;border-color:var(--td-line-strong);border-radius:var(--td-radius-sm); font-size:15px;color:var(--td-text); } .tda-body .form-control:focus{border-color:var(--td-primary);box-shadow:var(--td-field-ring)} .tda-body .form-control.disabled,.tda-body .form-control:disabled,.tda-body .form-control[readonly]{background:var(--td-light);color:var(--td-subtle)} .tda-body .form-group{margin:0 0 18px} .tda-body .form-group label,.tda-body label{font-size:14px;font-weight:700;color:var(--td-body);margin-bottom:6px} .tda-body .form-text,.tda-body .help-block,.tda-body .text-muted small{font-size:13px;color:var(--td-muted)} .tda-body .form-actions{border:0;padding:0;margin:0;background:transparent} /* Markdown-Editor (bootstrap-markdown) am Ticketfeld: ruhige Leiste wie .tda-toolbar */ .tda-body .md-editor{border:1px solid var(--td-line-strong);border-radius:var(--td-radius-sm);overflow:hidden} .tda-body .md-editor.active{border-color:var(--td-primary);box-shadow:var(--td-field-ring)} .tda-body .md-editor .md-header{background:var(--td-light);border-bottom:1px solid var(--td-line-strong);padding:6px} .tda-body .md-editor .md-header .btn{ min-height:30px;height:30px;padding:0 8px;border:0;background:transparent;color:var(--td-muted); font-size:13px;box-shadow:none;border-radius:4px; } .tda-body .md-editor .md-header .btn:hover{background:#fff;color:var(--td-primary)} .tda-body .md-editor .md-header .btn-primary{background:transparent;border:0;color:var(--td-muted) !important} /* «Vorschau» ist kein Primaerknopf; das !important schlaegt die Knopfregel oben */ .tda-body .md-editor textarea.md-input,.tda-body .md-editor .md-preview{border:0;border-radius:0;box-shadow:none;padding:11px 14px;min-height:220px;font-family:inherit;font-size:15px} .tda-body .md-editor .md-footer{background:var(--td-light);border-top:1px solid var(--td-line);font-size:12px;color:var(--td-subtle);padding:4px 10px} /* Dateiauswahl (Bootstrap custom-file) */ .tda-body .custom-file{height:44px} .tda-body .custom-file-label{ height:44px;line-height:28px;border:1px solid var(--td-line-strong);border-radius:var(--td-radius-sm) 0 0 var(--td-radius-sm); font-size:14px;color:var(--td-muted);font-weight:400;box-shadow:none; } .tda-body .custom-file-label::after{height:42px;line-height:28px;background:var(--td-light);color:var(--td-body);border-left:1px solid var(--td-line-strong);content:"Durchsuchen"} .tda-body .attachment-group .btn-default{border-radius:0 var(--td-radius-sm) var(--td-radius-sm) 0} /* ------------------------------------------------------- 8. Knoepfe */ /* Base setzt .btn-primary/.btn-secondary. Croster/Bootstrap haben zusaetzlich .btn-default und .btn-sm */ .tda-body .btn-default{background:#fff;border:1.5px solid var(--td-primary);color:var(--td-primary)} .tda-body .btn-default:hover{border-color:var(--td-accent);color:var(--td-accent);background:rgba(240,130,40,.055)} .tda-body .btn-primary{color:#fff !important} /* Bootstrap-Regel mit !important im Croster-Theme */ .tda-body .btn.btn-sm{min-height:32px;padding:0 12px;font-size:13px} .tda-body .btn.btn-lg{min-height:52px;font-size:15px} .tda-body .btn-block{width:auto;display:inline-flex} /* keine vollbreiten Balken */ /* ------------------------------------------------------ 9. Sonstiges */ .tda-body .no-data,.tda-body .alert-lg{ background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg); padding:36px 20px;text-align:center;color:var(--td-muted);font-size:14px; } .tda-body .no-data .icon{display:none} .tda-body .no-data .text{margin-bottom:14px;color:var(--td-text);font-weight:500} /* Croster-Sektionsabstaende */ .tda-body .primary-content .section{margin:0 0 20px} .tda-body .primary-content h4{font-size:16px;font-weight:700;color:var(--td-text);margin:0 0 12px} /* Das Croster-Tooltip/Loader-Overlay bleibt, der Rest der Base-Typo greift nur im Inhalt */ .tda-body #main-body h1,.tda-body #main-body h2,.tda-body #main-body h3{font-family:inherit} @media (max-width:991px){ .tda-body #main-body{padding-top:16px} .tda-body .sidebar{margin-bottom:20px} .tda-body .header-lined .search-group{min-width:0;width:100%} } /* --------------------------------------------- 10. Kontrollzentrum-Panels */ /* Listen aus den WHMCS-Startseiten-Panels (Dienste, Tickets, Neuigkeiten) — Markup kommt aus dem WHMCS-Kern bzw. includes/active-products-services-item.tpl */ .tda-body .tda-home-list{border:0;margin:0} .tda-body .tda-home-list .list-group-item{ display:block;border:0;border-bottom:1px solid var(--td-line);border-radius:0; padding:12px var(--tda-panel-pad);background:transparent;color:var(--td-text);font-size:14.5px;font-weight:500; } .tda-body .tda-home-list .list-group-item:last-child{border-bottom:0} .tda-body .tda-home-list a.list-group-item:hover{background:var(--td-light);color:var(--td-primary)} .tda-body .tda-home-list .list-group-item .text-last-updated, .tda-body .tda-home-list .list-group-item small{display:block;font-size:13px;color:var(--td-muted);font-weight:400;margin-top:2px} .tda-body .tda-home-list .list-group-item label.label{ display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-left:6px;border-radius:var(--td-radius-pill); font-size:12px;font-weight:700;background:var(--td-light) !important;color:var(--td-body) !important; /* Inline-Farbe aus dem Admin */ } /* Dienst-Zeile */ .tda-body .div-service-item{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .tda-body .div-service-name{display:flex;flex-direction:column;flex:1 1 240px;min-width:0} .tda-body .div-service-name b{color:var(--td-text);font-weight:700} .tda-body .div-service-name .text-domain{font-size:13px;color:var(--td-muted);font-weight:400} .tda-body .div-service-status{margin-left:auto} .tda-body .div-service-status .label-placeholder{display:none} .tda-body .div-service-status .label{ display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px;border-radius:var(--td-radius-pill); border:1px solid var(--td-line-strong);background:#fff;font-size:12.5px;font-weight:700;color:var(--td-body); } .tda-body .div-service-status .label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tda-off)} .tda-body .div-service-status .label-success::before{background:var(--tda-ok)} .tda-body .div-service-status .label-warning::before,.tda-body .div-service-status .label-info::before{background:var(--tda-pending)} .tda-body .div-service-status .label-danger::before{background:var(--tda-error)} .tda-body .div-service-buttons .btn{min-height:32px;padding:0 12px;font-size:13px} .tda-body .div-service-buttons .dropdown-menu{border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);padding:6px} .tda-body .div-service-buttons .dropdown-item{padding:8px 12px;border-radius:var(--td-radius-sm);font-size:14px;cursor:pointer} .tda-body .div-service-buttons .dropdown-item:hover{background:var(--td-light)} /* «Mehr anzeigen»-Fuss */ .tda-body .tda-panel-foot .btn-view-more{font-size:13px;font-weight:700;color:var(--td-primary);text-decoration:none} .tda-body .tda-panel-foot .btn-view-more.disabled{color:var(--td-subtle);pointer-events:none} /* Domain-Formular aus dem WHMCS-Panel: Feld + zwei Knoepfe */ .tda-body .tda-home-register-a-new-domain .input-group{display:flex;gap:10px;padding:0 !important;margin:0 !important} .tda-body .tda-home-register-a-new-domain .input-group .form-control{flex:1 1 auto;min-height:44px} .tda-body .tda-home-register-a-new-domain .input-group-append{display:flex;gap:8px} .tda-body .tda-home-register-a-new-domain .btn-success{background:var(--td-accent);border:1.5px solid var(--td-accent);color:#fff;min-height:44px;padding:0 16px;border-radius:var(--td-radius-sm);font-weight:700} .tda-body .tda-home-register-a-new-domain .btn-success:hover{background:var(--td-accent-hover);border-color:var(--td-accent-hover)} .tda-body .tda-home-register-a-new-domain .btn-default{min-height:44px;padding:0 16px} .tda-body .tda-home-register-a-new-domain .td-help{margin-top:10px} .tda-body .tda-home-register-a-new-domain>.fal{display:none} .tda-body .tda-home-domains-expiring-soon .tda-panel-body p{margin:0;font-size:14.5px;color:var(--td-body)} .tda-body .tda-addon{margin-bottom:18px} @media (max-width:767px){ .tda-body .tda-home-register-a-new-domain .input-group{flex-direction:column} .tda-body .tda-home-register-a-new-domain .input-group-append{flex-direction:column} .tda-body .div-service-status{margin-left:0} } /* ------------------------------------ 11. Wissensdatenbank, Tickets, Formular */ .tda-body .tda-section-title{font-size:16px;font-weight:700;letter-spacing:.02em;margin:26px 0 12px;color:var(--td-text)} .tda-body .tda-kb-cats{gap:14px} .tda-body .tda-kb-popular{margin-top:26px} .tda-body .tda-kb-search .td-help{margin-top:10px} .tda-body .tda-kb-search .td-input-group{max-width:720px} /* Kontaktband der Uebersicht (Support-Hub, 27.09.2026): Telefon links, Knoepfe rechts, auf dem Handy untereinander. Beide Knoepfe sekundaer — die Primaeraktion der Seite ist die Suche direkt darueber. */ .tda-body .tda-kb-direkt>.tda-panel-body{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap} .tda-body .tda-kb-direkt-tel{display:flex;align-items:center;gap:14px;min-width:0} .tda-body .tda-kb-direkt-ico{ width:40px;height:40px;border-radius:var(--td-radius-sm);background:var(--td-blue);color:var(--td-primary); display:flex;align-items:center;justify-content:center;flex:none; } .tda-body .tda-kb-direkt-tel b{display:block;font-size:17px;line-height:1.3} .tda-body .tda-kb-direkt-tel b a{color:var(--td-text);text-decoration:none} .tda-body .tda-kb-direkt-tel b a:hover{color:var(--td-primary)} .tda-body .tda-kb-direkt-tel small{display:block;font-size:13.5px;color:var(--td-muted);margin-top:2px} .tda-body .tda-kb-direkt-tel small span{white-space:nowrap} /* «13:30–» sonst am Zeilenende (390 px) */ .tda-body .tda-kb-direkt .btn-row{margin:0;display:flex;gap:10px;flex-wrap:wrap} @media (max-width:600px){ .tda-body .tda-kb-direkt .btn-row{width:100%} .tda-body .tda-kb-direkt .btn-row .btn{flex:1 1 0;justify-content:center} } /* Kategorie, Suche und Artikel (knowledgebasecat.tpl / knowledgebasearticle.tpl, 27.09.2026) */ .tda-body .tda-kb-desc{font-size:15px;line-height:1.55;color:var(--td-muted);margin:0 0 6px;max-width:760px} .tda-body .tda-kb-admin{font-size:13px;margin:12px 0 0} .tda-body .tda-kb-article>.tda-panel-body{padding:28px 32px 32px} .tda-body .tda-kb-foot{ display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap; padding:12px 32px;border-top:1px solid var(--td-line);background:var(--td-light); } .tda-body .tda-kb-rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:14px;color:var(--td-body)} .tda-body .tda-kb-rate>span{margin-right:4px} .tda-body .tda-kb-facts{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin:0 0 0 auto;padding:0;list-style:none;font-size:13px;color:var(--td-subtle)} .tda-body .tda-kb-facts li{display:inline-flex;align-items:center;gap:6px} .tda-body .tda-kb-print{ display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0; border:0;border-radius:var(--td-radius-sm);background:transparent;color:var(--td-primary);cursor:pointer; } .tda-body .tda-kb-print:hover{background:#fff;color:var(--td-accent)} .tda-body .tda-kb-print:focus-visible{outline:0;box-shadow:var(--td-field-ring)} /* Artikeltext. Die ersten 17 Regeln standen bis #76 im Seiten-CSS-Feld der Croster-Einstellungen (ANGE: Luft ueber den Zwischentiteln, um Bilder, Tabellen und Hinweise) und sind hier Wert fuer Wert uebernommen, die Linienfarbe auf --td-line. Das Feld schreibt .article-content (0,1,x) — die Regeln hier stechen es aus, das Feld kann nach der Messung geleert werden. Neu dazu: Textfarbe (Croster: #888 grau), Titelgroessen in der Stufe der App (Seitentitel 28, Objekttitel 22) und die Lesebreite. Die liegt auf der ganzen Spalte, nicht wie bei .td-doc-text nur auf den Kindern: gemessen 27.09.2026 an allen 31 Artikeln steckt mehr Fliesstext in
(51k Zeichen) als direkt darunter (38k) — eine Kinder-Regel griffe nur zur Haelfte. Bilder und Tabellen nehmen die Spalte ganz (Base: img max-width 100%). */ .tda-body .tda-kb-article .article-content{max-width:760px;font-size:16px;line-height:1.7;color:var(--td-body);overflow-wrap:break-word} .tda-body .tda-kb-article .article-content p{margin:0 0 1.15rem} .tda-body .tda-kb-article .article-content :is(h1,h2,h3,h4){color:var(--td-text);font-weight:700;letter-spacing:-.01em} .tda-body .tda-kb-article .article-content h1{font-size:24px;margin:2.2rem 0 .8rem;line-height:1.25} .tda-body .tda-kb-article .article-content h2{font-size:22px;margin:2.6rem 0 .9rem;padding-bottom:.35rem;border-bottom:1px solid var(--td-line);line-height:1.25} .tda-body .tda-kb-article .article-content h3{font-size:18px;margin:1.9rem 0 .6rem;line-height:1.3} .tda-body .tda-kb-article .article-content h4{font-size:16px;margin:1.5rem 0 .5rem;line-height:1.35} .tda-body .tda-kb-article .article-content>*:first-child{margin-top:0} .tda-body .tda-kb-article .article-content img{display:block;margin:1.7rem auto} .tda-body .tda-kb-article .article-content p>img:first-child:last-child{margin:1.7rem auto} .tda-body .tda-kb-article .article-content iframe{max-width:100%} .tda-body .tda-kb-article .article-content .table-responsive{margin:1.6rem 0} .tda-body .tda-kb-article .article-content table{margin:0} .tda-body .tda-kb-article .article-content .table-responsive+p, .tda-body .tda-kb-article .article-content table+p{margin-top:1.2rem} .tda-body .tda-kb-article .article-content :is(td,th){padding:.6rem .85rem;line-height:1.55} .tda-body .tda-kb-article .article-content :is(ul,ol){margin:0 0 1.3rem;padding-left:1.4rem} .tda-body .tda-kb-article .article-content li{margin-bottom:.4rem} .tda-body .tda-kb-article .article-content li:last-child{margin-bottom:0} .tda-body .tda-kb-article .article-content p[style*="border-left"]{margin:1.8rem 0;padding:.9rem 1.15rem} .tda-body .tda-kb-article .article-content hr{margin:2.2rem 0;border:0;border-top:1px solid var(--td-line)} @media (max-width:767px){ .tda-body .tda-kb-article>.tda-panel-body{padding:20px 16px 24px} .tda-body .tda-kb-foot{padding:12px 16px} .tda-body .tda-kb-article .article-content h1{font-size:21px} .tda-body .tda-kb-article .article-content h2{font-size:19px} } /* Software-Downloads (downloads.tpl / downloadscat.tpl, 21.09.2026): Dateigroesse rechts, Schloss fuer Kundendateien */ .tda-body .tda-dl-list a{align-items:center} .tda-body .tda-dl-list a>span:nth-child(2){flex:1 1 0;min-width:0} /* Basis 0: langer Text darf den Icon-Nachbarn nicht in die naechste Zeile draengen */ .tda-body .tda-list-meta{margin-left:auto;font-size:13px;color:var(--td-subtle);white-space:nowrap;padding-left:12px} .tda-body .tda-lock{display:inline-flex;vertical-align:-2px;margin-left:6px;width:14px;height:14px} .tda-body .tda-lock svg{width:14px;height:14px;stroke:var(--td-subtle);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tda-body .tda-notice--flat{border:0;background:transparent;padding:14px var(--tda-panel-pad)} @media (max-width:600px){ .tda-body .tda-dl-list a{flex-wrap:wrap} .tda-body .tda-list-meta{margin-left:48px;padding-left:0;width:100%} } .tda-body .tda-page-actions{display:flex;justify-content:flex-end;margin:0 0 18px} .tda-body .tda-step{font-size:14px;color:var(--td-muted);margin:-10px 0 18px} .tda-body .tda-choices{display:grid;gap:12px;max-width:760px} .tda-body .tda-choices-note{margin-top:22px;max-width:760px} .tda-body .tda-ticket-form{max-width:860px} .tda-body .tda-ticket-form .td-field .form-control{width:100%;display:block} .tda-body .tda-ticket-form .td-optional,.tda-body .tda-panel-head .td-optional{font-weight:400;text-transform:none;letter-spacing:0;color:var(--td-dark-muted)} .tda-body .tda-ticket-form .attachment-group{display:flex} .tda-body .tda-ticket-form .custom-file{flex:1 1 auto} .tda-body .tda-ticket-form #fileUploadsContainer .attachment-group{margin-top:8px} .tda-body .tda-ticket-form .form-actions{background:transparent} /* --------------------------------------------- 12. Fremde Bereiche schuetzen */ /* Base §13 stylt input/select/textarea global. Der KI-Banner (beizbanner bzw. tdbanner/ bunkerbanner, je nach Branch) und die Croster-Navigation bringen eigene Felder mit — die bekommen ihr Aussehen zurueck. Ausgenommen die Bero-Leiste: sie sitzt im Pre-Header innerhalb von #main-navbar und bringt ihr Feld-Aussehen selbst mit (bero.css). */ .tda-body .beizBanner textarea,.tda-body .beizBanner input, .tda-body #main-navbar input:not(.bero-eingabe),.tda-body #main-navbar select,.tda-body .ai-navbar input:not(.bero-eingabe){ min-height:0;height:auto;padding:revert;border:revert;border-radius:revert;background:revert; font-size:revert;line-height:revert;color:revert;box-shadow:none;appearance:auto;-webkit-appearance:auto; resize:none; } .tda-body .beizBanner .beizChatbox-input{min-height:0} /* Bunker-Banner (tdbanner) setzt Rand, Farbe und Innenabstand selbst — nur nehmen, was Base draufpackt */ .tda-body .bunkerBanner .bunkerChatbox-input{min-height:0;border-radius:0} /* Seitenleiste: ein Knopf dort ist nie die Primaeraktion der Seite */ .tda-body .sidebar .btn-primary,.tda-body .sidebar .btn-success{ background:#fff;border:1.5px solid var(--td-primary);color:var(--td-primary) !important; min-height:32px;padding:0 12px;font-size:13px; } .tda-body .sidebar .btn-primary:hover{border-color:var(--td-accent);color:var(--td-accent) !important;background:rgba(240,130,40,.055)} /* Domain-Formular im Panel: Feld volle Breite, Knoepfe darunter */ .tda-body .tda-home-register-a-new-domain .input-group{flex-wrap:wrap} .tda-body .tda-home-register-a-new-domain .input-group .form-control{flex:1 1 100%} /* ------------------------------------------------ 13. Bestellstrecke: Domain */ /* orderforms/thurdata/domainregister.tpl (Repo thurdataOrderform). Markup-Haken des WHMCS-Domaincheckers bleiben, hier ihr Aussehen. */ .tda-body .tda-domainreg{max-width:1040px;margin-inline:auto} .tda-body .tda-domainreg .tda-page-head{margin-bottom:22px} .tda-body .tda-domainreg-search .td-input-group{max-width:720px} .tda-body .tda-domainreg-search .td-input-group .form-control{min-height:var(--td-field-h-lg);font-size:17px} .tda-body .tda-domainreg-search .td-help{margin-top:10px} .tda-body .tda-domainreg-search .captcha-container{margin-top:12px} /* Ergebnis der Hauptsuche */ .tda-body .tda-domainreg .domain-checker-result-headline{text-align:left} .tda-body .tda-domainreg .domain-lookup-loader{color:var(--td-muted);font-size:14px;margin:0} .tda-body .tda-domainreg #primaryLookupResult>p{margin:0 0 10px;font-size:15px;color:var(--td-body)} .tda-body .tda-domainreg .domain-available{color:var(--td-text)} .tda-body .tda-domainreg .domain-available strong{color:var(--td-primary)} .tda-body .tda-domainreg .domain-unavailable,.tda-body .tda-domainreg .domain-invalid,.tda-body .tda-domainreg .domain-error{color:var(--tda-error)} .tda-body .tda-domainreg .domain-price{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px} .tda-body .tda-domainreg .domain-price .price{font-size:18px;font-weight:700;color:var(--td-text)} .tda-body .tda-domainreg .idn-language-selector{max-width:420px;margin:12px 0} /* Schlaglicht-Endungen: Karten wie .tda-cat */ .tda-body .tda-spotlight{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px} .tda-body .tda-spotlight .spotlight-tld-container{width:auto;float:none;padding:0} .tda-body .tda-spotlight .spotlight-tld{ background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);padding:14px; display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-height:0; } .tda-body .tda-spotlight .tda-spot-tld{font-size:18px;font-weight:700;color:var(--td-text)} .tda-body .tda-spotlight .domain-lookup-result{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:100%} .tda-body .tda-spotlight .available.price{font-size:14px;font-weight:700;color:var(--td-primary)} .tda-body .tda-spotlight .btn.unavailable,.tda-body .tda-spotlight .btn.invalid{ background:transparent;border:0;color:var(--td-subtle);padding:0;min-height:0;font-size:13px;font-weight:500; } .tda-body .tda-spotlight [class^="spotlight-tld-"]:not(.spotlight-tld-container){font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--td-primary)} /* Vorschlaege */ .tda-body .tda-domainreg #domainSuggestions{border:0;margin:0} .tda-body .tda-domainreg .domain-suggestion{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:0;border-bottom:1px solid var(--td-line);border-radius:0; padding:12px var(--tda-panel-pad);font-size:15px;color:var(--td-text); } .tda-body .tda-domainreg .domain-suggestion .domain{font-weight:700} .tda-body .tda-domainreg .domain-suggestion .extension{color:var(--td-primary);font-weight:700} .tda-body .tda-domainreg .domain-suggestion .actions{margin-left:auto;display:flex;align-items:center;gap:12px} .tda-body .tda-domainreg .domain-suggestion .price{font-weight:700;color:var(--td-text)} .tda-body .tda-domainreg .domain-suggestion .promo span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--td-primary)} .tda-body .tda-domainreg .domain-suggestions-warning{padding:10px var(--tda-panel-pad) 14px;margin:0} .tda-body .tda-domainreg .more-suggestions{justify-content:center} /* Endungsfilter: WHMCS-JS toggelt badge-success — das ist unser aktiver Reiter */ .tda-body .tda-domainreg .tld-filters a{border-radius:0;background:transparent !important;color:var(--td-muted) !important;font-size:14px;padding:0 14px;height:42px;display:inline-flex;align-items:center;gap:8px;border-bottom:3px solid transparent;margin-bottom:-1px;text-decoration:none;font-weight:500} .tda-body .tda-domainreg .tld-filters a.badge-success{color:var(--td-primary) !important;font-weight:700;border-bottom-color:var(--td-primary);background:transparent !important} /* Croster faerbt .badge-success mit !important */ .tda-body .tda-domainreg .tld-filters a.badge-success .tda-count{background:rgba(27,95,143,.1);color:var(--td-primary)} /* Preistabelle: display fuer die JS-Ein-/Ausblendung der Zeilen */ .tda-body .tda-tld-table tbody th{font-weight:700;color:var(--td-text)} .tda-body .tda-tld-table td.is-num{font-weight:700;color:var(--td-text)} .tda-body .tda-tld-table td.is-num small{font-weight:400;color:var(--td-muted)} .tda-body .tda-tld-table thead th.is-num{text-align:right} .tda-body .tda-tld-table .no-tlds td{text-align:center} .tda-body .tda-tld-table .tld-row.highlighted th,.tda-body .tda-tld-table .tld-row.highlighted td{background:transparent} .tda-body .tda-domainreg .btn-add-to-cart .loading,.tda-body .tda-domainreg .btn-add-to-cart .added,.tda-body .tda-domainreg .btn-add-to-cart .unavailable{display:none} .tda-body .tda-domainreg #searchDomainInfo,.tda-body .tda-domainreg #primaryLookupResult,.tda-body .tda-domainreg #primaryLookupResult>p{text-align:left !important;padding:0;margin-left:0} /* Croster zentriert mit hoher Spezifitaet */ .tda-body .tda-domainreg .domain-available strong{font-size:18px} /* Schlaglicht-Knopf: Croster setzt ihn absolut, dunkel und vollbreit an den Kartenrand */ .tda-body .tda-spotlight .spotlight-tld .btn{ position:static !important;width:auto !important;height:auto;min-height:32px;padding:0 12px; background:#fff !important;border:1.5px solid var(--td-primary) !important;color:var(--td-primary) !important; border-radius:var(--td-radius-sm) !important;font-size:13px;font-weight:700;box-shadow:none;margin:0; } .tda-body .tda-spotlight .spotlight-tld .btn.unavailable,.tda-body .tda-spotlight .spotlight-tld .btn.invalid{ border:0 !important;color:var(--td-subtle) !important;padding:0;min-height:0; } .tda-body .tda-spotlight .spotlight-tld{height:auto !important;padding-bottom:14px !important} /* Textlinks im dunklen Panelkopf: Croster/td.css faerben Links mit hoeherer Spezifitaet */ .tda-body .tda-panel-head a.btn-text{color:#fff !important} .tda-body .tda-panel-head a.btn-text:hover{color:var(--td-accent) !important} /* ------------------------------------ 14. Bestellstrecke: Konfiguration + Kasse */ /* Markup: orderforms/thurdata/configure_ci.tpl, sidebar-price.tpl, checkout.tpl (Standardvariante). Alle IDs/Klassen des Warenkorb-JS bleiben; hier nur Aussehen. */ .tda-body .tda-conf{max-width:1180px;margin:0 auto} .tda-body .tda-conf-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start} .tda-body .tda-conf-main,.tda-body .tda-conf-aside{min-width:0} @media (max-width:1023px){.tda-body .tda-conf-grid{grid-template-columns:1fr}} /* Croster legt dem Warenkorb-Container Innenabstand und Rahmen bei */ .tda-body #order-standard_cart.tda-conf{padding:0;background:transparent;border:0;box-shadow:none} .tda-body .tda-conf .tda-panel-body>.td-form-grid:last-child>.td-field:last-child{margin-bottom:0} /* Produkt-Panel: Logo rechts, Merkmale als Kennwerte */ .tda-body .tda-conf-product-grid{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:start} @media (max-width:640px){.tda-body .tda-conf-product-grid{grid-template-columns:1fr}.tda-body .tda-conf-logo{order:-1}} .tda-body .tda-conf-name{font-size:22px;font-weight:700;color:var(--td-text);margin:0 0 4px;line-height:1.2} .tda-body .tda-conf-domain{font-size:14px;color:var(--td-muted);margin:0 0 10px} .tda-body .tda-conf-intro{font-size:14px;color:var(--td-body);margin:0 0 12px} .tda-body .tda-conf-logo{display:flex;align-items:flex-start;justify-content:center;padding:10px;background:var(--td-light);border-radius:var(--td-radius-sm)} .tda-body .tda-conf-logo img{width:100%;max-width:160px;height:auto} .tda-body .tda-conf-features{margin-top:6px} .tda-body .tda-conf-features li{padding:7px 0;font-size:14px} .tda-body .tda-conf-yes{color:var(--td-success)} .tda-body .tda-conf-no{color:var(--td-subtle)} .tda-body .tda-conf-opt{color:var(--td-primary)} /* Laufzeit + Ressourcen */ .tda-body .tda-conf-cycle{max-width:420px} .tda-body .tda-conf-slider{margin-bottom:26px} .tda-body .tda-conf-slider:last-child{margin-bottom:8px} .tda-body .tda-range-head label{margin-bottom:8px} .tda-body .irs--modern .irs-bar{background:var(--td-primary)} .tda-body .irs--modern .irs-handle>i:nth-child(1){background:var(--td-primary)} .tda-body .irs--modern .irs-handle{box-shadow:none} .tda-body .irs--modern .irs-from,.tda-body .irs--modern .irs-to,.tda-body .irs--modern .irs-single{background:var(--td-dark);font-size:12px;font-weight:700} .tda-body .irs--modern .irs-from:before,.tda-body .irs--modern .irs-to:before,.tda-body .irs--modern .irs-single:before{border-top-color:var(--td-dark)} .tda-body .irs--modern .irs-line{background:var(--td-light);border-color:var(--td-line-strong)} .tda-body .irs--modern .irs-grid-text{color:var(--td-subtle);font-size:11px} .tda-body .irs--modern .irs-min,.tda-body .irs--modern .irs-max{background:transparent;color:var(--td-subtle);font-size:11px} /* Zugangsdaten: Custom Fields kommen als fertiges Markup aus WHMCS (form-control) */ .tda-body .tda-conf-fields .tda-conf-wide{grid-column:1/-1} .tda-body .tda-conf-tick{grid-column:1/-1} .tda-body .tda-conf-tick .tda-notice{margin-bottom:12px} .tda-body .tda-conf-mailname .td-optional{font-weight:400} .tda-body .tda-input-btn .btn{flex:none;white-space:nowrap} .tda-body .tda-conf-hints{font-size:13px;color:var(--td-muted);margin-top:4px} .tda-body .tda-conf-hints:empty{display:none} .tda-body #hints{margin-top:10px} .tda-body #hints strong{display:block;color:var(--td-body);margin-bottom:4px} .tda-body #hints strong:empty{display:none} .tda-body #hints .fa-check,.tda-body #hints .text-success{color:var(--td-success)} .tda-body #hints .fa-times,.tda-body #hints .text-danger{color:var(--td-error)} /* Add-ons: Karten mit Auswahlzustand (das JS setzt .panel-addon-selected) */ .tda-body .tda-conf-addons{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .tda-body .tda-conf-addons .panel.panel-addon{ margin:0;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);box-shadow:none;background:#fff; cursor:pointer;transition:border-color var(--td-transition),box-shadow var(--td-transition); } .tda-body .tda-conf-addons .panel.panel-addon:hover{border-color:var(--td-primary)} .tda-body .tda-conf-addons .panel.panel-addon.panel-addon-selected{border-color:var(--td-primary);box-shadow:var(--td-field-ring);background:#fff} .tda-body .tda-conf-addons .panel-addon .panel-body{padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start} .tda-body .tda-conf-addons .panel-addon .panel-body::before,.tda-body .tda-conf-addons .panel-addon .panel-body::after{content:none} /* Bootstrap-Clearfix waere sonst ein Grid-Element */ .tda-body .tda-conf-addons .panel-addon .panel-body>.icheckbox_square-blue,.tda-body .tda-conf-addons .panel-addon .panel-body>input{grid-column:1;grid-row:1/span 4;margin:2px 0 0} .tda-body .tda-conf-addons .panel-addon .panel-body>.panel-addon-name,.tda-body .tda-conf-addons .panel-addon .panel-body>.panel-addon-price,.tda-body .tda-conf-addons .panel-addon .panel-body>p{grid-column:2;margin:0} .tda-body .tda-conf-addons .panel-addon{text-align:left;font-size:14px;display:block} .tda-body .tda-conf-addons .panel-addon-name{font-weight:700;font-size:15px;color:var(--td-text)} .tda-body .tda-conf-addons .panel-addon-price{font-size:13px;font-weight:700;color:var(--td-primary)} .tda-body .tda-conf-addons .panel-addon .text-muted{font-size:13px;color:var(--td-muted) !important;margin:0} .tda-body .tda-conf-addons .panel-addon .td-help{margin:0} /* Rechte Spalte: Zusammenfassung, Weiter-Knopf, Hilfe */ .tda-body .tda-conf-summary .order-summary{position:relative;min-height:48px} .tda-body .tda-conf-summary .loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.7);color:var(--td-primary);font-size:20px} /* Inhalt von ordersummary.tpl (AJAX): .product-name/.product-group, .clearfix-Zeilen, .summary-totals, .total-due-today */ .tda-body .tda-conf-summary .summary-container{font-size:14px;color:var(--td-body)} .tda-body .tda-conf-summary .summary-container>.product-name{display:block;font-size:16px;font-weight:700;color:var(--td-text)} .tda-body .tda-conf-summary .summary-container>.product-group{display:block;font-size:12.5px;color:var(--td-muted);margin-bottom:8px} .tda-body .tda-conf-summary .summary-container>.product-name+.product-group+.clearfix{display:none} /* Name steht schon oben */ .tda-body .tda-conf-summary .summary-container .clearfix{display:flex;justify-content:space-between;gap:12px;padding:5px 0;line-height:1.35} .tda-body .tda-conf-summary .summary-container .clearfix .float-left{color:var(--td-muted);min-width:0} .tda-body .tda-conf-summary .summary-container .clearfix .float-right{font-weight:700;color:var(--td-text);white-space:nowrap} .tda-body .tda-conf-summary .summary-container .summary-totals{margin-top:8px;padding-top:8px;border-top:1px solid var(--td-line)} .tda-body .tda-conf-summary .summary-container .total-due-today{ display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-direction:row-reverse; margin-top:10px;padding-top:10px;border-top:2px solid var(--td-text); } .tda-body .tda-conf-summary .summary-container .total-due-today span:last-child{font-size:14px;font-weight:700;color:var(--td-text)} .tda-body .tda-conf-summary .summary-container .total-due-today .amt{font-size:22px;font-weight:700;color:var(--td-primary);white-space:nowrap} .tda-body .tda-conf-summary .summary-container .recurring-totals{font-size:13px;color:var(--td-muted);margin-top:8px} .tda-body .tda-conf-summary #producttotalmessage{margin-top:8px} .tda-body .tda-conf-summary #producttotalmessage:empty{display:none} .tda-body .tda-conf-free{margin:0 0 6px} .tda-body .tda-conf-free b{display:block;font-size:22px;color:var(--td-text)} .tda-body .tda-conf-continue{width:100%;justify-content:center;margin-top:16px} .tda-body .tda-conf-help{background:var(--td-light)} .tda-body .tda-conf-help-title{font-weight:700;color:var(--td-text);margin:0 0 10px} .tda-body .tda-conf-help .btn{margin:0 8px 8px 0} .tda-body .tda-conf-help .td-help{margin:0} /* Kasse */ .tda-body .tda-checkout-switch{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .tda-body .tda-checkout-switch .td-help{margin:0} .tda-body .tda-checkout-accounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .tda-body .tda-checkout-accounts .account{padding:14px 16px} .tda-body .tda-checkout-accounts .account.active{border-color:var(--td-primary);box-shadow:var(--td-field-ring)} .tda-body .tda-checkout-accounts .account label{display:flex;gap:12px;align-items:flex-start;margin:0;padding:0;font-weight:400;width:100%;cursor:pointer} .tda-body .tda-checkout-accounts .account .address{flex:1 1 auto;font-size:14px;color:var(--td-body)} .tda-body .tda-checkout-accounts .account .address strong{display:inline-block;margin-right:8px;color:var(--td-text)} .tda-body .tda-checkout-accounts .account .small{color:var(--td-muted)} .tda-body .tda-checkout .td-form-grid .tda-conf-wide{grid-column:1/-1} .tda-body .tda-checkout .btn-row{margin:4px 0 16px} .tda-body #existingLoginMessage{margin-bottom:16px} .tda-body .tda-checkout-pwrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:2px} .tda-body .tda-checkout-meter{flex:1 1 220px;min-width:0} .tda-body .tda-checkout-meter .progress{height:8px;margin:0 0 6px;border-radius:4px;background:var(--td-light);box-shadow:none} .tda-body .tda-checkout-meter .progress-bar{border-radius:4px} .tda-body .tda-checkout-meter .td-help{margin:0} .tda-body #passwdFeedback{margin-bottom:14px} .tda-body .tda-checkout-hook:empty{display:none} .tda-body .tda-checkout-gateways{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 8px} .tda-body .tda-checkout-gateways .td-check{margin:0;padding:10px 14px;border:1.5px solid var(--td-line-strong);border-radius:var(--td-radius-sm);align-items:center} .tda-body .tda-checkout-gateways .td-check:has(input:checked){border-color:var(--td-primary);box-shadow:var(--td-field-ring)} .tda-body .apply-credit-container{padding:12px 14px;margin-bottom:14px;background:var(--td-light);border-radius:var(--td-radius-sm)} .tda-body .apply-credit-container p{margin:0 0 8px;font-weight:700;color:var(--td-text)} .tda-body .apply-credit-container .td-check{margin-bottom:6px} .tda-body .tda-checkout-cc{margin-top:14px;padding-top:14px;border-top:1px solid var(--td-line)} .tda-body .tda-checkout-newcard{margin:6px 0 12px} .tda-body .tda-checkout .input-group{display:flex} .tda-body .tda-checkout .input-group .form-control{border-radius:var(--td-radius-sm) 0 0 var(--td-radius-sm)} .tda-body .tda-checkout .input-group .btn{min-height:44px;border-radius:0 var(--td-radius-sm) var(--td-radius-sm) 0} .tda-body .tda-checkout-store{display:flex;align-items:center;gap:10px;padding-top:28px} .tda-body .tda-checkout-store label{margin:0;font-weight:400} .tda-body .tda-checkout .form-group.has-error .form-control{border-color:var(--td-error);box-shadow:0 0 0 3px rgba(179,38,30,.15)} .tda-body .tda-checkout .field-error-msg{display:none;font-size:13px;color:var(--td-error);margin-top:4px} .tda-body .tda-checkout-submit{flex-wrap:wrap;gap:16px 24px;padding:18px 0 0;margin-top:4px} .tda-body .tda-checkout-tos{flex:1 1 320px;min-width:0} .tda-body .tda-checkout-tos .td-check{margin:0} .tda-body .tda-checkout-captcha{margin-top:12px} .tda-body .tda-checkout-submit .btn-lg{margin:0} .tda-body .tda-checkout-items li span:first-child{color:var(--td-text);display:flex;flex-direction:column;min-width:0} .tda-body .tda-checkout-items li span:first-child small{font-size:12.5px;color:var(--td-muted);font-weight:400} .tda-body .tda-checkout-items li.is-sub{padding:4px 0 4px 14px;font-size:13px;border-bottom:0} .tda-body .tda-checkout-items li.is-sub span:first-child{color:var(--td-muted)} .tda-body .tda-checkout-items li.is-sub span:last-child{font-weight:400} .tda-body .tda-checkout-totals{margin-top:8px;border-top:1px solid var(--td-line)} .tda-body .tda-checkout-totals li.is-total{font-size:18px;border-top:2px solid var(--td-text);border-bottom:0;margin-top:4px} .tda-body .tda-checkout-totals li.is-total span:first-child{color:var(--td-text);font-weight:700} .tda-body .tda-checkout-totals li.is-total span:last-child{color:var(--td-primary)} .tda-body .tda-conf-summary>.tda-panel-body>.btn-text{margin-top:10px;padding-left:0} /* removetrial/removedoubletrial ersetzen den Bestellknopf: Hinweis + Knopf nebeneinander */ .tda-body .tda-checkout-submit .alert{margin:0;flex:1 1 100%} /* Warenkorb (viewcart.tpl): Positionen als Zeilen, Zusammenfassung mit den JS-IDs (#subtotal, #totalDueToday …) */ .tda-body .tda-cart-list{display:flex;flex-direction:column} .tda-body .tda-cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:16px var(--tda-panel-pad);border-bottom:1px solid var(--td-line)} .tda-body .tda-cart-item.is-sub{background:var(--td-light);padding-left:calc(var(--tda-panel-pad) + 18px)} .tda-body .tda-cart-desc{min-width:0;display:flex;flex-direction:column;gap:2px} .tda-body .tda-cart-group{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--td-muted)} .tda-body .tda-cart-name{font-size:16px;color:var(--td-text)} .tda-body .tda-cart-sub{font-size:13.5px;color:var(--td-muted)} .tda-body .tda-cart-opts{margin:4px 0 0;padding:0;list-style:none;font-size:13px;color:var(--td-muted)} .tda-body .tda-cart-opts li::before{content:"› ";color:var(--td-subtle)} .tda-body .tda-cart-qty{display:flex;align-items:center;gap:8px;margin-top:8px} .tda-body .tda-cart-qty label{margin:0;font-size:13px;font-weight:700} .tda-body .tda-cart-qty .form-control{width:72px;text-align:center;min-height:36px;padding:4px 8px} .tda-body .tda-cart-price{text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:2px} .tda-body .tda-cart-price b{font-size:16px;color:var(--td-text)} .tda-body .tda-cart-price .cycle{font-size:13px;color:var(--td-muted);font-weight:400;white-space:normal} .tda-body .tda-cart-price .renewal{font-size:12.5px} .tda-body .tda-cart-period .dropdown-menu{min-width:220px;font-size:14px} .tda-body .tda-cart-actions{grid-column:1/-1;display:flex;gap:4px 16px;flex-wrap:wrap} .tda-body .tda-cart-actions:empty{display:none} .tda-body .tda-cart-actions .btn-text,.tda-body .tda-cart-foot .btn-text{padding-left:0;padding-right:0;min-height:28px} .tda-body .tda-cart-remove{color:var(--td-error) !important} .tda-body .tda-cart-remove:hover{color:#8f1e18 !important} .tda-body .tda-cart-foot{padding:10px var(--tda-panel-pad);background:var(--td-light);display:flex;justify-content:flex-end} .tda-body .tda-cart-ssl{margin-top:20px} .tda-body .tda-cart-empty{max-width:520px;margin:0 auto;text-align:center} .tda-body .tda-cart-empty .tda-panel-body{padding:40px 24px} .tda-body .tda-cart-empty-ico{font-size:34px;color:var(--td-subtle);margin:0 0 10px} .tda-body .tda-cart-empty h4{margin:0 0 18px;color:var(--td-text)} .tda-body .tda-cart-summary .clearfix{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px} .tda-body .tda-cart-summary .clearfix::before,.tda-body .tda-cart-summary .clearfix::after{content:none} .tda-body .tda-cart-summary .clearfix .float-left{color:var(--td-muted);float:none !important} .tda-body .tda-cart-summary .clearfix .float-right{font-weight:700;color:var(--td-text);text-align:right;float:none !important} .tda-body .tda-cart-summary .recurring-totals{margin-top:8px;padding-top:8px;border-top:1px solid var(--td-line);align-items:flex-start} .tda-body .tda-cart-summary .recurring-charges{font-weight:400;font-size:13px;color:var(--td-muted)} .tda-body .tda-cart-summary .recurring-charges .cost{font-weight:700;color:var(--td-text)} .tda-body .tda-cart-summary .total-due-today{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-direction:row-reverse;margin-top:10px;padding-top:10px;border-top:2px solid var(--td-text)} .tda-body .tda-cart-summary .total-due-today span:not(.amt){font-size:14px;font-weight:700;color:var(--td-text)} .tda-body .tda-cart-summary .total-due-today .amt{font-size:22px;font-weight:700;color:var(--td-primary);white-space:nowrap} .tda-body .tda-cart-summary .total-due-today .tda-conf-free{flex:1 1 auto} .tda-body .tda-cart-summary .express-checkout-buttons:empty{display:none} .tda-body .tda-cart-summary .express-checkout-buttons .separator{text-align:center;font-size:12px;color:var(--td-subtle);margin:8px 0} .tda-body .tda-cart-summary .btn-checkout.disabled{pointer-events:none;opacity:.5} .tda-body .tda-checkout-main{min-width:0} .tda-body .tda-conf-summary .loader.w-hidden{display:none} /* Croster .w-hidden (0,1,0) verliert sonst gegen display:flex oben */ .tda-body .tda-cart-summary .recurring-charges,.tda-body .tda-cart-summary .recurring-charges *{font-style:normal} .tda-body .tda-panel.marketing-email-optin{padding:0;margin-bottom:20px} /* Croster polstert die Klasse */ .tda-body .tda-panel.marketing-email-optin p{font-size:14px;color:var(--td-body);margin:0 0 12px} .tda-body .tda-conf-tick .td-check input{margin:3px 10px 0 0;flex:none} /* ------------------------------------ 15. Bestellseite (products.tpl) und Kontakt (contact.tpl) */ /* Uebersicht in den vier Spalten des Produktemenues */ .tda-body .tda-store-menu{margin-bottom:24px} .tda-body .tda-store-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 28px} @media (max-width:1023px){.tda-body .tda-store-cols{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.tda-body .tda-store-cols{grid-template-columns:1fr}} .tda-body .tda-store-col h5{ font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--td-primary); margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid var(--td-line); } .tda-body .tda-store-link{ display:flex;align-items:flex-start;gap:12px;padding:9px 10px;margin:0 -10px;border-radius:var(--td-radius-sm); color:var(--td-text);text-decoration:none !important;border-left:3px solid transparent;transition:background var(--td-transition); } .tda-body .tda-store-link:hover{background:var(--td-light)} .tda-body .tda-store-link.is-active{background:var(--td-blue);border-left-color:var(--td-primary)} .tda-body .tda-store-link strong{display:block;font-size:15px;line-height:1.25;color:var(--td-text)} .tda-body .tda-store-link.is-active strong{color:var(--td-primary)} .tda-body .tda-store-link small{display:block;font-size:13px;color:var(--td-muted);margin-top:2px} .tda-body .tda-store-ico{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--td-muted)} .tda-body .tda-store-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tda-body .tda-store-link.is-active .tda-store-ico{color:var(--td-primary)} /* Klapp-Panel: nach der Wahl einer Gruppe nur noch der Balken (Rubrik, Produkt, Pfeil rechts) */ .tda-body .tda-store-menu{overflow:hidden} .tda-body .tda-store-toggle{ display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:14px 20px;border:0;background:#fff; font:inherit;text-align:left;color:var(--td-text);cursor:pointer;transition:background var(--td-transition); } .tda-body .tda-store-toggle:hover{background:var(--td-light)} .tda-body .tda-store-toggle:focus-visible{outline:2px solid var(--td-primary);outline-offset:-2px} .tda-body .tda-store-toggle .tda-store-ico{color:var(--td-primary)} .tda-body .tda-store-toggle-label{flex:1 1 auto;min-width:0} .tda-body .tda-store-toggle-label small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--td-muted)} .tda-body .tda-store-toggle-label strong{display:block;font-size:17px;line-height:1.3;color:var(--td-text)} .tda-body .tda-store-toggle-hint{font-size:14px;font-weight:600;color:var(--td-primary);white-space:nowrap} .tda-body .tda-store-menu:not(.is-collapsed) .tda-store-toggle-hint{visibility:hidden} .tda-body .tda-store-chevron{flex:none;color:var(--td-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .25s ease} .tda-body .tda-store-menu.is-collapsed .tda-store-chevron{transform:none} .tda-body .tda-store-menu.has-selection:not(.is-collapsed) .tda-store-toggle{border-bottom:1px solid var(--td-line)} @media (max-width:560px){.tda-body .tda-store-toggle-hint{display:none}} .tda-body .tda-store-menu-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease} .tda-body .tda-store-menu.is-collapsed .tda-store-menu-body{grid-template-rows:0fr} .tda-body .tda-store-menu-inner{min-height:0;overflow:hidden} @media (prefers-reduced-motion:reduce){.tda-body .tda-store-menu-body,.tda-body .tda-store-chevron{transition:none}} /* Karten waehrend des Nachladens */ .tda-body #tda-store-result{transition:opacity .15s ease} .tda-body #tda-store-result.is-loading{opacity:.45;pointer-events:none} .tda-body #tda-store-result.is-loading:has(.tda-store-skel){opacity:1} /* Platzhalter-Karten, bis die Gruppe geladen ist (products.tpl, optimistic()) */ .tda-body .tda-store-skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin:8px 0 24px} .tda-body .tda-store-skel span{ display:block;height:380px;border-radius:var(--td-radius-lg);border:1.5px solid var(--tda-panel-line); background:linear-gradient(100deg,#fff 30%,var(--td-light) 50%,#fff 70%) 0 0/300% 100%; animation:tda-store-shimmer 1.2s linear infinite; } @keyframes tda-store-shimmer{from{background-position:100% 0}to{background-position:0 0}} @media (prefers-reduced-motion:reduce){.tda-body .tda-store-skel span{animation:none}} /* Arbeitsanzeige: laufender Streifen am unteren Rand des Balkens, Drehkreis mit Text, Drehkreis im Reiter */ .tda-body .tda-store-toggle{position:relative;overflow:hidden} .tda-body .tda-store-menu.is-busy .tda-store-toggle::after{ content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:var(--td-primary); animation:tda-store-busy 1.1s ease-in-out infinite; } @keyframes tda-store-busy{from{transform:translateX(-100%)}to{transform:translateX(250%)}} .tda-body .tda-store-wait{display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:15px;font-weight:600;color:var(--td-primary)} .tda-body .tda-store-spin,.tda-body .tda-store-tabs a.is-busy::after{ width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid var(--td-line);border-top-color:var(--td-primary); animation:tda-store-rot .7s linear infinite; } .tda-body .tda-store-tabs a.is-busy::after{content:"";display:inline-block;width:12px;height:12px;border-width:2px;margin-left:8px;vertical-align:-1px} @keyframes tda-store-rot{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .tda-body .tda-store-menu.is-busy .tda-store-toggle::after{animation:none;width:100%;opacity:.5} .tda-body .tda-store-spin,.tda-body .tda-store-tabs a.is-busy::after{animation-duration:2s} } /* Gruppe */ .tda-body .tda-store-group-head{display:flex;align-items:center;gap:22px;margin:8px 0 16px;flex-wrap:wrap} .tda-body .tda-store-logo{width:190px;max-width:40vw;height:auto;flex:none} .tda-body .tda-store-group-head h2{font-size:22px;font-weight:700;color:var(--td-text);margin:0;letter-spacing:-.01em} .tda-body .tda-store-tagline{margin:4px 0 0;font-size:14px;color:var(--td-muted)} .tda-body .tda-store-tabs{margin-bottom:18px} /* Karten */ .tda-body .tda-store-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin-bottom:24px} .tda-body .tda-store-card{ position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--tda-panel-line); border-radius:var(--td-radius-lg);padding:22px 22px 20px;min-width:0; } .tda-body .tda-store-card.is-featured{border-color:var(--td-primary);box-shadow:var(--td-field-ring)} .tda-body .tda-store-badge{ position:absolute;top:-11px;left:18px;background:var(--td-primary);color:#fff;font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--td-radius-pill); } .tda-body .tda-store-name{font-size:18px;font-weight:700;color:var(--td-text);margin:0 0 4px;line-height:1.25} .tda-body .tda-store-desc{font-size:14px;color:var(--td-muted);margin:0 0 14px;line-height:1.45} .tda-body .tda-store-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;padding:12px 0;border-top:1px solid var(--td-line);border-bottom:1px solid var(--td-line);margin-bottom:12px} .tda-body .tda-store-from{font-size:13px;color:var(--td-muted)} .tda-body .tda-store-amount{font-size:24px;font-weight:700;color:var(--td-primary);letter-spacing:-.01em;white-space:nowrap} .tda-body .tda-store-cycle{font-size:13px;color:var(--td-muted)} .tda-body .tda-store-setup{flex-basis:100%;font-size:12.5px;color:var(--td-subtle);margin-top:2px} .tda-body .tda-store-features{flex:1 1 auto;margin-bottom:16px} .tda-body .tda-store-features li{padding:6px 0;font-size:13.5px} .tda-body .tda-store-action{margin-top:auto;display:flex;flex-direction:column;gap:8px} .tda-body .tda-store-action .btn{width:100%;justify-content:center} .tda-body .tda-store-action .btn-text{width:auto;padding-left:0} .tda-body .tda-store-action .td-help{margin:0} .tda-body .tda-store-included-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 20px;font-size:14px} .tda-body .tda-store-included-list i{margin-right:6px} .tda-body .tda-store>.tda-notice{margin-top:4px} /* Kontakt */ .tda-body .tda-contact-intro{margin:0 0 16px} .tda-body .tda-contact-captcha{margin-top:6px} .tda-body .tda-contact .tda-save--static{padding-top:14px} .tda-body .tda-contact-p{font-size:14px;color:var(--td-body);margin:0 0 12px} .tda-body .tda-contact-address{font-style:normal;font-size:14px;line-height:1.55;color:var(--td-body);margin:0} .tda-body .tda-contact .tda-notice+.btn-row{margin-top:16px} .tda-body .tda-store-desc p{margin:0 0 6px} .tda-body .tda-store-desc a{color:var(--td-primary)} /* ------------------------------------ 16. Anmeldeseite (login.tpl) */ /* Croster gibt dem Body bei $showingLoginPage ein Hintergrundbild (inline) — die Seite deckt den Viewport selbst ab. */ .tda-body.login{margin:0;background:var(--td-bg)} .tda-body .tda-login{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);min-height:100vh} .tda-body .tda-login-side{ background:var(--td-dark);color:#fff;padding:40px 40px 32px;display:flex;flex-direction:column;gap:32px; } .tda-body .tda-login-logo{display:block;width:min(260px,100%)} .tda-body .tda-login-logo img{width:100%;height:auto;display:block} .tda-body .tda-login-claim h2{font-size:24px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-.01em} .tda-body .tda-login-claim p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78);margin:0 0 16px} .tda-body .tda-login-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:rgba(255,255,255,.9)} .tda-body .tda-login-points li{display:flex;align-items:center;gap:10px} .tda-body .tda-login-points svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--td-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .tda-body .tda-login-news h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 10px} .tda-body .tda-login-news a{display:block;color:#fff;text-decoration:none !important;padding:8px 0;border-top:1px solid rgba(255,255,255,.12)} .tda-body .tda-login-news a small{display:block;font-size:12px;color:rgba(255,255,255,.55)} .tda-body .tda-login-news a span{font-size:14px;font-weight:700} .tda-body .tda-login-news a:hover span{color:var(--td-accent)} .tda-body .tda-login-contact{margin-top:auto;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78)} .tda-body .tda-login-contact p{margin:0 0 8px} .tda-body .tda-login-contact a{color:#fff;font-weight:700;text-decoration:none !important} .tda-body .tda-login-contact span{color:rgba(255,255,255,.55)} .tda-body .tda-login-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px 24px;gap:22px} .tda-body .tda-login-card{ width:100%;max-width:440px;background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg);padding:32px 32px 28px; } .tda-body .tda-login-card h1{font-size:26px;font-weight:700;color:var(--td-text);margin:0;letter-spacing:-.015em} .tda-body .tda-login-card .tda-sub{font-size:14px;color:var(--td-muted);margin:6px 0 22px} .tda-body .tda-login-card .alert{margin-bottom:18px} .tda-body .tda-login-labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .tda-body .tda-login-forgot{font-size:13px;color:var(--td-muted);text-decoration:none !important;margin-bottom:6px} .tda-body .tda-login-forgot:hover{color:var(--td-primary)} .tda-body .tda-login-remember{margin:2px 0 18px} .tda-body .tda-login-captcha{margin-bottom:16px} .tda-body .tda-login-submit{width:100%;justify-content:center} .tda-body .tda-login-or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;font-size:12px;color:var(--td-subtle);text-transform:uppercase;letter-spacing:.08em} .tda-body .tda-login-or::before,.tda-body .tda-login-or::after{content:"";flex:1;height:1px;background:var(--td-line)} .tda-body .tda-login-register{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--td-line);font-size:14px;color:var(--td-muted);text-align:center} .tda-body .tda-login-register a{color:var(--td-primary);font-weight:700} .tda-body .tda-login-foot{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;font-size:13px} .tda-body .tda-login-foot a{color:var(--td-muted);text-decoration:none !important} .tda-body .tda-login-foot a:hover{color:var(--td-primary)} .tda-body .tda-login-foot .btn-text{min-height:0;padding:0;font-size:13px;color:var(--td-muted)} @media (max-width:860px){ .tda-body .tda-login{grid-template-columns:1fr} .tda-body .tda-login-side{padding:24px 20px;gap:18px} .tda-body .tda-login-claim p,.tda-body .tda-login-points,.tda-body .tda-login-news{display:none} .tda-body .tda-login-claim h2{font-size:18px;margin:0} .tda-body .tda-login-contact{display:none} .tda-body .tda-login-logo{width:180px} .tda-body .tda-login-main{padding:24px 16px} .tda-body .tda-login-card{padding:24px 20px} } .tda-body.login::before,.tda-body.login::after{content:none} /* Crosters blaue Ueberlagerung des Hintergrundbilds */ .tda-body.login{background-image:none !important} .tda-body .tda-login{position:relative;z-index:1;background:var(--td-bg)} .tda-body .tda-login-main{background:var(--td-bg)} /* ------------------------------------ 17. Produktdetails (clientareaproductdetails) */ /* Kopfband des Dienstes. Markup in thurdata/clientareaproductdetails.tpl auf .tda-svc-* umgebaut (ROKA 23.09.2026) — vorher trug Crosters .product-holder ein `min-height:364px` und ein Riesen-Symbol in einer leeren Flaeche. Gilt zentral fuer jedes Produkt; die Eckdaten kommen unveraendert aus WHMCS. V2 (23.09., nach ROKAs Befund bei schmalem Fenster): EIN Panel statt zweier Kaesten, und die Eckdaten sind Zeilen wie .tda-kv in der App (Bezeichnung links, Wert rechts) statt gestapelter Grossbuchstaben-Etiketten — die liefen bei ~900 px ineinander. */ .tda-body .tda-svc-head{ display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr); background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg); margin:0 0 20px;overflow:hidden; } /* Links: Symbol, Zugehoerigkeit, Name, Status */ .tda-body .tda-svc-ident{display:flex;align-items:center;gap:13px;min-width:0;padding:14px 18px} .tda-body .tda-svc-icon{ flex:none;width:40px;height:40px;border-radius:var(--td-radius-sm); display:grid;place-items:center;background:var(--td-light);color:var(--td-primary);font-size:16px; } .tda-body .tda-svc-title{display:flex;flex-direction:column;min-width:0} .tda-body .tda-svc-group{ font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--td-muted); line-height:1.3;overflow-wrap:anywhere; } .tda-body .tda-svc-name{font-size:17px;font-weight:700;color:var(--td-text);line-height:1.25;overflow-wrap:anywhere} /* Status wie ueberall in der App: Punkt und Wort, nie eine Farbflaeche */ .tda-body .tda-svc-status{ margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 8px; border-radius:var(--td-radius-pill);border:1px solid var(--td-line-strong);background:#fff; font-size:12.5px;font-weight:700;color:var(--td-body);line-height:1;white-space:nowrap; } .tda-body .tda-svc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tda-off);flex:none} .tda-body .tda-svc-status.product-status-active::before{background:var(--tda-ok)} .tda-body .tda-svc-status.product-status-pending::before{background:var(--tda-pending)} .tda-body .tda-svc-status.product-status-suspended::before, .tda-body .tda-svc-status.product-status-terminated::before, .tda-body .tda-svc-status.product-status-fraud::before{background:var(--tda-error)} .tda-body .tda-svc-status.product-status-suspended, .tda-body .tda-svc-status.product-status-terminated{color:var(--tda-error);border-color:rgba(179,38,30,.35)} .tda-body .tda-svc-status.product-status-cancelled::before, .tda-body .tda-svc-status.product-status-completed::before{background:var(--tda-off)} /* Rechts: Eckdaten als Zeilen, zweispaltig solange Platz ist (auto-fit statt fester Spaltenzahl — die feste 3er-Teilung liess die langen Bezeichnungen bei mittlerer Breite kollidieren) */ .tda-body .tda-svc-facts{ display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 26px; align-content:center;padding:8px 18px;margin:0;border-left:1.5px solid var(--tda-panel-line); } .tda-body .tda-svc-facts>div{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:7px 0;border-bottom:1px solid var(--td-line);min-width:0; } .tda-body .tda-svc-facts>div:nth-last-child(-n+2){border-bottom:0} .tda-body .tda-svc-facts dt{font-size:13.5px;font-weight:400;color:var(--td-muted);margin:0;overflow-wrap:anywhere} .tda-body .tda-svc-facts dd{font-size:14px;font-weight:700;color:var(--td-text);margin:0;text-align:right;overflow-wrap:anywhere} /* Sobald die Eckdaten neben der Identitaet nicht mehr zweispaltig Platz haben, lieber untereinander: der Block bleibt dadurch flacher als mit einer langen Einerspalte. */ @media (max-width:1150px){ .tda-body .tda-svc-head{grid-template-columns:1fr} .tda-body .tda-svc-facts{border-left:0;border-top:1.5px solid var(--tda-panel-line)} } @media (max-width:600px){ .tda-body .tda-svc-facts>div:nth-last-child(-n+2){border-bottom:1px solid var(--td-line)} .tda-body .tda-svc-facts>div:last-child{border-bottom:0} .tda-body .tda-svc-ident{flex-wrap:wrap} .tda-body .tda-svc-status{margin-left:0} } /* Kasten um die Modulansicht: Croster liefert eine Bootstrap-Karte mit Reiter-Pillen im Kopf. Bei nur einem Bereich (z. B. ThurBackup) blendet das Template die Leiste aus — uebrig bleibt ein Panel im App-Stil statt eines Knopfs «Verwalten» ohne Wirkung (ROKA 23.09.2026). */ .tda-body .tda-svc-panel{ background:#fff;border:1.5px solid var(--tda-panel-line);border-radius:var(--td-radius-lg); box-shadow:none;margin:0;overflow:hidden; } .tda-body .tda-svc-panel>.card-header{ background:var(--td-light);border-bottom:1px solid var(--td-line);padding:0 8px; } .tda-body .tda-svc-panel>.card-header .nav-pills{gap:2px;padding:0;margin:0;border:0} .tda-body .tda-svc-panel>.card-header .nav-link{ display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:0; background:transparent;color:var(--td-muted);font-size:14px;font-weight:500; border-bottom:2px solid transparent; } .tda-body .tda-svc-panel>.card-header .nav-link:hover{color:var(--td-text);background:transparent} .tda-body .tda-svc-panel>.card-header .nav-link.active{ background:transparent;color:var(--td-primary);font-weight:700;border-bottom-color:var(--td-primary); } .tda-body .tda-svc-panel--single>.card-header{display:none} .tda-body .tda-svc-panel>.card-body{padding:var(--tda-panel-pad)} .tda-body .tda-svc-panel .module-client-area{text-align:left} .tda-body .tda-svc-panel .separator{display:none} /* ------------------------------------ 18. Comet-Modul (ThurBackup-Kundenansicht) */ /* Das Modul liefert seine Ansicht selbst (modules/servers/cometbackup/clientarea.tpl), seit 23.09.2026 mit den App-Klassen (.tda-object, .tda-kpis, .tda-panel, .tda-table). Hier steht nur, was die App-Datei nicht kennt: die Reiter laufen ueber Bootstrap-Tabs (WHMCS-JS), muessen aber wie .tda-tabs aussehen. Vorbild: ThurVDC-Verwaltung. */ .tda-body .tda-comet{margin-top:4px} .tda-body .tda-comet .tda-object{margin-bottom:16px} .tda-body .tda-comet .tda-object h2{font-size:20px;word-break:break-word} .tda-body .tda-comet .tda-kpis{margin-bottom:20px} .tda-body .tda-comet .tda-comet-kpi-status{margin-top:8px} /* Reiter: Bootstrap-Markup (nav nav-tabs) in der Optik von .tda-tabs */ .tda-body .tda-comet-tabs{list-style:none;padding:0} .tda-body .tda-comet-tabs>li{margin:0} .tda-body .tda-comet-tabs .nav-link{ display:flex;align-items:center;gap:7px;padding:9px 14px;border:0;border-bottom:2px solid transparent; background:transparent;border-radius:0;font-size:14px;font-weight:500;color:var(--td-muted);text-decoration:none; } .tda-body .tda-comet-tabs .nav-link:hover{color:var(--td-text);background:transparent;border-color:transparent} .tda-body .tda-comet-tabs .nav-link.active{ color:var(--td-primary);font-weight:700;background:transparent; border:0;border-bottom:2px solid var(--td-primary); } .tda-body .tda-comet-tabs .tda-count{ background:var(--td-light);color:var(--td-muted);font-size:11px;font-weight:700; padding:1px 7px;border-radius:var(--td-radius-pill); } .tda-body .tda-comet-tabs .nav-link.active .tda-count{background:rgba(27,95,143,.1);color:var(--td-primary)} /* Croster zeichnet .tab-content mit Rahmen — hier traegt das Panel den Rahmen */ .tda-body .tda-comet-content{border:0;padding:0;background:transparent} .tda-body .tda-comet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .tda-body .tda-comet-grid--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .tda-body .tda-comet-hint{font-size:13.5px;color:var(--td-muted);margin:14px 0 0;max-width:80ch} .tda-body .tda-comet-dl{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .tda-body .tda-comet-dl .btn{width:auto} /* Kennwort-Anzeige in der Comet-Uebersicht */ .tda-body .tda-comet-pw{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end;min-width:0} .tda-body .tda-comet-pw-value{font-family:var(--td-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.02em;word-break:break-all} .tda-body .tda-comet-pw-toggle{ border:1px solid var(--td-line-strong);background:#fff;color:var(--td-primary); border-radius:var(--td-radius-sm);padding:2px 9px;font-size:12px;font-weight:600;cursor:pointer;flex:none; } .tda-body .tda-comet-pw-toggle:hover{background:var(--td-light)} .tda-body .tda-comet-pw.is-open .tda-comet-pw-value{color:var(--td-text)} .tda-body .tda-comet-jobs .tda-status{font-size:12px;height:22px} .tda-body .tda-comet .tda-panel-head h3 i{margin-right:7px;opacity:.75}