/* ondental-consent – Banner im Stil von zahnhochdrei: cleane Card unten rechts (mobil unten), kein Vollbild-Overlay. Farben über CSS-Variablen je Praxis (--odc-*), gesetzt im aus der Konfiguration. */ .odc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483646; box-sizing: border-box; max-height: 90vh; overflow-y: auto; padding: 16px; background: var(--odc-hintergrund, #fff); color: var(--odc-text, #222); border-top: 1px solid var(--odc-rahmen, #e1e1e1); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); font-size: 15px; line-height: 1.5; text-align: left; } @media (min-width: 640px) { .odc-banner { left: auto; right: 16px; bottom: 16px; max-width: 28rem; padding: 20px; border: 1px solid var(--odc-rahmen, #e1e1e1); border-radius: var(--odc-radius, 10px); } } .odc-banner *, .odc-platzhalter * { box-sizing: border-box; } .odc-banner [hidden] { display: none !important; } .odc-banner .odc-titel { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--odc-text, #222); text-transform: none; letter-spacing: normal; } .odc-banner .odc-titel:focus { outline: none; } .odc-banner .odc-logo { display: block; flex-shrink: 0; width: auto; height: 28px; max-width: 140px; } .odc-banner .odc-text { margin: 8px 0 0; padding: 0; font-size: 14px; color: var(--odc-text-leise, #5f5f5f); } .odc-banner .odc-text a { color: var(--odc-primaer, #00593d); text-decoration: underline; } .odc-banner .odc-kategorien { margin: 12px 0 0; padding: 0; list-style: none; } .odc-banner .odc-kategorien li { margin: 0 0 8px; padding: 0; list-style: none; } .odc-banner .odc-kategorie { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; cursor: pointer; font-weight: normal; } .odc-banner .odc-checkbox { flex-shrink: 0; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--odc-primaer, #00593d); } .odc-banner .odc-kategorie-name { display: block; font-size: 14px; font-weight: 600; color: var(--odc-text, #222); } .odc-banner .odc-kategorie-text { display: block; font-size: 12.5px; color: var(--odc-text-leise, #5f5f5f); } .odc-banner .odc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; } .odc-banner .odc-btn, .odc-platzhalter .odc-btn { min-height: 44px; margin: 0; padding: 0 16px; border: 2px solid var(--odc-primaer, #00593d); border-radius: var(--odc-radius-button, 6px); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; cursor: pointer; transition: background-color 0.15s, color 0.15s; } /* „Alle ablehnen“ und „Alle akzeptieren“ gleich groß auf Ebene 1 – Ablehnen als Outline klar lesbar. */ .odc-banner .odc-btn-ablehnen, .odc-banner .odc-btn-nebenan { background: transparent; color: var(--odc-primaer, #00593d); } .odc-banner .odc-btn-ablehnen:hover, .odc-banner .odc-btn-nebenan:hover { background: var(--odc-flaeche, #f4f4f4); } .odc-banner .odc-btn-akzeptieren, .odc-platzhalter .odc-btn-akzeptieren { background: var(--odc-primaer, #00593d); color: #fff; } .odc-banner .odc-btn-akzeptieren:hover, .odc-platzhalter .odc-btn-akzeptieren:hover { background: var(--odc-primaer-dunkel, #004530); border-color: var(--odc-primaer-dunkel, #004530); } .odc-banner .odc-btn:focus-visible, .odc-banner .odc-link:focus-visible, .odc-banner .odc-checkbox:focus-visible, .odc-banner .odc-text a:focus-visible, .odc-platzhalter .odc-btn:focus-visible { outline: 3px solid var(--odc-primaer, #00593d); outline-offset: 2px; } .odc-banner .odc-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .odc-banner .odc-link { min-height: 44px; margin: 0; padding: 0; background: none; border: 0; font-family: inherit; font-size: 14px; color: var(--odc-text-leise, #5f5f5f); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .odc-banner .odc-link:hover { color: var(--odc-text, #222); } .odc-banner .odc-btn-nebenan { font-size: 14px; } .odc-platzhalter { margin: 0 0 12px; padding: 16px; border: 1px solid var(--odc-rahmen, #e1e1e1); border-radius: var(--odc-radius, 10px); background: var(--odc-flaeche, #f4f4f4); color: var(--odc-text, #222); font-size: 14px; line-height: 1.5; } .odc-platzhalter p { margin: 0 0 10px; padding: 0; }