/* |-------------------------------------------------------------------------- | 2026-07-25 | Autor: Codex | Änderung: | Domainsuche-lokale semantische Farb-Tokens mit den bestehenden | produktiven Werten eingeführt; Screenshot-Werte wurden nicht übernommen. |-------------------------------------------------------------------------- */ /* |-------------------------------------------------------------------------- | 2026-07-27 | Author: Codex | Änderung: | Der vorhandene Preislisten-Anker erhält dieselben freigegebenen Tabellen- | und Pagination-Tokens wie der Ergebnisanker der Domainsuche. |-------------------------------------------------------------------------- */ #vt-domain-results, #vt-domain-pricelist { --vt-domain-results-panel-start: rgba(9,19,46,0.96); --vt-domain-results-panel-end: rgba(5,13,34,0.98); --vt-domain-results-border: rgba(90,140,255,0.14); --vt-domain-results-shadow: rgba(0,0,0,0.26); --vt-domain-results-head-start: rgba(14,30,72,0.98); --vt-domain-results-head-end: rgba(10,22,56,0.98); --vt-domain-results-head-border: rgba(80,170,255,0.62); --vt-domain-results-text-strong: #fff; --vt-domain-results-text-default: rgba(255,255,255,0.78); --vt-domain-results-divider: rgba(255,255,255,0.05); --vt-domain-results-row-hover: rgba(255,255,255,0.025); --vt-domain-results-available-row-start: rgba(55,190,120,0.08); --vt-domain-results-available-row-end: rgba(55,190,120,0.015); --vt-domain-results-unavailable-row: rgba(255,255,255,0.015); --vt-domain-results-text-unavailable-strong: rgba(255,255,255,.58); --vt-domain-results-available-indicator: #53E08D; --vt-domain-results-available-glow: rgba(83,224,141,0.55); --vt-domain-results-unavailable-indicator: rgba(255,255,255,0.2); --vt-domain-results-text-unavailable: rgba(255,255,255,0.42); --vt-domain-results-price-text: rgba(255,255,255,0.82); --vt-domain-results-price-unavailable: rgba(255,255,255,0.34); --vt-domain-results-status-border: rgba(255,255,255,0.08); --vt-domain-results-status-text: rgba(255,255,255,0.56); --vt-domain-results-status-icon: rgba(255,255,255,0.38); --vt-domain-results-warning-surface: rgba(255,170,0,0.08); --vt-domain-results-warning-border: rgba(255,170,0,0.18); --vt-domain-results-warning-text: rgba(255,210,120,0.88); --vt-domain-results-neutral-surface: rgba(255,255,255,0.04); --vt-domain-results-neutral-text: rgba(255,255,255,0.45); --vt-domain-results-control-border: rgba(90,140,255,0.34); --vt-domain-results-control-surface: rgba(255,255,255,0.03); --vt-domain-results-control-border-hover: rgba(90,160,255,0.55); /* | 2026-07-26 | Author: Codex | Pagination-spezifischer Hover-Rahmen: vorhandener Control-Farbton mit | moderat erhöhter Deckkraft, ohne den Checkbox-Hover mitzuverändern. */ --vt-domain-results-pagination-border-hover: rgba(90,160,255,0.72); --vt-domain-results-control-surface-hover: rgba(255,255,255,0.06); --vt-domain-results-selection-start: #3B82F6; --vt-domain-results-selection-end: #2563EB; --vt-domain-results-selection-border: rgba(90,160,255,0.9); --vt-domain-results-focus-ring: rgba(59,130,246,0.14); --vt-domain-results-footer-start: rgba(8,18,46,0.72); --vt-domain-results-footer-end: rgba(5,12,32,0.92); --vt-domain-results-action-disabled-start: rgba(70,90,140,0.35); --vt-domain-results-action-disabled-end: rgba(90,110,160,0.22); --vt-domain-results-action-active-start: #2962ff; --vt-domain-results-action-active-end: #42a5ff; --vt-domain-results-action-active-shadow: rgba(41,98,255,0.32); --vt-domain-results-action-default-end: #3DA3FF; --vt-domain-results-action-default-shadow: rgba(37,99,235,0.28); --vt-domain-results-action-hover-shadow: rgba(37,99,235,0.34); --vt-domain-results-text-muted: rgba(255,255,255,0.62); --vt-domain-results-spinner-track: rgba(255,255,255,0.3); --vt-domain-results-spinner-track-large: rgba(255,255,255,0.16); --vt-domain-results-error-surface: rgba(255,80,80,0.08); --vt-domain-results-error-border: rgba(255,80,80,0.14); --vt-domain-results-error-text: rgba(255,220,220,0.92); --vt-domain-results-available-surface: rgba(40,180,90,.14); --vt-domain-results-available-border: rgba(70,220,120,.16); --vt-domain-results-available-text: #65F29B; --vt-domain-results-unavailable-text: rgba(255,255,255,0.4); --vt-domain-results-select-start: #245BFF; --vt-domain-results-select-end: #42A8FF; --vt-domain-results-select-shadow: rgba(42,168,255,.28); --vt-domain-results-selected-start: #1FA971; --vt-domain-results-selected-end: #38D996; --vt-domain-results-selected-row-start: rgba(42,168,255,.08); --vt-domain-results-selected-row-end: rgba(42,168,255,.03); --vt-domain-results-add-selected-start: #2A86FF; --vt-domain-results-add-selected-end: #4DA3FF; --vt-domain-results-add-selected-shadow: rgba(42,134,255,.35); --vt-domain-results-footer-active-shadow: rgba(42,134,255,.18); --vt-domain-results-unavailable-surface: rgba(255,180,60,.12); --vt-domain-results-unavailable-border: rgba(255,180,60,.25); --vt-domain-results-unavailable-status-text: #ffcc66; --vt-domain-results-not-offered-text: rgba(255,255,255,.95); } /******************************************************** RESULT WRAPPER ********************************************************/ #vt-domain-results, #vt-domain-pricelist { margin-top: 34px; } /******************************************************** TABLE CONTAINER ********************************************************/ .vt-domain-table { overflow: hidden; border-radius: 28px 28px 0 0; background: linear-gradient( 180deg, var(--vt-domain-results-panel-start, rgba(9,19,46,0.96)), var(--vt-domain-results-panel-end, rgba(5,13,34,0.98)) ); border: 1px solid var(--vt-domain-results-border, rgba(90,140,255,0.14)); box-shadow: 0 24px 70px var(--vt-domain-results-shadow, rgba(0,0,0,0.26)); } /******************************************************** HEADER ********************************************************/ .vt-domain-table-head, .vt-domain-row { display: grid; grid-template-columns: 2.4fr 0.9fr 0.9fr 0.9fr 1.2fr; align-items: center; text-align: center; } .vt-domain-table-head { align-items: center; padding: 28px 30px 24px; border-radius: 28px 28px 0 0; background: linear-gradient( 180deg, var(--vt-domain-results-head-start, rgba(14,30,72,0.98)), var(--vt-domain-results-head-end, rgba(10,22,56,0.98)) ); border-bottom: 1px solid var(--vt-domain-results-head-border, rgba(80,170,255,0.62)); color: var(--vt-domain-results-text-strong, #ffffff); } .vt-head-main { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-domain-results-text-strong, #ffffff); line-height: 1.1; } .vt-head-sub { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; text-align: center; color: var(--vt-domain-results-text-default, rgba(255,255,255,0.78)); } /******************************************************** ROWS ********************************************************/ .vt-domain-row { align-items: center; min-height: 84px; margin: 0 auto; padding: 0 30px; border-bottom: 1px solid var(--vt-domain-results-divider, rgba(255,255,255,0.05)); transition: background 0.22s ease; } .vt-domain-row:last-child { border-bottom: none; } .vt-domain-row:hover { background: var(--vt-domain-results-row-hover, rgba(255,255,255,0.025)); } /******************************************************** AVAILABLE / TAKEN STATES ********************************************************/ .vt-domain-row.is-available { background: linear-gradient( 90deg, var(--vt-domain-results-available-row-start, rgba(55,190,120,0.08)), var(--vt-domain-results-available-row-end, rgba(55,190,120,0.015)) ); } .vt-domain-row.is-taken { background: var(--vt-domain-results-unavailable-row, rgba(255,255,255,0.015)); } .vt-domain-row:not(.is-taken) .vt-domain-name { font-weight: 700; color: var(--vt-domain-results-text-strong, #ffffff); } .vt-domain-row.is-taken .vt-domain-name { font-weight: 600; color: var(--vt-domain-results-text-unavailable-strong, rgba(255,255,255,.58)); } .vt-domain-row:not(.is-taken):hover .vt-domain-name { transform: translateY(-2px); transition: .18s ease; } /******************************************************** INDICATOR ********************************************************/ .vt-domain-indicator { display: flex; justify-content: center; align-items: center; padding-left: 18px; } .vt-indicator { width: 10px; height: 10px; border-radius: 50%; } .vt-indicator.available { background: var(--vt-domain-results-available-indicator, #53E08D); box-shadow: 0 0 18px var(--vt-domain-results-available-glow, rgba(83,224,141,0.55)); } .vt-indicator.taken { background: var(--vt-domain-results-unavailable-indicator, rgba(255,255,255,0.2)); } /******************************************************** DOMAIN ********************************************************/ .vt-domain-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--vt-domain-results-text-strong, #ffffff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .vt-domain-row.is-taken .vt-domain-name { color: var(--vt-domain-results-text-unavailable, rgba(255,255,255,0.42)); } /******************************************************** PRICES ********************************************************/ .vt-domain-register, .vt-domain-renewal, .vt-domain-transfer { font-size: 16px; font-weight: 600; color: var(--vt-domain-results-price-text, rgba(255,255,255,0.82)); } .vt-domain-row.is-taken .vt-domain-register, .vt-domain-row.is-taken .vt-domain-renewal, .vt-domain-row.is-taken .vt-domain-transfer { color: var(--vt-domain-results-price-unavailable, rgba(255,255,255,0.34)); } /******************************************************** CHECK AREA ********************************************************/ .vt-domain-check { display: flex; justify-content: center; align-items: right; } /******************************************************** STATUS BADGES ********************************************************/ .vt-domain-status { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 122px; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 700; } .vt-domain-status.taken { background: var(--vt-domain-results-divider, rgba(255,255,255,0.05)); border: 1px solid var(--vt-domain-results-status-border, rgba(255,255,255,0.08)); color: var(--vt-domain-results-status-text, rgba(255,255,255,0.56)); } .vt-status-icon { font-size: 10px; color: var(--vt-domain-results-status-icon, rgba(255,255,255,0.38)); margin-right: 8px; } .vt-domain-status.warning { background: var(--vt-domain-results-warning-surface, rgba(255,170,0,0.08)); border: 1px solid var(--vt-domain-results-warning-border, rgba(255,170,0,0.18)); color: var(--vt-domain-results-warning-text, rgba(255,210,120,0.88)); } .vt-domain-status.unknown { background: var(--vt-domain-results-neutral-surface, rgba(255,255,255,0.04)); border: 1px solid var(--vt-domain-results-status-border, rgba(255,255,255,0.08)); color: var(--vt-domain-results-neutral-text, rgba(255,255,255,0.45)); } .vt-domain-status-badge { min-width: 130px; padding: 0 34px; justify-content: center; } /******************************************************** CHECKBOX ********************************************************/ .vt-domain-checkbox { appearance: none; width: 26px; height: 26px; border-radius: 9px; cursor: pointer; border: 1px solid var(--vt-domain-results-control-border, rgba(90,140,255,0.34)); background: var(--vt-domain-results-control-surface, rgba(255,255,255,0.03)); position: relative; transition: all 0.22s ease; } .vt-domain-checkbox:hover { border-color: var(--vt-domain-results-control-border-hover, rgba(90,160,255,0.55)); background: var(--vt-domain-results-control-surface-hover, rgba(255,255,255,0.06)); } .vt-domain-checkbox:checked { background: linear-gradient( 180deg, var(--vt-domain-results-selection-start, #3B82F6), var(--vt-domain-results-selection-end, #2563EB) ); border-color: var(--vt-domain-results-selection-border, rgba(90,160,255,0.9)); box-shadow: 0 0 0 4px var(--vt-domain-results-focus-ring, rgba(59,130,246,0.14)); } .vt-domain-checkbox:checked::after { content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 12px; border: solid var(--vt-domain-results-text-strong, #ffffff); border-width: 0 2px 2px 0; transform: rotate(45deg); } /******************************************************** TABLE FOOTER ********************************************************/ .vt-domain-footer { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 34px 38px; border-top: 1px solid var(--vt-domain-results-control-surface-hover, rgba(255,255,255,0.06)); background: linear-gradient( 180deg, var(--vt-domain-results-footer-start, rgba(8,18,46,0.72)), var(--vt-domain-results-footer-end, rgba(5,12,32,0.92)) ); } /******************************************************** LEFT INFO ********************************************************/ .vt-domain-footer-info { display: flex; align-items: center; gap: 18px; } .vt-domain-footer-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--vt-domain-results-neutral-surface, rgba(255,255,255,0.04)); font-size: 24px; } .vt-domain-footer-text { display: flex; flex-direction: column; gap: 4px; } .vt-footer-line { color: var(--vt-domain-results-text-strong, #ffffff); font-size: 15px; font-weight: 500; } .vt-footer-muted { color: var(--vt-domain-results-status-text, rgba(255,255,255,0.56)); font-size: 14px; } /******************************************************** CTA BUTTON ********************************************************/ .vt-domain-footer-button { min-width: 360px; height: 68px; border: none; border-radius: 18px; padding: 0 32px; display: flex; align-items: center; justify-content: center; gap: 18px; background: linear-gradient( 90deg, var(--vt-domain-results-action-disabled-start, rgba(70,90,140,0.35)), var(--vt-domain-results-action-disabled-end, rgba(90,110,160,0.22)) ); color: var(--vt-domain-results-text-unavailable, rgba(255,255,255,0.42)); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; cursor: not-allowed; transition: 0.25s; } .vt-domain-footer-button span { font-size: 24px; } /******************************************************** ACTIVE STATE ********************************************************/ .vt-domain-footer-button.active { cursor: pointer; color: var(--vt-domain-results-text-strong, #ffffff); background: linear-gradient( 90deg, var(--vt-domain-results-action-active-start, #2962ff), var(--vt-domain-results-action-active-end, #42a5ff) ); box-shadow: 0 10px 30px var(--vt-domain-results-action-active-shadow, rgba(41,98,255,0.32)); } /******************************************************** MOBILE ********************************************************/ @media (max-width: 768px) { .vt-domain-footer { flex-direction: column; align-items: stretch; padding: 24px; } .vt-domain-footer-button { width: 100%; min-width: 0; } } /******************************************************** CONTINUE BUTTON ********************************************************/ .vt-domain-continue { height: 64px; padding: 0 34px; border: none; border-radius: 18px; cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--vt-domain-results-text-strong, #ffffff); background: linear-gradient( 90deg, var(--vt-domain-results-selection-end, #2563EB), var(--vt-domain-results-action-default-end, #3DA3FF) ); box-shadow: 0 16px 42px var(--vt-domain-results-action-default-shadow, rgba(37,99,235,0.28)); transition: transform 0.22s ease, box-shadow 0.22s ease; } .vt-domain-continue:hover { transform: translateY(-2px); box-shadow: 0 22px 54px var(--vt-domain-results-action-hover-shadow, rgba(37,99,235,0.34)); } /******************************************************** LOADING PANEL ********************************************************/ .vt-domain-loading-info { margin-top: 26px; } .vt-loading-panel { padding: 54px; border-radius: 30px; text-align: center; background: linear-gradient( 180deg, var(--vt-domain-results-panel-start, rgba(9,19,46,0.96)), var(--vt-domain-results-panel-end, rgba(5,13,34,0.98)) ); border: 1px solid var(--vt-domain-results-border, rgba(90,140,255,0.14)); } .vt-domain-loading-title { margin-top: 22px; font-size: 24px; font-weight: 700; color: var(--vt-domain-results-text-strong, #ffffff); } .vt-domain-loading-text { margin-top: 14px; max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.7; color: var(--vt-domain-results-text-muted, rgba(255,255,255,0.62)); } /******************************************************** SPINNERS ********************************************************/ .vt-loading-spinner, .vt-loading-spinner-large { display: inline-block; border-radius: 50%; border-style: solid; animation: vtSpin 0.7s linear infinite; } .vt-loading-spinner { width: 18px; height: 18px; margin-right: 10px; border-width: 2px; border-color: var(--vt-domain-results-spinner-track, rgba(255,255,255,0.3)); border-top-color: var(--vt-domain-results-text-strong, #ffffff); } .vt-loading-spinner-large { width: 54px; height: 54px; border-width: 3px; border-color: var(--vt-domain-results-spinner-track-large, rgba(255,255,255,0.16)); border-top-color: var(--vt-domain-results-action-default-end, #3DA3FF); } @keyframes vtSpin { to { transform: rotate(360deg); } } /******************************************************** ERROR ********************************************************/ .vt-domain-error { margin-top: 24px; padding: 26px 30px; border-radius: 24px; background: var(--vt-domain-results-error-surface, rgba(255,80,80,0.08)); border: 1px solid var(--vt-domain-results-error-border, rgba(255,80,80,0.14)); color: var(--vt-domain-results-error-text, rgba(255,220,220,0.92)); font-weight: 600; } /******************************************************** MOBILE ********************************************************/ @media (max-width: 960px) { .vt-domain-table-head { display: none; } .vt-domain-row { grid-template-columns: 1fr; gap: 14px; padding: 24px; } .vt-domain-check { justify-content: flex-start; } .vt-domain-footer { justify-content: stretch; } .vt-domain-continue { width: 100%; } } /******************************************************** STATUS BADGES LIKE TARGET ********************************************************/ .vt-domain-indicator { display: flex; flex-direction: column; align-items: center; gap: 12px; } .vt-domain-status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; } .vt-domain-status.available { background: var(--vt-domain-results-available-surface, rgba(40,180,90,0.14)); border: 1px solid var(--vt-domain-results-available-border, rgba(70,220,120,0.16)); color: var(--vt-domain-results-available-text, #65F29B); } .vt-domain-status.taken { background: var(--vt-domain-results-divider, rgba(255,255,255,0.05)); border: 1px solid var(--vt-domain-results-control-surface-hover, rgba(255,255,255,0.06)); color: var(--vt-domain-results-text-muted, rgba(255,255,255,0.62)); } .vt-status-icon { display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; } .vt-domain-unavailable { color: var(--vt-domain-results-unavailable-text, rgba(255,255,255,0.4)); font-size: 22px; font-weight: 300; } /* ========================================================= DOMAIN SELECTION ========================================================= */ .vt-domain-select-btn { min-width: 132px; height: 40px; border: 0; border-radius: 999px; background: linear-gradient( 90deg, var(--vt-domain-results-select-start, #245BFF), var(--vt-domain-results-select-end, #42A8FF) ); color: var(--vt-domain-results-text-strong, #fff); font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .18s ease, opacity .25s ease, box-shadow .25s ease; white-space: nowrap; padding: 0 18px; font-size: 13px; } .vt-domain-select-btn:hover { transform: translatex(2px); box-shadow: 0 0 4px var(--vt-domain-results-select-shadow, rgba(42,168,255,.28)); } .vt-domain-select-btn.is-selected { background: linear-gradient( 90deg, var(--vt-domain-results-selected-start, #1FA971), var(--vt-domain-results-selected-end, #38D996) ); } .vt-domain-row.is-selected { background: linear-gradient( 90deg, var(--vt-domain-results-selected-row-start, rgba(42,168,255,.08)), var(--vt-domain-results-selected-row-end, rgba(42,168,255,.03)) ); } /* ========================================================= DOMAIN SELECTED ========================================================= */ .vt-domain-add-btn.is-selected { background: linear-gradient(135deg,var(--vt-domain-results-add-selected-start, #2A86FF),var(--vt-domain-results-add-selected-end, #4DA3FF)); border-color: var(--vt-domain-results-add-selected-end, #4DA3FF); color: var(--vt-domain-results-text-strong, #fff); box-shadow: 0 0 18px var(--vt-domain-results-add-selected-shadow, rgba(42,134,255,.35)); transform: scale(1.02); } /* ========================================================= CTA ACTIVE ========================================================= */ .vt-domain-footer-cta { opacity: .45; pointer-events: none; transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease; } .vt-domain-footer-cta.is-active { opacity: 1; pointer-events: auto; box-shadow: 0 0 24px var(--vt-domain-results-footer-active-shadow, rgba(42,134,255,.18)); } .vt-domain-status.available { min-width: 132px; height: 40px; justify-content: center; cursor: pointer; transition: transform .18s ease, opacity .25s ease, box-shadow .25s ease; } .vt-domain-status.available:hover { transform: translateY(-1px); box-shadow: 0 0 18px var(--vt-domain-results-select-shadow, rgba(42,168,255,.28)); } /* ===================================================== TEST BUTTON WIE STATUS BADGE ===================================================== */ .vt-domain-select-btn { background: var(--vt-domain-results-available-surface, rgba(40,180,90,.14)) !important; border: 1px solid var(--vt-domain-results-available-border, rgba(70,220,120,.16)) !important; color: var(--vt-domain-results-available-text, #65F29B) !important; border-radius: 999px !important; min-width: 132px !important; height: 40px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .vt-domain-status.taken { min-width: 132px !important; height: 40px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--vt-domain-results-unavailable-surface, rgba(255,180,60,.12)) !important; border: 1px solid var(--vt-domain-results-unavailable-border, rgba(255,180,60,.25)) !important; color: var(--vt-domain-results-unavailable-status-text, #ffcc66) !important; } .vt-domain-not-offered { display: flex; /* align-items: center; */ justify-content: center; height: 40px; /* gleiche Höhe wie deine Buttons */ color: var(--vt-domain-results-not-offered-text, rgba(255,255,255,.95)); font-size: 14px; } /* |-------------------------------------------------------------------------- | 2026-07-26 | Author: Codex | Änderung: | Die bisher in domain-results.js ausgegebene Pagination-Basisdarstellung | wurde ohne Änderung der bestehenden Pagination-Logik in die zuständige | CSS-Datei überführt. |-------------------------------------------------------------------------- */ .vt-domain-pagination { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .vt-page { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: inherit; cursor: pointer; display: inline-flex; font: inherit; justify-content: center; line-height: 1; min-height: 30px; min-width: 30px; padding: 4px 6px; } .vt-page.is-disabled { cursor: default; opacity: 0.45; } .vt-page.dots { cursor: default; } /* |-------------------------------------------------------------------------- | 2026-07-26 | Author: Codex | Änderung: | Der kleine Folgeabstand gehört zum Ergebnis-/Navigationsblock und nicht | zur nachfolgenden Tabelle. |-------------------------------------------------------------------------- */ .vt-domain-result-info { margin-bottom: 12px; } /* |-------------------------------------------------------------------------- | 2026-07-25 | Author: Codex | Änderung: | Der Hover-Rahmen inaktiver Pagination-Seiten verwendet den bestehenden | hellblauen Interaktionsrahmen der Domain-Ergebnis-Controls. |-------------------------------------------------------------------------- */ .vt-domain-result-info .vt-page:hover:not(.is-disabled):not(.dots):not(.current) { border-color: var(--vt-domain-results-pagination-border-hover, rgba(90,160,255,0.72)); } /* |-------------------------------------------------------------------------- | 2026-07-26 | Author: Codex | Änderung: | Die aktive Pagination-Seite übernimmt die bestehende blaue Flächensprache | der Domain-UI ohne zusätzlichen sichtbaren Rahmen oder Schatten. |-------------------------------------------------------------------------- */ .vt-domain-result-info .vt-page.current { background: linear-gradient( 180deg, var(--vt-domain-results-selection-start), var(--vt-domain-results-selection-end) ); border-color: transparent; color: var(--vt-domain-results-text-strong); font-weight: bold; text-decoration: none; } /* |-------------------------------------------------------------------------- | 2026-07-27 | Author: Codex | Änderung: | Die drei Domainstatus-Zustände verwenden dieselbe Geometrie. Der bisher | unter „Unbekannt“ ausgegebene Strich wird platzhaltend ausgeblendet, damit | Tabellenzeilenhöhe und Responsive-Layout unverändert bleiben. |-------------------------------------------------------------------------- */ .vt-domain-select-btn, .vt-domain-status.taken, .vt-domain-status.unknown { align-items: center !important; border-radius: 999px !important; box-sizing: border-box; display: inline-flex !important; font-size: 13px !important; font-weight: 600 !important; height: 40px !important; justify-content: center !important; line-height: 1; min-width: 132px !important; padding: 0 14px !important; } .vt-domain-select-btn strong { font-weight: inherit; } .vt-domain-unavailable { visibility: hidden; } /* |-------------------------------------------------------------------------- | 2026-07-27 | Author: Codex | Änderung: | Der beim Status „Unbekannt“ nicht mehr benötigte untere Inhaltsbereich | belegt keinen Layoutplatz mehr, sodass der neutrale Status vertikal | innerhalb der Tabellenzeile zentriert wird. |-------------------------------------------------------------------------- */ .vt-domain-indicator:has(.vt-domain-status.unknown) .vt-domain-indicator-bottom { display: none; } /* |-------------------------------------------------------------------------- | 2026-07-27 | Author: Codex | Änderung: | Der native deaktivierte Zustand des Weiter-CTA zeigt beim Mouseover den | Verbots-Cursor. Aktivierungszustand und JavaScript-Logik bleiben unberührt. |-------------------------------------------------------------------------- */ .vt-domain-footer-cta:disabled { cursor: not-allowed; pointer-events: auto; } /* |-------------------------------------------------------------------------- | 2026-07-27 | Author: Codex | Änderung: | Die dynamische Auswahlzusammenfassung belegt im leeren Zustand keinen | sichtbaren Platz. Nur der Zustandswechsel zwischen keiner und vorhandener | Auswahl blendet den Informationsblock kurz aus und wieder ein; reine | Anzahl-/Preisaktualisierungen lösen keine erneute Animation aus. |-------------------------------------------------------------------------- */ .vt-domain-footer-text { gap: 0; } .vt-domain-footer-text .vt-footer-line + .vt-footer-line { margin-top: 4px; } #vt-selected-summary { margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: margin-top 180ms ease, max-height 180ms ease, opacity 140ms ease; } .vt-domain-footer-text.has-selection #vt-selected-summary { margin-top: 4px; max-height: 3em; opacity: 1; } .vt-domain-footer-text.is-empty { animation: vt-domain-footer-to-empty 220ms ease-out; } .vt-domain-footer-text.has-selection { animation: vt-domain-footer-to-selection 220ms ease-out; } @keyframes vt-domain-footer-to-empty { 0%, 100% { opacity: 1; } 35% { opacity: 0.35; } } @keyframes vt-domain-footer-to-selection { 0%, 100% { opacity: 1; } 35% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .vt-domain-footer-text.is-empty, .vt-domain-footer-text.has-selection { animation: none; } #vt-selected-summary { transition: none; } } /* |-------------------------------------------------------------------------- | 2026-07-27 | Author: Codex | Änderung: | Die zuvor im JavaScript-Builder hinterlegten Inline-Darstellungen der | Ergebnisnavigation und Domain-Kopfspalte liegen vollständig im CSS. |-------------------------------------------------------------------------- */ .vt-domain-result-count { float: left; font-size: 24px; } .vt-domain-result-info::after { clear: both; content: ""; display: block; } .vt-domain-result-info .vt-domain-pagination { float: right; } .vt-domain-table-head .vt-col-domain { text-align: left; } /* |-------------------------------------------------------------------------- | 2026-08-31 | Autor: Claude | Änderung: | Responsive Schritt 1 der Domainsuche: Kartengeometrie unterhalb 981px. | | Der Ergebnisbereich der Domainsuche wird ab 980px abwärts als zweispaltiges | Kartenraster dargestellt; die Zweispaltigkeit bleibt bis zu sehr schmalen | Viewports erhalten. Jede Domain bleibt vollständig in einer Karte: | Domainname, danach drei Preiszeilen untereinander, danach der bestehende | Aktionsbereich als Kartenfuß. | | Sämtliche Regeln liegen unter dem ausschließlich der Domainsuche gehörenden | Mount #vt-domain-results und ausschließlich in Media Queries mit oberer | Schranke. Der Desktopzustand ab 981px und die Domainpreisliste | (#vt-domain-pricelist) bleiben dadurch unberührt. | | Der bestehende Block @media (max-width: 960px) weiter oben in dieser Datei | bleibt unverändert; er blendet den Tabellenkopf aus und wird hier gezielt | überschrieben, nicht ersetzt. | | Farben, Zustandslogik, Buttontexte und Statusfarbschemata sind NICHT | Gegenstand dieses Schritts. Verwendet werden ausschließlich die bereits | vorhandenen CSS-Variablen und Fallbackwerte dieser Datei. | | Die Beschriftungen der drei Preiszeilen stammen als echtes Markup aus dem | PHP-Renderer (.vt-domain-price-label mit -main und -sub sowie | .vt-domain-price-value). Es wird kein fachlicher Text in CSS erzeugt. |-------------------------------------------------------------------------- */ /* |-------------------------------------------------------------------------- | 2026-08-31 | Autor: Claude | Änderung: | Korrekturschritt. Die zuvor hier über ::before content erzeugten | Beschriftungen sind entfernt. Gestaltet wird ausschließlich das bereits | vorhandene PHP-Markup der Preiszellen. Es entsteht kein fachlicher Inhalt | mehr in CSS. |-------------------------------------------------------------------------- */ /* | Die Preisbeschriftung des PHP-Renderers gehoert ausschliesslich zur | Kartenansicht. Auf Desktop traegt der Tabellenkopf die Spaltenbeschriftung; | dort bleibt die zellenweise Beschriftung deshalb ausgeblendet. Die Regel | steht bewusst ausserhalb einer Media Query, damit der Desktopzustand auch | ohne die nachfolgenden Kartenregeln unveraendert bleibt. */ #vt-domain-results .vt-domain-price-label { display: none; } @media (max-width: 960px) { /* Tabellencontainer wird zum zweispaltigen Kartenraster. */ #vt-domain-results .vt-domain-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* Der Tabellenfuß bleibt eine durchgehende Zeile unter beiden Spalten. */ #vt-domain-results .vt-domain-footer { grid-column: 1 / -1; } /* Ergebniszeile wird zur vollständigen Karte. */ #vt-domain-results .vt-domain-row { display: flex; /* | 2026-09-01 | Claude | Kartenkopf aus Domainname und Status-/Aktions- | bereich. Die Karte bleibt eine einzige Flexstruktur: Name und | Indicator stehen als erste beiden Kinder in derselben Flexzeile, die | drei Preiszellen erzwingen ueber flex-basis: 100% jeweils eine eigene | Zeile. Der Umbruch zwischen Name und Indicator entsteht damit allein | aus der verfuegbaren Kartenbreite - ohne zusaetzlichen Breakpoint. */ flex-direction: row; flex-wrap: wrap; /* 2026-09-01 | Claude | Hebt die globale Zentrierung aus .vt-domain-row (Zeile 225) fuer die Kartenansicht auf. */ align-items: stretch; grid-template-columns: none; gap: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--vt-domain-results-border, rgba(90,140,255,0.14)); border-radius: 20px; /* | 2026-09-01 | Claude | Die Kartenfläche wird hier NICHT mehr gefärbt. | Die Grundfarbe der Karte kommt ab jetzt aus genau einer Regel am | Dateiende und ist dort vollständig deckend definiert. Der bisherige | Verlauf aus rgba(9,19,46,0.96)/rgba(5,13,34,0.98) war eine | transparente Überlagerung des Seitenhintergrunds und hätte die | Kartenfarbe von diesem abhängig gemacht. | | Die Kontur (border oben) bleibt unverändert bestehen; sie ist kein | Flächenton, sondern die Kartenumrandung. */ text-align: left; } /* | 2026-09-01 | Claude | Der frühere eigene Auswahlverlauf der Karte | entfällt. Normal- und Auswahlzustand tragen dieselbe Kartengrundfarbe; | der Auswahlzustand ist ausschließlich am grünen Button erkennbar. | Die Desktopregel für .vt-domain-row.is-selected liegt außerhalb jeder | Media Query und bleibt unberührt. */ /* | Kartenkopf, linke Haelfte. Der Name nimmt den verfuegbaren Raum ein und | draengt den Status-/Aktionsbereich nach rechts. flex-basis bleibt auto, | also die Maximalbreite des Domainnamens: passt sie zusammen mit dem | Indicator nicht in die Karte, bricht der Indicator in eine zweite | Headerzeile um, statt den Namen zusammenzudruecken. | | white-space: normal ist erforderlich, weil .vt-domain-name (Zeile 338) | white-space: nowrap setzt. Das hier bereits vorhandene | overflow-wrap: anywhere war dadurch bisher wirkungslos; lange Domains | wurden per Ellipsis beschnitten statt umgebrochen. */ #vt-domain-results .vt-domain-name { flex: 1 1 auto; min-width: 0; padding: 14px 14px 12px; /* | 2026-09-01 | Claude | border-bottom entfernt. Diese Deklaration war | zusammen mit der gleichlautenden am .vt-domain-indicator die Ursache | der durchgehenden Linie unter dem Kartenkopf. Der Kartenentwurf | kennt zwischen Kopfzone und Preisbereich keine Trennlinie. */ font-size: 17px; line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere; } /* | Drei Preiszeilen untereinander, je Beschriftung über dem Wert. | | 2026-09-01 | Claude | flex-basis: 100% haelt jede Preiszelle in einer | eigenen Flexzeile, seit die Karte in Zeilenrichtung umbricht. Der | Preisbereich beginnt dadurch weiterhin unter der Headerzone. | flex-shrink: 1 ist bewusst gesetzt, damit die Zelle unabhaengig vom | wirksamen box-sizing nie breiter als die Karte wird. */ #vt-domain-results .vt-domain-register, #vt-domain-results .vt-domain-renewal, #vt-domain-results .vt-domain-transfer { display: flex; flex: 1 1 100%; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 14px; font-size: 14px; text-align: left; overflow-wrap: anywhere; } #vt-domain-results .vt-domain-transfer { padding-bottom: 13px; } /* | Die Beschriftung stammt aus dem PHP-Renderer und wird in der Karte | sichtbar gemacht. Haupt- und Zusatzteil stehen in einer Zeile und | duerfen auf schmalen Karten umbrechen. */ #vt-domain-results .vt-domain-price-label { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--vt-domain-results-text-default, rgba(255,255,255,0.78)); line-height: 1.2; text-align: left; overflow-wrap: anywhere; } #vt-domain-results .vt-domain-price-label-main { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; } #vt-domain-results .vt-domain-price-label-sub { font-size: 11px; font-weight: 400; line-height: 1.2; } #vt-domain-results .vt-domain-price-value { font-size: 14px; line-height: 1.25; } /* | Kartenkopf, rechte Haelfte. Der bestehende Container traegt bereits | Statusbadge und Aktion; es entsteht keine zusaetzliche Statuszeile. | | 2026-09-01 | Claude | Der Bereich ist nicht mehr Kartenfuss, sondern | die rechte Haelfte der Headerzone. | | flex: 1 1 auto laesst ihn den Rest der Headerzeile fuellen; der | Inhalt wird ueber align-items: flex-end rechtsbuendig gesetzt | (Querachse, weil der Container in Spaltenrichtung laeuft). Nach einem | Umbruch steht er allein in der zweiten Headerzeile und fuellt sie | vollstaendig - der Kartenkopf bleibt dadurch in beiden Zustaenden eine | geschlossene Flaeche. | | Die Trennlinie wandert von border-top auf border-bottom: beide | Headerelemente sind durch align-items: stretch gleich hoch, ihre | Unterkanten liegen also auf derselben Linie. Zusammen mit der | border-bottom des Domainnamens entsteht eine durchgehende Linie unter | der Headerzone. Als border-top haette sie im umbruchfreien Fall als | Teilstueck oben rechts in der Headerzeile gestanden. Die frueher | doppelt wirkende Linie zwischen Name und Indicator entfaellt damit. | | Das Innenabstandsmass ist auf die Zeilenhoehe des Domainnamens | abgestimmt (14px + 21.25px + 12px = 47.25px), damit Name und Button in | derselben optischen Achse liegen: 6px + 38px + 10px = 54px, die | Buttonmitte liegt bei 25.0px, die Textmitte des Namens bei 24.6px. */ #vt-domain-results .vt-domain-indicator { flex: 1 1 auto; align-items: flex-end; /* | 2026-09-01 | Claude | Ausrichtung an der OBERKANTE der Kopfzone | statt mittig. | | Der Container laeuft in Spaltenrichtung, justify-content wirkt also | auf der vertikalen Achse. Beide Kopfelemente sind durch | align-items: stretch der Zeile gleich hoch. | | Einzeiliger Domainname: der Indicator ist mit 6px + 38px + 10px = | 54px selbst das hoehere Element, sein Inhaltsbereich ist exakt | 38px hoch und damit genau so hoch wie der Button. Es gibt keinen | freien Raum zu verteilen - center und flex-start liefern dasselbe | Ergebnis. Die bisherige Buttonposition bleibt unveraendert. | | Zweizeiliger Domainname: der Name ist mit 14px + 2 x 21.25px + 12px | = 68.5px das hoehere Element. Der Inhaltsbereich des Indicators | waechst auf 52.5px, es entstehen 14.5px freier Raum. Mit center | wandert der Button um 7.25px nach unten und wirkt von der zweiten | Textzeile heruntergezogen; mit flex-start bleibt er an derselben | Stelle wie im einzeiligen Fall und damit optisch an der ersten | Kopfzeile. | | Es wird ausschliesslich die vorhandene Flexgeometrie genutzt: kein | transform, kein negativer Margin, kein Breakpoint, keine | Laengenklasse, keine JavaScript-Messung. */ justify-content: flex-start; gap: 8px; padding: 6px 14px 10px; padding-left: 14px; /* | 2026-09-01 | Claude | border-bottom entfernt - siehe Begruendung | bei .vt-domain-name. Die Kopfzone traegt keine Trennlinie mehr. */ } /* | Leere Hälften des Aktionsbereichs erzeugen keinen Leerraum. | | 2026-09-01 | Claude | Der Zustand "Ihre Domain?" fuehrt in der unteren | Haelfte ein leeres .vt-domain-unavailable, das per visibility: hidden | (Zeile 1368) zwar unsichtbar ist, aber Platz belegt. Als Kartenfuss war | das folgenlos; in der Headerzone haette es die Kopfhoehe verdoppelt. | Der Selektor setzt daher genau die dokumentierte Absicht dieser Regel | fort. Der Zustand "Unbekannt" ist bereits ueber die bestehende Regel in | Zeile 1382 abgedeckt. Nur die Kartenansicht ist betroffen; die | Desktoptabelle behaelt ihren Platzhalter unveraendert. */ #vt-domain-results .vt-domain-indicator-top:empty, #vt-domain-results .vt-domain-indicator-bottom:empty, #vt-domain-results .vt-domain-indicator-bottom:has(> .vt-domain-unavailable) { display: none; } /* | Buttongeometrie in der Karte. Farben, Zustände und Texte bleiben | unverändert; !important ist erforderlich, weil die bestehende Regel | dieser Datei (Abschnitt "TEST BUTTON WIE STATUS BADGE") Radius, Breite | und Höhe mit !important festlegt. | | 2026-09-01 | Claude | width: auto statt width: 100% - genau diese | Deklaration hat den Button bisher auf die volle Kartenbreite gezogen. | Die Breite entsteht jetzt aus Text und Innenabstand. Der horizontale | Innenabstand steigt von 10px auf 14px und entspricht damit dem | Desktopbutton (Zeile 1348, padding: 0 14px). Zusammen mit | min-height: 38px bleibt eine ausreichende Bedienflaeche erhalten. | Radius, Farbe, Rahmen, Schrift, Icon, Text und Zustaende unveraendert. */ #vt-domain-results .vt-domain-select-btn { display: inline-flex !important; width: auto; min-width: 0 !important; height: auto !important; min-height: 38px; padding: 8px 14px; border-radius: 24px !important; font-size: 12px !important; line-height: 1.2; white-space: normal; } /* Statusbadge nutzt dieselbe kompakte Breite und läuft nicht über. */ #vt-domain-results .vt-domain-status { width: auto; min-width: 0 !important; height: auto !important; min-height: 38px; padding: 8px 14px; font-size: 12px !important; line-height: 1.2; white-space: normal; text-align: center; } #vt-domain-results .vt-domain-not-offered, #vt-domain-results .vt-domain-unavailable { height: auto; min-height: 38px; align-items: center; justify-content: center; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; } } /* | Schmale Viewports behalten ausdrücklich zwei Karten nebeneinander. | Es entsteht keine eigene XSmall-Architektur; nur Abstände, Schriftgrößen | und Umbruchverhalten werden verdichtet, damit die Karten bis etwa 340px | nebeneinander bestehen bleiben. */ @media (max-width: 640px) { #vt-domain-results .vt-domain-table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #vt-domain-results .vt-domain-row { border-radius: 16px; } #vt-domain-results .vt-domain-name { padding: 11px 10px 9px; font-size: 15px; } #vt-domain-results .vt-domain-register, #vt-domain-results .vt-domain-renewal, #vt-domain-results .vt-domain-transfer { padding: 7px 10px; font-size: 13px; } #vt-domain-results .vt-domain-transfer { padding-bottom: 10px; } #vt-domain-results .vt-domain-price-label { gap: 3px; } #vt-domain-results .vt-domain-price-label-main, #vt-domain-results .vt-domain-price-label-sub { font-size: 10px; } #vt-domain-results .vt-domain-price-value { font-size: 13px; } /* | 2026-09-01 | Claude | Headerzone auch im verdichteten Bereich: das | Innenabstandsmass ist auf die hier kleinere Namenszeile abgestimmt | (11px + 18.75px + 9px = 38.75px). 4px + 36px + 8px = 48px, die | Buttonmitte liegt bei 22.0px, die Textmitte des Namens bei 20.4px. */ #vt-domain-results .vt-domain-indicator { gap: 6px; padding: 4px 10px 8px; padding-left: 10px; } /* | 2026-09-01 | Claude | Der horizontale Innenabstand steigt von 6px auf | 12px. Bei width: auto bestimmt er die Buttonbreite unmittelbar; 6px | haetten den Button auf nahezu reine Textbreite zusammengezogen. */ #vt-domain-results .vt-domain-select-btn { min-height: 36px; padding: 7px 12px; font-size: 11px !important; } #vt-domain-results .vt-domain-status { min-height: 36px; padding: 7px 12px; font-size: 11px !important; gap: 4px; } #vt-domain-results .vt-domain-not-offered, #vt-domain-results .vt-domain-unavailable { min-height: 36px; font-size: 11px; } } /* |-------------------------------------------------------------------------- | 2026-09-01 | Autor: Claude | Änderung: | Kartenhintergrund der Domainsuche im Bereich 440px bis 960px. | | AUFGELÖST am 2026-09-01 durch Claude. Der frühere Inhalt dieses Blocks | bestand aus drei Regeln, die alle gegen die jetzt verbindliche | Wartbarkeitsregel verstoßen haben: | | 1. .vt-domain-row -> radial-gradient aus rgba()-Stufen über | der Grundfarbe #06132f | 2. .vt-domain-row.is-selected-> zusätzlicher rgba()-Auswahlverlauf | 3. .vt-domain-name/-indicator-> aufgehellte Kopffläche rgba(15,53,112,.15) | | Zu 1 und 2: Die Kartengrundfarbe darf nicht durch transparente | Farbüberlagerung entstehen, weil sie sonst unkontrolliert vom Seiten- | oder Bereichshintergrund abhängt. Sie kommt jetzt aus genau einer | vollständig deckenden Regel am Dateiende, die Normal- und Auswahlzustand | gemeinsam abdeckt. | | Zu 3: Die aufgehellte Kopffläche endete mit einer harten waagerechten | Kante am Übergang zum Preisbereich und wirkte damit als genau die | Trennung, die der Kartenentwurf zwischen Kopfzone und Preisen nicht | vorsieht. Sie hätte außerdem den jetzt verbindlichen Kartenverlauf | ausgerechnet in seinem oberen Abschnitt (0% bis 30%) überlagert. | | Der Block ist damit vollständig entfallen. Die Domainpreisliste war und | bleibt unberührt; es bestand nie ein gemeinsamer Selektor. |-------------------------------------------------------------------------- */ /* |-------------------------------------------------------------------------- | 2026-09-01 | Autor: Claude | Änderung: | Small der Domainsuche: eine Karte pro Zeile ab 439px abwärts. | | Ausschließlich die Spaltenzahl des Kartenrasters wird umgestellt. Struktur, | Inhalte, Zustände, Ausrichtung, Preislabels, Aktions-/Statusbereich, | Abstände, Typografie und Farben bleiben unverändert. | | Der elliptische Kartenverlauf bleibt bewusst auf 440-960px begrenzt und wird | hier NICHT erweitert; Small erhält in diesem Schritt nur die Geometrie. | | Zur Reihenfolge: Der bestehende Block @media (max-width: 640px) wiederholt | in Zeile 1858 die Zweispaltigkeit mit derselben Spezifität (1,1,0). Dieser | Block muss deshalb nach ihm stehen, damit er über die Quellreihenfolge | gewinnt. Er steht am Dateiende und erfüllt das. |-------------------------------------------------------------------------- */ @media (max-width: 439px) { #vt-domain-results .vt-domain-table { grid-template-columns: minmax(0, 1fr); } } /* |-------------------------------------------------------------------------- | 2026-09-01 | Autor: Claude | Änderung: | Status- und Aktionsdesign der Domainsuche an die VisionThinks-Buttonsprache | der Domainpreisliste angeglichen. Ausschließlich Farbe, Rahmen, Radius, | Übergang und Fokusring. Keine Geometrie, keine Position, keine Funktion. | | Referenz, per Kaskadenauflösung als tatsächlich wirksam bestimmt: | vt-domain-pricelist-vers002.css | Zeile 564 #vt-domain-pricelist .vt-domain-pricelist-remember | -> blauer Verlauf, border 0, color #fff, transition | Zeile 592 ... :hover -> box-shadow | Zeile 362 ... :focus-visible -> outline | Zeile 598 ... .is-selected / .is-in-cart -> gruener Verlauf | | Semantik: gleiche Farbe = gleiche Bedeutung. | blau = verfuegbare Aktion | gruen = bestaetigte Auswahl | Die Domainsuche behaelt ihre eigene Buttonform: Radius 24px statt der | Pillenform 999px der Preisliste, eigene Breiten und Hoehen je Viewport. | | Fuer "Ihre Domain?" und "Unbekannt" existiert in der Preisliste KEINE | Referenz - sie kennt weder eine Gold- noch eine Neutralsemantik. Beide | behalten deshalb ihre bestehenden Farben; angeglichen wird nur die Form. | | "Nicht im Sortiment" bleibt vollstaendig unveraendert: es ist kein | kaufbarer Zustand und darf keine positive Aktionsgestaltung erhalten. | | !important ist erforderlich, weil die bestehenden Regeln in Zeile 1192, | 1213 und 1348 Hintergrund, Rahmen, Farbe und Radius mit !important setzen. |-------------------------------------------------------------------------- */ /* A) verfuegbar: blaue Aktionssemantik, gemeinsame Variablen beider Komponenten. */ #vt-domain-results .vt-domain-select-btn { background: linear-gradient( 90deg, var(--vt-domain-results-select-start, #245BFF), var(--vt-domain-results-select-end, #42A8FF) ) !important; border: 0 !important; border-radius: 24px !important; color: var(--vt-domain-results-text-strong, #fff) !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } /* B) bestaetigte Auswahl: gruene Semantik der Domainpreisliste, wortgleiche Werte. */ #vt-domain-results .vt-domain-select-btn.is-selected { background: linear-gradient( 90deg, #1f6b38 0%, #34c759 85%, #34c759 100% ) !important; } /* Fokusring nach der Referenz; gilt nur fuer den echten Button. */ #vt-domain-results .vt-domain-select-btn:focus-visible { outline: 3px solid rgba(61,163,255,0.34); outline-offset: -3px; } /* | C) "Ihre Domain?" und D) "Unbekannt": Farben unveraendert, nur die Form | wird an die Buttonsprache angeglichen. Kein cursor: pointer - beide sind | derzeit keine Interaktionselemente. */ #vt-domain-results .vt-domain-status.taken, #vt-domain-results .vt-domain-status.unknown { border-radius: 24px !important; } /* |-------------------------------------------------------------------------- | 2026-09-01 | Autor: Claude | Änderung: | Kartenansicht der Domainsuche: der Status-/Aktionsbereich rückt zwischen | Domainname und Preiszeilen. | | Zielreihenfolge in der Karte: | 1. Domainname | 2. Status-/Aktionsbereich | 3. Registrierung | 4. Verlängerung | 5. Transfer | | Verschoben wird ausschliesslich der gemeinsame aeussere Container | .vt-domain-indicator. Er traegt bei allen fuenf Zustaenden sowohl den | Badge (-top: "Ihre Domain?", "Unbekannt") als auch die Aktion | (-bottom: Auswahlbutton, "Nicht im Sortiment"). Dadurch wandern alle | Zustaende konsistent an dieselbe Position. | | Warum zwei Deklarationen und nicht nur order: -1 am Indicator: | Die Zeile ist ein Spaltenflexcontainer, alle fuenf Kinder stehen auf dem | Vorgabewert order: 0 und erscheinen in DOM-Reihenfolge. Ein alleiniges | order: -1 am Indicator wuerde ihn VOR den Domainnamen setzen. Der Name | erhaelt deshalb -2, der Indicator -1; die drei Preiszellen bleiben | unveraendert auf 0 und behalten untereinander ihre DOM-Reihenfolge. | | Es wird ausschliesslich die Reihenfolge geaendert. Keine Farbe, kein | Rahmen, kein Radius, kein Abstand, keine Groesse, kein Markup. | Der Desktopbereich ab 961px bleibt unberuehrt: die Regeln liegen in einer | Media Query mit oberer Schranke, und die Desktopzeile ist ein Grid, in dem | die bestehende Spaltenzuordnung unveraendert gilt. | | Nachtrag 2026-09-01 | Claude: | Die Karte laeuft seit der Headerzone in Zeilenrichtung mit Umbruch, nicht | mehr in Spaltenrichtung. Beide Deklarationen bleiben unveraendert gueltig | und weiterhin erforderlich: order sortiert unabhaengig von der Flexrichtung | und bestimmt, welche Kinder in die erste Flexzeile aufgenommen werden. Name | (-2) und Indicator (-1) bilden dadurch die Headerzone, die drei Preiszellen | bleiben auf 0 und folgen in DOM-Reihenfolge darunter. |-------------------------------------------------------------------------- */ @media (max-width: 960px) { #vt-domain-results .vt-domain-name { order: -2; } #vt-domain-results .vt-domain-indicator { order: -1; } } /* |-------------------------------------------------------------------------- | 2026-09-01 | Autor: Codex | Änderung: | Grafisches Finish ausschließlich für die bestehende Responsive-Card- | Architektur. Normal- und Auswahlzustand erhalten denselben freundlichen | VT-Blauverlauf; Auswahl bleibt allein am bestehenden grünen Button | erkennbar. Die Werte stammen aus dem vorhandenen Preislisten-Farbträger | .funnel-backgrd-heller in vt-domain-pricelist-vers002.css. | | ::after ist eine rein dekorative, inhaltslose Flexzeile nach TRANSFER. | Vorhandenes overflow:hidden übernimmt Radius und Clipping; es entsteht | weder Markup noch ein semantischer oder unsichtbarer Platzhalter. | Der vorhandene Breakpoint max-width:960px wird unverändert wiederverwendet. | |-------------------------------------------------------------------------- | Korrektur 2026-09-01 | Claude | | VERBINDLICHE WARTBARKEITSREGEL AB HIER: | Die Grundfarbe der Kartenfläche und die Farbe des grafischen Abschlusses | werden NICHT durch transparente Farbüberlagerung erzeugt. Grund: der | Seiten-/Bereichshintergrund kann später geändert werden; die Kartenfarbe | darf davon nicht unkontrolliert abhängig werden. | | Daher entfallen die drei transparenten radial-gradient-Ebenen vollständig. | Es bleibt der eine vollständig deckende Verlauf. Alle vier Farbstopps sind | feste Hexwerte; es kommt weder rgba() noch transparent vor. | | Diese Regel ist die EINZIGE Quelle der Kartengrundfarbe unterhalb von | 961px. Die frueheren rgba()-Flaechenregeln im Kartenblock und im | aufgeloesten Block 440-960px wurden entfernt, damit die Farbe nicht mehr | aus mehreren uebereinanderliegenden Ebenen entsteht. | | Normal- und Auswahlzustand teilen sich diese Regel und haben damit | nachweislich dieselbe Grundfarbe; die Auswahl ist ausschliesslich am | gruenen Button erkennbar. | |-------------------------------------------------------------------------- | Farbkorrektur 2026-09-01 | Claude | | Der senkrechte Verlauf #122b49/#142540/#12233e war im Human-Test zu dunkel, | zu flach und zu graublau. Er ersetzte den Stapel aus drei transparenten | radial-gradient-Ebenen ueber einem senkrechten Basisverlauf (Stand | cd42f9da), dessen Wirkung als freundlicher beurteilt worden ist. | | Der Stapel wurde exakt nachgerechnet: seine unterste Ebene war deckend, | deshalb ist das Kompositionsergebnis eindeutig und unabhaengig vom | Seitenhintergrund bestimmbar. Ergebnis der Analyse: | | Die drei radialen Ebenen lagen bei 50%/8%, 82%/42% und 45%/78%. Ihre | Ueberlagerung ergab KEINEN senkrechten Verlauf, sondern einen hellen | SENKRECHTEN STREIFEN in der Kartenmitte mit Abdunklung zu beiden | Seitenraendern. Der Blaukanal lief auf jeder Hoehe von rund 63-74 am | Rand auf 98-108 in der Mitte - eine Querspreizung von 31 bis 39 | Kanalstufen. Entlang der senkrechten Mittelachse war die Helligkeit | dagegen nahezu konstant. | | Genau diese Querspreizung war die vermisste Tiefe. Ein senkrechter | Verlauf kann sie grundsaetzlich nicht abbilden - daher die Beurteilung | "zu flach". | | Nachgebildet wird sie deshalb durch einen WAAGERECHTEN, zur Kartenmitte | gespiegelten Verlauf. Vergleich der Formen gegen den Zielzustand, | gemessen ueber ein Punktgitter auf breiter und schmaler Karte: | | linear 180deg (senkrecht) mittlere Abweichung 11.54 Kanalstufen | radial ellipse at 50% 45% mittlere Abweichung 6.81 Kanalstufen | linear 90deg (waagerecht) mittlere Abweichung 3.15 Kanalstufen | | Alle sieben Farbstopps sind feste Hexwerte. Es kommt weder rgba() noch | hsla() noch transparent vor; die sichtbare Kartenfarbe haengt damit nicht | vom Seiten- oder Bereichshintergrund ab. | | Die im Stand cd42f9da zusaetzlich vorhandene aufgehellte Kopfflaeche | rgba(15,53,112,.15) wird NICHT wiederhergestellt. Sie ist rechnerisch | entbehrlich: ueber der bereits hellen Kartenmitte veraenderte sie das | Ergebnis nur um -1.7 / -1.2 / +0.9 Kanalstufen und war damit praktisch | unsichtbar. Die freundliche Kopfwirkung stammte aus der radialen Ebene | bei 50%/8%, also aus der Kartenflaeche selbst - und die ist hier | enthalten. Es entsteht dadurch keine waagerechte Kopfkante. |-------------------------------------------------------------------------- */ @media (max-width: 960px) { #vt-domain-results .vt-domain-row, #vt-domain-results .vt-domain-row.is-selected { background: linear-gradient( 90deg, #142745 0%, #152f54 20%, #163562 35%, #173a6b 50%, #163562 65%, #152f54 80%, #142745 100% ); } /* | Grafischer Abschluss unter TRANSFER. | | 2026-09-01 | Claude | Niedriger und dunkler, und ebenfalls mit festem | Farbwert statt rgba(20, 80, 165, 0.16). | | Hoehe 38px -> 20px. Der Wert ist aus dem realen Bestand abgeleitet und | nicht frei gewaehlt: die Karte traegt border-radius: 20px. Eine | Abschlussflaeche, die niedriger als der Eckradius ist, wird an beiden | Enden vollstaendig von der Eckenrundung aufgezehrt und wirkt | eingeschnuert. 20px ist damit die kleinste Hoehe, die noch eine sauber | durchlaufende Abschlusskante ergibt - und ein bereits in der | Kartengeometrie vorhandener Wert, kein neuer. Im verdichteten Bereich | betraegt der Radius 16px; 20px genuegt dort ebenfalls, eine zweite | Hoehenstufe ist nicht erforderlich. | | Kein Rahmen, kein Text, kein  , kein Markup. Der untere | Kartenradius wird ueber das vorhandene overflow: hidden der Karte | uebernommen. | | Farbkorrektur 2026-09-01 | Claude: #0e1c33 -> #12294a. | Die Hoehe von 20px bleibt unveraendert. | | Der Kartenkoerper ist mit dem neuen Verlauf deutlich heller geworden | (Mittel ueber die Kartenbreite: Kanalsumme 119.8 -> 158.9). Der alte | Abschluss #0e1c33 (Kanalsumme 93.0) waere dagegen als schwerer, fast | schwarzer Balken erschienen. | | #12294a ist aus dem neuen Kartenmittel #153159 abgeleitet, nicht frei | gewaehlt: derselbe Farbton bei 84 Prozent der Helligkeit. | Saettigung 60.9% gegen 61.1% des Koerpers - praktisch gleich | Helligkeit 18.0% gegen 21.6% - rund 3.6 Punkte dunkler | Blau/Rot 4.11 gegen 4.14 - Farbton erhalten | Blau bleibt eindeutig dominant (74 gegen 18); es entsteht kein Schwarz | und kein Anthrazit. Der Abschluss bleibt erkennbar, ohne als zweiter | Inhaltsbereich zu wirken. */ #vt-domain-results .vt-domain-row::after { content: ''; flex: 0 0 100%; height: 20px; background: #12294a; } }