/* Claudia Tacheles – gemeinsame Gestaltung */
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/poppins-700.woff2) format('woff2'); }

:root {
  --petrol: #2B5468;
  --petrol-hero: #2C566B;   /* Hintergrund der Porträt-Illustration */
  --petrol-tief: #1E3C4B;
  --papier: #FFFFFF;
  --grund: #EEF2F3;
  --tinte: #1F2A30;
  --grau: #56656D;
  --linie: #CFD9DE;
  --hell: #DCE7EC;          /* Text auf Petrol, gedämpft */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background: var(--grund);
  color: var(--tinte);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #8FC1D6;
  outline-offset: 3px;
}

.inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Petrol-Band */
.band { background: var(--petrol-hero); color: #fff; }
.band a { color: #fff; }
.wordmark {
  display: inline-block;
  padding-top: 28px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Knöpfe */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  padding: 15px 26px;
  border-radius: 6px;
  border: 2px solid var(--petrol);
  background: var(--petrol);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); }
.btn-hell, .band .btn-hell { background: #fff; color: var(--petrol); border-color: #fff; }
.btn-hell:hover, .band .btn-hell:hover { background: var(--hell); border-color: var(--hell); color: var(--petrol-tief); }
.btn-rand { background: transparent; color: var(--petrol); }
.btn-rand:hover { background: var(--petrol); color: #fff; }

/* Papier: echte Seiten als Gegenstände */
.blatt {
  background: var(--papier);
  box-shadow: 0 1px 2px rgba(20, 45, 58, 0.18), 0 18px 40px -12px rgba(20, 45, 58, 0.35);
}

/* Fußzeile */
.fuss {
  padding: 40px 24px 56px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--grau);
}
.fuss a { color: var(--grau); margin: 0 8px; }

/* ---------- Brevo-Formular ---------- */
.anmeldung #sib-form-container { max-width: 520px; }
.anmeldung #sib-container {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: none;
  text-align: left;
  direction: ltr;
}
.anmeldung .sib-form { padding: 0; background: transparent; text-align: left; }
.anmeldung .form__entry { margin: 0; }
.anmeldung .entry__label {
  display: block;
  font: 500 0.95rem/1.4 'Poppins', sans-serif;
  color: var(--tinte);
  margin-bottom: 8px;
}
.anmeldung .entry__label::after { content: none !important; }
.anmeldung .feldzeile { display: flex; gap: 10px; flex-wrap: wrap; }
.anmeldung .entry__field {
  flex: 1 1 240px;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.anmeldung .entry__field input.input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font: 400 1rem 'Poppins', sans-serif;
  color: var(--tinte);
  background: #fff;
  border: 1.5px solid var(--linie);
  border-radius: 6px;
}
.anmeldung .entry__field input.input:focus { border-color: var(--petrol); }
.anmeldung input::placeholder { color: #8C9AA1; font-family: 'Poppins', sans-serif; }
.anmeldung .sib-form-block__button {
  height: 52px;
  padding: 0 24px;
  font: 500 1rem 'Poppins', sans-serif;
  color: #fff;
  background: var(--petrol);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
}
.anmeldung .sib-form-block__button:hover { background: var(--petrol-tief); }
.anmeldung .sib-form-block__button svg { width: 18px; height: 18px; fill: #fff; }
.anmeldung .entry__error {
  font: 400 0.9rem/1.4 'Poppins', sans-serif;
  color: #8A1F1F;
  background: transparent;
  border: 0;
  padding: 6px 0 0;
}
.anmeldung .hinweis {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--grau);
}
.anmeldung .hinweis a { color: var(--grau); }
.anmeldung .sib-form-message-panel {
  font: 400 0.95rem/1.5 'Poppins', sans-serif;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0 0 16px;
  max-width: 520px;
  border: 1.5px solid;
}
.anmeldung #error-message { color: #7A1C1C; background: #FBEDED; border-color: #E2A3A3; }
.anmeldung #success-message { color: #1F4D32; background: #E9F5EE; border-color: #9CCDB0; }
.anmeldung .sib-notification__icon { display: none; }
.input--hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:where(.sib-form-message-panel) { display: none; }

.sib-hide-loader-icon { display: none !important; }