/* ------------------------------
FONTS
------------------------------ */
/* Jost über Google Fonts laden */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
/* Grundschrift: Tahoma, Headlines: Jost */
.o--Widget--widget {
font-family: Tahoma, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #000000; /* Primärer Text: Schwarz */
background-color: #fffcfc; /* Neuer Hintergrund */
}
/* Überschriften */
.o--Widget--widget h1,
.o--Widget--widget h2,
.o--Widget--widget h3,
.o--Widget--widget h4 {
font-family: "Jost", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 500;
color: #000000; /* Schwarz */
}
/* Sekundärer Text */
.o--Widget--widget p,
.o--Widget--widget label,
.o--Widget--widget span {
color: #7f7f7f;
}
/* ------------------------------
LAYOUT / CARD
------------------------------ */
.o--Widget--widget .o--Widget--widgetBody {
background-color: #fffcfc; /* Neuer Hintergrund */
border-radius: 1.5rem;
border: 1px solid #9a1903;
padding: 32px;
max-width: 480px;
margin: 48px auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.07);
}
/* Hintergrund hinter Widget */
.o--Widget--widget.o--Widget--displayMode-light,
.o--Widget--widget.o--Widget--displayMode-dark {
background-color: #fffcfc;
}
/* Abstände */
.o--Widget--widget .o--Form--field {
margin-bottom: 16px;
}
/* ------------------------------
INPUTS & LABELS
------------------------------ */
.o--Widget--widget input[type="text"],
.o--Widget--widget input[type="email"],
.o--Widget--widget input[type="password"],
.o--Widget--widget input[type="tel"],
.o--Widget--widget textarea,
.o--Widget--widget select {
width: 100%;
background-color: #ffffff;
border-radius: 0.75rem;
border: 1px solid #cccccc;
padding: 10px 14px;
color: #000000; /* Text schwarz */
font-size: 0.95rem;
}
.o--Widget--widget input::placeholder,
.o--Widget--widget textarea::placeholder {
color: #7f7f7f;
}
.o--Widget--widget input:focus,
.o--Widget--widget textarea:focus,
.o--Widget--widget select:focus {
outline: none;
border-color: #9a1903;
box-shadow: 0 0 0 1px #9a1903;
}
/* Labels */
.o--Widget--widget label {
font-size: 0.85rem;
margin-bottom: 4px;
display: block;
color: #000000; /* Schwarz */
}
/* Fehlermeldungen */
.o--Widget--widget .o--Form--error,
.o--Widget--widget .o--Form--errorMessage {
color: #ff4d4f;
font-size: 0.8rem;
}
/* ------------------------------
BUTTONS
------------------------------ */
.o--Widget--widget button,
.o--Widget--widget .o--Button--button {
background: #9a1903;
color: #ffffff;
border-radius: 1rem;
border: none;
padding: 10px 26px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.o--Widget--widget button:hover,
.o--Widget--widget .o--Button--button:hover {
background: #b42207;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.o--Widget--widget button:disabled,
.o--Widget--widget .o--Button--button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Links */
.o--Widget--widget a {
color: #000000; /* Schwarz */
text-decoration: none;
}
.o--Widget--widget a:hover {
color: #9a1903;
}
/* ------------------------------
TABS / NAV
------------------------------ */
.o--Widget--widget .o--Tabs--tabs,
.o--Widget--widget .o--Tabs--tabList {
border-bottom: 1px solid #e6e6e6;
}
.o--Widget--widget .o--Tabs--tab {
color: #7f7f7f;
font-size: 0.9rem;
}
.o--Widget--widget .o--Tabs--tab[aria-selected="true"] {
color: #000000;
border-bottom: 2px solid #9a1903;
}
/* ------------------------------
TABLES
------------------------------ */
.o--Widget--widget table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.o--Widget--widget th,
.o--Widget--widget td {
padding: 8px 4px;
border-bottom: 1px solid #e1e1e1;
}
.o--Widget--widget th {
color: #7f7f7f;
font-weight: 500;
}
/* ------------------------------
RESPONSIVE
------------------------------ */
@media (max-width: 600px) {
.o--Widget--widget .o--Widget--widgetBody {
margin: 24px 12px;
padding: 24px 18px;
border-radius: 1rem;
}
}
