@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Merriweather:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap'); :root { --text-color: #333; --primary-color: #333; --accent-color: #1f7fa8; --secondary-color: #a00000; --error-color: #d7263d; --danger-color: #b80000; --warning-color: #d97706; --success-color: #1a8f3a; --ki-gpt: #333; --ki-gpt-hover: #1a1a1a; --ki-claude: #cc7b46; --ki-claude-hover: #b76b3a; } body { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 400 !important; background-color: var(--background-color); accent-color: var(--primary-color); color: var(--text-color); } h1, h2, h3, h4, button { font-family: Montserrat; } h2, h3 { padding: 0; margin: 0; line-height: 1.5em; } h1, h2, h3, h4, section, div { scroll-margin-top: 60px; } /* FAQ-Anchor-Scroll: fixed Header plus etwas Luft, damit der Zieltitel nicht unter der Navigation klebt. */ details[id^="faq-"] { scroll-margin-top: 84px; } p { margin: 0; line-height: 1.4; } label { line-height: 1.5em; } ul { list-style: none; padding: 0; margin: 0; } input, textarea, select { font-family: Nunito !important; } /* Einheitliche Optik fuer alle textbasierten Inputs (textarea bleibt unangetastet). */ textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { box-sizing: border-box; display: block; width: 100%; padding: 6px 10px; font-size: 16px; background: #fff; border: 1px solid var(--primary-color); border-radius: 6px; box-shadow: inset 3px 3px 3px #cbced1, inset -6px -6px 6px #fff; } /* Feste Hoehe fuer alle einzeiligen Inputs - sorgt fuer ein einheitliches Bild. */ select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { height: 36px; line-height: 1.25; } /* Selects brauchen rechts Platz fuer das native Chevron - sonst wird der Pfeil * vom inneren Box-Shadow angeschnitten. */ select { padding-right: 28px; } textarea:not(.composer__textarea) { padding: 20px; } button[disabled] { background: #ccc; color: #888; cursor: not-allowed; opacity: 0.7; } /* Eine einzige generische Hover-Regel fuer alle Buttons - dezente Farbueberlagerung * via filter, funktioniert unabhaengig von der Hintergrundfarbe des Buttons. * Disabled-Buttons werden ausgenommen (kein Hover-Effekt). */ button:not([disabled]):hover { filter: brightness(0.92); } section { padding: 4em 20px; margin-top: 3em; box-sizing: border-box; border-radius: 24px; } .info {} .container { padding-top: 40px; max-width: 1200px; margin: 0 auto; } .site-header { box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 1000; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; transition: all 0.3s ease; } .logo img { height: 30px; } .header-nav { display: flex; align-items: center; gap: 14px; } .header-nav ul { display: flex; list-style: none; padding: 0; margin: 0; } .header-nav li { margin-left: 20px; } .header-nav a { color: var(--text-color); text-decoration: none; } .header-auth { margin-left: auto; display: flex; align-items: center; gap: 12px; } .header-auth a { color: #333; text-decoration: none; border-bottom: 1px solid rgba(51, 51, 51, 0.35); padding-bottom: 2px; } .header-auth-text { color: #333; white-space: nowrap; } .header-auth-aufladen { font-weight: 700; } .header-session-timer { margin-left: 8px; font-size: 0.85em; opacity: 0.8; white-space: nowrap; } a.hotline { color: #fff !important; font-family: Nunito; font-weight: bold; } li.hotline { background: var(--accent-color); padding: 5px 10px; border-bottom-right-radius: 12px; } a.hr { color: var(--background-color) !important; font-family: Nunito; font-weight: bold; } li.hr { background-color: var(--secondary-color); padding: 5px 10px; } .hspecials { display: flex; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0; } .hspecials li { display: inline-block; } /* "Warum Frau Sicher"-Link unterstrichen wie Einloggen/Anmelden (.header-auth a). */ #header_warum_frau_sicher { text-decoration: none; border-bottom: 1px solid rgba(51, 51, 51, 0.35); padding-bottom: 2px; } #bottom-footer { margin-top: 5em; padding: 20px; background: linear-gradient(30deg, #000, #333, #666); box-sizing: border-box; } #bottom-footer a, #bottom-footer .copyright-text { color: #fff; text-decoration: none; font-size: 16px; } #bottom-footer .copyright-text { font-size: 14px; } .theater { padding: 0; border-radius: 24px; } .grey { background: linear-gradient(90deg, #fff8e0 10%, #fffcf5 60%, #fff8e0 90%); border: 1px solid rgb(200, 184, 135); } .white { background: linear-gradient(-45deg, #fff 0%, #ddd 25%, #fff 100%); box-shadow: 0 12px 24px rgba(220, 220, 220, 1); border-top: 1px solid #eee; } .swiper { width: 100%; height: 100%; background: transparent; } .swiper-slide { text-align: center; font-size: 18px; background: var(--background-color); display: flex !important; justify-content: center; align-items: center; padding: 20px 0 0; height: unset !important; } .swiper-slide h3 { margin: 1em 0; } .swiper-button-next, .swiper-button-prev { box-sizing: border-box; top: var(--swiper-navigation-top-offset, 35%) !important; } .swiper-pagination { position: relative !important; } .autoplay-progress { position: relative; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary-color); float: right; margin: -44px 0 0 -80px; } .autoplay-progress svg { --progress: 0; position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; stroke: var(--primary-color); stroke-width: 4px; fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); } .image-content-vv { flex: 1; display: flex; justify-content: center; align-items: flex-end; height: 100%; padding: 0 2em 0 3em; } .text-content-vv { flex: 1; text-align: left; padding-right: 80px; } .slider-image { width: 100%; height: auto; border-bottom-left-radius: 24px; } .slide_bewerbung, .slide_lebenslauf { cursor: pointer; } .highlight-top { background: var(--secondary-color); color: #fff; font-weight: bold !important; white-space: nowrap; padding: 0 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .text-block { width: 100%; height: 100%; text-align: center; display: flex !important; justify-content: center; align-items: end; } .text-block-content { flex: 2; text-align: left; } .chevron-heading { cursor: pointer; user-select: none; position: relative; padding-left: 20px; margin: 6px 0; } .chevron-icon::before { position: absolute; left: 0; margin-top: -13px; font-size: 16px; color: var(--primary-color); transition: transform 0.3s ease; } .chevron-heading.active .chevron-icon::before { transform: rotate(180deg); } .content { display: none; padding: 6px 20px; } #checkout { display: flow-root; /* Der Checkout umfasst seine Navigation und verhindert herausragende Float-/Margin-Effekte. */ min-height: 27em; } #checkout-SCHRITT_ANON_ERGEBNIS_VOR_CHAT, #checkout-SCHRITT_ANON_ERGEBNIS_VOR_CHAT .form-area { min-height: 0; } #content h1 { padding: 0 20px; margin: 0; } .checkout-nav { clear: both; /* Die Navigation beginnt sicher unter vorherigen Floats. */ display: flow-root; /* Die untere Consent-Box und der Button zählen zur Container-Höhe. */ width: 100%; min-height: 2em; height: auto; margin-bottom: 3em; } .generator-headline { font-family: Montserrat !important; color: #fff; padding: 10px 20px; margin-bottom: 0.75em; background: linear-gradient(45deg, #000, #ca0000, #000); box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), inset 0 5px 8px -5px rgba(0, 0, 0, 0.4); } .radius { border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; } button.radius { border-radius: 5px; } .tabs { display: flex; flex-wrap: wrap; width: 100%; list-style: none; padding: 0; margin: 0 0 1em; } .tab { flex: 1 1 auto; margin: 2px; padding: 10px 0 10px 10px; background: var(--background-color); color: var(--text-color); text-align: left; font-weight: normal; cursor: pointer; box-sizing: border-box; transition: transform 0.3s ease-in-out; box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), inset 0 5px 8px -5px rgba(0, 0, 0, 0.4); } .tab.active { font-weight: bold; color: var(--text-color); } .tab-number { float: left; min-width: 1.5em; margin-right: 0.5em; color: #fff; background: var(--text-color); text-align: center; font-weight: bold; border-bottom-right-radius: 5px; } .tab.active .tab-number { background: var(--accent-color); } .form-area { position: relative; padding: 20px; box-sizing: border-box; background: rgba(236, 240, 243, 0.5); border-radius: 12px; box-shadow: 8px 8px 8px #cbced1, -8px -8px 8px white; } .text-area-wrapper { display: flex; flex-direction: column; line-height: 1.25em; flex-grow: 1; } .hint-area { color: #555; padding: 8px 0.7em; border-radius: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); box-shadow: inset 5px 0 4px -5px rgba(0, 0, 0, 0.4), inset 0 5px 4px -5px rgba(0, 0, 0, 0.4); } .hint-area ul { margin-top: 1em; } .hint-area ul > li { margin-top: 0.75em; } .hint-area ul > li ul li { margin-top: 0.25em; } .hint-area ul ul { margin: 4px 0 4px 2em; padding: 8px 24px; background: var(--background-color); border-radius: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); color: #555; box-shadow: inset 5px 0 4px -5px rgba(0, 0, 0, 0.4), inset 0 5px 4px -5px rgba(0, 0, 0, 0.4); } .fehler { margin: 8px 0; padding: 24px; border: 6px solid var(--error-color); border-radius: 12px; } .fep { border: 2px solid var(--error-color) !important; } .fe { border-color: var(--error-color) !important; } .consent-box { position: relative; /* damit .consent-box__overlay absolut darüber liegen kann */ margin-top: 1em; padding: 1em; border: 5px solid var(--error-color); border-radius: 6px; display: flex; align-items: flex-start; gap: 1em; } /* Hover-Overlay über der Consent-Box: erscheint, wenn die Maus über einem deaktivierten Schritt-1-Button liegt. Liegt absolut über der Box, transparent, zentrierte Meldung - analog .composer__overlay im Chat. */ .consent-box__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); border-radius: 6px; pointer-events: none; z-index: 3; } .consent-box__overlay[hidden] { display: none; } .consent-box__overlay__msg { padding: 0.4em 0.8em; color: var(--error-color); /* Hinweis als Fehlerfarbe (rot) - Pflichtaktion */ font-weight: 600; text-align: center; } .consent-box__label { display: flex; align-items: flex-start; gap: 1em; margin: 0; } .consent-box__check { margin-top: 0.15em; flex-shrink: 0; } .consent-box__text { line-height: 1.5; } #consent-checkbox.fep { outline: 2px solid var(--error-color); outline-offset: 2px; } .hint-toggle { cursor: pointer; user-select: none; background: transparent; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; float: none; display: inline-flex; align-items: center; gap: 0.4em; } .hint-toggle__icon { transition: transform 0.2s ease; } .hint-toggle[aria-expanded="true"] .hint-toggle__icon { transform: rotate(180deg); } .hint-collapse { clear: both; padding-top: 0.5em; } .hint-collapse[hidden] { display: none; } .legal-link { text-decoration: underline; text-decoration-color: #999; text-decoration-thickness: 1px; text-underline-offset: 2px; color: inherit; } .link { text-decoration: none; hyphens: auto; color: inherit; } .underline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } button { display: inline-block; padding: 9px 14px; background: var(--primary-color); color: #fff; border: none; border-radius: 5px; cursor: pointer; gap: 5px; align-items: center; font-family: inherit; font-size: 14.4px; line-height: 1.2; } button .fa-plus { padding: 5px; } .button-primary { padding: 10px 15px; background: var(--primary-color); color: #fff; border: 0; cursor: pointer; font-weight: bold; text-transform: uppercase; font-family: inherit; } .mute { background: var(--text-color); border-bottom-right-radius: 0; font-weight: normal; } .rate-button-checkout { display: inline-block; padding: 10px 15px; margin: 0 0.5em 0.75em 0; background: var(--accent-color); color: #fff; cursor: pointer; border-radius: 6px; font-size: .8em; font-weight: bold; text-decoration: none; text-align: center; text-transform: uppercase; font-family: inherit; } .radio-wrapper { margin-right: 20px; } input[type="radio"], input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; width: 18px; height: 18px; margin: 0; background: #fff; border: 1px solid var(--primary-color); box-shadow: none; position: relative; cursor: pointer; vertical-align: middle; flex-shrink: 0; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"] { border-radius: 4px; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primary-color); box-shadow: unset; } input[type="checkbox"]:checked::before { content: '\f00c'; font-family: 'FontAwesome'; position: absolute; inset: 0; color: #fff; font-size: 13px; line-height: 16px; text-align: center; pointer-events: none; } input[type="radio"]:checked::before { content: ''; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background: #fff; border-radius: 50%; pointer-events: none; } .modal { display: flex; position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100%; overflow: hidden; background: rgba(255, 255, 255, 0.7); align-items: center; justify-content: center; } .modal-content { width: 80%; max-width: 400px; min-height: 150px; padding: 5px 10px 15px; background: #fefefe; box-shadow: 0 12px 24px rgba(180, 220, 240, 1); } .spinner { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-top: 5px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .payments-modal { display: none; } .payments-modal .modal-content { width: 95%; max-width: 1200px; } .payments-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .payments-modal__title { margin: 0; } .payments-modal__close-x { padding: 4px 8px; font-size: 18px; line-height: 1; } .payments-modal__filter { margin: 10px 0; } .payments-modal__filter input { width: 100%; box-sizing: border-box; padding: 8px; } .payments-modal__table-wrap { max-height: 320px; overflow: auto; border: 1px solid #ddd; } .payments-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .payments-table th, .payments-table td { padding: 6px 4px; text-align: left; overflow-wrap: anywhere; } .payments-table__col-datum { width: 11em; } .payments-table__col-betrag { width: 9em; } /* Header bleibt linksbuendig (Caption-Style); nur die Datenzellen der Betrag-Spalte * werden rechtsbuendig formatiert, damit Zahlen am Komma stehen. */ .payments-table td:nth-child(3) { text-align: right; } .payments-table__aufladung td { font-weight: 700; } .payments-modal__section-title { margin: 0.75em 0 0.4em; font-size: 1em; font-weight: 600; color: var(--text-color); } .payments-modal__holds { list-style: none; margin: 0 0 1em; padding: 0; } .payments-modal__hold { display: flex; align-items: baseline; gap: 0.8em; padding: 0.5em 0.6em; margin-bottom: 0.3em; background: #f7f9fb; border-left: 3px solid var(--accent-color); border-radius: 4px; } .payments-modal__hold-amount { font-weight: 700; color: var(--accent-color); white-space: nowrap; min-width: 6em; } .payments-modal__hold-desc { font-size: 0.9em; color: #4a5868; line-height: 1.35; } #login_modal::backdrop, dialog.modal::backdrop { background: rgba(0, 0, 0, 0.45); } #login_modal.modal, dialog.modal { border: 0; border-radius: 14px; padding: 0; background: #e2e2e2; } #login_modal.modal { border-radius: 12px; } #login_modal.modal .login-box { padding: 18px; width: min(420px, calc(100vw - 24px)); } dialog.modal .login-box { padding: 16px; width: min(780px, calc(100vw - 24px)); } #login_modal.modal #loginMsg { margin-top: 10px; } .login-box { max-width: 760px; } .login-box .tab-panel { display: none; } .login-box .tab-panel.is-active { display: block; } /* Ein Feld: Label oben, Input drunter, Status-Icon rechts mittig im Input, Hinweis darunter. */ .feld { position: relative; margin: 4px 0; } .feld > label { display: block; height: 22px; line-height: 22px; color: #333; } .feld .feld-hinweis { margin-top: 2px; font-size: 0.92rem; line-height: 1.2; color: #333; } .feld .feld-hinweis:empty { margin: 0; display: none; } /* Status-Icon: liegt rechts ueber dem Input, vertikal mittig (Input ist 36px hoch, Label 22px). */ .feld .feld-status { position: absolute; right: 10px; top: 22px; height: 36px; display: flex; align-items: center; pointer-events: none; font-family: 'FontAwesome'; font-size: 16px; } .feld input:not([type="checkbox"]):not([type="radio"]) { padding-right: 36px; } .feld.is-prueft .feld-status::before { content: "\f110"; color: #333; opacity: 0.75; animation: spin 1s linear infinite; } .feld.is-ok .feld-status::before { content: "\f00c"; color: #1a8f3a; } .feld.is-fehler .feld-status::before { content: "\f00d"; color: #c21818; } /* Checkbox-Variante: Label links, Status-Icon rechts. Hinweis darunter in voller Breite. */ .feld--checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; } .feld--checkbox .checkbox-label { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 0.45em; line-height: 1.3; } .feld--checkbox .checkbox-label input[type="checkbox"] { margin-top: 2px; } .feld--checkbox .feld-status { position: static; height: auto; flex: 0 0 auto; } .feld--checkbox .feld-hinweis { flex-basis: 100%; } /* Checkbox-Felder: Status-Icon wird IMMER angezeigt und spiegelt den :checked-Status. * JS-Klassen is-ok/is-fehler werden bewusst ignoriert - eine ungehakte Pflichtbox * ist ungehakt, egal was die DB sagt. */ .feld--checkbox .feld-status::before, .feld--checkbox.is-ok .feld-status::before, .feld--checkbox.is-fehler .feld-status::before, .feld--checkbox.is-prueft .feld-status::before { content: "\f00d"; color: #c21818; font-family: 'FontAwesome'; font-size: 16px; animation: none; } .feld--checkbox:has(input[type="checkbox"]:checked) .feld-status::before, .feld--checkbox.is-ok:has(input[type="checkbox"]:checked) .feld-status::before { content: "\f00c"; color: #1a8f3a; } .fehler-gruppe { display: none; margin: 0 0 12px; padding: 10px 12px; background: #f2dede; color: #333; border: 1px solid #c21818; border-radius: 10px; } .fehler-gruppe.is-visible { display: block; } .fehler-gruppe ul { margin: 0; padding-left: 18px; } .button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .login-hinweis { margin-top: 10px; color: #333; opacity: 0.9; } .server-msg { margin-top: 10px; min-height: 1.2em; color: #333; } .register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; } .composer { /* Composer als Flex-Row: links Button-Stack, rechts Textarea. Beide Spalten * stehen oben/unten bündig (align-items: stretch) - dadurch zieht der * Button-Stack die Composer-Box automatisch auf SEINE Hoehe, wenn er * groesser ist als die Textarea. Keine festen min-heights, kein Zaehlen * von Buttons im JS - das Element regelt seine Hoehe selbst. */ position: relative; display: flex; align-items: stretch; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 12px; background: #fff; border: 1px solid #c8d3df; border-radius: 6px; } textarea.composer__textarea { display: block; /* Flex-Item neben dem Button-Stack: fuellt restlichen Platz. */ flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; font: inherit; background: transparent; border: 0; outline: none; box-shadow: none; resize: vertical; user-select: text; } /* Button-Stack links im Composer. Eigener Flex-Container, column-reverse * fuellt von unten - der erste appended Button steht unten. Der Stack ist * NICHT absolute: er ist ein normaler Flex-Item neben der Textarea, dadurch * traegt seine Hoehe zur Composer-Hoehe bei. Sind 4 Buttons drin, wird die * Composer-Box automatisch entsprechend gross. */ .composer__btnstack { flex: 0 0 34px; display: flex; flex-direction: column-reverse; gap: 8px; align-self: stretch; } .composer__iconbtn { flex: 0 0 34px; /* feste Hoehe pro Knopf */ width: 34px; height: 34px; padding: 0; background: #fff; color: #3a4a5a; border: 1px solid #c8d3df; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font: bold 24px/32px sans-serif; text-align: center; cursor: pointer; } .composer__iconbtn--anon { display: flex; align-items: center; justify-content: center; } .composer__iconbtn--download .fa-download { transform: scale(0.8); } .composer__anon-stack { font-size: 0.6em; line-height: 1; } .composer__anon-user { color: #3a4a5a; display: inline-block; transform-origin: center center; } .composer__anon-ban { color: var(--success-color); } /* nicht-anonymisiert: gleiche Optik wie anonymisiert (circle-o + User in * Originalgröße/-farbe), nur der äußere Kreis wird rot eingefärbt, um den * Warnzustand zu signalisieren. */ .composer__iconbtn--anon[data-anon-state="dirty"] .composer__anon-ban { color: var(--danger-color); } .composer__iconbtn--anon[data-anon-state="dirty"] .composer__anon-stack { display: inline-flex; align-items: center; justify-content: center; } /* Schalter-Zeile direkt ueber dem Composer. Hoehe = clearfix fuer float-right. * Bewusst KEIN position:absolute - der Schalter steht im normalen Fluss * direkt ueber der Textarea, nicht ueber den Inhalt geschoben. */ .composer__switchrow { /* Zeile reserviert sich Hoehe, sonst kollabiert sie wegen float */ overflow: hidden; /* Kleiner Abstand zwischen Schalter und Composer-Box darunter. */ margin-bottom: 4px; } .composer__restore-switch { /* Rechts in der Zeile schweben (float, kein position:absolute). */ float: right; cursor: pointer; /* Flex: Prefix-Label, Input (unsichtbar, out-of-flow), Off-Text, Slider, On-Text */ display: inline-flex; align-items: center; gap: 5px; /* Optisch eindeutig als Pille abgesetzt vom Composer-Hintergrund. * Schriftgroesse einheitlich zur Standardprompt-Select-Box (0.85em), * Padding ggue. v1 reduziert, passend zur kleineren Slider-Hoehe. */ padding: 3px 8px; font-size: 0.85em; background: #f6f8fb; border: 1px solid #d8dee6; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); line-height: 1; } /* Prefix "Chat-Anzeige:" - erbt die 0.85em vom Switch, hebt sich nur ueber Farbe ab. */ .composer__restore-prefix { color: #555; font-weight: 500; user-select: none; margin-right: 2px; } .composer__restore-switch input { /* Aus dem Flex-Flow nehmen, bleibt aber DOM-Geschwister für CSS-Selektoren */ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Zustandsbezeichnungen links/rechts des Sliders - erben die 0.85em vom Switch. * Aktiv/Inaktiv wird nur ueber Farbe + Fettung differenziert (s.u.). */ .composer__restore-label { color: #b0b8c2; white-space: nowrap; user-select: none; transition: color 0.18s ease, font-weight 0.18s ease; } /* Aktiv-Zustand links (Anonymisiert/Platzhalter): grün wie der Slider im Standardzustand */ .composer__restore-switch input:not(:checked) ~ .composer__restore-label--off { color: var(--success-color); font-weight: 600; } /* Aktiv-Zustand rechts (Klartext): neutral dunkel, passend zum grauen Slider */ .composer__restore-switch input:checked ~ .composer__restore-label--on { color: #555; font-weight: 600; } .composer__restore-slider { display: block; /* Explizite Größe, da nicht mehr width:100% im Flex-Container. * Maße um 20% reduziert ggue. v1 (52x30 -> 42x24, Ball 24 -> 19, Versatz 3 -> 2). */ flex-shrink: 0; width: 42px; height: 24px; /* position:relative damit ::before (Slider-Ball) sich daran ausrichtet */ position: relative; background: var(--success-color); border-radius: 999px; transition: background 0.18s ease; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); } .composer__restore-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); } /* ~ statt + weil jetzt .composer__restore-label--off zwischen input und slider sitzt */ .composer__restore-switch input:checked ~ .composer__restore-slider { background: #c8d3df; } /* Slider grau wenn Anon-Text nachträglich verändert wurde (dirty-Zustand) */ .composer__restore-switch[data-anon-state="dirty"] .composer__restore-slider { background: #c8d3df; } .composer__restore-switch input:checked ~ .composer__restore-slider::before { /* 42 (Slider) - 19 (Ball) - 2 (Versatz links) - 2 (Versatz rechts) = 19 */ transform: translateX(19px); } .schritt1-btn__anonicon { font-size: 0.9em; margin-right: 0.5em; vertical-align: -0.03em; } .schritt1-btn:not(.schritt1-btn--secondary) .schritt1-btn__anonicon .composer__anon-ban { color: var(--success-color) !important; } .schritt1-btn:not(.schritt1-btn--secondary) .schritt1-btn__anonicon .composer__anon-user { color: #fff !important; } .anon-attachments { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 0.5em; } .anon-chip { display: inline-flex; align-items: center; gap: 0.4em; max-width: 100%; padding: 0.25em 0.5em; font-size: 0.9em; background: #eef3f8; border: 1px solid #c8d3df; border-radius: 6px; cursor: pointer; } .anon-chip__icon { font-size: 1.1em; } .anon-chip__name { max-width: 18em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anon-chip__size { color: #6b7884; font-size: 0.85em; } .anon-chip__remove { padding: 0 0.2em; background: transparent; border: 0; color: #a00; line-height: 1; font-weight: 700; cursor: pointer; } .anon-attach-status { margin-top: 0.25em; font-size: 0.9em; color: #3a4a5a; } .anon-attach-status.error { color: #a00; } /* Info-Pillow fuer Hinweise (Anon-Schritt 1, Triochat-Session-Liste etc.). * Optik und Typografie sind 1:1 an .triochat__warnhinweis--info angeglichen, * damit alle Info-Bereiche der App identisch wirken: kompakte 0.8em-Schrift * mit Weight 600, blauer Hintergrund mit allseitigem Border + 6px Radius, * Icon und Text zentriert via Flexbox. */ /* hidden-Attribut MUSS gewinnen - sonst zeigt die explizite display:flex-Regel * der Info-Boxen die Box trotz [hidden] weiter an (gleiche Spezifitaet, letzte * gewinnt). Wirkt auch fuer .triochat__warnhinweis--info (gleiche Familie). */ .info-box[hidden], .triochat__warnhinweis[hidden], .info-toggle__trigger[hidden] { /* Fontawesome setzt am <i>-Element display:inline-block - das ueberstimmt * den UA-Default [hidden]{display:none}. !important hier sorgt dafuer, * dass das hidden-Attribut (von der hint-toggle-Logik gesetzt) wirklich * versteckt. */ display: none !important; } /* Gemeinsame Basis fuer Info-/Hinweisboxen (Schritt 1 + Chat): identisches Padding, linksbuendig, Icon oben ausgerichtet. */ .info-box, .triochat__warnhinweis { display: flex; align-items: flex-start; justify-content: flex-start; gap: 0.3em; margin: 0.3em 0; padding: 0.4em 0.7em; border-radius: 6px; font-size: 0.8em; line-height: 1.3; text-align: left; } .info-box { font-weight: 400; } .triochat__warnhinweis { font-weight: 600; } .info-box--strong { font-weight: 600; } .info-box--info { margin-top: 0.75em; background: #eef5ff; border: 1px solid #cdddef; color: #1b365d; } /* Warn- und Error-Varianten analog zu --info: gleiche Box, andere Farben/Icon. Genutzt vom typisierten Subtext-Hinweis (info | warn | error) im Modal-Dialog. */ .info-box--warn { margin-top: 0.75em; background: #fff7e0; border: 1px solid #e8d08a; color: #5a4500; } .info-box--warn > .fa { color: #b07a00; } .info-box--error { margin-top: 0.75em; background: #fdeaea; border: 1px solid #f0b8b8; color: #7a1620; } .info-box--error > .fa { color: #c0392b; } .triochat__sessions__info { flex: 1 0 100%; box-sizing: border-box; margin-top: 0; } .triochat__sessions__info > .fa-info-circle { margin-top: 0.08em; } .info-box .fa, .triochat__warnhinweis .fa { font-size: 1.2em; line-height: 1; margin-top: 0.05em; flex-shrink: 0; } .info-box--info > .fa-info-circle { color: #4476c4; } /* Im Modal-Dialog steuert der inner-gap (0.3em) die Abstaende - die Box selbst bringt keinen eigenen margin-top mit, und das Icon sitzt oben buendig zur ersten Textzeile (kein margin-top-Versatz). */ .anon-confirm-dialog__inner .info-box { margin: 0; /* 6px Abstand zwischen Icon und Text im Subtext-Bereich. */ gap: 6px; } .anon-confirm-dialog__inner .info-box > .fa { margin-top: 0; line-height: 1.3; } /* ===== Info-Toggle ===== * Sichtbarkeit einer Info-Box wird ueber das native HTML5 hidden-Attribut * gesteuert. Toggling laeuft ueber die zentrale Funktion bindHintTogglesIn * (siehe frausicher712.js); jeder Trigger ist .hint-toggle mit data-target * + data-persist[+ data-default-open]. Hier nur die optischen Helfer: * - .info-toggle__close: X-Button in der Box. * - .info-toggle__trigger: externes i-Icon. */ .info-toggle__close { margin-left: auto; padding: 0 0.3em; background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1em; line-height: 1; opacity: 0.7; } .info-toggle__close:hover { opacity: 1; } .info-toggle__close .fa { /* Beim Schliess-Icon NICHT die generelle Info-Icon-Farbe verwenden - * inherit nimmt die Textfarbe der Box (blau / rot je Variante). */ color: inherit; font-size: 1em; line-height: 1; } /* Externer Trigger (i-Icon, irgendwo platziert): dezent eingefaerbt, mit * Hover. Cursor-Pointer signalisiert Klickbarkeit. */ .info-toggle__trigger { cursor: pointer; color: #4476c4; opacity: 0.8; } .info-toggle__trigger:hover, .info-toggle__trigger:focus { opacity: 1; outline: none; } .hint-area .info-toggle__trigger { display: inline-block; } .step1-legal-line .info-toggle__trigger { vertical-align: middle; position: relative; top: -0.04em; } #step1more p { margin: 0; } #step1more p + p { margin-top: 0.6em; } #step1more { align-items: flex-start; gap: 0.5em; } #step1more .info-box__content { flex: 1 1 auto; min-width: 0; } #step1more .info-toggle__close { margin-left: auto; } /* Separater Hidden-Mechanismus fuer die Kaution-Info im Chat: wird durch * die Insufficient-Logik gesteuert (rote Box ersetzt die blaue) und darf * NICHT mit dem hidden-Attribut der hint-toggle-API kollidieren. * Daher eigene Klasse mit display:none. */ .versteckt-durch-insufficient { display: none !important; } .info-box--info.info-hinweis--collapsed .fa-info-circle, .triochat__warnhinweis--info.info-hinweis--collapsed .fa-info-circle { opacity: 0.85; } .anon-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .anon-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .anon-modal__panel { position: relative; width: min(800px, 92vw); max-height: 88vh; background: #fff; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; } .anon-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 0.75em 1em; font-weight: 600; border-bottom: 1px solid #e3e8ef; } .anon-modal__close { padding: 0; background: transparent; border: 0; font-size: 1.5em; line-height: 1; color: #3a4a5a; cursor: pointer; } .anon-modal__text { flex: 1; min-height: 40vh; padding: 1em; border: 0; outline: none; font: inherit; resize: vertical; } .anon-modal__foot { display: flex; justify-content: flex-end; gap: 0.5em; padding: 0.75em 1em; border-top: 1px solid #e3e8ef; } .anon-modal__btn { padding: 0.45em 1em; background: #fff; color: var(--text-color); border: 1px solid #c8d3df; border-radius: 6px; cursor: pointer; } .anon-modal__btn--primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } #anon-merge-dialog, #chat-reanon-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; } .anon-merge-dialog__inner, .chat-reanon-dialog__inner { padding: 18px 22px 18px; } .anon-merge-dialog__inner h3, .chat-reanon-dialog__inner h3 { margin: 0 0 8px; font-size: 1.1em; font-weight: 600; } .anon-merge-dialog__inner p, .chat-reanon-dialog__inner p { margin: 0 0 14px; line-height: 1.4; color: #4a5868; } .anon-merge-dialog__actions, .chat-reanon-dialog__actions { display: flex; flex-direction: column; gap: 8px; } /* Bestaetigungs-Dialog vor jeder Anonymisierung (zeigt Seitenzahl + Preis). Liegt auf body-Ebene und ueberlebt den Wechsel zwischen Anon-Schritt und Chat. Optisch identisch zum anon-merge-dialog (Konsistenz). */ .anon-confirm-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid #d0d6dc; border-radius: 6px; } .anon-confirm-dialog__inner { padding: 18px 22px 18px; /* EINHEITLICHER Abstand zwischen allen direkten Bereichen (Titel, Text, Hinweis, Button-Block) ueber gap - statt uneinheitlicher Element-Margins. */ display: flex; flex-direction: column; gap: 0.3em; } .anon-confirm-dialog__inner h3 { margin: 0; font-size: 1.1em; font-weight: 600; } .anon-confirm-dialog__inner p { margin: 0; line-height: 1.4; color: #4a5868; } .anon-confirm-dialog__actions { display: flex; flex-direction: row; justify-content: flex-end; gap: 0.3em; } /* Variante: Buttons UNTEREINANDER (volle Breite) - fuer Dialoge mit mehreren Wahlmoeglichkeiten (z.B. Re-Anon "ungeschuetzter Text"). Nutzt die bestehenden .button-primary / .button-secondary, nur die Anordnung aendert sich. */ .anon-confirm-dialog__actions--vertikal { flex-direction: column; align-items: stretch; } /* Button-Texte im Dialog IMMER in Grossbuchstaben (auch secondary/Abbrechen). */ .anon-confirm-dialog__actions button { text-transform: uppercase; } #anon-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25em 1em; margin-top: 0.5em; } #anon-filters label { display: block; } .scrollable { width: 100%; max-height: 10lh; overflow-y: auto; overflow-x: hidden; } .mapping-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; } .mapping-item { margin: 0; padding: 0; white-space: nowrap; } .prechat-model-select { margin-top: 12px; } .prechat-model-select select { width: 100%; max-width: 420px; } .triochat { display: flex; flex-direction: column; gap: 1em; min-height: 60vh; padding: 1em; background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; } .triochat__balance { font-size: 0.85em; color: #6b7884; text-align: right; } /* Session-Leiste oberhalb des Streams: Plus-Button links, Tab-Liste daneben. Tabs sind horizontal scrollbar, falls viele Sessions vorhanden. */ .triochat__sessions { display: flex; align-items: center; gap: 0.5em; padding: 0.4em 0.5em; background: #f5f7fa; border: 1px solid #e3e8ef; border-radius: 8px; flex-wrap: nowrap; } .triochat__sessions__neu { flex: 0 0 auto; padding: 0.45em 0.8em; border: 1px solid #d2dae4; background: #fff; border-radius: 6px; cursor: pointer; font-size: 0.9em; color: var(--text-color); white-space: nowrap; } .triochat__sessions__neu:hover { background: #eef3fa; } .triochat__sessions__liste { display: flex; flex-wrap: nowrap; gap: 0.35em; overflow-x: auto; flex: 1 1 auto; min-width: 0; } .triochat__sessions__tab { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.6em; background: #fff; border: 1px solid #d2dae4; border-radius: 6px; font-size: 0.88em; cursor: pointer; max-width: 220px; white-space: nowrap; } .triochat__sessions__tab:hover { background: #eef3fa; } .triochat__sessions__tab.is-aktiv { background: #e7f0fa; border-color: var(--accent-color); box-shadow: inset 0 0 0 1px var(--accent-color); } .triochat__sessions__tab__name { overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .triochat__sessions__tab__btn { border: none; background: transparent; padding: 0 0.2em; cursor: pointer; color: #6b7884; font-size: 0.85em; } .triochat__sessions__tab__btn:hover { color: var(--secondary-color); } /* Persist-Haekchen oben in der Sessions-Leiste */ .triochat__sessions__persist { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.88em; color: var(--text-color); cursor: pointer; user-select: none; padding: 0.2em 0.4em; } .triochat__sessions__persist input[type="checkbox"] { margin: 0; } .triochat__sessions__neu:disabled { opacity: 0.5; cursor: not-allowed; } /* Countdown im Tab: kleiner, neben dem Namen */ .triochat__sessions__tab__countdown { font-size: 0.78em; color: var(--danger-color); margin-left: 0.2em; white-space: nowrap; } .triochat__sessions__tab__countdown .fa { color: inherit; } .triochat__sessions__tab__countdown.is-bald-weg, .triochat__sessions__tab__countdown.is-abgelaufen { color: var(--danger-color); } /* Modifier: Sessions-Leiste darf umbrechen, damit der Speicher-Hinweis als komplette eigene Zeile unter den Controls steht. */ .triochat__sessions.triochat__sessions--wrap { flex-wrap: wrap; gap: 0.6em; } .triochat__sessions__tab__countdown.is-abgelaufen { font-style: italic; } /* Bubble-Preis-Chevron im Meta-Bereich (oberhalb der Antwort-Bubble) */ .triochat__meta { display: flex; align-items: center; gap: 0.4em; } .triochat__meta__label { flex: 1 1 auto; } .triochat__meta__chevron { border: none; background: transparent; cursor: pointer; color: #6b7884; padding: 0 0.2em; font-size: 1em; } .triochat__meta__chevron:hover { color: var(--accent-color); } .triochat__bubble__preisdetail { margin-top: 0.4em; padding: 0.6em 0.8em; background: #fafbfd; border: 1px solid #e3e8ef; border-radius: 6px; font-size: 0.86em; } /* Aufschluesselungs-Tabelle innerhalb einer Bubble: erste Spalte (Position) immer linksbuendig, alle Datenspalten rechtsbuendig - identisch zur Vorab-Schaetzung am Composer, aber im Bubble-Kontext eigenstaendig gesetzt, weil der Wrapper nicht in .triochat__priceline__detail liegt. */ .triochat__bubble__preisdetail table { width: 100%; border-collapse: collapse; table-layout: auto; } .triochat__bubble__preisdetail th, .triochat__bubble__preisdetail td { padding: 0.15em 0.5em; border: 0; vertical-align: baseline; } .triochat__bubble__preisdetail th:first-child, .triochat__bubble__preisdetail td:first-child { padding-left: 0; } .triochat__bubble__preisdetail th:last-child, .triochat__bubble__preisdetail td:last-child { padding-right: 0; } .triochat__bubble__preisdetail th[scope="row"] { text-align: left; font-weight: 600; color: #4a5868; white-space: normal; } .triochat__bubble__preisdetail td { text-align: right; white-space: nowrap; } .triochat__bubble__preisdetail .col-op { width: 1em; text-align: center; color: #6b7884; } .triochat__bubble__preisdetail tr.is-summe td, .triochat__bubble__preisdetail tr.is-summe th { border-top: 1px solid #c8d3df; font-weight: 700; padding-top: 0.3em; } .triochat__bubble__preisdetail__hinweis, .triochat__bubble__preisdetail .triochat__priceline__detail__hinweis { margin: 0.4em 0 0; color: #4a5868; } /* Unterstrichene FAQ-Links in Hinweisen und Erklaertexten. Action-Variante (.triochat__faq-action-balance) nutzt dieselbe Optik, triggert aber per JS eine Aktion (Umsaetze-Modal) statt eines Sprungs. */ .triochat__faq-link, .triochat__faq-action-balance { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; } .triochat__faq-link:hover, .triochat__faq-action-balance:hover { color: var(--accent-color); } /* Akkordeon-Infobox unter dem Chat */ .triochat__infobox { margin-top: 1em; padding: 1em 1.2em; background: #f5f7fa; border: 1px solid #e3e8ef; border-radius: 8px; } .triochat__infobox__titel { margin: 0 0 0.6em 0; font-size: 1.05em; color: var(--accent-color); } .triochat__infobox__akkordeon { display: flex; flex-direction: column; gap: 0.3em; } .triochat__infobox__item { border: 1px solid #e3e8ef; border-radius: 6px; background: #fff; } .triochat__infobox__item > summary { cursor: pointer; padding: 0.55em 0.8em; font-weight: 600; list-style: none; color: var(--text-color); } .triochat__infobox__item > summary::-webkit-details-marker { display: none; } .triochat__infobox__item > summary::before { content: '▶'; display: inline-block; margin-right: 0.5em; transition: transform 0.15s ease; color: var(--accent-color); font-size: 0.8em; } .triochat__infobox__item[open] > summary::before { transform: rotate(90deg); } .triochat__infobox__inhalt { padding: 0 0.9em 0.7em 1.7em; line-height: 1.45; color: var(--text-color); } .triochat__infobox__inhalt p { margin: 0; } .triochat__infobox__inhalt p + p { margin-top: 0.55em; } .triochat__user { padding: 0.8em 1em; background: #e9f2ff; border-radius: 10px; line-height: 1.4; word-wrap: break-word; } .triochat__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; } .triochat__bubble { padding: 0.7em 0.9em; background: #f5f6f8; border-radius: 10px; line-height: 1.4; word-wrap: break-word; } .triochat__bubble--gpt { border-left: 3px solid var(--ki-gpt); } .triochat__bubble--claude { border-left: 3px solid var(--ki-claude); } .triochat__bubble h1, .triochat__bubble h2, .triochat__bubble h3, .triochat__bubble h4, .triochat__bubble h5, .triochat__bubble h6, .triochat__user h1, .triochat__user h2, .triochat__user h3, .triochat__user h4, .triochat__user h5, .triochat__user h6 { margin: 0.6em 0 0.3em; line-height: 1.25; } .triochat__bubble h1, .triochat__user h1 { font-size: 1.25em; } .triochat__bubble h2, .triochat__user h2 { font-size: 1.15em; } .triochat__bubble h3, .triochat__user h3 { font-size: 1.05em; } .triochat__bubble h4, .triochat__user h4, .triochat__bubble h5, .triochat__user h5, .triochat__bubble h6, .triochat__user h6 { font-size: 1em; } .triochat__bubble ul, .triochat__bubble ol, .triochat__user ul, .triochat__user ol { margin: 0.3em 0; padding-left: 1.4em; } .triochat__bubble li, .triochat__user li { margin: 0.15em 0; } .triochat__bubble code, .triochat__user code { padding: 0.1em 0.3em; background: rgba(0,0,0,0.06); border-radius: 3px; font-size: 0.92em; } .triochat__bubble hr, .triochat__user hr { margin: 0.5em 0; border: 0; border-top: 1px solid #c8d3df; } .triochat__bubble .md-table, .triochat__user .md-table { border-collapse: collapse; margin: 0.4em 0; width: 100%; font-size: 0.95em; } .triochat__bubble .md-table th, .triochat__bubble .md-table td, .triochat__user .md-table th, .triochat__user .md-table td { padding: 0.3em 0.6em; border: 1px solid #c8d3df; text-align: left; vertical-align: top; } .triochat__bubble .md-table th, .triochat__user .md-table th { background: rgba(0,0,0,0.04); font-weight: 600; } .triochat__bubble .md-table tbody tr:nth-child(even) td, .triochat__user .md-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); } .triochat__bubble--empty { opacity: 0.6; font-style: italic; } .triochat__meta { margin-bottom: 0.4em; font-size: 0.95em; font-weight: 600; color: #4a5868; } .triochat__forward { margin-top: 0.4em; padding: 0.2em 0.5em; background: #fff; color: #3a4a5a; border: 1px solid #c8d3df; border-radius: 4px; font-size: 0.78em; cursor: pointer; } .triochat__composer { display: flex; flex-direction: column; gap: 0.5em; padding: 0.8em; background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; } .triochat__models { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; font-size: 0.85em; } .triochat__modelbox { display: flex; align-items: center; gap: 0.4em; padding: 0.3em 0.5em; background: #f7f9fb; border: 1px solid #e3e8ef; border-radius: 6px; min-width: 0; } .triochat__modelbox--gpt { border-left: 3px solid var(--ki-gpt); } .triochat__modelbox--claude { justify-content: flex-end; border-right: 3px solid var(--ki-claude); } .triochat__modelbox--gpt::before, .triochat__modelbox--claude::after { content: ''; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; flex-shrink: 0; } .triochat__modelbox--gpt::before { background: var(--ki-gpt); } .triochat__modelbox--claude::after { background: var(--ki-claude); } .triochat__meta--gpt::before, .triochat__meta--claude::before { content: ''; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.4em; vertical-align: middle; } .triochat__meta--gpt::before { background: var(--ki-gpt); } .triochat__meta--claude::before { background: var(--ki-claude); } .triochat__modelbox select { flex: 1; min-width: 0; width: 100%; max-width: 100%; } .triochat__resetbtn { padding: 0.15em 0.4em; background: transparent; color: #6b7884; border: 1px solid #c8d3df; border-radius: 4px; font-size: 0.75em; cursor: pointer; } .direkt-chat-row { margin-bottom: 1em; } .schritt1-btn { display: block; width: 100%; box-sizing: border-box; /* Padding oben/unten halbiert (1em -> 0.5em); horizontal unveraendert. */ padding: 0.5em 1.5em; background: var(--primary-color); color: #fff; border: 1px solid var(--primary-color); border-radius: 8px; font-size: 1.1em; font-weight: 700; cursor: pointer; text-align: center; /* Verhindert harten Wort-/Zeilenumbruch im Buttontext, solange die * Buttons nebeneinander stehen - statt umzubrechen schrumpft die * Schriftgröße (siehe .schritt1-buttons-row Regel unten). */ white-space: nowrap; } .schritt1-btn.is-disabled:hover { filter: none; /* Gesperrte Schritt-1-Buttons behalten ihren dunklen Hintergrund auch beim Hover. */ } /* Direkt-zum-Chat- und Weiter-Button bleiben optisch komplett aktiv, auch wenn .is-disabled. Nur der Cursor signalisiert Inaktivität - die eigentliche Erklärung kommt per Hover-Overlay über der Consent-Box. .is-disabled wird statt des nativen disabled-Attributs verwendet, damit click- und mouseenter-Events weiterhin feuern (sonst kein Hover-Overlay und kein zeigeFehler-Aufruf möglich). */ .schritt1-btn.is-disabled { cursor: not-allowed; } /* 50/50-Button-Reihe: zwei gleichbreite Schritt1-Buttons nebeneinander. Wird sowohl in Schritt 1 (Anon-Buttons) als auch im Vorschau-Schritt (Neue Anonymisierung / Weiter zum Chat) verwendet - eine einzige Regel. */ .schritt1-buttons-row { display: flex; /* gap skaliert mit der Viewportbreite, damit zwischen Buttons enger * gepackt wird, bevor sie umbrechen. */ gap: clamp(0.35em, 1.2vw, 0.75em); width: 100%; } .schritt1-buttons-row .schritt1-btn { flex: 1 1 0; width: auto; /* min-width: 0 erlaubt, dass flex-Items unter ihre Content-Mindestbreite * schrumpfen - sonst würde der nowrap-Text die Spalte aufblähen. */ min-width: 0; /* Schriftgröße schrumpft stufenlos mit der Viewportbreite, bevor der * 640px-Breakpoint greift. Untergrenze hält den Text noch gut lesbar. */ font-size: clamp(0.72em, 1.45vw, 1.1em); /* Horizontales Padding ebenfalls skalierend, damit der Innenabstand * proportional mitschrumpft und nicht den Text aus dem Button drückt. */ padding-left: clamp(0.5em, 1.5vw, 1.5em); padding-right: clamp(0.5em, 1.5vw, 1.5em); letter-spacing: -0.01em; } /* Auf sehr schmalen Buttons den Doppel-Abstand zwischen Text und Pfeil * (&nbsp;&nbsp; im HTML) optisch reduzieren, indem der Pfeil enger * herangezogen wird. */ .schritt1-buttons-row .schritt1-btn .fa-arrow-right, .schritt1-buttons-row .schritt1-btn .fa-arrow-left { margin-left: 0.2em; } @media (max-width: 640px) { /* Auf schmalen Screens untereinander statt nebeneinander. * In diesem Layout darf der Text wieder normal umbrechen und die * Schriftgröße ist wieder voll. */ .schritt1-buttons-row { flex-direction: column; } .schritt1-buttons-row .schritt1-btn { font-size: 1.1em; padding-left: 1.5em; padding-right: 1.5em; white-space: normal; } } /* Sekundaere Variante des Schritt-1-Buttons (heller, weniger dominant) - fuer "Text anonymisieren" (links) und "Neue Anonymisierung" (Vorschau). */ .schritt1-btn--secondary { background: #fff; color: var(--primary-color); border-color: var(--primary-color); } /* Mittlerer Schritt-1-Button: bewusst neutral (weiß/schwarz) mit starkem Rand. */ #checkout_next.schritt1-btn { background: #fff; color: #111; border: 4px solid #333; } #checkout_next.schritt1-btn .schritt1-btn__anonicon .composer__anon-user { color: #111 !important; } #checkout_next.schritt1-btn .schritt1-btn__anonicon .composer__anon-ban { color: var(--success-color) !important; } /* Header der Anon-Vorschau-Textbox: Label links, Download-Button rechts. */ .anon-vorschau-header { display: flex; justify-content: space-between; align-items: center; gap: 0.8em; flex-wrap: wrap; } .anon-vorschau-download-btn { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.45em 0.9em; background: #fff; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 4px; font-size: 0.9em; font-weight: 600; cursor: pointer; } .anon-vorschau-download-btn:hover { background: var(--primary-color); color: #fff; } /* Ersetzungs-Tabelle in der Anon-Vorschau: kompakte Liste, scrollbar wenn lang. */ .anon-mapping__titel { font-weight: 600; margin-bottom: 0.4em; color: #1b365d; } .anon-mapping__leer { color: #6a7888; font-style: italic; } /* Mapping als Fliesstext: Eintraege "[PLATZHALTER]: Original" laufen nebeneinander, getrennt durch ", ", und brechen am Zeilenende um. Container hat KEIN overflow - Scrollleiste sitzt am aeusseren #placeholder-output.scrollable. */ .anon-mapping__fliesstext { margin: 0; background: #f7f9fc; border: 1px solid #e1e6ec; border-radius: 4px; padding: 0.5em 0.75em; font-size: 0.92em; line-height: 1.7; color: #4a5868; } /* Pro Paar inline-flex, damit Checkbox, Bonbon, Original und Select-Box zusammen NICHT umbrechen, aber zwischen den Paaren der Fliesstext-Wrap greift. */ .anon-mapping__paar { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; } /* Aliase werden ausgegraut, weil ihr Master-Eintrag die Anzeige uebernimmt. */ .anon-mapping__paar--alias { opacity: 0.55; } .anon-mapping__cb-label { display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; } .anon-mapping__checkbox { margin: 0; } /* Bonbon: kompakt, abgerundet, mit dezentem 3D-Verlauf und Inset-Shadow fuer den Glanz-Look. Schrift normal (nicht fett), weiss fuer Kontrast. Die Score-Klassen unten setzen den Grundton; das ::before-Pseudo gibt den Glanz - so brauchen wir nicht pro Farbe ein eigenes Gradient. */ /* Box-Definition fuer Bonbon und Selectbox. Beide bekommen die GLEICHE feste Hoehe und Schriftgroesse in em, damit der Browser-User-Agent- Stylesheet (das einem <select>sonst eine groessere Default-Hoehe gibt) ueberschrieben wird. Hoehe steckt komplett in 'height' - padding-Y ist 0. Vertikales Zentrieren ueber line-height = height. */ .anon-mapping__platzhalter, .anon-mapping__alias { display: inline-block; box-sizing: border-box; height: 1.7em; line-height: 1.7em; /* line-height == height -> Glyph mittig */ font-size: 0.78em; font-weight: 400; padding: 0 0.7em; border-radius: 0.85em; border: 1px solid transparent; vertical-align: middle; letter-spacing: 0.02em; margin: 0; } .anon-mapping__platzhalter { color: #fff; border: none; background: #6a7888; background-image: linear-gradient(to bottom, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 48%, rgba(0,0,0,0.14) 100%); } .anon-mapping__platzhalter--gruen { background-color: var(--success-color); } .anon-mapping__platzhalter--orange { background-color: var(--warning-color); } .anon-mapping__platzhalter--rot { background-color: var(--danger-color); } .anon-mapping__original { color: #4a5868; } /* Wrapper fuer Original-Text: relativ positioniert fuer das NIE-Overlay. */ .anon-mapping__original-wrap { position: relative; display: inline-block; } /* Zustand 'nie' (geblacklistet/dauerhaft Klartext): das Bonbon zeigt "BLACKLIST" statt [KEY], in Schwarz - mit demselben Glanz-/Form-Effekt wie die farbigen Bonbons (der linear-gradient-Glanz wird von .anon-mapping__platzhalter geerbt; hier nur die Hintergrundfarbe, genau wie bei --gruen/--orange/--rot). Der Original-Text daneben wird durchgestrichen + ausgegraut. */ .anon-mapping__platzhalter--nie { background-color: #1a1a1a; } .anon-mapping__paar[data-state="nie"] .anon-mapping__original { color: #b0bac4; text-decoration: line-through; } /* Zustand 'unchecked': leicht ausgegraut (temporaer abgewaehlt). */ .anon-mapping__paar[data-state="unchecked"] .anon-mapping__original { color: #8a9aa8; } /* Selectbox: ererbt die Box-Werte oben. Eigene Optik fuer Border, Pfeil, Verlauf. Wichtig: appearance:none plus explizites height/line-height reichen NICHT in allen Browsern - manche reservieren intern noch Platz fuer Default-Pfeil. Deshalb auch background-position/size in em, damit der eigene Pfeil exakt mittig sitzt. */ .anon-mapping__alias { padding-right: 1.5em; border-color: #c8d3df; color: #3a4a5a; max-width: 14em; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #f6f8fb; background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"width="8"height="8"viewBox="0 0 8 8"><path d="M1 3 L4 6 L7 3"stroke="%233a4a5a"stroke-width="1"fill="none"/></svg>"), linear-gradient(to bottom, #ffffff 0%, #eef2f7 100%); background-repeat: no-repeat, no-repeat; background-position: right 0.4em center, 0 0; background-size: 0.55em 0.55em, 100% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.04); cursor: pointer; } .anon-mapping__alias:hover { border-color: #8aa1ba; background-color: #ffffff; } .anon-mapping__alias:focus { outline: none; border-color: var(--primary-color, #1b365d); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 2px rgba(27,54,93,0.18); } /* Experten-Modus: per Default sind die Coreference-Selects ausgeblendet. Erst wenn auf dem Mapping-Container .anon-mapping--experten gesetzt ist (gesteuert ueber Checkbox 'Experteneinstellungen'), erscheinen sie. */ .anon-mapping__alias { display: none; } .anon-mapping--experten .anon-mapping__alias { display: inline-block; } /* Hinweis-Link unter dem Composer "Blacklist aktiv (n)". Im Fehlerrot, damit die Blacklist als 'aktive Ausnahme' wahrnehmbar ist. */ /* Blacklist-Hinweis unter dem Composer: klein, fett, mittig, im Anon-Gruenton (--success-color) mit gruenem (i)-Icon. Eigenes DIV, klickbar (oeffnet das Experten-Modal). Inhalt/Sichtbarkeit steuert aktualisiereBlacklistHinweisLink(). */ .anon-blacklist-hinweis { display: block; margin-top: 6px; margin-bottom: 6px; text-align: center; font-size: 0.8em; font-weight: 700; color: var(--success-color); text-decoration: underline; cursor: pointer; } .anon-blacklist-hinweis__icon { color: var(--success-color); margin-right: 0.25em; text-decoration: none; display: inline-block; } .anon-blacklist-hinweis:hover { filter: brightness(0.9); } /* Anonymisierungs-Einstellungen-Modal: dezent, gleiche Optik wie die bestehenden Anon-Dialoge (zeigeAnonBestaetigungsDialog). */ .anon-settings-dialog { border: 1px solid #c8d3df; border-radius: 6px; padding: 0; max-width: 480px; width: 90vw; /* Der Dialog selbst scrollt, wenn der Inhalt hoeher als der Viewport wird - sonst waere der untere Teil (z.B. Schliessen-Button) nicht erreichbar. Die Begriff-Tabelle hat ihren EIGENEN Scrollbereich (max ~10 Zeilen); dieser Dialog-Scroll ist nur der Sicherheitsnetz-Fall fuer kleine Bildschirme. */ max-height: 90vh; overflow: auto; } .anon-settings-dialog__inner { padding: 1.2em 1.4em; } .anon-settings-dialog h3 { margin: 0 0 0.6em 0; color: #1b365d; } /* Vereinheitlichte vertikale Abstaende im Einstellungs-Dialog mit ZWEI Stufen: - 0.5em INNERHALB eines logischen Blocks (z.B. Hinweistext direkt unter seiner Ueberschrift, Tabelle/Actions zu ihrem Hinweis). - 0.75em fuer logische TRENNUNG (Beginn eines neuen Bereichs = jede h3 ausser der ersten). Erstes Element ohne Top-Abstand. */ .anon-settings-dialog__inner > h3, .anon-settings-dialog__inner > p, .anon-settings-dialog__inner > .anon-settings-dialog__expert-label, .anon-settings-dialog__inner > #anon-blacklist-verwaltung, .anon-settings-dialog__inner > .anon-settings-dialog__actions { margin-top: 0.5em; } .anon-settings-dialog__inner > *:first-child { margin-top: 0; } /* Logische Trennung: jede weitere h3 startet einen neuen Bereich -> mehr Luft. */ .anon-settings-dialog__inner > h3:not(:first-child) { margin-top: 0.75em; } /* Blacklist-Tabelle: eigene Klasse (nicht payments-table - die ist fuer das Zahlungs-Modal mit fixen Spalten). Begriff-Spalte nimmt die volle Breite, die Aktions-Spalte (X) nur so viel wie noetig (rechts). Schrift exakt wie die Hinweistexte (0.85em vom __inner). */ /* Combo-Feld ueber der Blacklist-Tabelle: Eingabe (filtert live + dient zum Hinzufuegen) + Plus-Button. Bekommt oben den Block-Abstand (0.5em) wie die anderen Elemente im Dialog. */ .anon-blacklist-combo { display: flex; gap: 6px; margin-top: 0.5em; } .anon-blacklist-combo__input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 6px 8px; font-size: 0.85em; border: 1px solid #c8d3df; border-radius: 4px; } /* Aussehen kommt von .button-primary (gleich wie "Schliessen": #333/eckig, weisses Plus ohne Kreis). Hier nur die Combo-Anpassung: nicht mitwachsen und etwas kompakteres Padding als der grosse Schliessen-Button. */ .anon-blacklist-combo__btn { flex: 0 0 auto; padding: 6px 12px; line-height: 1; } /* Scrollbarer Container der Tabelle (gefiltert via Combo-Feld darueber). Die max-height fuer genau 10 Zeilen wird zur LAUFZEIT aus der echten Zeilenhoehe berechnet (JS) - keine geschaetzte Pixelhoehe. Bei wenigen Begriffen fuellen Leerzeilen auf 10 auf; bei mehr als 10 Begriffen scrollt der Container. */ .anon-blacklist-verwaltung { overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; } /* Leer-Zustand: nur der Hinweistext, kein umrandeter Scroll-Kasten. */ .anon-blacklist-verwaltung--leer { max-height: none; overflow: visible; border: none; } .anon-blacklist-table { width: 100%; border-collapse: collapse; font-size: 0.85em; } .anon-blacklist-table td { padding: 6px 10px; /* links/rechts Padding, damit Text nicht am Rand klebt */ border-top: 1px solid #eee; vertical-align: middle; } .anon-blacklist-table tr:first-child td { border-top: none; } .anon-blacklist-table__begriff { width: 100%; /* nimmt allen Platz minus der X-Spalte */ text-align: left; overflow-wrap: anywhere; } .anon-blacklist-table__aktion { width: 1%; /* schrumpft auf Inhalt (das X) */ white-space: nowrap; text-align: right; } /* Loeschen-Button in der Blacklist-Tabelle: nur ein X-Icon, dezent, rot bei Hover. */ .anon-blacklist-loeschbtn { background: none; border: none; cursor: pointer; padding: 2px 6px; color: #8a9aa8; font-size: 1.1em; line-height: 1; } .anon-blacklist-loeschbtn:hover { color: var(--danger-color); } .anon-settings-dialog__section { margin-bottom: 1em; } .anon-settings-dialog h4 { margin: 0 0 0.4em 0; font-size: 1em; color: #1b365d; } /* Experten-Sektion im Settings-Modal: Checkbox + Label inline, etwas Luft. */ .anon-settings-dialog__expert-label { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; } /* Mapping-Liste im Chat: gleiche Optik wie #placeholder-output in Schritt 2, nur mit etwas Abstand oben/unten. Default versteckt; JS schaltet display=block. Container traegt die gleiche Klasse anon-mapping-container, damit die Experten-Modus-Klasse einheitlich greift. */ .triochat__mapping-bereich { margin: 0.8em 0; padding: 0.6em 0.8em; background: #f6f8fb; border: 1px solid #e0e6ee; border-radius: 8px; font-size: 0.92em; line-height: 1.7; color: #4a5868; } /* Zwischen-Menue (Auswahl Blacklist vs. Experten): klickbare Karten in einer schmalen Liste. Jede Karte = ein <button>, der das jeweilige Unter-Modal oeffnet. Beschreibung darunter kleiner und sekundaer-farbig. */ .anon-settings-menue { list-style: none; margin: 0 0 1em 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; } .anon-settings-menue__item { display: block; width: 100%; text-align: left; background: #f6f8fb; border: 1px solid #c8d3df; border-radius: 6px; padding: 0.7em 0.9em; cursor: pointer; font: inherit; color: inherit; transition: background-color 0.12s ease, border-color 0.12s ease; } .anon-settings-menue__item:hover { background: #fff; border-color: #8aa1ba; } .anon-settings-menue__titel { display: block; font-weight: 600; color: #1b365d; margin-bottom: 0.15em; } .anon-settings-menue__beschreibung { display: block; font-size: 0.88em; color: #4a5868; } .anon-settings-dialog__liste { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid #e1e6ec; border-radius: 4px; } .anon-settings-dialog__eintrag { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.4em 0.6em; border-bottom: 1px solid #eef1f5; } .anon-settings-dialog__eintrag:last-child { border-bottom: none; } .anon-settings-dialog__begriff { color: #1b365d; } .anon-settings-dialog__del { border: none; background: transparent; color: #b04444; font-size: 1.2em; line-height: 1; cursor: pointer; padding: 0 0.3em; } .anon-settings-dialog__del:hover { color: #d23a3a; } .anon-settings-dialog__leer { color: #6a7888; font-style: italic; padding: 0.6em; } .anon-settings-dialog__hinweis { margin: 0.5em 0 0 0; font-size: 0.85em; color: #6a7888; } .anon-settings-dialog__actions { text-align: right; margin-top: 0.6em; } .triochat__downloadrow { display: flex; justify-content: flex-end; margin: 0.4em 0; } .triochat__downloadbtn { padding: 0.4em 0.9em; background: #fff; color: #3a4a5a; border: 1px solid #c8d3df; border-radius: 6px; font-size: 0.85em; cursor: pointer; } .triochat__downloadbtn .fa { margin-right: 0.3em; } .triochat__warnhinweis { background: #fbf3df; border: 1px solid #ecdca8; color: #a88800; } /* Rote Variante des Warnhinweises - identische Form/Geometrie wie die gelbe * Standard-Box, nur Farben getauscht. Wird fuer "Guthaben reicht nicht" * im Chat verwendet. */ .triochat__warnhinweis--insufficient { background: #fdecec; border-color: #f0b4b4; color: var(--danger-color); } /* Auch FAQ-Links in der roten Box muessen lesbar bleiben. */ .triochat__warnhinweis--insufficient .triochat__faq-link { color: var(--danger-color); text-decoration: underline; } /* Info-Variante des Warnhinweises: dezenter Blau-Look. Wird fuer den * "Bei jeder Anfrage ... Kaution geblockt"-Hinweis verwendet - das ist * eine reine Erklaerung, keine Warnung. Diese Box ist die Referenz-Optik * fuer ALLE Info-Bereiche: kompakte 0.8em-Schrift mit Font-Weight 600, * zentrierter Inhalt, allseitiger Rahmen + 6px Radius (Geometrie kommt von * der Basisklasse .triochat__warnhinweis). .info-box--info erbt diese * Optik per Override unten, damit alle Info-Boxen optisch identisch wirken. */ .triochat__warnhinweis--info { background: #eef5ff; border-color: #cdddef; color: #1b365d; } .triochat__warnhinweis--info .fa { color: #4476c4; } .triochat__warnhinweis--info .triochat__faq-link { color: #1b365d; text-decoration: underline; } .triochat__priceline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Top-aligned, damit eine aufgeklappte Detail-Box die geschlossene Gegenseite nicht in die Mitte verschiebt - die geschlossene bleibt am oberen Rand. */ align-items: start; gap: 0.5em; width: 100%; background: transparent; border: 0; padding: 0; font-size: 0.95em; } .triochat__priceline--no-toggle { grid-template-columns: 1fr 1fr; } .triochat__priceline__box { min-width: 0; } .triochat__priceline__box { position: relative; /* Anker fuer den absolut positionierten Hover-Tooltip */ display: grid; grid-template-columns: minmax(0, 1fr) 2em; grid-template-rows: auto auto auto; column-gap: 0.35em; row-gap: 0.15em; padding: 0.4em 0.6em; background: #f7f9fb; border: 1px solid #e3e8ef; border-radius: 6px; overflow: hidden; } .triochat__priceline__box--gpt { grid-template-columns: 2em minmax(0, 1fr); } .triochat__priceline__main { font-weight: 600; /* Hauptzeile als Spalte: oben Modell-Name, darunter die Werte. flex:1 sorgt dafuer, dass dieser Span im head-Flex (Geschwister: Chevron) die volle Restbreite einnimmt. Sonst greift align-items unten nicht, weil die Box nur Inhaltsbreite haette. align-items steuert die horizontale Ausrichtung der beiden Kind-Spans; wird pro Seite (gpt links, claude rechts) ueberschrieben. */ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05em; grid-column: 1; grid-row: 1; } .triochat__priceline__box--gpt .triochat__priceline__main { grid-column: 2; } .triochat__priceline__box--gpt .triochat__priceline__main { align-items: flex-start; } .triochat__priceline__box--claude .triochat__priceline__main { align-items: flex-end; } /* Modell-Name + Qualitaet in kleinerer Schrift ueber den eigentlichen Werten. Nur eine Spur kleiner als die Werte-Zeile, damit beide noch lesbar sind. */ .triochat__priceline__model { font-size: 0.85em; font-weight: 500; opacity: 0.85; max-width: 100%; overflow-wrap: anywhere; } .triochat__priceline__werte { /* eigene Zeile, gleiche Schriftgroesse wie der Box-Default */ font-weight: 700; max-width: 100%; overflow-wrap: anywhere; } .triochat__priceline__history { font-size: 0.85em; font-weight: 700; opacity: 0.85; max-width: 100%; overflow-wrap: anywhere; grid-column: 1; grid-row: 3; } .triochat__priceline__box--gpt .triochat__priceline__history { grid-column: 2; } .triochat__priceline__box > span:empty { display: none; } .triochat__models--length { grid-template-columns: 1fr; } .triochat__modelbox--length { border-left: 3px solid #c8d3df; } .triochat__priceline__box--gpt .triochat__priceline__gpt { text-align: left; } .triochat__priceline__box--claude .triochat__priceline__claude { text-align: right; } .triochat__priceline__gpt { color: var(--ki-gpt); } .triochat__priceline__claude { color: var(--ki-claude); } .triochat__priceline__gpt.insufficient, .triochat__priceline__claude.insufficient { color: var(--danger-color); } .triochat__kaution-inline-wrap { display: inline-flex; align-items: center; gap: 0.2em; white-space: nowrap; } .triochat__kaution-inline-trigger { margin-left: 0.05em; } .triochat__history-row { display: flex; justify-content: flex-start; } .triochat__history-toggle { display: inline-flex; flex: 1 1 auto; width: 100%; max-width: none; padding: 0.25em 0.4em; background: #fff; color: #3a4a5a; border: 1px solid #c8d3df; border-radius: 4px; font-size: 0.78em; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; cursor: pointer; justify-content: center; } .triochat__row { display: grid; grid-template-columns: 32px 1fr 1fr; column-gap: 0.5em; align-items: center; margin-bottom: 0.7em; } .triochat__row > .triochat__user { grid-column: 2 / 4; } .triochat__row > .triochat__col--gpt { grid-column: 2; } .triochat__row > .triochat__col--claude { grid-column: 3; } .triochat__row > .triochat__col--gpt, .triochat__row > .triochat__col--claude { grid-column: 2 / 4; width: 90%; min-width: 0; } .triochat__row > .triochat__col--gpt { justify-self: start; } .triochat__row > .triochat__col--claude { justify-self: end; } .triochat__col { min-width: 0; } .triochat__row > .triochat__bubble-check, .triochat__row > .radio-wrapper { grid-column: 1; justify-self: center; } .triochat__pulse { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; animation: triochat-pulse 1.1s ease-in-out infinite; } .triochat__pulse--gpt { background: var(--ki-gpt); } .triochat__pulse--claude { background: var(--ki-claude); } @keyframes triochat-pulse { 0% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.6); opacity: 0.4; } } /* Wrapper fuer animierten Punkt + Info-Box waehrend die KI denkt. Verschwindet automatisch, sobald setzeBubbleText() die Bubble mit dem echten Antwort-HTML neu befuellt. Die Hinweis-Optik selbst kommt zentral aus .info-box. */ .triochat__thinking { display: flex; flex-direction: column; align-items: stretch; gap: 0.5em; } .triochat__bubble-check { cursor: pointer; } .triochat__attachments { display: flex; flex-wrap: wrap; gap: 0.4em; } .triochat__chip { display: inline-flex; align-items: center; gap: 0.4em; max-width: 100%; padding: 0.2em 0.4em; background: #eef3f8; border: 1px solid #c8d3df; border-radius: 6px; font-size: 0.85em; cursor: pointer; } .triochat__chip__name { max-width: 14em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .triochat__chip__size { color: #6b7884; } .triochat__chip__remove { padding: 0 0.2em; background: transparent; color: #a00; border: 0; line-height: 1; font-weight: 700; cursor: pointer; } .triochat__sendrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; } .triochat__sendbtn { flex: 1; min-width: 11em; padding: 0.55em 1em; background: #fff; border: 1px solid #c8d3df; border-radius: 6px; font-weight: 600; cursor: pointer; } /* Disabled-Send-Buttons behalten ihre Markenfarbe (GPT/Claude) komplett - inklusive Hintergrund. Nur der Cursor signalisiert die Inaktivität - die eigentliche Erklärung kommt per Hover-Overlay über der Textarea (siehe .composer__overlay). Browser-Default dimmt disabled-Buttons sonst, daher explizit opacity zurücksetzen. */ .triochat__sendbtn:disabled { cursor: not-allowed; opacity: 1; } .triochat__sendbtn--gpt, .triochat__sendbtn--gpt:disabled { background: var(--ki-gpt); color: #fff; border-color: var(--ki-gpt); } .triochat__sendbtn--claude, .triochat__sendbtn--claude:disabled { background: var(--ki-claude); color: #fff; border-color: var(--ki-claude); } .triochat__status { text-align: center; font-size: 0.85em; color: #6b7884; min-height: 1.2em; } .triochat__status.error { margin: 8px 0 0; padding: 10px 12px; color: #8a1111; background: #fff1f1; border: 1px solid #e0a6a6; border-radius: 6px; font-weight: 700; } .spacer-lg-top { margin-top: 12px; } .spacer-top { margin-top: 6px; } .spacer-xl-bottom { margin-bottom: 24px; } .spacer-lg-bottom { margin-bottom: 12px; } .spacer-bottom { margin-bottom: 6px; } .left { float: left; } .right { float: right; } .center { width: 100%; text-align: center; justify-content: center; } .small { font-size: 14px; } .cent { font-size: 0.9em; vertical-align: 0.1em; } .pink { color: var(--secondary-color); } .pink-bg { background: var(--secondary-color) !important; } .full-width { box-sizing: border-box; width: 100%; } .mobile-hide { display: inline-block; } .desktop-show { display: none; } .container-with-padding { padding: 20px; } .legal p { margin: 0.75em 0; } @media (min-width: 1024px) { .desktop-show { display: inline-block; } } @media (max-width: 768px) { .hspecials { flex-direction: column; gap: 5px; } .hspecials li { width: 100%; text-align: center; } li.hr, li.hotline { padding: 2px 10px; } .text-block { flex-direction: column; text-align: center; } .image-content-vv { order: 1; padding-right: 0; } .text-content-vv { order: 2; padding: 0 10px; text-align: center; } .text-block-content { flex: 1 1 100%; } .slider-image { width: 100%; } .swiper-slide { padding: 25px 0; } .triochat__pair, .triochat__models { grid-template-columns: 1fr; } .triochat__priceline { grid-template-columns: minmax(0, 1fr); } #anon-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .register-grid { grid-template-columns: 1fr; } .rate-button-checkout { display: inline-block; width: 100%; box-sizing: border-box; } } @media (max-width: 1023px) { #section-slider .theater { padding: 0 12px 12px; box-sizing: border-box; } #section-slider .swiper-slide { flex-direction: column; align-items: stretch; padding: 12px 0 0; } #section-slider .image-content-vv { order: 1; width: 100%; height: auto; padding: 0; align-items: flex-start; justify-content: center; } #section-slider .slider-image { width: 100%; max-width: none; height: auto; display: block; border-radius: 12px; } #section-slider .text-content-vv { order: 2; width: 100%; min-width: 0; overflow: visible; padding: 14px 12px 0; text-align: center; } #section-slider .text-content-vv h2 { white-space: normal; overflow-wrap: anywhere; word-break: normal; } #section-slider .highlight-top { white-space: normal; } } @media (max-width: 480px) { section { padding: 4em 0.5em; margin-top: 5em; } #content h1 { padding: 0 10px; font-size: 1.5em; } .site-header { padding: 10px; } .header-nav ul { flex-direction: column; align-items: flex-start; margin-left: 10px; } .header-nav li { margin: 0; } .desktop-show, .mobile-hide { display: none; } .text-area-wrapper { display: block; width: 100%; padding-right: 0; margin-right: 0; } .text-area-wrapper p, .text-area-wrapper textarea { padding: 6px 18px; margin-left: 0; text-align: left; } .text-content-vv { padding: 10px; font-size: 14px; } #anon-filters { grid-template-columns: 1fr; } } .modal { background: rgba(20, 24, 32, 0.45); backdrop-filter: blur(2px); } .modal-content { padding: 20px 24px 22px; background: #fff; border-radius: 12px; box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.20); } #login_modal::backdrop, dialog.modal::backdrop { background: rgba(20, 24, 32, 0.45); } #login_modal.modal, dialog.modal { background: #fff; border: 0; border-radius: 12px; padding: 0; box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.20); } .payments-modal__header { padding-bottom: 12px; border-bottom: 1px solid #ecf0f4; margin-bottom: 12px; } .payments-modal__title { font-size: 1.15em; font-weight: 600; color: var(--text-color); } .payments-modal__close-x { width: 36px; height: 36px; padding: 0; background: transparent; color: #5a6675; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ecf0f4; } dialog { border: 0; border-radius: 12px; box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.20); } dialog::backdrop { background: rgba(0, 0, 0, 0.45); } dialog#kaufen_form { width: 80vw; max-width: 1200px; padding: 20px 24px 22px; box-sizing: border-box; } #assist-info { padding: 10px 12px; background: #fbf3df; color: #6a5800; border-left: 3px solid #c9a800; border-radius: 6px; font-size: 0.88em; line-height: 1.4; } .offer-table { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 6px; } .offer-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f7f9fb; border: 1px solid #e3e8ef; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .offer-row:has(input[type="radio"]:checked) { background: rgba(204, 123, 70, 0.10); border-color: var(--ki-claude); box-shadow: 0 0 0 1px var(--ki-claude); } /* Demo-Zeile (nur im Debug-Modus gerendert) deutlich abheben - rote Tönung, * damit sie nicht versehentlich mit einer regulären Aufladung verwechselt wird. */ .offer-row--demo { background: #fdecec; border-color: #f0b4b4; } .offer-row--demo:has(input[type="radio"]:checked) { background: rgba(216, 38, 61, 0.10); border-color: var(--danger-color); box-shadow: 0 0 0 1px var(--danger-color); } .offer-row:has(input[type="radio"]:checked) .price-right { color: var(--ki-claude); } .offer-content { flex: 1; } .offer-content label { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; gap: 1em; } .offer-label { font-weight: 600; } .offer-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .offer-price__brutto { font-weight: 700; } .offer-price__mwst { font-size: 0.8em; opacity: 0.75; font-weight: 400; } .price-right { margin-left: auto; font-weight: 700; } #invoice_info { padding-top: 6px; text-align: center; font-size: 0.9em; color: #4a5868; } .dialog-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .button-secondary { padding: 10px 15px; background: transparent; color: var(--text-color); border: 1px solid var(--primary-color); border-radius: 5px; font-family: inherit; cursor: pointer; } #login_modal .login-box h3 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid #ecf0f4; font-size: 1.15em; font-weight: 600; } .login-tabs { display: flex; gap: 24px; margin: 0 0 14px; padding: 0; background: transparent; border-bottom: 1px solid #e3e8ef; border-radius: 0; } .login-tabs .tab { flex: 0 0 auto; margin: 0; padding: 6px 0; background: transparent; color: #5a6675; border: 0; border-radius: 0; box-shadow: none; font-weight: 600; font-size: 1em; text-align: left; cursor: pointer; position: relative; transition: color 0.15s ease; } .login-tabs .tab.is-active { color: var(--accent-color); } .login-tabs .tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-color); } /* ===== Triochat: Experteneinstellungen-Toggle-Zeile ===== */ /* Zeile mit dem "Experteneinstellungen"-Aufklapper über dem Modell-Bereich. */ .triochat__expert-toggle-row { /* Linksbündige, dezente Anordnung passend zum übrigen Composer-Stil. */ display: block; margin: 0 0 0.3em 0; } /* Trigger-Button: Caption linksbündig, Chevron rechtsbündig - der Button spannt die volle Composer-Breite. Überschreibt das Default .hint-toggle nur bei dieser konkreten Trigger-Variante. box-sizing: border-box, sonst macht das geerbte button-Padding den Button breiter als 100% und er ragt seitlich ueber die Priceline-Boxen darunter hinaus. */ .triochat__expert-toggle { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 12px; } .triochat__expert-toggle__caption { text-align: left; } .triochat__expert-toggle__chevron { margin-left: auto; } /* Stylistische Feinheiten pro Knopf-Variante. Position kommt aus dem * Flex-Stack (.composer__btnstack); nur Schriftgroesse/Zentrierung sind * hier noch noetig, damit die Glyphen sauber im Kreis sitzen. */ .composer__iconbtn--anon-settings { display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 32px; } .composer__iconbtn--copy { font-size: 16px; line-height: 32px; } /* ===== Triochat: Hover-Overlay über der Composer-Textarea ===== */ /* Wird vom JS via [hidden]-Attribut umgeschaltet, sobald die Maus über einem deaktivierten Send-Button ist. Liegt absolut über der Textarea und blockiert keine Klicks (pointer-events:none), damit der Hover-Status am Send-Button erhalten bleibt. */ .composer__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); border-radius: 6px; pointer-events: none; z-index: 3; } .composer__overlay[hidden] { display: none; } .composer__overlay__msg { padding: 0.4em 0.8em; color: var(--error-color); /* Hinweis als Fehlerfarbe (rot) - Pflichtaktion */ font-weight: 600; text-align: center; } /* ===== Triochat: Copy-Buttons unter den Bubbles ===== */ /* Wrapper-Zeile pro Bubble, klein und dezent. Schriftgröße passend zur Bubble-Überschrift (.triochat__meta = 0.95em). Liegt im selben Grid wie die Bubble selbst und nutzt deshalb explizite grid-column-Angaben. */ .triochat__copybtn-row { display: flex; margin-top: 0.25em; font-size: 0.95em; } /* Positionierung je nach Variante: User mittig über die zwei rechten Spalten, GPT (linke Spalte) rechtsbündig, Claude (rechte Spalte) linksbündig. Die GPT-/Claude-Varianten sitzen jeweils in der entsprechenden Spalte und werden für die Bubble-Spalte (2 bzw. 3) explizit ins Grid gehängt, damit sie unter der jeweiligen Bubble erscheinen, nicht in der Checkbox-Spalte. */ /* Allgemeine Ausrichtung pro Variante - greift sowohl wenn der Wrapper direkt in .triochat__row liegt (User-Variante) als auch wenn er in der .triochat__col-Spalte liegt (GPT/Claude-Variante). */ .triochat__copybtn-row--user { justify-content: flex-end; } .triochat__copybtn-row--gpt { justify-content: flex-end; } .triochat__copybtn-row--claude { justify-content: flex-start; } /* Spezialfall User: Wrapper liegt direkt im Grid der Row und muss die beiden rechten Spalten überspannen (analog zu .triochat__user). */ .triochat__row > .triochat__copybtn-row--user { grid-column: 2 / 4; } /* Eigentlicher Button: nur Icon, kein Hintergrund, dezenter Hover-Effekt. */ .triochat__copybtn { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; background: transparent; color: #6b7884; border: 0; border-radius: 4px; /* Größe orientiert an .triochat__meta (0.95em) - per em an Wrapper gekoppelt. */ font-size: 1em; line-height: 1; cursor: pointer; } .triochat__copybtn:hover { background: #eef3f8; color: #3a4a5a; } .triochat__copybtn:focus { outline: 1px dashed #c8d3df; outline-offset: 2px; } /* ===== Triochat: Priceline-Hauptzeile mit Chevron + Aufklapp-Detail ===== */ /* Hauptzeile: links Wort-/EUR-Zusammenfassung, rechts ein Chevron-Button, der das Detail-Panel innerhalb derselben Box auf-/zuklappt. Hover-Tooltip bleibt nativer title am Box-Element. */ .triochat__priceline__head { display: contents; } .triochat__priceline__chevron { align-self: stretch; justify-self: stretch; grid-column: 2; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; background: transparent; color: inherit; border: 0; padding: 0; font-size: 1em; line-height: 1; cursor: pointer; } .triochat__priceline__box--gpt .triochat__priceline__chevron { grid-column: 1; } .triochat__priceline__chevron .fa { transition: transform 0.2s ease; } .triochat__priceline__chevron[aria-expanded="true"] .fa { transform: rotate(180deg); } /* Detail-Panel: in-place ausklappbar, sitzt in derselben Box. Schiebt den Folge-Inhalt (history-Zeile) nach unten. */ .triochat__priceline__detail { grid-column: 1; grid-row: 2; margin-top: 0.4em; padding: 0.5em 0; border-top: 1px dashed #c8d3df; color: #2a3744; font-size: 0.85em; line-height: 1.35; text-align: left; max-width: 100%; overflow-x: auto; } .triochat__priceline__box--gpt .triochat__priceline__detail { grid-column: 2; } .triochat__priceline__detail[hidden] { display: none; } /* Tabellen im Detail-Panel: keine Raender/Linien ausser ueber Summen-Zeilen, Zahlen rechtsbuendig. */ .triochat__priceline__detail table { width: max-content; min-width: 100%; max-width: none; border-collapse: collapse; margin: 0 0 0.5em 0; } .triochat__priceline__detail caption { /* Abstand vor der Caption (ueber dem Erklaertext) - sonst klebt die Ueberschrift direkt am Vorgaenger-Text. caption-side:top ist Default, top-margin reicht. */ margin: 0.8em 0 0.3em 0; font-weight: 700; text-align: left; color: #3a4a5a; caption-side: top; } .triochat__priceline__detail th, .triochat__priceline__detail td { /* Vertikales Padding bleibt fuer Lesbarkeit, horizontal nur zwischen Spalten - erste Zelle haftet linksbuendig, letzte rechtsbuendig am Box-Rand. */ padding: 0.15em 0.5em; border: 0; vertical-align: baseline; } .triochat__priceline__detail th:first-child, .triochat__priceline__detail td:first-child { padding-left: 0; } .triochat__priceline__detail th:last-child, .triochat__priceline__detail td:last-child { padding-right: 0; } .triochat__priceline__detail th { font-weight: 600; text-align: left; color: #4a5868; } /* Erste Spalte (Caption/Position) immer linksbuendig, alle Datenspalten rechtsbuendig - in beiden Tabellen identisch. Greift auch fuer die erste<td>nach einem<th scope="row">, damit Token-Zahlen rechts stehen. */ .triochat__priceline__detail td { text-align: right; } .triochat__priceline__detail th + th { text-align: right; } /* Summen-Zeile: oben eine duenne Linie als visueller Trenner. */ .triochat__priceline__detail tr.is-summe td, .triochat__priceline__detail tr.is-summe th { border-top: 1px solid #c8d3df; font-weight: 700; padding-top: 0.3em; } .triochat__priceline__detail__hinweis { margin: 0.4em 0 0.4em 0; color: #4a5868; } /* Aufschluesselungs-Tabelle: dynamische Breiten auf Desktop. Erste Spalte (Caption) darf brechen, alle Daten-Spalten haben nowrap und so viel Platz wie sie brauchen. Operator-Spalten (× / =) schmal und mittig. */ .triochat__priceline__detail__tab--aufschluesselung { table-layout: auto; } .triochat__priceline__detail__tab--aufschluesselung td { white-space: nowrap; } .triochat__priceline__detail__tab--aufschluesselung th[scope="row"] { width: auto; white-space: normal; } .triochat__priceline__detail__tab--aufschluesselung .col-op { width: 1em; text-align: center; color: #6b7884; } /* Responsive: schmale Bildschirme - Tabelle horizontal scrollbar, Operator-Zellen (× / =) ausgeblendet, damit mehr Platz fuer Werte bleibt. */ @media (max-width: 640px) { .triochat__priceline__detail { overflow-x: auto; } .triochat__priceline__detail .col-op { display: none; } }</button></select></i>