.ariwa-einwendung {
--ariwa-main: #f08228;
--ariwa-main-hover: #7f4214;
--ariwa-text: #1e1e1e;
--ariwa-bg: #fff;
--ariwa-border: #e8e8e8;
--ariwa-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
max-width: 980px;
margin: 0 auto;
padding: 24px;
border: 1px solid var(--ariwa-border);
border-radius: 14px;
border-top: 5px solid var(--ariwa-main);
background: linear-gradient(180deg, #fff 0%, #fff 100%);
box-shadow: var(--ariwa-shadow);
color: var(--ariwa-text);
font-family: "FiraGO Roman Regular", "FiraGO", "Fira Sans", sans-serif;
position: relative;
}
.ariwa-einwendung * {
font-family: inherit;
}
.ariwa-einwendung .is-hidden {
display: none !important;
}
.ariwa-einwendung a {
text-decoration: none;
}
.ariwa-layout {
display: block;
}
.ariwa-title {
margin: 0 0 12px;
font-size: clamp(1.6rem, 2.3vw, 2.3rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.01em;
}
.ariwa-intro {
margin-bottom: 14px;
line-height: 1.6;
color: #2d2d2d;
}
.ariwa-form-title {
margin: 0 0 10px;
font-size: clamp(1.35rem, 2vw, 1.75rem);
line-height: 1.2;
font-weight: 800;
color: #1e1e1e;
}
.ariwa-stage {
position: relative;
}
.ariwa-stage__form[hidden],
.ariwa-stage__result[hidden] {
display: none !important;
}
.ariwa-form {
display: grid;
gap: 12px;
}
.ariwa-consents {
display: flex;
flex-direction: column;
gap: 8px;
}
.ariwa-newsletter-subtitle {
margin: -2px 0 2px 28px;
color: #7b7b7b;
font-size: 0.86rem;
line-height: 1.35;
}
.ariwa-field label {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
.ariwa-field input,
.ariwa-field textarea {
width: 100%;
box-sizing: border-box;
padding: 12px;
border-radius: 8px;
border: 1px solid #deb997;
background: #fff;
font: inherit;
}
.ariwa-field textarea {
min-height: 130px;
resize: vertical;
}
.ariwa-field-email.is-hidden {
display: none;
}
.ariwa-field input:focus,
.ariwa-field textarea:focus {
outline: none;
border-color: var(--ariwa-main);
box-shadow: 0 0 0 3px rgba(240, 130, 40, 0.25);
}
.ariwa-invalid {
border-color: #b42318 !important;
box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18) !important;
}
.ariwa-errors {
font-weight: 700;
color: #b42318;
min-height: 20px;
}
.ariwa-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
max-width: 100%;
}
.ariwa-primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
border: 0;
border-radius: 6px;
padding: 14px 22px;
color: var(--button_accent_color, #fff);
background: linear-gradient(
180deg,
var(--button_gradient_top_color, #f08228),
var(--button_gradient_bottom_color, #f08228)
);
font-weight: 800;
transition: background 0.2s ease, transform 0.15s ease;
max-width: 100%;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
font-size: 1.1rem;
line-height: 1.2;
}
.ariwa-primary-button:hover,
.ariwa-primary-button:focus {
color: var(--button_accent_hover_color, #fff);
background: linear-gradient(
180deg,
var(--button_gradient_top_color_hover, #7f4214),
var(--button_gradient_bottom_color_hover, #7f4214)
);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(240, 130, 40, 0.3);
text-decoration: none;
}
.ariwa-primary-button__text {
text-decoration: none !important;
}
.ariwa-primary-button__icon {
font-style: normal;
font-size: 20px;
line-height: 1;
}
.ariwa-copy-button {
appearance: none;
border: 1px solid #c08f62;
background: #fff;
color: #5e3716;
border-radius: 6px;
padding: 13px 18px;
font-weight: 700;
cursor: pointer;
max-width: 100%;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
font-size: 1rem;
line-height: 1.2;
}
.ariwa-copy-button:hover,
.ariwa-copy-button:focus {
border-color: var(--ariwa-main);
color: #2b1708;
}
.ariwa-newsletter-check {
display: flex;
align-items: flex-start;
gap: 8px;
border: 1px solid #c08f62;
border-radius: 6px;
padding: 10px 12px;
background: #fff;
color: #5e3716;
font-weight: 700;
max-width: 100%;
box-sizing: border-box;
}
.ariwa-newsletter-checkbox {
width: 18px;
height: 18px;
accent-color: var(--ariwa-main);
flex: 0 0 auto;
transform: none !important;
-webkit-appearance: checkbox !important;
appearance: auto !important;
}
.ariwa-newsletter-check::before,
.ariwa-newsletter-check::after {
content: none !important;
}
.ariwa-hint {
border-radius: 8px;
padding: 11px 12px;
font-weight: 600;
}
.ariwa-privacy-check {
display: none;
}
.ariwa-privacy-checkbox {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--ariwa-main);
flex: 0 0 auto;
}
.ariwa-privacy-checkbox.ariwa-invalid {
outline: 2px solid #b42318;
outline-offset: 2px;
border-radius: 4px;
}
.ariwa-privacy-check a {
color: #7f4214;
font-weight: 700;
}
.ariwa-newsletter-check a {
color: #7f4214;
font-weight: 700;
}
.ariwa-hint.is-success {
background: #eaf7eb;
color: #135d1e;
border: 1px solid #b7e1bc;
}
.ariwa-hint.is-error {
background: #fdeceb;
color: #8c1d18;
border: 1px solid #f2b8b5;
}
.ariwa-copy-dialog {
margin-top: 0;
}
.ariwa-copy-dialog__card {
border: 1px solid #deb997;
border-radius: 10px;
background: #fff;
padding: 12px;
}
.ariwa-copy-dialog__meta {
margin: 4px 0 10px;
color: #5e3716;
font-size: 0.92rem;
}
.ariwa-copy-dialog__line {
margin: 4px 0;
}
.ariwa-copy-dialog__label {
font-weight: 700;
color: #5e3716;
}
.ariwa-copy-dialog__value {
display: inline-block;
max-width: 100%;
word-break: break-word;
overflow-wrap: anywhere;
}
.ariwa-copy-dialog__subject {
background: #fff4e9;
border: 1px solid #e5bf98;
border-radius: 6px;
padding: 2px 8px;
font-weight: 700;
}
.ariwa-copy-dialog__text {
width: 100%;
box-sizing: border-box;
border: 1px solid #d7b08d;
border-radius: 8px;
background: #fffdfb;
padding: 10px;
font: inherit;
}
.ariwa-copy-dialog__actions {
margin-top: 8px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ariwa-copy-dialog__copy,
.ariwa-copy-dialog__close {
appearance: none;
border: 1px solid #c08f62;
background: #fff;
color: #5e3716;
border-radius: 6px;
padding: 10px 14px;
font-weight: 700;
cursor: pointer;
}
.ariwa-back-button {
appearance: none;
border: 0;
background: transparent;
color: var(--ariwa-main);
text-decoration: underline;
font-size: 0.9rem;
padding: 8px 2px;
cursor: pointer;
}
.ariwa-copy-toast {
position: absolute;
left: 50%;
bottom: 12px;
z-index: 40;
background: linear-gradient(180deg, #f08228, #d56f1a);
color: #fff;
border: 1px solid #b95d13;
border-radius: 10px;
padding: 10px 16px;
font-size: 0.95rem;
font-weight: 700;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
opacity: 0;
pointer-events: none;
white-space: nowrap;
transform: translateX(-50%) translateY(16px);
}
.ariwa-copy-toast.is-visible {
animation: ariwa-toast-in-out 2.2s ease forwards;
}
@keyframes ariwa-toast-in-out {
0% {
opacity: 0;
transform: translateX(-50%) translateY(16px);
}
12% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
82% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(12px);
}
}
@media (max-width: 640px) {
.ariwa-einwendung {
padding: 14px;
}
.ariwa-actions {
flex-direction: column;
align-items: stretch;
}
.ariwa-primary-button,
.ariwa-copy-button,
.ariwa-newsletter-button {
justify-content: center;
width: 100%;
}
.ariwa-copy-toast {
max-width: calc(100% - 28px);
white-space: normal;
text-align: center;
}
}