#werredocs-app {
  font-family: inherit;
  margin: 0 auto;
}
#werredocs-app h2 {
  font-size: 1.5em;
  color: #1d4ed8;
  margin: 1em 0;
  Letter-spacing: 0px!important;
}
#werredocs-app h3 {
  font-size: 1.1em;
  margin-bottom: .5em;
}
#werredocs-app .werredocs-kacheln {
  display: flex;
  gap: 2em;
}
#werredocs-app .kachel {
  flex: 1 1 115px;
  background: #f0f6fa;
  border-radius: 1em;
  padding: 1.5em;
  box-shadow: 0 2px 8px #0001;
  transition: .2s;
  cursor: pointer;
}
@media (max-width: 600px) {
  .werredocs-kacheln {
    display: flex;
    flex-direction: column;
  }
  .werredocs-kacheln .kachel {
    width: 100%;
  }
}
#werredocs-app .werredocs-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 2em;
  padding: .7em 1.5em;
  font-size: 1em;
  cursor: pointer;
  margin-right: .7em;
}
#werredocs-app .werredocs-btn:active,
#werredocs-app .werredocs-btn:focus {
  background: #1948a1;
}
/* Override für Buttons innerhalb des .werredocs-btn-row:
   Entfernt margin-right, nutzt stattdessen gap */
.werredocs-btn-row .werredocs-btn {
  margin: 0;
}
#werredocs-app input,
#werredocs-app select {
  border: 1px solid #dbeafe;
  border-radius: .5em;
  padding: .5em;
  margin-bottom: .7em;
  width: 80%;
}
#werredocs-registration-form input {
    width: 100% !important;
}
#werredocs-app label {
  display: block;
  font-weight: 500;
  margin-bottom: .2em;
}

#werredocs-app input[type="checkbox"] {
    width: 20px!important;           /* feste Breite für Checkboxen */
    height: 1.2em;          /* passende Höhe, quadratisch */
    min-width: 1.2em;       /* stellt sicher, dass die Breite immer eingehalten wird */
    vertical-align: middle; /* vertikale Zentrierung */
    margin-right: 0.5em;    /* Abstand zum Text */
    cursor: pointer;
}

/* Checkbox und Text inline und vertikal zentriert */
.werredocs-remember-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;      /* Abstand zwischen Häkchen und Text */
  margin-bottom: 1em;
}

.werredocs-remember-row input[type="checkbox"] {
  vertical-align: middle;
  width: auto!important;
}


.werredocs-alert {
  padding: 0.8em 1em;
  border-radius: 0.5em;
  margin-bottom: 1em;
  font-weight: 500;
}
.werredocs-alert-warning {
  background-color: #fef3c7; /* hellgelb */
  color: #92400e;            /* dunkles orange */
  border: 1px solid #fde68a;
}
#werredocs-app .werredocs-form {
  margin-bottom: 2em;
}
#werredocs-app .werredocs-loginwrap {
  background: #fff;
  border-radius: 1.5em;
  padding: 2em;
  margin: 2em auto;
}
#werredocs-app .werredocs-logininfo {
  font-size: 1.1em;
  margin-bottom: 1em;
  color: #1d4ed8;
}
#werredocs-app .werredocs-loginreg-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
#werredocs-app .werredocs-loginreg-col {
  flex: 1 1 220px;
  min-width: 220px;
}
/* Kalender */
#werredocs-app .werredocs-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3em;
  margin-bottom: .8em;
  text-align:center;
}
#werredocs-app .werredocs-cal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5em;
}
#werredocs-app .werredocs-cal-title {
  font-weight: 700;
}
#werredocs-app .calday {
  background: #fff;
  color: #2563eb;
  border: none;
  border-radius: .5em;
  padding: .3em 0;
  cursor: pointer;
  transition: .2s;
}
#werredocs-app .calday:hover {
  background: #c7dffe;
}
#werredocs-app .werredocs-day-disabled {
  background: #f2f2f2;
  color: #bdbdbd;
  cursor: default;
}
#werredocs-app .werredocs-hide {
  display: none!important;
}
#werredocs-app .werredocs-flex {
  display: flex!important;
}
#werredocs-app .werredocs-pet {
  display: flex;
  align-items: center;
  gap: 1.3em;
  margin-bottom: .7em;
  background: #f8fafc;
  border-radius: .8em;
  padding: .6em 1em;
}
#werredocs-app .werredocs-pet-none {
  display: flex;
  align-items: center;
  gap: .7em;
  color: #94a3b8;
}
#werredocs-app .werredocs-pet-ico {
  font-size: 2.2em;
}
#werredocs-app .werredocs-pet-title {
  font-weight: 600;
  font-size: 1.1em;
}
#werredocs-app .werredocs-logout-row {
  text-align: right;
  margin-bottom: 1em;
}
#werredocs-app .werredocs-logout-icon {
  font-size: 1.3em;
  vertical-align: middle;
}
#werredocs-app .werredocs-modal-bg {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
#werredocs-app .werredocs-modal {
  background: #fff;
  padding: 2em 1.5em;
  border-radius: 1.2em;
  box-shadow: 0 2px 30px #0005;
  width: 95%;
  max-width: 400px;
  position: relative;
}
#werredocs-app .werredocs-modal-close {
  position: absolute;
  right: 1em;
  top: .8em;
  font-size: 1.4em;
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
}
#werredocs-app .werredocs-modal-close:hover {
  color: #ff5858;
}
#werredocs-app .werredocs-pet-form label {
  margin-bottom: 0.8em;
}
#werredocs-app .werredocs-geschlecht-row {
  display: flex;
  gap: 1.5em;
  margin-bottom: .8em;
}
@media(max-width:650px) {
  #werredocs-app .werredocs-loginreg-flex {
    flex-direction: column;
  }
}

