:root {
  --black: #1e282d;
  --blackTransparent: rgba(30, 40, 45, 0.8);
  --white: #ffffff;
  --whiteTransparent: rgba(255, 255, 255, 0.8);
  --lighterGray: #faf9f5;
  --lightGray: #f4f4f4;
  --gray: #e7e6e2;
  --menuBorder: #4b5357;
  --darkGray: #5e5c58;
  --blue: #39a5db;
  --lightBlue: #8ec1db;
  --linkColor: #3d64a3;
  --pink: #CD006E;
  --pinkText: #CD006E;
  --red: red;
  --lightRed: #ffe4e7;
  --yellow: #f5ce50;
  --lightYellow: #f5ecce;
  --fieldGray: #dfdfdf;
  --green: #08cb08;
  --lightGreen: #def8cc;
  --brownOnYellow: #40340d;
  --boxShadow: rgba(0, 0, 0, 0.3);

  /* variables prefixed --cetera are external and set  inside _publication-style.html.erb */
  --publication-color-fallback: var(--black);
  --publication-color-inverted-fallback: var(--white);

  --background-color: var(
    --cetera-background-color,
    var(--lightGray)
  );
  --header-background-color: var(
    --cetera-publication-header-background-color,
    var(--white)
  );
  --header-border-color: var(
    --cetera-publication-header-border-color,
    var(--black)
  );
  --publication-color: var(
    --cetera-publication-color,
    var(--publication-color-fallback)
  );
  --publication-color-inverted: var(
    --cetera-publication-color-inverted,
    var(--publication-color-inverted-fallback)
  );

}
aid-button {
    overflow: hidden;
    position: relative;
    background: var(--white);
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
}
aid-button :focus-within {
    text-decoration: underline;
}
aid-button button,
aid-button a {
    color: var(--black);
    box-sizing: border-box;
    cursor: pointer;
    border: 3px solid var(--black);
    background: transparent;
    display: inline-block;
    padding: 13px 0;
    width: 100%;
    position: relative;
    z-index: 2;
    line-height: 1;
}
aid-button button:disabled {
    filter: opacity(0.2);
    cursor: not-allowed;
}
aid-button.magenta-border button,
aid-button.magenta-border a {
    border-color: var(--pink);
    color: var(--pinkText);
    font-weight: bold;
}
aid-button.text-button {
    width: auto;
    text-align: left;
    margin: 0;
    background: transparent;
    vertical-align: bottom;
    overflow: visible;
}
aid-button.text-button button {
    color: var(--linkColor);
    border: none;
    font-weight: normal;
    text-decoration: underline;
    padding: 0;
    text-align: left;
    margin: 1px;
}
aid-button.prio {
    background: var(--black);
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
    border: 0 none;
}
aid-button .button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
aid-button .ripple {
    background: var(--black);
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    transform: scale(0);
    animation: aid-ripple 1000ms;
    opacity: 0.75;
}
@keyframes aid-ripple {
    to {
        opacity: 0;
        transform: scale(1);
    }
}
aid-button.prio .ripple {
    background: var(--white);
}
aid-button.magenta-border button:hover,
aid-button.magenta-border a:hover {
    color: var(--pinkText);
}
aid-button.prio button:hover,
aid-button.prio a:hover {
    color: var(--white);
}
aid-button button:hover,
aid-button a:hover {
    color: var(--black);
}
aid-button.prio button,
aid-button.prio a {
    color: var(--white);
}
aid-button:last-child {
    margin-bottom: 0;
}
.button-link,
.button-link:hover {
    text-decoration: none;
}
.button-link {
    display: flex;
    justify-content: center;
    align-items: center;
}
.aid-logo-wrapper {
    position: relative;
    width: 30px;
}
.aid-logo-wrapper svg {
    position: absolute;
    transform: translateY(-50%) scale(.75);
    top: 50%;
}