/* AE DocCheck Gate — Frontend Styles */

.ae-dcg-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 1em 0;
}

.ae-dcg-intro h2 {
    margin-bottom: 0.5em;
}

.ae-dcg-intro p {
    line-height: 1.55;
    color: #3c4145;
}

.ae-dcg-cta {
    margin: 2em 0;
    text-align: center;
}

/* DocCheck-look button — reproduces the official <dc-login-button>
   without loading the third-party Web Component.

   Proportions are pinned to the original (devtools inspection on
   docs.doccheck.com Login-Access button-configurator preview):
     medium: height 36px, owl 36×36, typo 16px high, 10px margin all
   That gives ratios owl=1, typo=16/36, margin=10/36, all scaled off
   --dcg-btn-h so size modifiers stay pixel-accurate. */
.dcg-doccheck-btn {
    --dcg-btn-h: 36px;                     /* default = medium */
    display: inline-flex;
    align-items: center;
    height: var(--dcg-btn-h);
    background: #cc0033;                   /* DocCheck-Rot, devtools-validated */
    border-radius: 5px;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s ease;
}
.dcg-doccheck-btn:hover {
    background: #a3002a;
}
.dcg-doccheck-btn:focus-visible {
    background: #a3002a;
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #cc0033;
}
.dcg-doccheck-btn[data-size="medium"] { --dcg-btn-h: 36px; }
.dcg-doccheck-btn[data-size="large"]  { --dcg-btn-h: 60px; }

.dcg-doccheck-btn__logo,
.dcg-doccheck-btn__typo {
    display: block;
    flex: 0 0 auto;
}
.dcg-doccheck-btn__logo svg {
    display: block;
    height: var(--dcg-btn-h);
    width: var(--dcg-btn-h);
}
.dcg-doccheck-btn__typo {
    margin: calc(var(--dcg-btn-h) * 10 / 36);
}
.dcg-doccheck-btn__typo svg {
    display: block;
    height: calc(var(--dcg-btn-h) * 16 / 36);
    width: auto;
}

.ae-dcg-help {
    text-align: center;
    font-size: 0.9em;
    color: #5e6066;
}

.ae-dcg-help a {
    color: inherit;
}