/* Erfolg-Modal: Grüner Rand oder Schatten */
.werredocs-modal-success {
  border: 3px solid #22c55e; /* Green */
  box-shadow: 0 0 15px rgba(34,197,94,0.3);
}

/* Error-Modal: Roter Rand oder Schatten */
.werredocs-modal-error {
  border: 3px solid #ef4444; /* Red */
  box-shadow: 0 0 15px rgba(239,68,68,0.3);
}

/* Container für die Buttons im Verschieben-Modal */
.werredocs-btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

/* Standard-Button-Stil */
.werredocs-btn {
  padding: 0.5em 1em;
  border: none;
  border-radius: 0.25em;
  background-color: #0073aa;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
}
.werredocs-btn:hover {
  background-color: #005f8e;
}

.werredocs-btn-login {
  width: 80%;
}

.werredocs-btn-delete {
  background: #dc2626;
  color: #fff;
}

/* Abbrechen-Button */
.werredocs-btn-cancel {
  background-color: #aaa;
}

.werredocs-btn-cancel:hover {
  background-color: #888;
}


/* Modal-Grundlayout */
#werredocs-delete-account-modal .werredocs-modal {
  max-width: 500px;
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Button-Zeile im „Konto schließen“-Modal */
#werredocs-delete-account-modal .werredocs-btn-row {
  display: flex;
  justify-content: center;  /* Beide Buttons mittig nebeneinander */
  align-items: center;
  gap: 1rem;                /* Abstand zwischen den Buttons */
}

/* Sekundärer Abbruch-Button neben dem roten Löschen-Button */
#werredocs-delete-account-modal .werredocs-btn-row .werredocs-btn {
  flex: 1;                  /* Gemeinsam gleiche Breite */
  max-width: 220px;
  background: #e5e7eb;
  color: #1f2937;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  text-align: center;
  transition: background .2s;
}
#werredocs-delete-account-modal .werredocs-btn-row .werredocs-btn-delete {
  flex: 1;
  max-width: 220px;
}

/* Close-Icon oben rechts */
#werredocs-delete-account-modal .werredocs-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.2rem;
  color: #555;
}

/* Überschrift */
#werredocs-delete-account-modal h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 1rem;
  text-align: center;
  color: #1e3a8a;
}

/* Hinweistext */
#werredocs-delete-account-modal p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Button-Container */
#werredocs-delete-account-modal .werredocs-btn-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: auto;
}

/* Primärer Löschen-Button */
#werredocs-delete-account-modal .werredocs-btn-delete {
  background: #dc2626;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  flex: 1;
  max-width: 220px;
  text-align: center;
  transition: background .2s;
}
#werredocs-delete-account-modal .werredocs-btn-delete:hover {
  background: #b91c1c;
}

/* Sekundärer Abbruch-Button */
#werredocs-delete-account-modal .werredocs-btn {
  background: #e5e7eb;
  color: #1f2937;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: 1rem;
  flex: 1;
  max-width: 220px;
  text-align: center;
  transition: background .2s;
}
#werredocs-delete-account-modal .werredocs-btn:hover {
  background: #d1d5db;
}



/* Modal-Backdrop */
.werredocs-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal-Box */
.werredocs-modal {
  background-color: #fff;
  border-radius: 0.5em;
  padding: 1.5em;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Schließen-Kreuz */
.werredocs-modal-close {
  position: absolute;
  top: 0.5em;
  right: 0.75em;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
}